小程序

1.開發微信小程序以前，先要知道小程序是什麼，優點是什麼。

知乎上看到的一個回覆 ： www.zhihu.com/question/50…

2.開始看小程序的開發文檔，網上不少教程，但仍是看官方的文檔比較全面。

附官方文檔地址：mp.weixin.qq.com/debug/wxado…

安裝步驟之類的，都在官方文檔裏。

3.小程序文檔看完一遍了，開始用wxml wxs wxss 搭一個簡單的界面吧。

發現其實微信小程序與html +css +js有不少的類似之處，除了標籤不太同樣，貌似都差很少。

4.簡單的搭了幾個界面，發現代碼並無達到微信小程序的宗旨 ： 邏輯與渲染分離 。

好比一個簡單的模塊：

充值10元

充值10元

充值10元

充值10元

若是純HTML寫 可能你這行代碼要複製好幾遍 。

若是你用小程序寫 你只須要 ：

{{ item }}

就能夠循環出 一樣的幾行代碼 。

小程序實戰經驗總結： 一、小程序image標籤選擇大圖片的時候，圖片會變形

緣由是 小程序的image標籤會自帶寬高 320 * 240

須要設置一下 mode = 「widthFix」 就能夠 變成原圖片的寬高了

二、文字須要換行\n 或者須要 佔位符 &nbsp時， 必需要使用 text 標籤 不然無效 。

要使用&nbsp &lt這一類的 符號時 須要在text標籤內設置 decode =「{{ture}}」

三、小程序 作嵌套循環時 數據不方便放在data 裏

解決方案 ： 把須要循環的模塊作成模板 ，模板裏的data設置成變量。

在調用模板時 調用時的data 裏再把變量換成須要調用的數組 或者 字符串等。

四、微信小程序裏 是不支持 background 爲圖片的。

解決方法 : 直接使用 image 標籤 ，src 設置成網絡圖片，若是須要作成背景， 在image標籤裏 加一個子標籤 ，裏面設置絕對定位就能夠了 。

這行設置相對於image 絕對定位 ，就能夠實現背景圖效果

五、設置全局變量屬性

小程序裏，變量通常是放在每一個文件夾的js裏的 ，有時候全部頁面都用到 某個數據時 ，一個個申明 太麻煩 ，因此定義一個全局變量 。

首先要在最外面的 app.js 裏 的 globalData 裏把須要的數據 放進去 。

如 ： globalData: {

userInfo: null,

url: 「m.yayuanzi.com/」,

}

再在你須要調用的頁面的文件夾裏的js文件中 。

在第一行加上const app = getApp()；

而後定義一個變量，把數據放在這個變量裏

如 ：

data: {

//得到官網地址

address: app.globalData.url,

}

最後 這個address 就能夠在頁面裏用了 。

六、小程序列表渲染 wx :key 的問題

小程序列表渲染是使用 wx：for = 「 {{ 循環的參數 }} 」

若是不加wx：key = 「 參數 」 的話 ，調試工具中會出現 黃色的警告信息 。 但不會影響頁面 。

網上找的緣由 ：

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

一、wx:key=」property」 其中property是表明在 for 循環的 array 中 item 的某個 property，該 property 的值須要是列表中惟一的字符串或數字，且不能動態改變。相似於字典的key值

二、wx:key=」*this」， 保留關鍵字 *this 表明在 for 循環中的 item 自己，這種表示須要 item 自己是一個惟一的字符串或者數字，如：

當數據改變觸發渲染層從新渲染的時候，會校訂帶有 key 的組件，框架會確保他們被從新排序，而不是從新建立，以確保使組

件保持自身的狀態，而且提升列表渲染時的效率。

不添加wx:key狀況：

，會出現warning： Now you can provide attr 「wx:key」 for a 「wx:for」 to improve performance. 若是明確知道該列表是靜態，或者沒必要關注其順序，能夠選擇忽略。

七、小程序裏 的單位

小程序的單位rpx 是根據屏幕來自適應的，開發的時候，把開發工具裏的 手機模型選成 iphone 6 。 這樣的話，1px = 2rpx ，方便開發。

8.小程序 image跟view標籤上下會有空隙

解決方案 就是能夠在image那裏設置vertical-align:top/bottom/text-top/text-bottom

緣由：圖片文字等inline元素默許是跟父級元素的baseline對齊，而baseline又和父級底邊有一定間距