微信小程序：開發總結

時間 2019-11-10

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

原文原文鏈接

架構分析

軟件應用架構包括：
數據層、業務邏輯層、服務處、控制層、展現層、用戶，小程序屬於展現層，一般還須要其餘層次提供支持javascript
主體文件：
app.js,app.json,app.wxss，前二者是必須存在再根目錄下，app.wxss能夠不要php
頁面文件：
通常位於pages目錄下，同一個目錄下的四個文件必須同名a.wxml,a.js,a.wxss,a.json，前二者是必須存在的，後二者能夠不要css
其餘文件：其餘靜態資源能夠放在目錄下的任何位置
頁面的配置文件 只能配置全局app.json文件中的window配置項中內容
小程序屬於表現層，但又能夠細分爲邏輯層和視圖層
註冊
提供App方法來註冊程序（只能註冊一次），page方法來註冊頁面html
框架並不是運行在瀏覽器中，一些document,window等沒法使用
編譯
全部的代碼都被打包爲一份javascript，在小程序啓動時運行，直到銷燬。相似ServerWorker，因此邏輯層又稱爲AppServerjava
block
並非一個元素組件，僅僅是一個包裝元素，不會在頁面作任何渲染，只接受控制屬性。嵌套組件的渲染必須用block或repeat包裝，不然可能會出現問題android
模板
模板擁有本身的做用域，只能使用data傳入的數據
引入文件的三種方式：ios
1. import方式引入的是模板文件，如<import src="a.wxml"/>，不會嵌套引入；
2. include方式是將除模板以外的代碼所有引入到當前位置，如<include src="h.wxml"/>；
3. @import方式可引入外部wxss文件，如@import a.wxss。注意：必須放在最前面，放在代碼後不會生效
target與currentTarget對象區別：
多數狀況下二者的返回值時同樣的，可是當組件嵌套時，而且內外層組件都定義了事件處理函數，那麼在觸發內存組件時，這兩個對象的返回值就不太同樣了web
尺寸單位
建議使用小程序擴展的兩種rpx和remchrome
數據綁定
被綁定的數據必須在data屬性裏先作定義，不然可能不會正常渲染json

線程架構

每一個小程序分爲2個線程，view和appServer。其中view線程負責頁面的解析和渲染（包括wxml和wxss），appServer線程負責運行js。appServer線程運行在jsCore中（安卓下運行在X5中，開發者工具中運行在nwjs中）。因爲js並不運行在web-view裏，因此就沒法操做BOM和DOM，這就是小程序沒有window全局對象的緣由

生命週期

app生命週期——始終優先於page聲明週期

onLaunch：小程序初始化完成就調用，只被觸發一次
onShow：小程序啓動、從後臺進入前臺顯示，被觸發
onHide：小程序從前臺進入後臺，被觸發
onError：小程序出錯、api調用失敗、被觸發
-onPageNotFound：打開的頁面不存在，被觸發
其餘：開發者能夠添加任意函數或數據到Object對象中，用this訪問

注意：

App() 必須在 app.js 中註冊，且不能註冊多個
不要在定義於 App() 內的函數中調用 getApp() ，使用 this 就能夠拿到 app 實例
不要在 onLaunch 的時候調用 getCurrentPages()，此時 page 尚未生成
經過 getApp() 獲取實例以後，不要私自調用生命週期函數

page生命週期

onLoad: 頁面在加載時，只被觸發一次
onReady: 頁面初次渲染完成，只被觸發一次
onShow: 頁面顯示時，被觸發
onHide: 頁面隱藏時，被觸發（觸發左上角的退出箭頭時，僅觸發app.onHide
onUnload: 生命週期函數--監聽頁面卸載，只被觸發一次
onPullDownRefresh: 頁面相關事件處理函數--監聽用戶下拉動做
onReachBottom: 頁面上拉觸底事件的處理函數
onShareAppMessage: 用戶點擊右上角轉發
onPageScroll: 頁面滾動觸發事件的處理函數
onTabItemTap: 當前是 tab 頁時，點擊 tab 時觸發
其餘 Any 開發者能夠添加任意的函數或數據到 object 參數中，在頁面的函數中用 this 能夠訪問

