小程式踩坑日記 （一）

fancy就是我發表於2018-04-05

1.修改資料不成功

page({ data:{ a:'' } })

如果你想在methods裡面呼叫你定義的a。應該用this.data.a ；
如果你想改變a 必須要用this.setData

this.setData({ a:b })

2.wx.request的post請求不成功

post請求一定要將'content-type' 改為 application/x-www-form-urlencoded。
此處官方解釋為：最終傳送給伺服器的資料是 String 型別，如果傳入的 data 不是 String 型別，會被轉換成 String 。轉換規則如下：
對於 header['content-type'] 為 'application/json' 的資料，會對資料進行 JSON 序列化
對於 header['content-type'] 為 'application/x-www-form-urlencoded' 的資料，會將資料轉換成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）

3.獲取openid

openid 作為使用者的唯一標示在小程式中扮演很重要的角色，當然我也在這個地方跳進了一個大坑；
一開始看網上的文章都是用‘https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code='+ code +'&grant_type=authorization_code’這個介面請求的，而且4個引數都很好獲取，appid 和 金鑰都是你自己知道的，code是在wx.login裡面返回的，這個介面在本地開發的階段是可以用的，但必須要不驗證域名，做法是點選微信小程式右上方詳情按鈕，勾選不校驗''合法域名項"；我的問題是專案在做完後真機測試獲取不到openid,後來才知道線上環境因為安全問題小程式不允許前端請求“https://api.weixin.qq.com”這個域名，所以必須要實現自己後臺與微信後臺的通訊，就是你讓你的後臺去請求“https://api.weixin.qq.com”這個介面拿到openid，你去請求自己後臺拿到openid，這樣就是安全的啦。

4.冒泡事件

正常我們在標籤中繫結事件用bindtap,微信給我們提供阻止事件冒泡的方法是用catchtap代替bindtap

5.wx.getUserInfo獲取使用者資訊

這一部分當你初始化小程式的時候在app.js中就會有一段 wx.getSetting({}),在這個API裡面呼叫wx.authorize(OBJECT),wx.authorize(OBJECT)用於提前向使用者發起授權，呼叫後會立刻彈窗詢問使用者是否同意小程式使用某項功能或獲取使用者的某些資料;根據小程式服務內容不同，需要獲得使用者授權的內容就不同，官方提供了5中需要獲得使用者授權的功能

小程式踩坑日記 （一）

言歸正傳，到底怎麼獲取的使用者資訊呢？程式碼如下，這個也是借鑑網上的寫法，原文，在跟自己的比較後還是覺得這個比較簡潔，邏輯完整；
wx.getSetting({
  success: res => {
    if (res.authSetting['scope.userInfo']) {
      console.log('已經授權')
      // 已經授權，可以直接呼叫 getUserInfo 
      wx.getUserInfo({
        success: res => {
          console.log('app.js執行 getUserInfo')
          // 可以將 res 傳送給後臺解碼出 unionId
          this.globalData.userInfo = res.userInfo
          // 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
          // 所以此處加入 callback 以防止這種情況
          if (this.userInfoReadyCallback) {
            this.userInfoReadyCallback(res)
          }
        }
      })
    }else{
      wx.getUserInfo({
        success: res => {
          console.log('app.js執行 getUserInfo2')
          // 可以將 res 傳送給後臺解碼出 unionId
          this.globalData.userInfo = res.userInfo

          // 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
          // 所以此處加入 callback 以防止這種情況
          if (this.userInfoReadyCallback) {
            this.userInfoReadyCallback(res)
          }
        }
      })
    }
  }
})   
複製程式碼

6.wx.uploadfile()上傳多張圖片

官方提供的wx.uploadFile 只能一次上傳一張圖片，專案如果需要上傳多張圖片怎麼辦呢，這是我在網上找的解決方法uploadFile上傳多張圖片. 我的專案還涉及了開啟手機相簿選取圖片，圖片預覽等需求，這裡用到的兩個API 是wx.chooseImage()和wx.previewImage()；這裡建議大家可以看一下weui提供的寫法，weui是一個很靠近微信設計的UI庫，下載地址;我的用法是下載.zip到本地後解壓，然後將dist目錄作為專案的根目錄進行瀏覽就可以了

7.下拉重新整理

下拉重新整理無效，這時你要在app.json 中新增一個配置

小程式踩坑日記 （一）

需要重新整理的頁面的配置中也需要新增，例如index.js中要用到重新整理，你可以在index.json 中配置

小程式踩坑日記 （一）

這樣基本就可以實現下拉重新整理了
onPullDownRefresh: function () {
  wx.stopPullDownRefresh();
  wx.request({
    url: 'https://......',
    success: function (res) {
      }
  });
}
複製程式碼
onPullDownRefresh監聽下拉重新整理，你會發現下拉後一直出現重新整理動畫，這時只要新增wx.stopPullDownRefresh()就可以停止重新整理動畫了，重新整理處理資料的邏輯寫在wx.stopPullDownRefresh()下方

自己寫到這裡先告一段落，以後還會繼續開發小程式，以後遇到的問題也會總結出來跟大家分享交流，自己寫這篇文章的初衷是給在開發過程中遇到和我一樣問題的你提供一些參考，很多都是借鑑別人的方法，我在文章中也新增了原文地址，勿噴。如果有錯誤可以指出，我會重新改正的。

相關文章