微信小程序開發小結

時間 2019-11-06

標籤微信程序開發小結简体版

原文原文鏈接

　　一、點擊按鈕分享功能：javascript

　　使用Button組件，設置open-type="share"，而後在js文件的onShareAppMessage方法中設置以下：java

onShareAppMessage: function (options) {
let shareObj = {}
if (options.from == "button") {
    //設置title、path、imageUrl
   shareObj.title = ''
   shareObj.path = ''
   shareObj.imageUrl = ''
}
return shareObj
}

　　二、Navigator組件中的子元素也綁定了事件，點擊子元素觸發時，頁面會跳轉。android

　　解決：子元素綁定事件時不要用bindtap,改用catchtapios

　　三、獲取當前頁面的url（完整路徑）。寫成工具函數以下：json

function getCurrentPageUrlWithArgs(){
    var pages = getCurrentPages()    //獲取加載的頁面
    var currentPage = pages[pages.length-1]    //獲取當前頁面的對象
    var url = currentPage.route    //當前頁面url
    var options = currentPage.options    //若是要獲取url中所帶的參數能夠查看options
    var urlWithArgs = ''
    //拼接url的參數
    if (options) {
      urlWithArgs = url + '?'
      for(var key in options){
        var value = options[key]
        urlWithArgs += key + '=' + value + '&'
      }
    } else {
      urlWithArgs = url + ' '
    }
    urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length-1)
    return urlWithArgs
}

　　四、小程序分頁數據限制：canvas

　　常規的作法是，將每次新獲取的數據拼接到當前數組中去。這樣，對於數據量較小的狀況下是沒什麼問題的，可是若是數據量比較多，很容易就超出1024kb的限制。小程序

　　那麼該如何緩解這種問題呢？這裏參照了百度小程序的解決方案，就是使用二維數組來解決。後端

this.setData({
  ['hotTodayList[' + curPage + ']']: res.list,  // curPage表示二維數組的下標，若是分頁是從1開始,則curPage等於當前頁減去1，若是分頁從0開始，則curPage就等於當前頁數
  pageNum: this.data.pageNum + 1,
  totalPage: totalPage,
})

　　在頁面渲染的時候，就要使用兩個for循環來渲染數據了。　數組

<block wx:for="{{hotTodayList}}" wx:for-item="arrItem" wx:for-index="arrIndex">
  <block wx:for="{{arrItem}}" wx:for-item="item" wx:key="index" wx:for-index="index">
    // 須要渲染的頁面結構
  </block>
</block>

　　注意：在刷新的時候要清空原數據，防止新數據與原數據衝突，如本例，直接hotTodayList = []就好了。服務器

　　這雖然能解決在分頁數較多，單次設置數據較大的問題。可是若是單頁中後臺一次性返回的數據大於1024kb時，依然會出現問題的，特別是有商品sku這種狀況下，是很容易碰到的，因此仍是須要與後端協商一下，儘可能不要返回沒必要要的數據。

　　五、小程序遇到了偶發性微信加密數據解密失敗的問題：

　　在這一步的開發中，必定要按照這樣的順序 1. 小程序請求login，拿到code ；2.而後小程序調用getuserinfo接口拿到encryptedData，iv,還有以前的code，而後傳給服務端；4.服務端拿到客戶端的encryptedData，vi還有sessionKey去解密獲得 unionId等用戶信息；否則就會出現這樣的問題，這種狀況偶然出現的緣由就是，在服務端還未去獲取sessionKey的時候就去調用了getuserinfo，有時候會比服務端快，有時候會比服務端慢，因此就出現了偶然性。

　　六、小程序上線後打開出現了調試模式：

　　這是由於在開發版本打開了調試模式，而後再用線上版本也會有。在開發版中關閉調試模式就行。好在這個只有本身有，用戶是沒有的。

　　七、用戶長按二維碼進入小程序後，獲取二維碼中的參數失敗：

　　　　以上是官方文檔給的說明。之因此失敗是由於二維碼只認scene字段，也就是用options.scene能夠獲取，二維碼中的這個參數不能隨便傳，不然雖然能進入到小程序，可是沒法獲取到想要的參數。

　　八、小程序使用canvas畫圖，保存到本地：

　　問題：使用網絡圖片時，在開發者工具上是沒問題的，能正常顯示，可是在真機上測試，發現圖片不顯示，開啓調試，發現也沒報錯。

　　緣由：小程序canvas不支持在真機上繪製在線圖片。

　　解決辦法：將在線圖片（網絡圖片）使用wx.getImageInfo方法轉換爲本地路徑，而後在使用canvas中的drawImage便可。注意：網絡圖片需先配置download域名才能生效

　　九、小程序版本檢測更新：

可在onLaunch方法中調用以下方法
// 獲取小程序更新機制兼容
    if (wx.canIUse("getUpdateManager")) {
      const updateManager = wx.getUpdateManager();
      updateManager.onCheckForUpdate(function (res) {
        // 請求完新版本信息的回調
        if (res.hasUpdate) {
          updateManager.onUpdateReady(function () {
            wx.showModal({
              title: "更新提示",
              content: "新版本已經準備好，是否重啓應用？",
              success: function (res) {
                if (res.confirm) {
                  // 新的版本已經下載好，調用 applyUpdate 應用新版本並重啓
                  updateManager.applyUpdate();
                }
              }
            });
          });
          updateManager.onUpdateFailed(function () {
            // 新的版本下載失敗
            wx.showModal({
              title: "已經有新版本了喲~",
              content: "新版本已經上線啦~，請您刪除當前小程序，從新搜索打開喲~"
            });
          });
        }
      });
    } else {
      // 若是但願用戶在最新版本的客戶端上體驗您的小程序，能夠這樣子提示
      wx.showModal({
        title: "提示",
        content: "當前微信版本太低，沒法使用該功能，請升級到最新微信版本後重試。"
      });
    }