注意：

執行順序：onLoad => onShow => onReady

**一個完整的小程序執行的生命週期以下：

app.onLaunch => app.onShow => page1.onLoad => page1.onShow => page1.onReady
（打開程序，第一個頁面page1加載完成）
=> page1.onHide => page2.onLoad => page2.onShow => page2.onReady
（從第一個頁面新打開page2）
=> page2.onUnload => page1.onShow => ... => app.onUnload
（關閉page2，返回page1...退出小程序）

視圖層注意事項

請使用官方提供的wxss選擇器，其餘選擇器可能也沒問題，可是不推薦。

例如`.cls1 .cls2`級聯樣式，微信團隊說會破壞組件結構，級聯最終會被取消，將來會推出新的方案。

全部的組件和屬性都須要使用小寫

踩坑指南

網絡相關問題

沒法抓到請求
charles或fiddler抓取不到開發者工具的請求，打開代理127.0.0.1:8888
提示非法域名
通常狀況都是出現了不在合法域名中的域名，打開開發者工具中的「不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書」
Get和Post請求的返回數據不支持二進制流
小程序支持經過post獲取小程序碼（有點像菊花）。嘗試經過wx.request向微信服務器獲取小程序碼的圖片，結果發現返回的結果沒法顯示。開始懷疑代碼有問題，調試以後，發現微信服務器返回的結果正確，而小程序會自動把二進制結果轉碼。更鬱悶的是，這種轉碼丟失了文件內容，而且轉換是不可逆的。

因而，咱們改方案，把服務器當中轉站，讓小程序使用wx.downloadFile從服務器下載圖片。在收到小程序下載圖片的請求以後，服務器直接和微信服務器獲取小程序碼的圖片，而後以附件的形式返回給小程序。

參考：小程序開發，那些咱們跳過的坑

斷網或者與正常網絡互相切換時問題

若是須要根據網絡狀態判斷是否發送異步請求，能夠經過官方文檔提供的onNetworkStatusChange和``兩個方法來處理

wx.getNetworkType({

success(res) {
  if(res.networkType === 'none') {
    globalData.netNotConnected = true;
  }
}

})

wx.onNetworkStatusChange(res => {

if (res.isConnected) {
  globalData.netNotConnected = false;
} else {
  globalData.netNotConnected = true;
  tip.alert("網絡已斷開，請鏈接後重試");
}

});

組件相關

自定義字體
沒法使用本地的字體文件，必須使用網絡地址
背景圖片問題
background-image背景圖片不支持本地圖片，只能用網絡url或者base64；本地圖片要用image標籤才行

button樣式

去掉默認樣式
小程序的button是用僞元素實現的，去掉其默認樣式須要用button::after{ border: none; }

設置背景圖片

方法1：

<button 
  open-type="share" 
  class="btn" 
  style="background-image: url(11.png);" 
  plain="true"
>
</button>

.btn{
  width: 30rpx;
  height: 30rpx;
  padding: 0 20rpx;
  position: absolute;
  right: 32rpx;
  top: 0;
  bottom: 0;
  margin: auto;
  background-size: 30rpx 30rpx;
  background-repeat: no-repeat;
  border: none;
}

參考：https://www.jianshu.com/p/b1d8a62da876 

  - 方法2：
  ```
 .btn {
    position: relative;
    &::after {
      display: inline-block;
      content: "";
      position: absolute;
      top: 0;
      right: 20rpx;
      left: 0;
      background: url(11.png) no-repeat 0 0;
      background-size: 715rpx 120rpx;
      background-size: 100% 100%;
      z-index: -1;
    }
 } 
  ```

input長度
value值的默認最大長度是140個字符（不包括空格），若是長度長度超過最大長度，須要設置maxlength=-1便可。

