前言
2017年微信公開(kāi)課PRO版現(xiàn)場(chǎng)叛拷，張小龍宣布，微信小程序?qū)⒂?月9日正式上線岂却，并現(xiàn)場(chǎng)對(duì)小程序做了全面闡述忿薇，回答大家最關(guān)心的問(wèn)題。
我大DC作為一個(gè)有“科技”含量的互聯(lián)網(wǎng)公司躏哩，在這波熱潮下怎么也得湊一波熱鬧署浩！于是在我的“慫恿”下，我們前端部門(mén)開(kāi)始了微信小程序的踩坑之路扫尺。
需求梳理
按照正常的軟件開(kāi)發(fā)流程來(lái)講筋栋，應(yīng)該是產(chǎn)品那邊先提供原型和文檔，然后我們的UI開(kāi)始設(shè)計(jì)正驻，但是當(dāng)時(shí)我們產(chǎn)品組全力在搞消費(fèi)端的APP人員短缺弊攘，作為一個(gè)喜歡折騰（其實(shí)是沒(méi)有產(chǎn)品資源）的人來(lái)講，最終選擇自己來(lái)擼原型姑曙。最終的結(jié)果也只能說(shuō)“嘿嘿嘿”了襟交！只能說(shuō)專業(yè)的人做專業(yè)的事，才能把事情做好伤靠。 保密原因捣域，需求原型不能放出。
小程序代碼入口
小程序代碼基本介紹
- index.js:業(yè)務(wù)處理代碼宴合，語(yǔ)法接觸過(guò)vue的一定不陌生焕梅，es6簡(jiǎn)潔明了，上手也很快卦洽！
- index.wxml:類似于html里<body></body>里的div結(jié)構(gòu)
- index.wxss:類似css
組件
html片段解析贞言，具體使用方法參考>微信小程序中如何使用wxParse解析html
上拉加載更多，再對(duì)應(yīng)頁(yè)面的json文件中開(kāi)啟刷新加載
onReachBottom: function() {
//上拉加載更多觸發(fā)
console.log("上拉")
wx.showToast({
title: '加載更多',
icon: 'loading',
duration: 1000
})
this.fetchSearchList();//請(qǐng)求接口價(jià)值下一頁(yè)數(shù)據(jù)
console.log(this.data.pageNum)
},
fetchSearchList: function() {//加載一次阀蒂，頁(yè)數(shù)加1
var that = this;
that.setData({
pageNum: that.data.pageNum + 1
});
wx.request({
url: getData.apiList.news,
data: {
'newsReq': {
'pageNum': that.data.pageNum,
'pageSize': that.data.pageSize
}
},
method: 'POST',
success: function(res) {
console.log(res);
console.log(res.data.errorCode);
if (res.data.errorCode == '1'){
wx.showToast({
title: '沒(méi)有更多了蜗字！',
image: '../../images/icons/close.png',
duration: 2000
})
}else{
if (!res.data.newsList.length == 0) {
// success
let list = res.data.newsList;
list.forEach(function (a) {
a.title = strDiscode(a.title);
});
console.log(list);
that.data.newsList = that.data.newsList.concat(list);
that.setData({
newsList: that.data.newsList
});
} else {
//沒(méi)有數(shù)據(jù)了
wx.showToast({
title: '沒(méi)有更多了！',
image: '../../images/icons/close.png',
duration: 2000
})
}
}
},
fail: function(res) {
// fail
},
complete: function(res) {
// complete
}
})
}
layer彈窗組件脂新，選擇用小程序自帶的wx.showToast等方法挪捕，具體使用參見(jiàn)官方文檔鏈接
地址組件、列表組件争便、數(shù)據(jù)請(qǐng)求組件级零，時(shí)間關(guān)系暫時(shí)沒(méi)有單獨(dú)擼出來(lái)
總結(jié)
因?yàn)樾〕绦騼?nèi)有疑似食品銷(xiāo)售內(nèi)容，公司又沒(méi)有相關(guān)證件，最終小程序雖然開(kāi)發(fā)出來(lái)了奏纪，但是也胎死腹中鉴嗤。但是通過(guò)這個(gè)小嘗試也體驗(yàn)了一波前后端分離，組件開(kāi)發(fā)序调。
