一、WXML1.1：
wx:if與wx:else前端通過(guò)后端的接口獲取信息列表，如果有數(shù)據(jù)則展示數(shù)據(jù)內(nèi)容，否則則顯示找不到信息。
如果if-else使用布爾值的狀態(tài)作這個(gè)開(kāi)關(guān)的話，頁(yè)面會(huì)先出現(xiàn)false的狀態(tài)，再更新為true，即閃現(xiàn)找不到信息的內(nèi)容，這種交互不是很理想。
這是信息列表找不到信息最好的做法是使用下面這種，一開(kāi)始設(shè)置info為null,data:{
info:null }
這是信息列表找不到信息1.2：
wx:forfor循環(huán)要添加wx:for-item="item" wx:key="item"1.3：
block標(biāo)簽wx:if、wx:for、wx:else這些沒(méi)有樣式意義的語(yǔ)法盡量使用block1.4：
template組件模板公共的頁(yè)面模塊/組件，可直接在wxml使用，也可以使用import方式。
如果涉及到css，需要在wxss里@import引入。
/** * 方式一：
直接使用 * 1. 給template 設(shè)置name屬性 * 2. 組件傳過(guò)來(lái)的值可以直接使用 hidden="{
{
!isloading}
}
" */ /** * 方式二：
按路役引入 * 1. is 等同方式一的name * 2. data="{
{
isloading}
}
" 給template的數(shù)據(jù) */ 1.5：
腳本語(yǔ)言wxs專(zhuān)門(mén)運(yùn)行于wxml頁(yè)面的腳本語(yǔ)言，與javascript不同，不支持使用ES6語(yǔ)法，也不能引用js。
module.exports = {
//輸出百分比 formatProgress: function (c,m) {
return c/m*100 }
}
二、WXSS2.1：
背景Icon小程序的 background 里只能使用完整的https圖片路徑，項(xiàng)目中使用icon的方式：
矢量圖svg：
具備完美的可伸縮性，容易進(jìn)行調(diào)整（顏色、大小等）;
data-uri：
圖片體積小于20Kb使用base64方式。
[前端圖片最優(yōu)化的引入方式分析][segmentfault.com/a/119000001…]較大文件：
直接在wxml使用image標(biāo)簽引入外部icon：
如阿里巴巴矢量圖庫(kù)，可使用網(wǎng)絡(luò)路徑和下載到本地的方式來(lái)使用。
2.2：
重置樣式2.3：
font-family標(biāo)準(zhǔn)規(guī)范font-family: /*西文：
*/ -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial, /*中文：
*/ PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;
2.4：
合理使用rpx單位rpx 是一個(gè)相當(dāng)于屏幕寬度百分比的相對(duì)單位，以下情況不建議使用：
font-size和border-width；animation動(dòng)畫(huà)中涉及translate位移：
部分機(jī)器在rpx轉(zhuǎn)成px出現(xiàn)小數(shù)時(shí)，如262.89px，微信會(huì)向下取值為262px，產(chǎn)生1px的差距。
canvas繪圖，比如二維碼、分享圖片等。
三、JavaScript3.1：
二次封裝wx.request方法3.2：
頁(yè)面的生命周期onLoad: 頁(yè)面加載，一個(gè)頁(yè)面只會(huì)調(diào)用一次。
能獲得到頁(yè)面參數(shù)options。
onShow: 頁(yè)面顯示，每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次，從后臺(tái)切換前臺(tái)也會(huì)調(diào)用一次：
手機(jī)從熄屏切回顯屏、從最小化回到最大化。
onReady: 頁(yè)面初次渲染完成，一個(gè)頁(yè)面只會(huì)調(diào)用一次，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。
onHide: 頁(yè)面切換到后臺(tái)、navigateTo 、 tab 切換時(shí)調(diào)用。
onUnload: 頁(yè)面卸載。
當(dāng)頁(yè)面被關(guān)閉或內(nèi)存不足主動(dòng)銷(xiāo)毀頁(yè)面。
3.3：
new Date兼容性安卓能識(shí)別new Date("2018-05-30 00:00:00")格式，但在IOS只能識(shí)別2018/05/30 00:00:00格式。
需要將短橫替換為斜杠。
var iosDate= date.replace(/-/g, '
/'
)。
3.4：
冒泡事件bindtap ：
事件綁定不會(huì)阻止冒泡事件向上冒泡catchtap：
事件綁定可以阻止冒泡事件向上冒泡四、小程序功能4.1：
canvas生成圖片4.2：
插件的使用4.3：
頁(yè)面棧限制小程序的頁(yè)面棧最新版本限制為10個(gè)，超過(guò)10個(gè)之后無(wú)法進(jìn)入下一個(gè)頁(yè)面。
故要慎用頁(yè)面數(shù)量，導(dǎo)航API要靈活結(jié)合wx.navigateTo、wx.redirectTo、wx.navigateBack4.4：
提示彈窗Dialog代碼前面使用wx.hideLoading會(huì)導(dǎo)致后面的wx.showToast出不來(lái)。
因?yàn)閣x.showToast具備隱藏wx.showLoading()提示框的功能。
五、其它5.1：
主流框架mpvue：
使用vue語(yǔ)法規(guī)范編譯成小程序和h5語(yǔ)法Taro：
基于react可同時(shí)編譯成小程序、h5、react-native等。
5.2：
常用插件wxParse：
富文本解析wx-charts：
圖表工具wxapp-qrcode：
二維碼生成器推薦教程：
《微信小程序》以上就是小程序開(kāi)發(fā)經(jīng)驗(yàn)的總結(jié)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
小程序本文轉(zhuǎn)載于：
掘金社區(qū)，如有侵犯，請(qǐng)聯(lián)系[email protected]刪除
上一篇：
怎么退出微信小程序的登錄？
下一篇：
用微信小程序?qū)崿F(xiàn)WebSocket心跳重連相關(guān)文章相關(guān)視頻微信小程序必須買(mǎi)域名嗎微信小程序502是什么意思如何實(shí)現(xiàn)微信小程序url傳值微信小程序：
一個(gè)json幫你完成分享朋友圈圖片小程序開(kāi)發(fā)經(jīng)驗(yàn)的總結(jié)初識(shí)微信小程序(2)初識(shí)微信小程序(3)初識(shí)微信小程序(4) [溫州做小程序]