H5中input的value默認沒有長度限制
text組件的/n問題
view組件不識別/n，text能夠。保存的文本中有換行,若是讀取的時候將數據放入view中換行沒有效果,放入text中就行了。原則上text標籤與其中的內容不能有換行或空格，不然會有大片空白

wx.showModal方法的換行問題：在文本中添加\r\n，但須要在真機上才能生效，開發者工具不行
多個空格的問題
小程序中經過多個&nbsp是沒法正常顯示多個空格的，解決方法：用中文全角空格部　　門 （shift+space）
textarea問題
- 設置了auto-height="true"不設置maxlength=「-1」，輸入長度會遭限制；
- 頁面中只能有一個 <textarea/>或<input/>設置auto-focus屬性；
- textarea蘋果和安卓的顯示高度不一致，不給textarea設置寬度，則默認是300px;
- 設置auto-height時，style.height不生效，而且ios和android高度顯示不一致
- button的邊框是用:after方式實現的，用戶若是在button上定義邊框會出現兩條線，需用:after的方式去覆蓋默認值。
scroll-view
- tip: 請勿在 scroll-view 中使用 textarea、map、canvas、video 組件
- tip: scroll-into-view 的優先級高於 scroll-top
- tip: 在滾動 scroll-view 時會阻止頁面回彈，因此在 scroll-view 中滾動，是沒法觸發 onPullDownRefresh
- tip: 若要使用下拉刷新，請使用頁面的滾動，而不是 scroll-view ，這樣也能經過點擊頂部狀態欄回到頁面頂部
- 注意：使用豎向滾動時，須要給<scroll-view>一個固定高度height(如100vh)，設置百分數無效
- 清除黑色滾動條（豎向滾動時）
```
::-webkit-scrollbar { 
  width: 0; 
  height: 0; 
  color: transparent; 
}
```
  參考：小程序填坑之路
cover-view
- cover-view的內容只有放置在原生組件裏才能顯示
- cover-view的內容不能超過原生組件，不然會被強制截取
- 微信文檔中說只支持最外圍的cover-view的fixed，經測試內圍absolute也可以使用，但有時候會看到用absolute的標籤不見了，這時候你就要查看包括這個不見的標籤的父元素的高度了，估計是absolute的標籤超高了被父元素截取了
- cover-image不支持absolute

因爲小程序裏面video標籤的層級是最高的沒法覆蓋。因此cvoer-view應運而生。它就是用於蓋在video標籤上面，進行對video標籤的周遭加以裝飾的利器。 

