小程序之UI控件,页面布局和网络访问个人感觉小程序结构很像Web应用，不过经微信改版的js更像Nodejs的风格。
一、小程序UI微信小程序有自己一套UI组件风格，所以官方还是建议用微信推荐的组件。WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计：https://github.com/Tencent/weui-wxss
想详细学习WeUI组件信息还是建议参考官网：https://developers.weixin.qq.com/miniprogram/dev/component/
项目实现过程
先说一下我们的项目内容，我们的项目是实现一个简单的挣闲钱小程序，主要功能是发布活动，接活动，查看活动。我是负责查看登录后的用户的发布任务信息和参加任务信息。主要界面如图：
说下页面的UI吧，我参加的和我发布的是两个navbar，WeUI有实现的wxml和js代码，首先在wxml把这个navbar框架布局好：
{{item}}
其中activeIndex是用来控制显示我参加的还是我发布的页面下的内容，{{item}}看代码都知道是显示navbar的文字的啦
代码里activityJoinIng和activityJoinEnd是定义的数组，用于从逻辑层获取数据渲染任务列表的，主要用到wx:for循环渲染。正在进行 {{item.title}} 查看更多 已完成 {{item.title}} 查看更多
布局说难不难，说容易也不是那么容易，对css熟悉的话应该问题不大，下面说下小程序的网络访问吧，小程序提供的网络访问API还是很好用的：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html 。下面是我实现的页面主要的网络请求访问：
wx.request({ url: 'https://happyzhier.club/user?uid=' + userID, method: 'GET', dataType: 'json', header: { 'content-type': 'application/json' }, success: function (res) { //console.log(res.data); var api = [], ape = []; if (res.data.publish != null) { for (var i = 0, len = res.data.publish.length; i < len; i++) { wx.request({ url: 'http://happyzhier.club:3000/mission?mid=' + res.data.publish[i].mid, method: 'GET', dataType: 'json', header: { 'content-type': 'application/json' }, success: function (res) { //console.log(res.data); if (res.data.ing == true) { api.push(res.data); } else { ape.push(res.data); } that.setData({ activityPublishIng: api, activityPublishEnd: ape }); } }); } }小程序和Web相似，但还是有不少是有所区别的，个人觉得小程序更好入门吧
