这周，你被微信小程序刷屏了吗？ 反正本猿被刷屏了~~~~本猿最先看到微信小程序相关的文章，应该是冯大辉老师的「微信公众号来了」, 据MAC君透露，这篇文章寥寥几百字，一天内阅读量过百万。。。这是要全猿开发微信小程序的节奏撒！！
本猿表示绝不能落伍，于是趁着周末，开始微信小程序开发之旅！各位猿们，上车咯~
一言不合就上效果图哈，辣这个demo是肿么做出来的咧？莫急莫急，且听本猿慢慢道来哈~
环境搭建
开发微信小程序，首先肯定是搭建环境啦，你可以选择根据github上的这个repo进行下载安装，也可以下载这个压缩包,快速完成安装哈，这个安装包里有如下文件：
接下来的步骤是：(Update： 已经不用做下面这三个步骤啦，直接进repo链接下载最新的9.0版,直接安装哈)
安装wechat_web_devtools_0.7.0_x64，并用它跟手机微信实现登录
覆盖安装wechat_web_devtools_0.9.092100_x64
将weapp-ide-crack-master文件夹中的三个文件，放到安装程序目录对应的地方：
微信web开发者工具\package.nw\app\dist\components\create\reatestep.js
微信web开发者工具\package.nw\app\dist\stroes\projectStores.js
微信web开发者工具\package.nw\app\dist\weapp\appservice\asdebug.js
做完上述步骤，就可以愉快的打开微信的IDE啦~
接下来，就是程序员的惯例：helloworld！
创建项目，填好相关input选项，点击添加项目，搞定！
太简单？没错，就是这么简单，哈哈，如果要复杂点，用IDE打开本猿提供的压缩包中的webapp-demo。
它提供了所有组件和API的使用范例，如下图：
相信玩过react native的童鞋一定会觉得似曾相识，没错，这个DEMO就像react native官方提供的UIExplorer一样哈！通过这个demo，我们就可以照着做一个DEMO啦。
代码结构概览分析
搭完环境，就可以愉快的码代码了，我们先来看下刚新建项目的代码结构：
我们先关注根目录下最主要的三个文件：
app.js我们暂时不需要改，首先配置好app.json，要点如下：
- 将你要建立的page路径加到pages配置项上
- 配置window配置项上的标题栏颜色 / 风格 / 内容等
- 配置tabbar配置项上的内容 / icon等
- 设置debug配置项，方便打log
{
"pages":[
"pages/index/index",
"pages/index/view/info-list",
"pages/index/view/info-detail",
"pages/logs/logs",
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#4DBBFF",
"navigationBarTitleText": "微信VR视频资源推荐",
"navigationBarTextStyle":"white"
},
"tabBar": {
"color": "#dddddd",
"selectedColor": "#4DBBFF",
"borderStyle": "white",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL_blue.png",
"text": "首页"
}, {
"pagePath": "pages/index/view/info-list",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL_blue.png",
"text": "VR列表"
}]
},
"networkTimeout": {
"request": 10000,
"connectSocket": 10000,
"uploadFile": 10000,
"downloadFile": 10000
},
"debug": true
}
至于app.wxss, 如果多个页面中的样式有重复，需要复用，可以在app.wxss上写哈~~
接下来就写页面啦，通过app.json,大家可以看出，我总共就三个page而已哈（另外一个自带的，log记录之类的，忽略）
我们先来了解下page的生命周期回调函数：
| 命令 | 描述 |
|---|---|
| onLoad | 生命周期函数--监听页面加载 |
| onReady | 生命周期函数--监听页面渲染完成 |
| onShow | 生命周期函数--监听页面显示 |
| onHide | 生命周期函数--监听页面隐藏 |
| onUnload | 生命周期函数--监听页面卸载 |
在写这三个page时，主要用到了三个组件，第一个是swiper，也就是滑动面板，代码如下：
//index.wxml
{{item.article.title}}
i
//index.js
get_vr_swiper_info: function() {
console.log('get_vr_info')
var swiper_offset = parseInt( 800 * Math.random() );
var that = this
wx.request({
url: API_URL + swiper_offset,
success: function(response) {
that.setData({
swiper_list: response.data.result
})
}
});
}
第二个是可滚动视图scrollview,代码如下
//index.wxml
{{item.article.title}}
//index.js
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
},
scrollToTop: function(e) {
this.setAction({
scrollTop: 0
})
},
tap: function(e) {
for (var i = 0; i < order.length; ++i) {
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1],
scrollTop: (i + 1) * 200
})
break
}
}
},
tapMove: function(e) {
this.setData({
scrollTop: this.data.scrollTop + 10
})
},
第三个是navigator，负责页面间的跳转，代码上面其实也有了，主要就是声明好标签，并写上url路径就行啦。
另外还需要了解三个主要接口：
- wx.request()
- wx.setStorage()
- wx.getStorage()
wx.request({
url: API_URL + vr_list_offset,
success: function(response) {
that.setData({
vr_list: response.data.result
})
}
});
wx.setStorage({
key:"vr_list",
data:that.data.vr_list
});
wx.getStorage({
key:'vr_list',
success:function(res){
console.log(res.data);
}
});
了解完这几个点之后，就可以动手做一个基础的demo啦，祝各位好运撒！
开发观感
本猿之前也玩过react native,据我粗浅的理解，微信小程序的DEMO搭建相对RN会容易些，开发效率更高，但当前的API文档太过简陋了，相关的组件描述也太少。
IDE有待改进，还木有linux环境，不嗨森！！BTW,强烈建议支持VIM
navigator实现page间的跳转，但缺少能跳转并传递对象的方法啊，难道只能通过setStorage()? 还是我没找到？？
组件少了点啊，木有webview，木有iframe~~~
相关参考
微信小程序设计指南
微信小程序开发指南
微信公众平台 |小程序 API文档
微信小应用资源汇总整理
相关源码
本文Demo源码