前言
2017年微信公开课PRO版现场，张小龙宣布，微信小程序将于1月9日正式上线，并现场对小程序做了全面阐述，回答大家最关心的问题。
我大DC作为一个有“科技”含量的互联网公司，在这波热潮下怎么也得凑一波热闹！于是在我的“怂恿”下，我们前端部门开始了微信小程序的踩坑之路。
需求梳理
按照正常的软件开发流程来讲，应该是产品那边先提供原型和文档，然后我们的UI开始设计，但是当时我们产品组全力在搞消费端的APP人员短缺，作为一个喜欢折腾（其实是没有产品资源）的人来讲，最终选择自己来撸原型。最终的结果也只能说“嘿嘿嘿”了！只能说专业的人做专业的事，才能把事情做好。 保密原因，需求原型不能放出。
小程序代码入口
小程序代码基本介绍
- index.js:业务处理代码，语法接触过vue的一定不陌生，es6简洁明了，上手也很快！
- index.wxml:类似于html里<body></body>里的div结构
- index.wxss:类似css
组件
-
html片段解析，具体使用方法参考>微信小程序中如何使用wxParse解析html
-
上拉加载更多，再对应页面的json文件中开启刷新加载
onReachBottom: function() {
//上拉加载更多触发
console.log("上拉")
wx.showToast({
title: '加载更多',
icon: 'loading',
duration: 1000
})
this.fetchSearchList();//请求接口价值下一页数据
console.log(this.data.pageNum)
},
fetchSearchList: function() {//加载一次，页数加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: '没有更多了！',
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 {
//没有数据了
wx.showToast({
title: '没有更多了！',
image: '../../images/icons/close.png',
duration: 2000
})
}
}
},
fail: function(res) {
// fail
},
complete: function(res) {
// complete
}
})
}
-
layer弹窗组件，选择用小程序自带的wx.showToast等方法，具体使用参见官方文档链接
-
地址组件、列表组件、数据请求组件，时间关系暂时没有单独撸出来
总结
因为小程序内有疑似食品销售内容，公司又没有相关证件，最终小程序虽然开发出来了，但是也胎死腹中。但是通过这个小尝试也体验了一波前后端分离，组件开发。
