最近開發了一款微信小程式，在開發過程中遇到了一些微信小程式的坑，記錄下來，希望對後邊開發小程式的同學有點幫助。後期開發過程如果有新的踩坑記錄，也會相應的更新在改文件中。

1、畫素值與單位之間不能有空格

  微信小程式的樣式存放在.wxss檔案，畫素單位用rpx，官方文件有如下描述。

rpx（responsive pixel）: 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx = 375px = 750物理畫素，1rpx = 0.5px = 1物理畫素。

踩坑點：畫素值和畫素單位之間不能有空格，否則不起作用。即10rpx 能被識別；10 rpx則不能被識別；部分編輯器格式化之後會在數值和單位間有空格（webstorm即使如此）。

2、回撥函式解決app.js 與 page之間因非同步介面造成資料不同步問題

  小程式在初始化時會執行app.js。通常微信登入小程式之後，根據具體的業務場景，需要判斷小程式是否在業務中繫結。如果繫結則直接進入首頁，如果沒有繫結則進入繫結頁面。
  根據以上場景，我們需要在app.js中呼叫業務介面判斷，是否存在繫結關係。程式碼大致如下： 通過呼叫wx.login()介面，獲取返回的code值，然後將改code 傳遞給後端，查詢微信與業務的繫結關係。

onLaunch: function (options) {
    wx.login({
        success: res => {
            //獲取微信返回的code
            let code = res.code,
            
            //呼叫業務介面
            wx.request({
                url: '微信是否繫結過業務',
                data: {code, ... 其他引數},
                method: 'POST',
                success: res => {
                    /*因為介面是非同步資料，可能Page.onLoad()方法先執行*/
                    let response = res.data
                    if (this.userInfoReadyCallback) {
                        this.userInfoReadyCallback(response)
                    } else {
                        commonUtil.initPage(response)
                    }
                }
            });
        }
    })
},

 

   如果查詢微信和業務有繫結，則應該會返回實際業務中的 token，且將token等相關資訊儲存在storage中，以便後續使用；如果沒有繫結關係，則跳轉到繫結關係的頁面，其中initPage()，就是做此功能使用。

  通常在我們在首頁命名為index，在index頁面中，一般有如下程式碼:根據微信登入的token值，查詢具體的業務資料。

   onShow: function (options) {
        if (!util.getAppStoken()) {
            app.userInfoReadyCallback = res => {
                commonUtil.initPage(res);
            }
        } else {
            this.queryRole();
        }
    },
 

  然而存在一個問題，按照正常的小程式註冊順序，app中onLaunch先執行，然後再執行page中onShow(onLoad)方法。但是onLaunch方法中存在非同步的介面，因此page中可能在介面返回資料之前就已經執行。此時page頁面不一定能準確拿到onLaunch介面返回的token資料。

   因此如上述程式碼所示，在page中，首先判斷是否能拿到token，如果拿不到，給app例項添加回調函式，同時在onLaunch介面中判斷是否存在該回調。如果能拿到token，則直接執行業務介面，根據token查詢業務資料。

   實際的執行過程 ：

   app:onLaunch — index:onShow — index:獲取不到token — index:新增app 回撥 — app:介面返回資料 —app:執行回撥

   （1）未繫結關係 — 繫結頁面 — 繫結成功返回 token — 進去index — index:能獲取token — 查詢業務

   （2）已繫結關係 — 返回 token — --- 進去index — index:能獲取token — 查詢業務

3、web-view內嵌H5，不能動態修改H5路徑

  微信小程式支援通過web-view方式內嵌H5，其中src屬性指向網頁的連結。如果該連結地址不是靜態資料，而是從後端獲取的。如果直接如下寫法：

<web-view src="{{src}}"></web-view>

Page({
    data:{
        src:""
    }
    
    onLoad:function(){
        ......
        this.setData({
            src: '介面獲取的src'
        })
    }
})

   則會出現空白頁面，檢視此時data中的src資料，也確實更新到介面返回的資料。為什麼跳轉不進去正確的頁面啦。

   原因分析：小程式在解析時，遇到web-view標籤時，就會立即跳轉到對應的src屬性的連結。此時小程式已經開啟H5頁面，但是小程式宣告週期會繼續執行，因此會出現AppData中資料發生改變，而H5中沒有對應的引數。因此必須在初始化給出完整的連結地址（包含url引數）。

   解決方法： 將web-view封裝成元件，新增一箇中間頁面redirectH5，在這個中間頁面中，onLoad方法中可以處理src，引用，並將src作為引數傳入。程式碼如下：

<!--redirect-->
<web-view src="{{src}}"></web-view>

Component({
  properties: {
      src: {
          type: String,
          value: '',
          observer: function (newval, oldval) {
          }
      },
  }
})


<!--redirectH5-->
<redirect src="{{redirectUrl}}"></redirect>

Page({
    data:{
        src:""
    }
    
    onLoad:function(){
        ......
        this.setData({
            src: '介面獲取的src'
        })
    }
})

  原理解析：猜測原因是，頁面的onLoad方法在元件的created方法之前執行。翻看官方文件，沒有檢視到相關的說明，如有那位同學看到了，可以分享給我。

4、web-view會覆蓋其他元件

  在微信小程式嵌入H5過程中，需要對H5的連結進行控制，防止外網或者非法域名的連結。因此最初設想在redirectH5中如下編碼。

<view>
    <view wx:if="{{isIllegalUrl}}" class="illegal-url">
        <view class="illegal-text">域名配置不合法,請聯絡運營人員</view>
        <view bindtap="goIndex" >
            <button class="back-index">返回首頁</button>
        </view>
    </view>
    <redirect src="{{redirectUrl}}" wx:else></redirect>
</view>

  當傳入非法域名的時候，確實如設想一樣，出現返回首頁的按鈕，但是發現按鈕點選無效。初步懷疑是元件中web-view作祟。官方穩定如下解釋：

每個頁面只能有一個，會自動鋪滿整個頁面，並覆蓋其他元件

5、開發過程中，可以設定不校驗合法域名、業務域名

  小程式介面呼叫必須是域名訪問的，且必須在小程式的配置中心新增合法域名、業務域名等。給除錯帶來麻煩，但是微信小程式的開發工具裡，可以設定不校驗域名。在本地開發的時候，可以通過呼叫IP聯調。
            

6、授權獲取使用者資訊需要按鈕觸發

  在之前的微信小程式版本中，通過wx.authorize({scope: “scope.userInfo”})，就會彈窗詢問使用者是否授權獲取使用者頭像、暱稱等基本資訊。最新版本的微信小程式文件，已經更改：
無法彈出授權視窗

注意：wx.authorize({scope: “scope.userInfo”})，無法彈出授權視窗，請使用

為優化使用者體驗，使用 wx.getUserInfo 介面直接彈出授權框的開發方式將逐步不再支援。從2018年4月30日開始，小程式與小遊戲的體驗版、開發版呼叫 wx.getUserInfo 介面，將無法彈出授權詢問框，預設呼叫失敗

  如果需要獲取使用者資訊，使用button元件的open-type='getUserInfo’提供的開放能力，此外還需要設定bindgetuserinfo對應的方法。具體實現如下

<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">獲取使用者資訊</button>

//使用者點選該按鈕時，會返回獲取到的使用者資訊，回撥的detail資料與wx.getUserInfo返回的一致
 onGotUserInfo: function(e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)
  }
  

7、http支援不友好

   在微信小程式中引用的圖片、連結等如果http不能正常顯示或者訪問，可以嘗試一下https。專案經驗告訴我，微信對http支援並不友好。

   持續更新中。。。。。。