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

最近在開發微信小程序，把自己在專案中經常遇到的知識點記錄下來，以便下次開發的時候查看。
開發小程式開發工具推薦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預設是完成，所以設定同一隻前四個是可以統一的。

相關免費學習推薦：微信小程式開發教學