溫州雙峰鄉(xiāng)小程序開發(fā)經(jīng)驗(yàn)的總結(jié)

閱讀 27781  ·  發(fā)布日期 2020-08-24 17:26  ·  溫州優(yōu)光網(wǎng)絡(luò)科技有限公司|建站|APP小程序制作|做網(wǎng)站SEO推廣優(yōu)化
【摘要】 一、WXML1.1:wx:if與wx:else前端通過后端的接口獲取信息列表,如果有數(shù)據(jù)則展示數(shù)據(jù)內(nèi)容,否則則顯示找不到信息。 如果if-else使用布爾值的狀態(tài)作這個(gè)開關(guān)的話,頁面會(huì)先出現(xiàn)false的狀態(tài),再更新為true,即閃現(xiàn)找不到信息的內(nèi)容,這種交互不是很理想。這是信息列表找不到信息最好的做法是使用下面這種,一... 【溫州小程序開發(fā),溫州微信公眾號(hào),平陽做網(wǎng)站,平陽網(wǎng)站建設(shè)公司,平陽小程序商城制作,昆陽萬全做網(wǎng)站,鰲江水頭小程序,蕭江騰蛟微信公眾號(hào),山門順溪南雁海西南麂鳳臥麻步懷溪網(wǎng)絡(luò)網(wǎng)店服務(wù),政采云網(wǎng)店管理服務(wù)】...

小程序開發(fā)經(jīng)驗(yàn)的總結(jié)

一、WXML1.1:
wx:if與wx:else前端通過后端的接口獲取信息列表,如果有數(shù)據(jù)則展示數(shù)據(jù)內(nèi)容,否則則顯示找不到信息。
如果if-else使用布爾值的狀態(tài)作這個(gè)開關(guān)的話,頁面會(huì)先出現(xiàn)false的狀態(tài),再更新為true,即閃現(xiàn)找不到信息的內(nè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這些沒有樣式意義的語法盡量使用block1.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 }
}
二、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ò)路徑和下載到本地的方式來使用。
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)畫中涉及translate位移:
部分機(jī)器在rpx轉(zhuǎn)成px出現(xiàn)小數(shù)時(shí),如262.89px,微信會(huì)向下取值為262px,產(chǎn)生1px的差距。
canvas繪圖,比如二維碼、分享圖片等。
三、JavaScript3.1:
二次封裝wx.request方法3.2:
頁面的生命周期onLoad: 頁面加載,一個(gè)頁面只會(huì)調(diào)用一次。
能獲得到頁面參數(shù)options。
onShow: 頁面顯示,每次打開頁面都會(huì)調(diào)用一次,從后臺(tái)切換前臺(tái)也會(huì)調(diào)用一次:
手機(jī)從熄屏切回顯屏、從最小化回到最大化。
onReady: 頁面初次渲染完成,一個(gè)頁面只會(huì)調(diào)用一次,代表頁面已經(jīng)準(zhǔn)備妥當(dāng),可以和視圖層進(jìn)行交互。
onHide: 頁面切換到后臺(tái)、navigateTo 、 tab 切換時(shí)調(diào)用。
onUnload: 頁面卸載。
當(dāng)頁面被關(guān)閉或內(nèi)存不足主動(dòng)銷毀頁面。
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:
頁面棧限制小程序的頁面棧最新版本限制為10個(gè),超過10個(gè)之后無法進(jìn)入下一個(gè)頁面。
故要慎用頁面數(shù)量,導(dǎo)航API要靈活結(jié)合wx.navigateTo、wx.redirectTo、wx.navigateBack4.4:
提示彈窗Dialog代碼前面使用wx.hideLoading會(huì)導(dǎo)致后面的wx.showToast出不來。
因?yàn)閣x.showToast具備隱藏wx.showLoading()提示框的功能。
五、其它5.1:
主流框架mpvue:
使用vue語法規(guī)范編譯成小程序和h5語法Taro:
基于react可同時(shí)編譯成小程序、h5、react-native等。
5.2:
常用插件wxParse:
富文本解析wx-charts:
圖表工具wxapp-qrcode:
二維碼生成器推薦教程:
《微信小程序》以上就是小程序開發(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)視頻微信小程序必須買域名嗎微信小程序502是什么意思如何實(shí)現(xiàn)微信小程序url傳值微信小程序:
一個(gè)json幫你完成分享朋友圈圖片小程序開發(fā)經(jīng)驗(yàn)的總結(jié)初識(shí)微信小程序(2)初識(shí)微信小程序(3)初識(shí)微信小程序(4) [溫州做小程序]