　　十、小程序定時器之setInterval

　　問題：例如點擊一個按鈕，調用服務端接口拿到截止時間與服務器當前時間，而後在彈窗中實現一個定時器。最初我是這麼實現的，直接一個setInterval完事兒，乍一看，徹底沒問題，但是當我關閉彈窗再次點擊按鈕時，發現彈窗中的定時器會運行的很快，沒啥規律，或者當我進到其餘頁面時，再回過頭來進入該頁面，發現定時器也會有相似問題，究其緣由，發現原來是定時器沒有及時清除搞的鬼。

　　解決：關閉彈窗時，清除定時器。頁面執行onHide與onUnload生命週期時，也清除一遍定時器。而後順利解決了。

　　十一、小程序之阻止遮罩層底下的頁面滑動（目前測的ios端沒問題，android端後續再測）

　　問題：小程序自帶的遮罩層會默認阻止遮罩層底下頁面滑動，可是若是是咱們自定義的遮罩，底下的頁面是能夠滑動的，雖然無傷大雅，可是總感受怪怪的，因而網上查詢資料半天，最終找到了一種簡單粗暴的方法。特此記錄下。

　　解決：爲遮罩層綁定catchtouchmove='preventD'，preventD爲事件名，這個事件名能夠隨意取，事件裏面啥也不用寫，就能成功解決。

　　十二、小程序分包加載：

　　（1）、在app.json中配置以下：

{
  "pages": [
    "pages/index/index"
  ],
  "subPackages": [
    {
      "root": "package_a",
      "pages": [
        "pages/home/home"
      ]
    },
    {
      "root": "package_b",
      "pages": [
        "pages/home/home"
      ]
    }
  ],
  "tabBar": {
    "color": "#444",
    "selectedColor": "#fe4d4d",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "pages/index/home.png",
        "selectedIconPath": "pages/index/home_select.png"
      },
      {
        "pagePath": "pages/prefer_goods/prefer_goods",
        "text": "拼好貨",
        "iconPath": "pages/prefer_goods/prefer_goods.png",
        "selectedIconPath": "pages/prefer_goods/prefer_goods_select.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "個人",
        "iconPath": "pages/my/my.png",
        "selectedIconPath": "pages/my/my_select.png"
      }
    ]
  },
  "window": {
    // 相關配置
  },
  "navigateToMiniProgramAppIdList": [
     // 所要跳轉的小程序appid
  ]
}

　　（2）、與app.json同級目錄新建package_a目錄（該目錄下新建images目錄與pages目錄，而後pages目錄下像以前同樣正常操做）與package_b目錄（該目錄下新建images目錄與pages目錄，而後pages目錄下像以前同樣正常操做）

　　（3）、上述操做完後，保存，而後會報錯，錯誤如：「pages *** 不該該在分包 subPackages[*] 中」。這個錯誤的緣由是經過編輯器右鍵添加page的話，主包中會自動加入page路徑，此時咱們再去建立新的分包若是沒有去掉主包路徑就會報錯。解決辦法就是去掉主包中的路徑便可。

　　1三、繪製圓角矩形函數封裝（在安卓機上會有bug）

roundRectColor: function (context, x, y, w, h, r) {  //繪製圓角矩形（純色填充）
    context.save()
    if (w < 2 * r) {
      r = w / 2
    }
    if (h < 2 * r) {
      r = h / 2
    }
    context.beginPath()
    context.setFillStyle('#fff')   // 填充顏色爲白色
    context.setStrokeStyle('#fff')  // 描邊顏色爲白色
    context.moveTo(x + r, y)
    context.arcTo(x + w, y, x + w, y + h, r)
    context.arcTo(x + w, y + h, x, y + h, r)
    context.arcTo(x, y + h, x, y, r)
    context.arcTo(x, y, x + w, y, r)
    context.fill()
    context.closePath()
  }

　　可以使用arc與lineTo方法

roundRectColor: function (context, x, y, w, h, r, c) {  //繪製圓角矩形（純色填充）
    context.save()
    if (w < 2 * r) { r = w / 2; }
    if (h < 2 * r) { r = h / 2; }

    context.beginPath();
    context.setStrokeStyle('#fff');
    context.setFillStyle('#fff');

    context.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
    context.moveTo(x + r, y);
    context.lineTo(x + w - r, y);
    context.lineTo(x + w, y + r);

    context.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
    context.lineTo(x + w, y + h - r);
    context.lineTo(x + w - r, y + h);

    context.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
    context.lineTo(x + r, y + h);
    context.lineTo(x, y + h - r);

    context.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
    context.lineTo(x, y + r);
    context.lineTo(x + r, y);

    context.fill();
    context.stroke();
    context.closePath();
   
  }

　　1四、小程序中使用rsa加密：

　　下載wx_rsa.js文件，在頁面中引入rsa.js文件。如：const RSA = require('../../utils/wx_rsa.js')

let publicKey = ''                                      // 加密密鑰
let encrypt_rsa = new RSA.RSAKey()
encrypt_rsa = RSA.KEYUTIL.getKey(publicKey)
let encStr = encrypt_rsa.encrypt(pass)                  // pass爲須要加密的內容
encStr = RSA.hex2b64(encStr);

如須要進行encode編碼，則pass = encodeURI(encStr)便可