例如在cover-view上面使用相對定位，當video標籤大小發生變化的時候，cover-view上面的元素就亂七八糟。 又譬如圓角的不起效等等。 具體的問題你們能夠在開發者社區看看。[cover-view定位問題](https://developers.weixin.qq.com/search?action=list&t=search/index&search_type=1&key=cover-view&token=&lang=zh_CN) 

避坑方法：儘可能在cover-view上不使用定位，其餘的bug只能等官方優化，你們謹慎使用。

關於live-pusher,live-player
<live-player />’渲染失敗，錯誤緣由： insertLivePlayer:fail:access denied

緣由：微信的權限裏的相機和麥克風沒有權限致使的，到手機設置-應用-微信-權限裏設置
鍵盤與輸入框距離
input,textarea 能夠經過標籤的cursor-spacing屬性設置鍵盤與輸入框的距離
循環渲染
有嵌套關係的組件須要被循環渲染時，必定要用block或repeat，不然會出現一些奇怪問題，如可能取不到item對象的屬性值等
dataset屬性問題
屬性名必須所有小寫，不支持駝峯方式。如data-id必須小寫。data-author-name在e.currentTarget.dataset中會自動轉換authorName
視頻標籤黑邊
objectFit去除小程序視頻標籤的黑邊（沒試過）
swiper問題
1. 初次使用swiper的的時候可能遇到當圖片自動輪播到最後的時候，跳轉到第一頁的效果不友好，此時須要添加 circular=「true」 無縫銜接

**問題2：** 輪播圖顯示異常問題：A頁面有`swiper`圖片輪播，跳轉到B頁面編輯並刪除某張輪播圖片，再返回A頁面後，輪播圖顯示空白，添加新圖片時沒問題；初步猜想：返回A頁面後，`swiper`的`current`屬性的當前值狀態值指向不存在致使。但在A頁面`onShow`時重置`current`值也不行，暫沒找到緣由 

1. 省市縣鎮級聯選擇時，當有多個`swiper-item`時，點擊第二個及之後的省獲取市時顯示空白

解決方法：在點擊第二個`swiper-item`裏的省獲取市以前先把`swiper`組件重置，如設置渲染條件先不讓他渲染，獲取到市數據後再設置條件讓`swiper`組件渲染出來

1. `swiper`滑動過一次後，沒法再動態的設置`current`的值解決方案


給`swiper`添加`change`監聽事件，當滑動`swiper`時經過`e.detail.current`記錄`current`，下次再返回時設置`current`爲上次保存的值。

參考：[swiper bug, swiper滑動過一次後，沒法動態改變current值](https://openclub.alipay.com/read.php?tid=2919&fid=51)

canvas問題

canvas層級最高，其餘元素不管z-index設置多大，都不能蓋在canvas上，解決方法：讓canvas定位後設置比較大的偏移值，或設置hidden

繪圖時的圖片必須是已經下載好的圖片，不能使用網絡圖片或base64，能夠用微信提供的getImageInfo或downloadFile，示例：

async createPoster() {
    const imgPromise1 = return new Promise((resolve, reject) => {
      wx.getImageInfo({ 
        src, 
        success(res) {
          resolve(res);
        },
        fail(error) {
          reject(error);
        }
      })
    });

    Promise.all([imgPromise1, imgPromise2]).then(res => {
      const [ res1, res2 ] = res;
      ...
      const ctx = wx.createCanvasContext('poster-canvas-id');
      ctx.drawImage(res1.path, x, y, ...);
    })
  }

海報（二維碼）

手機掃描分享的海報二維碼，只能跳轉到小程序線上版本，能夠經過抓包獲取跳轉時的啓動參數，放到開發者工具中模擬線下環境跳轉

如：經過scene值來實現：手機掃碼生成海報二維碼，抓包這個請求https://activity.12345.com/wxa/town/load?scene=hvORN4dgYy，記下這個scene值，在開發者工具中配置路徑'pages/index/index'  參數scene=hvORN4dgYy便可

原理：getAppCode方法中，會把頁面加載所須要的參數做爲scene值來獲取二維碼；當掃描二維碼時，這個二維碼中含有scene值，先進入XX首頁時會經過上面那個抓包請求獲取這個scene，而後從scene中解析並調整到pagetype，從而先經過跳轉首頁後再跳轉到指定的頁面

其餘 - Canvas和Image對圖片的各類不支持
- 掃碼簽到中用到了二維碼
  在開始的版本中，咱們準備在Canvas上直接繪製二維碼，接着使用wx.canvasToTempImage函數保存爲image文件，而後經過Image組件加載。
  
  通過調試，一切順利。運行的時候呢，發現有時候在繪製完圖片以後，調用wx.canvasToTempImage函數失敗。這種狀況在調試沒法重現，運行的時候偶爾出現，不穩定。
  
  仔細檢查了代碼，沒問題啊。Google以後，有網友提出瞭解決方案，在drawImage完成以後，最好等3秒鐘再調用wx.canvasToTempImage，以保證保存成功。
- Canvas和Image都不支持Base64圖片，Image沒法保存
  最初的方案中，咱們本身生成二維碼，後來爲了兼容微信的「掃一掃」功能，咱們決定改用小程序碼。
  
  開始，咱們把Image的src設置爲Base64格式，從服務器上經過request獲取圖片的Base64編碼。小程序開發工具和iPhone上面測試都沒有問題，惟獨Android手機上沒法正常顯示圖片。哦，原來在Android上，Canvas和Image都不支持Base64圖片。但是...小程序開發文檔中並無這方面的說明啊。
  
  怎麼解決Android手機上的這個問題呢？若是把Image改爲URL形式呢，小程序沒法保存圖片，以至即便是相同的圖片，每次都要從服務器獲取，這又加劇了服務器的負擔。這樣吧，使用wx.downloadFile把文件下載到本地，而後再處理
  
  參考：Canvas和Image對圖片的各類不支持
凌晨定時清理storage
能夠把日期(年/月/日)存儲到storage；在頁面onLoad時，判斷當前日期和storage存儲的日期(轉時間戳)是否相等，不然就視爲次日

事件 & api 相關

沒法經過event事件對象修修改dataset屬性值？？？
試過好像不行
沒法經過event事件對象修修改class類屬性值？？？
試過好像不行
tabBar問題
tabBar裏面的圖標 只能是本地圖片，不能是網絡圖片，不然沒法顯示。至少2個，最多5個
路由跳轉問題
- 不要嘗試修改頁面棧，會致使路由以及頁面狀態錯誤。
- 不要在 App.onLaunch 的時候調用 getCurrentPages()，此時 page 尚未生成。

-----------
- navigateTo, redirectTo 只能打開非 tabBar 頁面。
- switchTab 只能打開 tabBar 頁面。
- reLaunch 能夠打開任意頁面。
- 頁面底部的 tabBar 由頁面決定，即只要是定義爲 tabBar 的頁面，底部都有 tabBar。
- 調用頁面路由帶的參數能夠在目標頁面的onLoad中獲取。
-----------
- **注意：最多跳轉5個頁面**

- 在路由跳轉的時候，模擬器偶爾會系統報錯。頻繁跳轉出現機率比較高，但僅僅在模擬器出現。能夠無視

  **通過測試，由於頁面跳轉是有動畫時效的，在動畫進行中當前頁面還能操做。若是雙擊當前跳轉按鈕機會進行兩次跳轉。第二次點擊的時候小程序內置的路由棧是已經定位到了新的頁面了，而這時候在按照原來的路由棧去定位當前頁面，所以會報錯。因此頁面跳轉按鈕須要進行短期屢次點擊的限制**

詳見：[小程序路由](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html)

上下拉頁面刷新問題
bindscrolltoupper 仍是 bindscrolltoupper作上拉下拉刷新都須要注意這兩個事件是會屢次調用的。須要一個標識符來攔截屢次調用
緩存問題
- 緩存最大支持 10M，能夠寫入多種類型數據number、boolean、array、string、object 等
- 調用同步方法寫緩存時，常常會報錯(以下圖提示)，官方建議儘可能使用異步方式寫入緩存，編碼同步方式；能夠添加 try catch finally 處理

**注意：** 

  你在開發小程序過程當中，是否遇到，本身已經刪除了體驗版小程序，可是緩存依然存在？

  那是由於，同一個小程序的開發版、體驗版、線上版的緩存是共用的，你須要同時刪除這三個版本的小程序，緩存纔會被刪除。

  參考：[小程序緩存踩過的坑](https://blog.csdn.net/weixin_42133469/article/details/81875125)

塗層 & 彈框問題
設置當前塗層和彈框的 @touchmove.stop="func" 便可，不要在func內添加preventDefault 或 cancelBabel(不支持)
網絡狀態變化問題 onNetworkStatusChange
網絡由正常狀態變爲斷開狀態時，發佈帖子會報錯；這時網絡又恢復正常，點擊發布按鈕卻沒反應，也沒觸發請求。

解決方案：在註冊小程序的onLaunch中經過wx.onNetworkStatusChange監聽網絡變化，同時把該狀態存儲到globalData全局變量中；當發帖時，首先判斷網絡狀態，若是是斷網的狀況，就給出toast提示並禁止發佈；若是是網絡正常，就正常發佈。這樣便可解決斷網又聯網時致使不能發佈的問題，示例：

// app.wpy
```
onLaunch() {
  wx.onNetworkStatusChange(res => {
    if (res.isConnected) {
      globalData.netNotConnected = false;
    } else {
      globalData.netNotConnected = true;
      tip.alert("網絡已斷開，請鏈接後重試");
    }
  });
}
```
// formSubmit.wpy  表單提交
```
if(globalData.netNotConnected) {
  tip.alert("網絡已斷開，請鏈接後重試");
  return;
}
...
```

`wepy`相關

this.$apply方法
wepy中的this.$apply()方法通常用於組件從頭傳值的.sync中，其餘狀態更新的地方不必添加該方法
組件問題

wepy的組件是靜態組件，是以ID做爲惟一標識，每個ID都對應一個組件實例，當頁面引入兩個相同ID的組件時，這兩個組件共用同一個實例與數據，當其中一個組件數據變化時，另一個也會一塊兒變化。若是須要避免這個問題，則須要分配多個組件ID和實例。
```
components = {
    //爲兩個相同組件的不一樣實例分配不一樣的組件ID，從而避免數據同步變化的問題
    ErrorComponent: ErrorComponent,
    ExceptionComponent: ErrorComponent
};
```
組件傳值問題
- 只能傳遞字符串類型，能夠傳object,array等，但須要先序列號；注意：若是傳遞是object，內部不能再有嵌套的複合數據類型了，負責子組件沒法正確渲染（手機），array類型的能夠
- 不要再在子組件中修改props中屬性的數據類型，不然當該屬性須要頻繁獲取時，頁面會出現抖動，體驗極差（如省市縣鎮的級聯選擇時，當前顯示的areaData都是經過props中的areaData獲取時，不能在子組件中修改其數據類型）
```
...
props = {
  areaData: {
    type: String,
    default: ""
  }
}
computed = {
  this.areaData = JSON.parse(areaData);   // 不能夠，頁面抖動
  this.$apply();  
}
...
```

其餘

1.模擬器和真機的差別

在模擬器上表現正常的，在真機未必正常，問題也不少。譬如

- 動畫的使用
- cover-view上面使用定位
- wepy 組件傳值
- canvas定位、繪圖 
- 背景圖片路徑

緣由：形成這些錯亂主要是pc端和移動端不一樣的內核致使的。 

避坑方式：開發過程當中，要時不時地用真機也看一下效果。

無效的appID
重啓開發者工具；

描述：凡是公衆平臺服務端的修改，都須要重啓開發者工具才能生效，包括https域名設置，開發者添加，appid使用，等等
**開發者工具提示‘沒法建立新項目’
文件夾不是空文件夾
開發
以iphone6的rpx來進行小程序的佈局最爲方便，iphone6的寬度是750rpx
搜索
小程序不支持模糊匹配，只能精確搜索
數據
單詞設置的數據大小不能超過1024KB，不然會崩潰

校驗

var wxReg=new RegExp("^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$") //微信號正則驗證
var qqReg=new RegExp("[1-9][0-9]{4,}")  //QQ號正則驗證
var phReg=new /^1[345678]\d{9}$/  //手機號正則驗證
var nameReg=new RegExp（"^[\u4e00-\u9fa5]{2,4}$"）  //2-4位中文姓名正則驗證

引入iconfont問題
H5方式：

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1485242349767'); /* IE9*/
  src: url('iconfont.eot?t=1485242349767#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff?t=1485242349767') format('woff'), /* chrome, firefox */
  url('iconfont.ttf?t=1485242349767') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1485242349767#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

小程序使用這種方式沒法引入字體，解決方案以下:

- 進入iconfont選擇本身須要的icon，而且下載到本地，找到後綴名爲.ttf的文件
- 打開https://transfonter.org/，將字體文件轉化成base64的格式
- 轉化無完成後將生成的stylesheet.css拷貝到微信小程序項目中，經過@import方式引入，在須要引入的地方
  ```
  #icons:before{
    font-family: "iconfont";
    /* color: red; */
    font-size: 40rpx;
    content: "\e60b"
  }
  ```
  參考：[微信小程序踩坑日誌](https://blog.csdn.net/marko_zheng/article/details/79130076)