您好,登錄后才能下訂單哦!
小編給大家分享一下小程序開(kāi)發(fā)經(jīng)驗(yàn)分享示例,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
一、WXML
1.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)容,這種交互不是很理想。
<view wx:if="{{true}}"> <text>這是信息列表</text> </view> <view wx:else> <text>找不到信息</text> </view>
最好的做法是使用下面這種,一開(kāi)始設(shè)置info為null,
data:{ info:null }
<view wx:if="{{info === 1}}"> <text>這是信息列表</text> </view> <view wx:if="{{info === 0}}"> <text>找不到信息</text> </view>
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這些沒(méi)有樣式意義的語(yǔ)法盡量使用block
1.4:template組件模板
公共的頁(yè)面模塊/組件,可直接在wxml使用,也可以使用import方式。如果涉及到css,需要在wxss里@import引入。
/** * 方式一:直接使用 * 1. 給template 設(shè)置name屬性 * 2. 組件傳過(guò)來(lái)的值可以直接使用 hidden="{{!isloading}}" */ <template name="loading"> <view class="weui-loadmore" hidden="{{!isloading}}"> <view class="weui-loading"></view> <view class="weui-loadmore__tips">正在加載</view> </view> </template> /** * 方式二:按路役引入 * 1. is 等同方式一的name * 2. data="{{isloading}}" 給template的數(shù)據(jù) */ <import src="../template/loading.wxml"/> <template is="loading" data="{{isloading}}"></template>
1.5:腳本語(yǔ)言wxs
專(zhuān)門(mén)運(yùn)行于wxml頁(yè)面的腳本語(yǔ)言,與javascript不同,不支持使用ES6語(yǔ)法,也不能引用js。
<wxs module="wxs" src="../../utils/wxs.wxs"></wxs>
module.exports = { //輸出百分比 formatProgress: function (c,m) { return c/m*100 } }
二、WXSS
2.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繪圖,比如二維碼、分享圖片等。
三、JavaScript
3.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.navigateBack
4.4:提示彈窗Dialog
代碼前面使用wx.hideLoading會(huì)導(dǎo)致后面的wx.showToast出不來(lái)。因?yàn)閣x.showToast具備隱藏wx.showLoading()提示框的功能。
五、其它
5.1:主流框架
mpvue:使用vue語(yǔ)法規(guī)范編譯成小程序和h6語(yǔ)法
Taro:基于react可同時(shí)編譯成小程序、h6、react-native等。
5.2:常用插件
wxParse:富文本解析
wx-charts:圖表工具
wxapp-qrcode:二維碼生成器
以上是“小程序開(kāi)發(fā)經(jīng)驗(yàn)分享示例”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。