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

知乎上看到的一個(gè)回復(fù) ： https://www.zhihu.com/question/50880960

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

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

安裝步驟之類(lèi)的，都在官方文檔里。

3.小程序文檔看完一遍了，開(kāi)始用wxml  wxs  wxss 搭一個(gè)簡(jiǎn)單的界面吧。

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

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

比如一個(gè)簡(jiǎn)單的模塊：

<view>充值10元</view>

<view>充值10元</view>

<view>充值10元</view>

<view>充值10元</view>

如果純HTML寫(xiě) 可能你這行代碼要復(fù)制好幾遍 。

如果你用小程序?qū)?你只需要 ：

<block wx:for=”item”>

<view >{{ item }}<view>

</block>

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

小程序?qū)崙?zhàn)經(jīng)驗(yàn)總結(jié)：

1.   小程序image標(biāo)簽選擇大圖片的時(shí)候，圖片會(huì)變形

原因是 小程序的image標(biāo)簽會(huì)自帶寬高  320 * 240

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

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

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

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

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

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

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

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

<image>

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

</image>

5. 設(shè)置全局變量屬性

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

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

如 ： globalData: {

userInfo: null,

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

}

再在你需要調(diào)用的頁(yè)面的文件夾里的js文件中 。

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

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

如 ：

data: {

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

address: app.globalData.url,

}

最后  這個(gè)address 就可以在頁(yè)面里用了 。

6. 小程序列表渲染 wx :key 的問(wèn)題

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

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

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

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

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

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

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

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

不添加wx:key情況：

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

7. 小程序里 的單位

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

8.小程序 image跟view標(biāo)簽上下會(huì)有空隙