**

微信小程序開發(fā)筆記，你收藏了嗎？

**
最近在開發(fā)微信小程序，把自己在項(xiàng)目中經(jīng)常遇到的知識(shí)點(diǎn)記錄下來，以便下次開發(fā)的時(shí)候查看。
開發(fā)小程序開發(fā)工具推薦vscode寫代碼，微信開發(fā)工具用于查看效果和調(diào)試。
1、自定義標(biāo)題欄
現(xiàn)在UI要求越來越高，高頻出現(xiàn)自定義標(biāo)題欄的情況

"navigationStyle": "custom"

2、獲取用戶信息
用戶授權(quán)是每個(gè)小程序中都會(huì)用到的，可以根據(jù)自己的項(xiàng)目流程編寫自己的邏輯。 用戶授權(quán)

<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授權(quán)登錄</button>

bindGetUserInfo (e) {
    console.log(e.detail.userInfo) // 獲取到用戶信息
}

已授權(quán)的情況下調(diào)用「wx.getUserInfo」，「wx.getSetting」進(jìn)行判斷該用戶是否授權(quán)

wx.getSetting({
  success (res){
    if (res.authSetting['scope.userInfo']) {
      // 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱
      wx.getUserInfo({
        success: function(res) {
          console.log(res.userInfo)
        }
      })
    } else {
        // 未授權(quán)
    }
  }
})

3、input 設(shè)置placeholder樣式

<input placeholder="請(qǐng)輸入手機(jī)號(hào)碼" placeholder-class="placeholderinput"></input>

.placeholderinput {
  color: #CCCCCF;
  font-size: 36rpx;
}

4、路由
路由跳轉(zhuǎn)用到的比較多，每次跳轉(zhuǎn)的時(shí)候總是不能區(qū)分用哪一個(gè)方式進(jìn)行跳轉(zhuǎn)，記下來，加深一下印象。
跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面

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

跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，但是不允許跳轉(zhuǎn)到 tabbar 頁面，并關(guān)閉當(dāng)前頁面

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

保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。但是不能跳到 tabbar 頁面。

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

5、image組件常用mode合法值梳理
為什么詳細(xì)講解image，每次后臺(tái)上傳的圖片和我們前端界面的尺寸不一樣，我們前端就要進(jìn)行處理了，還有就是測(cè)試?yán)鲜腔靥岢鲆恍﹫D片變形上的問題，為了不讓他們提出這些問題，我們?cè)敿?xì)分析一下，如果有不正確歡迎交流指正。 在固定寬高的情況下：

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

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

設(shè)置以下屬性圖片會(huì)發(fā)生什么變化

• scaleToFill 圖片的寬高完全拉伸至填滿 image 元素，會(huì)改變圖片的寬高比，圖片變形
• 
• aspectFit 圖片完整的展示出來，圖片的寬高比不變。
  
• aspectFill 圖片的寬高比不變，為完整的展示，會(huì)發(fā)生裁切
  
  常用的「aspectFit」 「aspectFill」這兩個(gè)
  6、設(shè)置input的「confirm-type」 的合法值
  設(shè)置鍵盤右下角按鈕的文字，type="text"時(shí)生效
• send 右下角按鈕為“發(fā)送”
• search 右下角按鈕為“搜索”
• next 右下角按鈕為“下一個(gè)”
• go 右下角按鈕為“前往”
• done 右下角按鈕為“完成”
  為了實(shí)現(xiàn)安卓ios的統(tǒng)一confirm-type的設(shè)置也是很有必要，默認(rèn)值是 done，安卓默認(rèn)是回車，ios默認(rèn)是完成，所以設(shè)置同一只前四個(gè)是可以統(tǒng)一的。
  原文鏈接：https://juejin.im/post/6879605072762945543

微信小程序云開發(fā)零基礎(chǔ)QQ交流群：1073011570