小編給大家分享一下小程序開發(fā)經(jīng)驗分享示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)于2013年成立，先為市中等服務(wù)建站，市中等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為市中企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

一、WXML

1.1：wx:if與wx:else

前端通過后端的接口獲取信息列表，如果有數(shù)據(jù)則展示數(shù)據(jù)內(nèi)容，否則則顯示找不到信息。 如果if-else使用布爾值的狀態(tài)作這個開關(guān)的話，頁面會先出現(xiàn)false的狀態(tài)，再更新為true，即閃現(xiàn)找不到信息的內(nèi)容，這種交互不是很理想。

	這是信息列表


	找不到信息

最好的做法是使用下面這種，一開始設(shè)置info為null,

data:{
    info:null
}

	這是信息列表


	找不到信息

1.2：wx:for

for循環(huán)要添加wx:for-item="item" wx:key="item"

1.3：block標(biāo)簽

wx:if、wx:for、wx:else這些沒有樣式意義的語法盡量使用block

1.4：template組件模板

公共的頁面模塊/組件，可直接在wxml使用，也可以使用import方式。如果涉及到css，需要在wxss里@import引入。

/**
* 方式一：直接使用
* 1. 給template 設(shè)置name屬性
* 2. 組件傳過來的值可以直接使用  hidden="{{!isloading}}"
*/

  
    
    正在加載
   


/** 
* 方式二：按路役引入 
* 1. is 等同方式一的name
* 2. data="{{isloading}}" 給template的數(shù)據(jù)
*/

1.5：腳本語言wxs

專門運(yùn)行于wxml頁面的腳本語言，與javascript不同，不支持使用ES6語法，也不能引用js。

module.exports = {
	//輸出百分比
	formatProgress: function (c,m) {
		return c/m*100
	}
}

二、WXSS

2.1：背景Icon

小程序的 background 里只能使用完整的https圖片路徑，項目中使用icon的方式：

• 矢量圖svg：具備完美的可伸縮性，容易進(jìn)行調(diào)整（顏色、大小等）;

• data-uri：圖片體積小于20Kb使用base64方式。[前端圖片最優(yōu)化的引入方式分析][segmentfault.com/a/119000001…]

• 較大文件：直接在wxml使用image標(biāo)簽

• 引入外部icon：如阿里巴巴矢量圖庫，可使用網(wǎng)絡(luò)路徑和下載到本地的方式來使用。

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 是一個相當(dāng)于屏幕寬度百分比的相對單位，以下情況不建議使用：

• font-size和border-width；animation動畫中涉及translate位移：部分機(jī)器在rpx轉(zhuǎn)成px出現(xiàn)小數(shù)時，如262.89px，微信會向下取值為262px，產(chǎn)生1px的差距。

• canvas繪圖，比如二維碼、分享圖片等。

三、JavaScript

3.1：二次封裝wx.request方法

3.2：頁面的生命周期

• onLoad: 頁面加載，一個頁面只會調(diào)用一次。能獲得到頁面參數(shù)options。

• onShow: 頁面顯示，每次打開頁面都會調(diào)用一次，從后臺切換前臺也會調(diào)用一次：手機(jī)從熄屏切回顯屏、從最小化回到最大化。

• onReady: 頁面初次渲染完成，一個頁面只會調(diào)用一次，代表頁面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。

• onHide: 頁面切換到后臺、navigateTo 、 tab 切換時調(diào)用。

• onUnload: 頁面卸載。當(dāng)頁面被關(guān)閉或內(nèi)存不足主動銷毀頁面。

3.3： new Date兼容性

安卓能識別new Date("2018-05-30 00:00:00")格式，但在IOS只能識別2018/05/30 00:00:00格式。需要將短橫替換為斜杠。var iosDate= date.replace(/-/g, '/')。

3.4：冒泡事件

• bindtap ：事件綁定不會阻止冒泡事件向上冒泡

• catchtap：事件綁定可以阻止冒泡事件向上冒泡

四、小程序功能

4.1：canvas生成圖片

4.2：插件的使用

4.3：頁面棧限制

小程序的頁面棧最新版本限制為10個，超過10個之后無法進(jìn)入下一個頁面。

故要慎用頁面數(shù)量，導(dǎo)航API要靈活結(jié)合wx.navigateTo、wx.redirectTo、wx.navigateBack

4.4：提示彈窗Dialog

• 代碼前面使用wx.hideLoading會導(dǎo)致后面的wx.showToast出不來。因為wx.showToast具備隱藏wx.showLoading()提示框的功能。

五、其它

5.1：主流框架

• mpvue：使用vue語法規(guī)范編譯成小程序和h6語法

• Taro：基于react可同時編譯成小程序、h6、react-native等。

5.2：常用插件

• wxParse：富文本解析

• wx-charts：圖表工具

• wxapp-qrcode：二維碼生成器

以上是“小程序開發(fā)經(jīng)驗分享示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！