最近在開發(fā)微信小程序，把自己在項目中經常遇到的知識點記錄下來，以便下次開發(fā)的時候查看。
開發(fā)小程序開發(fā)工具推薦vscode寫代碼，微信開發(fā)工具用于查看效果和調試。

1、自定義標題欄

現(xiàn)在UI要求越來越高，高頻出現(xiàn)自定義標題欄的情況

"navigationStyle": "custom"
復制代碼

2、獲取用戶信息

用戶授權是每個小程序中都會用到的，可以根據(jù)自己的項目流程編寫自己的邏輯。 用戶授權

<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、路由

路由跳轉用到的比較多，每次跳轉的時候總是不能區(qū)分用哪一個方式進行跳轉，記下來，加深一下印象。
跳轉到 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=http://www.wxapp-union.com/"/images/pic.jpg" class="pic" mode="aspectFill"></image>
復制代碼

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

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

• scaleToFill 圖片的寬高完全拉伸至填滿 image 元素，會改變圖片的寬高比，圖片變形

  

• aspectFit 圖片完整的展示出來，圖片的寬高比不變。

  

• aspectFill 圖片的寬高比不變，為完整的展示，會發(fā)生裁切
  

  

常用的「aspectFit」 「aspectFill」這兩個

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

設置鍵盤右下角按鈕的文字，type="text"時生效

• send 右下角按鈕為“發(fā)送”
• search 右下角按鈕為“搜索”
• next 右下角按鈕為“下一個”
• go 右下角按鈕為“前往”
• done 右下角按鈕為“完成”

為了實現(xiàn)安卓ios的統(tǒng)一confirm-type的設置也是很有必要，默認值是 done，安卓默認是回車，ios默認是完成，所以設置同一只前四個是可以統(tǒng)一的。