### [微信小程序开发笔记，收藏！！](https://www.prosaas.cn/article/16525)

**Published:** 2020-10-09T08:23:01

**Author:** 5201314

**Excerpt:** 微信小程序开发教程栏目今天为大家介绍微信小程序的开发笔记，快快来看。最近在开发微信小程序，把自己在项目中经常遇…

**微信小程序开发教程栏目****今天为大家介绍微信小程序的开发笔记，快快来看。**

![](https://img.php.cn/upload/article/000/000/052/5f801d4ea181d475.jpg)

最近在开发微信小程序，把自己在项目中经常遇到的知识点记录下来，以便下次开发的时候查看。  
开发小程序开发工具推荐vscode写代码，微信开发工具用于查看效果和调试。

## 1、自定义标题栏

现在UI要求越来越高，高频出现自定义标题栏的情况

"navigationStyle": "custom"复制代码

## 2、获取用户信息

用户授权是每个小程序中都会用到的，可以根据自己的项目流程编写自己的逻辑。  
用户授权

<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>复制代码

bindGetUserInfo (e) {    console.log(e.detail.userInfo) // 获取到用户信息}复制代码

已授权的情况下调用**「wx.getUserInfo」**，**「wx.getSetting」**进行判断该用户是否授权

wx.getSetting({  success (res){    if (res.authSetting\['scope.userInfo'\]) {      // 已经授权，可以直接调用 getUserInfo 获取头像昵称      wx.getUserInfo({        success: function(res) {          console.log(res.userInfo)        }      })    } else {        // 未授权    }  }})复制代码

## 3、input 设置placeholder样式

<input placeholder="请输入手机号码" placeholder-class="placeholderinput"></input>复制代码

.placeholderinput {  color: #CCCCCF;  font-size: 36rpx;}复制代码

## 4、路由

路由跳转用到的比较多，每次跳转的时候总是不能区分用哪一个方式进行跳转，记下来，加深一下印象。  
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.switchTab({    url: '../../index/index'})复制代码

跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面，并关闭当前页面

wx.redirectTo({    url: '../../index/index'})复制代码

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。

wx.navigateTo({    url: '../../index/index'})复制代码

## 5、image组件常用mode合法值梳理

为什么详细讲解image，每次后台上传的图片和我们前端界面的尺寸不一样，我们前端就要进行处理了，还有就是测试老是回提出一些图片变形上的问题，为了不让他们提出这些问题，我们详细分析一下，如果有不正确欢迎交流指正。  
在固定宽高的情况下：

 <image src="/images/pic.jpg" class="pic" mode="aspectFill"></image>复制代码

.pic {  width: 600rpx;  height: 500rpx;  border: 1rpx solid #ccc;}复制代码

设置以下属性图片会发生什么变化

-   scaleToFill  图片的宽高完全拉伸至填满 image 元素，会改变图片的宽高比，图片变形
    
    ![](https://img.php.cn/upload/article/000/000/052/ce39a5545435152fb1fa6d8c87050032-0.jpg)
    
-   aspectFit  
    图片完整的展示出来，图片的宽高比不变。
    
    ![](https://img.php.cn/upload/article/000/000/052/6d663ad67888839d8acb6ea29d4761ef-1.jpg)
    
-   aspectFill  
    图片的宽高比不变，为完整的展示，会发生裁切  
    
    ![](https://img.php.cn/upload/article/000/000/052/4af6366cd00aaf8d11f8a59d35c7c856-2.jpg)
    

常用的**「aspectFit」**  **「aspectFill」**这两个

## 6、设置input的**「confirm-type」** 的合法值

设置键盘右下角按钮的文字，type="text"时生效

-   send 右下角按钮为“发送”
    
-   search 右下角按钮为“搜索”
    
-   next 右下角按钮为“下一个”
    
-   go 右下角按钮为“前往”
    
-   done 右下角按钮为“完成”
    

为了实现安卓ios的统一confirm-type的设置也是很有必要，默认值是 done，安卓默认是回车，ios默认是完成，所以设置同一只前四个是可以统一的。

> **相关免费学习推荐：****微信小程序开发教程**

以上就是微信小程序开发笔记，收藏！！的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---