1.開發(fā)微信小程序之前，先要知道小程序是什么，優(yōu)勢是什么。

知乎上看到的一個回復 ： https://www.zhihu.com/question/50880960

2.開始看小程序的開發(fā)文檔，網(wǎng)上很多教程，但還是看官方的文檔比較全面。

附官方文檔地址：https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html

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

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

發(fā)現(xiàn)其實微信小程序與html +css +js有很多的相似之處，除了標簽不太一樣，貌似都差不多。

4.簡單的搭了幾個界面，發(fā)現(xiàn)代碼并沒有達到微信小程序的宗旨 ： 邏輯與渲染分離 。

比如一個簡單的模塊：

<view>充值10元</view>

<view>充值10元</view>

<view>充值10元</view>

<view>充值10元</view>

如果純HTML寫 可能你這行代碼要復制好幾遍 。

如果你用小程序寫 你只需要 ：

<block wx:for=”item”>

<view >{{ item }}<view>

</block>

就可以循環(huán)出 同樣的幾行代碼 。

小程序實戰(zhàn)經(jīng)驗總結：

1.   小程序image標簽選擇大圖片的時候，圖片會變形

原因是 小程序的image標簽會自帶寬高  320 * 240

需要設置一下 mode = “widthFix”  就可以 變成原圖片的寬高了

2.  文字需要換行\(zhòng)n 或者需要 占位符 &nbsp時， 必須要使用 text 標簽 否則無效 。

要使用&nbsp  &lt這一類的 符號時  需要在text標簽內(nèi)設置    decode =“{{ture}}”

3. 小程序 做嵌套循環(huán)時  數(shù)據(jù)不方便放在data 里  

解決方案 ：  把需要循環(huán)的模塊做成模板 ，模板里的data設置成變量。

在調用模板時 調用時的data 里再把變量換成需要調用的數(shù)組 或者 字符串等。

4. 微信小程序里 是不支持 background 為圖片的。

解決方法 : 直接使用 image 標簽 ，src 設置成網(wǎng)絡圖片，如果需要做成背景， 在image標簽里 加一個子標簽 ，里面設置絕對定位就可以了 。

<image>

<view>    這行設置相對于image 絕對定位 ，就可以實現(xiàn)背景圖效果    </view>

</image>

5. 設置全局變量屬性

小程序里，變量一般是放在每個文件夾的js里的 ，有時候所有頁面都用到 某個數(shù)據(jù)時 ，一個個申明 太麻煩 ，所以定義一個全局變量 。

首先要在最外面的 app.js 里 的 globalData 里把需要的數(shù)據(jù) 放進去 。

如 ： globalData: {

userInfo: null,

url: “http://m.yayuanzi.com/”,

}

再在你需要調用的頁面的文件夾里的js文件中 。

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

然后定義一個變量，把數(shù)據(jù)放在這個變量里

如 ：

data: {

//獲得官網(wǎng)地址

address: app.globalData.url,

}

最后  這個address 就可以在頁面里用了 。

6. 小程序列表渲染 wx :key 的問題

小程序列表渲染是使用 wx：for = “ {{  循環(huán)的參數(shù)  }} ”

如果不加wx：key = “ 參數(shù) ” 的話 ，調試工具中會出現(xiàn) 黃色的警告信息 。 但不會影響頁面 。

網(wǎng)上找的原因 ：

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

1、wx:key=”property” 其中property是代表在 for 循環(huán)的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數(shù)字，且不能動態(tài)改變。類似于字典的key值

2、wx:key=”*this”， 保留關鍵字 *this 代表在 for 循環(huán)中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數(shù)字，如：

當數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創(chuàng)建，以確保使組

件保持自身的狀態(tài)，并且提高列表渲染時的效率。

不添加wx:key情況：

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

7. 小程序里 的單位

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

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