1. 程式人生 > >微信小程式注意事項

微信小程式注意事項

1. 開發小程式時,每個頁面一定要在app.json檔案中註冊,頁面資料夾和其包含的四個檔案的名字要保持一致。

2. 小程式發起的都是HTTPS網路請求,在開發除錯的過程中可以不校驗協議和TLS版本,但在實際上線後必須進行HTTPS協議通訊。

3. 小程式可以進行元件化開發以及資料繫結,所有對於DOM的操作都是基於資料驅動的,並沒有直接進行DOM操作的做法,換言之,小程式內沒有document物件,原生js和jQuery裡的DOM操作思維要捨棄掉。

4. 小程式的網路請求wx.request()是不自帶Cookies的,這和瀏覽器上的網路請求不同,因此基於Cookies實現的會話管理不適用於小程式。

5. 小程式的指令碼檔案中,內建物件是page,而非傳統瀏覽器裡的window,因此所有基於window物件來寫的庫(例如jQuery)都不適用於小程式。

6. 小程式提供模板功能,模板擁有自己的作用域,它只能使用從data屬性傳入的資料。

7. 每一個頁面資料夾下的.json檔案是用來寫配置項的,如果該頁面無需新增相關配置,.json檔案也要寫上一對大括號(“{ }”),否則會報錯。

8. 在同一個tab裡的頁面可以跳轉,並且允許攜帶引數。不同tab的頁面之間無法跳轉,使用wx.navigateTo()介面會報錯。同時,tab之間的跳轉可以用wx.switchTab()實現,但是路徑後不能帶引數。

9. 指令碼檔案裡data的資料,在更新的時候要通過this.setData()方法來更新,而不能直接用“=”來做。

10. 在元件標籤裡,可以通過“data-屬性值”的方式繫結我們需要的資料,然後在事件內建event物件裡進行獲取。

11. 小程式裡也存在事件的冒泡,具體的冒泡事件可以參考官方文件,如果希望事件向上冒泡,則使用bind來繫結事件,若希望阻止事件冒泡,就使用catch來進行事件繫結。

12. 小程式支援檔案引用,有import和include兩種方式,import有作用域,也就是引入的目標檔案裡import的模板不會被引入;而include等於是將目標檔案除<template />以外的整個程式碼進行引入。

13. wx.login()和wx.getUserInfo()是兩個獨立的介面,前者可以實現使用者登入,這個過程是悄無聲息的,不需要使用者授權,登入後可以拿到使用者的openid和session_key;而wx.getUserInfo()可以拿到使用者的具體資訊,這個過程需要獲得使用者的授權,開發時也必須考慮使用者拒絕授權的場景。

14. 目前小程式可以分享給微信好友和微信群,但小程式預設是沒有這個功能的,只有在Page裡定義了onShareAppMessage事件處理函式,點選小程式右上角才可以看到分享按鈕。

15.文字需要換行\n 或者需要 佔位符 &nbsp時, 必須要使用 text 標籤 否則無效 。要使用&nbsp  &lt這一類的 符號時  需要在text標籤內設定    decode =“{{ture}}”

16.小程式列表渲染 wx :key 的問題

小程式列表渲染是使用 wx:for = “ {{  迴圈的引數  }} ”

如果不加wx:key = “ 引數 ” 的話 ,除錯工具中會出現 黃色的警告資訊 。 但不會影響頁面 。

網上找的原因 :

wx:key 的值以兩種形式提供

1、wx:key=”property” 其中property是代表在 for 迴圈的 array 中 item 的某個 property,該 property 的值需要是列表中唯一的字串或數字,且不能動態改變。類似於字典的key值

2、wx:key=”*this”, 保留關鍵字 *this 代表在 for 迴圈中的 item 本身,這種表示需要 item 本身是一個唯一的字串或者數字,如:

當資料改變觸發渲染層重新渲染的時候,會校正帶有 key 的元件,框架會確保他們被重新排序,而不是重新建立,以確保使組

件保持自身的狀態,並且提高列表渲染時的效率。

不新增wx:key情況:

<block wx:for-items=”{{userInfoList}}” >,會出現warning: Now you can provide attr “wx:key” for a “wx:for” to improve performance. 如果明確知道該列表是靜態,或者不必關注其順序,可以選擇忽略。