微信小程序開發技巧總結

這是我參與8月更文挑戰的第3天，活動詳情查看：8月更文挑戰

前言

近期開發了微信小程序的項目，也遇到了一些問題，再次記錄下來，看看你們師父也有遇到過相似的。

修改對象、數組中某一項

小程序裏面一般會有這樣相似的需求，好比對一個數組進行選擇或則其餘操做等。

修改對象中某一項

修改對象中某一項會比較簡單一點，直接將對象的某一個屬性使用中括號便可。例如：

this.setData({
  ['params.type']: ''
})
複製代碼

這樣就能夠單獨的修改對象中某一個屬性的值，而不用所有修改。

修改數組中某一項的值

修改數組中對象的某一個值稍微麻煩一點，畢竟咱們須要知道修改的值的下標，知道了下標和上面的對象差很少，惟一不一樣在於須要再key部分須要加入變量，因此最終寫法以下：

this.setData({
  ["tableData[" + index + "].coverPic"]: "../../images/img_error.png"
})
複製代碼

上面例子中index爲數組下標，就是修改數組中某一個對象的coverPic的值

canvas畫圖片須要先下載圖片

這個需求也很常見，好比在作分享到朋友圈的時候咱們須要經過canvas來畫一張拉新的圖片，因此圖片上面須要帶一張二維碼，當咱們從後臺獲取到二維碼後，若是直接就經過api畫到canvas上是不行的，須要先經過api下載後才能夠。

canvas生成圖片後保存

經過canvas生成的圖片一般咱們都會保存到用戶的手機裏面，再讓用戶去發送給別人拉新，保存圖片的時候就變成了機率事件了，有時候能保存成功，有的時候不能保存成功，這個問題其實就是須要咱們在生產draw方法的回調裏面去保存圖才能保證成功。

wx.request獲取cookie的值

在微信的發送請求的api中有的時候須要咱們本身去獲取cookie的值來和後端進行通信，咱們知道Vue是獲取不到的，那麼小程序是能夠獲取到的，怎麼獲取呢？若是你們有注意觀察這個api返回的數據就知道其實獲取cookie很簡單，以下：

res.header["Set-Cookie"]
複製代碼

上面的res爲請求接口成功後的返回值

使用WEUI某幾個組件

咱們知道小程序的擴展能力裏面是能夠直接使用WEUI的，那麼除了官方的經過useExtendedLib來使用外，其實咱們還能夠本身引入來使用，好比咱們須要使用WEUI裏面的Slideview、HalfScreenDialog、ActionSheet這三個組件，一般這三個組件的使用率仍是很高的，那麼咱們能夠本身到WEUI的github倉庫拷貝本身想要的組件到本身的項目中當作普通組件使用便可。

app.js裏面能夠自定義工具

一般小程序若是有須要用到本身寫的工具函數的時候，咱們就是在哪一個頁面須要就在按個頁面導入，特別是使用相對路徑的時候比較麻煩，其實咱們徹底能夠在小程序的app.js裏面引入後掛載到app上，這樣須要用到的頁面只須要經過getApp().utils便可使用啦，如：

import utils from './utils/utils.js'
App({
  globalData: {
    userInfo: null,
    systemInfo: null,
  },
  $utils:utils
});

// 頁面使用
getApp().$utils.formateDate()
複製代碼

globalData裏面也是能夠定義一些經常使用數據或者公共的方便其餘頁面使用

小程序地址傳值不能太長，太長會被截取

小程序中的地址後面攜帶參數時，若是參數特別多的話，一旦超出就會截取致使出現意想不到的錯誤，其實這裏和網頁是同樣的，地址欄後面攜帶參數是有限制的。

小程序代碼包限制

小程序的代碼包是有限制的，這個你們經過官方也能夠查到，一般整個小程序全部分包大小不超過20M、單個分包/主包大小不能超過2M，因此一旦你的項目比較大的話要提早規劃，作好分包，這樣可以分散包的大小，並且這樣對小程序的性能也會更好。

小程序自定義事件參數

微信小程序中事件是不能攜帶其餘參數的，那麼一般咱們是須要它可以攜帶參數才方便咱們進行相應操做的，那麼這個攜帶參數其實就是在結構上面添加自定義屬性，如data-index等，而後經過點擊事件的事件對象來獲取這個自定義屬性的值，例子以下：

<button bindtap="openLocation" data-lat="30.49984" data-lot="114.34253">打開導航</button>

