小程序1月9正式发布了，我手机朋友圈被各种关于小程序的消息霸屏了。说实话我也不知道小程序以后会是怎么样，不过出于好奇，恰巧今天有时间去简单了的把公司的项目用小程序简单实现了，只是实现了列表，就当试试水。
参考
小程序简易教程
先来张效果图
不得不说实现起来还是非常方便的
实现
简单说明：小程序中app.js 和app.json是必须要的，在app.js中处理程序的生命周期相关，app.jaon 页面配置。页面也是有.wxml、.json 为必须有.wxss相当于h5中.css，在.js中处理页面交互逻辑和数据更新
1、我们首先搭建简单的tab框架，在app.jason中实现
首先设置页面的路径，我们有三个页面首页、视频、我的
"pages": [
"pages/home/home",
"pages/video/video",
"pages/mine/mine"
],
然后是对tabBar的设置
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "images/home .png",
"selectedIconPath": "images/reload.png"
},{
"pagePath": "pages/video/video",
"text": "视频",
"iconPath": "images/playn.png",
"selectedIconPath": "images/home_play.png"
},{
"pagePath": "pages/mine/mine",
"text" : "我的",
"iconPath": "images/mine.png",
"selectedIconPath": "images/selectedMine.png"
}],
"selectedColor": "#AF262A",
"borderStyle": "white"
}
tabBar属性的介绍
list中属性的介绍
然后就是各个页面的实现的，先看下基本的结构图
推荐，文件命名和文件夹命名保持一致。
2、首页新闻列表的实现
首先要获取到新闻数据，然后把数据展示出来。
问题1：怎么发网络请求？
使用微信的API，他都封装好了，返回都是解析好的数据，直接就能用非常方便。
loadOriginData:function(isLoadMore){
var _this = this;
_this.setData({
hiddenLoading:false
})
wx.request({
url: 'http://api.myxianwen.cn/1/news/getlist',
data: {
"app_id":"104",
"equip_type":"1",
"num":"10",
"start":"0",
"t_login":"0",
"timestamp":"0",
"type_id":"0",
"uid":"60",
"updown":"0",
"uuid":"6E00C8BD-50D3-4672-8641-D45B3081E3B4",
"version":"3.7.0"
},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function(res){
// success
console.log(res.data)
if (isLoadMore) {
_this.setData({
newsList : _this.data.newsList.concat(res.data.data),
})
console.log("这是上拉加载更多的调用")
}else {
_this.setData({
newsList : res.data.data,
})
}
},
fail: function() {
// fail
_this.setData({
hiddenLoading:false
})
wx.stopPullDownRefresh()
},
complete: function() {
// complete
console.log("掉用完成了")
_this.setData({
hiddenLoading:true
})
wx.stopPullDownRefresh()
}
})
}
简单说明：a、url即请求的url
b、data中请求需要拼接的一些参数
c、method是请求的方法GET、POST等
d、success 请求成功回调
e、fail 请求失败回调
f、complete请求完成回调
这里我开始写的时候遇到一个坑，就是this在网络请求成功回调中直接使用，data也不能直接赋值要用setData方法。
后面就是列表的实现，小程序的<block>标签实现和iOS中的tabview类似，这里就不贴代码了。实现起来也是比较简单。
作为一个开发者，我想说说我对小程序的看法，我们用安卓手机分析它的实现其实是个webview，然后微信对html5进行了一些他们封装，尽管也可以调用相册相机录音等功能，但时间最多为60s.不过微信也提供很多Api，封装了一些常用的组件，让开发更加简单和快捷。还有可能微信也做了些优化，是它体验比html5要好。所以它和原生的体验还是差距还是有的，个人觉得大家都这么热捧小程序主要是看重微信的巨大流量。可以问题来了，每次我要用个服务我都要打开微信，扫一扫或者搜索，本来我可以一步完成的操作完成硬是要我两步操作，这里面是有很多时间成本的。我反正暂时不习惯，除非小程序真的渗透到生活的各个角落，那可能会是另外一说。
似乎扯多了，还是打卡下班，祝大家周末愉快！！
