微信小程式開發筆記，收藏！！

最近在開發微信小程式，把自己在專案中經常遇到的知識點記錄下來，以便下次開發的時候檢視。
開發小程式開發工具推薦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 元素，會改變圖片的寬高比，圖片變形

  

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

  

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

  

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

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

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

• send 右下角按鈕為「傳送」
• search 右下角按鈕為「搜尋」
• next 右下角按鈕為「下一個」
• go 右下角按鈕為「前往」
• done 右下角按鈕為「完成」

為了實現安卓ios的統一confirm-type的設定也是很有必要，預設值是 done，安卓預設是回車，ios預設是完成，所以設定同一只前四個是可以統一的。

相關免費學習推薦：