**

微信小程序开发笔记，你收藏了吗？

最近在开发微信小程序，把自己在项目中经常遇到的知识点记录下来，以便下次开发的时候查看。

开发小程序开发工具推荐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'
})
      

wx.navigateTo({
    url: '../../index/index'
})
      

<image src="/images/pic.jpg" class="pic" mode="aspectFill"></image>
      

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

• scaleToFill 图片的宽高完全拉伸至填满 image 元素，会改变图片的宽高比，图片变形

• 

• aspectFit 图片完整的展示出来，图片的宽高比不变。

  

• aspectFill 图片的宽高比不变，为完整的展示，会发生裁切

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

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

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

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

• done 右下角按钮为“完成”

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