openLocation(e) {
  wx.openLocation({
    latitude: Number(e.currentTarget.dataset.lat),
    longitude: Number(e.currentTarget.dataset.lot),
  })
}
複製代碼

設置整個頁面的樣式

開發微信小程序的時候有時須要設置整個頁面的樣式，但又不想本身加一個標籤，那麼咱們能夠在樣式裏面這樣設置接口，以下：

page{
  background:#FF4400;
}
複製代碼

block

微信小程序中block標籤和Vue中的template同樣的，不須要新加標籤的狀況下使用block，渲染後就可以達到多個並列的標籤了，好比在作循環的時候：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>
複製代碼

wx:if vs hidden

在小程序中使用wx-if，是基於局部渲染的形式。好比wx:if初始渲染條件爲false時，框架什麼都不會作；只有爲真的時候纔開始渲染該組件。而使用hidden在初始的時候就會渲染，它的值只是負責該組件的顯示與隱藏。所以在切換的時候，wx:if有更高的性能消耗，當咱們項目須要頻繁切換時，建議把wx:if換成了hidden。

常量或者一些不怎麼變化的均可以不用放在data裏面

小程序裏面的data數據太多也會影響小程序的性能的，因此不是任何東西都須要放到data裏面，其實咱們還能夠放到最外層，如：

const app = getApp()
let pageIndex = 1
let pageSize = 10
Page({
  data:{}
})
複製代碼

webview裏面的網址必須在公衆平臺設置白名單

這個限制相信大部分都知道，若是沒有這個限制的話，估計不少網頁版的均可以直接搬到小程序上，甚至還能夠引用別人的網站上的東西，因此爲了防止這種事情發生，微信作了限制，必須在公衆平臺配置域名白名單，只有在白名單裏面的網址才能在webview裏面訪問。

分享中使用異步不生效

小程序的分享是在頁面的一個函數裏面，在這個函數裏面分享的時候是使用異步是不生效的，其實這裏當咱們點擊分享的時候很快就分享出去了，若是用了一個異步請求啥的估計就慢了，因此使用異步是不能阻止分享的，可是咱們能夠在裏面進行一些異步的調用，至因而那個先運行就不清楚了。

複合碼解碼

有的時候在作小程序的時候須要使用普通的二維碼來做爲小程序引流碼，那麼這種碼在獲取參數的時候是須要對url進行解碼的，以下：

decodeURIComponent(options.q)
複製代碼

開發者工具能夠經過二維碼編譯以及參數編譯

作過支付寶小程序後就會發現，微信小程序確實要比支付寶方便不少，就這個功能目前支付寶是沒有的，後面估計會添加，入口以下：

wx.requestPayment判斷失敗和取消

小程序的支付api返回的不是像一般咱們的接口那樣，返回標識的，小程序的取消支付是須要本身去對字符串進行操做的，如小程序返回的信息是errMsg: "requestPayment:fail cancel"，在經過這個信息中fail cancel來判讀是否取消。

WXS

wxs是小程序的一種腳本語言，大體和js差很少，可是沒有js強大，這裏不介紹腳本自己，單獨說說如何使用，其實當咱們在頁面上有些數據須要格式化或者其餘運算操做的時候就可使用這個wxs，有點相似Vue裏面的計算屬性，使用很簡單就是引入便可使用，這裏有兩種定義方法，一種是直接在wxml裏面，一種是單獨的文件。因此若是隻是個別頁面須要單獨的格式化或者其餘運算能夠採用這種方案。

直接在wxml裏面定義

這裏你們能夠直接看看官方的例子

<wxs module="foo">
var some_msg = "hello world";
module.exports = {
  msg : some_msg,
}
</wxs>
<view> {{foo.msg}} </view>
複製代碼

單獨文件.wxs

若是是單獨的文件，那麼後綴名爲.wxs，使用以下：

<wxs src="./../comm.wxs" module="some_comms"></wxs>

<!-- 調用 some_comms 模塊裏面的 bar 函數，且參數爲 some_comms 模塊裏面的 foo -->
<view> {{some_comms.bar(some_comms.foo)}} </view>
複製代碼

模板複用

小程序也提供給了一個叫作代碼片斷的模板，這種模板就至關於若是多個地方用到只須要寫一份就能夠，其餘地方須要引用就行了。

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

<template is="msgItem" data="{{...item}}"/>
複製代碼