小程序之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框架布局好：viewclass="weui-navbarnavbar"blockwx:for="{{tabs}}"wx:key="*this"viewid="{{index}}"class="weui-navbar__item{{activeIndex==index?'weui-bar__item_on':''}}"bindtap="tabClick"viewclass="weui-navbar__title"{{item}}/view/view/blockviewclass="weui-navbar__slider"style="left:{{sliderLeft}}px;transform:translateX({{sliderOffset}}px);-webkit-transform:translateX({{sliderOffset}}px);"/view/view

1.其中activeIndex是用来控制显示我参加的还是我发布的页面下的内容，{{item}}看代码都知道是显示navbar的文字的啦

然后就是里面显示任务列表的UI了，我参加的还是我发布的页面下都是分别显示正在进行或已结束的任务列表，并且只能显示前3个，如果有超过3个的任务会有查看更多按钮给用户跳转到更多活动页面：viewclass="weui-tab__content"hidden="{{activeIndex!=0}}"viewclass="weui-panel"viewclass="weui-panel__hdmy-activity-green"正在进行/viewviewclass="weui-panel__bd"viewclass="weui-media-boxweui-media-box_small-appmsg"viewclass="weui-cellsweui-cells_in-small-appmsg"blockwx:for="{{activityJoinIng}}"wx:key="{{index}}"wx:if="{{index3}}"viewclass="weui-cellweui-cell_access"hover-class="weui-cell_active"data-mid="{{item.mid}}"data-type="joinIng"bindtap='onGoJoinIngDetail'viewclass="weui-cell__hd"imagesrc="{{item.imgs_url}}"style="width:20px;height:20px;margin-right:5px"//viewviewclass="weui-cell__bdweui-cell_primary"view{{item.title}}/view/viewviewclass="weui-cell__ftweui-cell__ft_in-access"/view/view/blockviewhidden="{{activityJoinIng.length=3}}"class="weui-cellweui-cell_access"hover-class="weui-cell_active"data-type="joinIng"bindtap='onGoMoreAcitivity'viewclass="weui-cell__bdweui-cell_primarymy-activity-blue"view查看更多/view/viewviewclass="weui-cell__ftweui-cell__ft_in-access"/view/view/view/view/view/viewviewclass="weui-panel"viewclass="weui-panel__hdmy-activity-red"已完成/viewviewclass="weui-panel__bd"viewclass="weui-media-boxweui-media-box_small-appmsg"viewclass="weui-cellsweui-cells_in-small-appmsg"blockwx:for="{{activityJoinEnd}}"wx:key="{{index}}"wx:if="{{index3}}"viewclass="weui-cellweui-cell_access"hover-class="weui-cell_active"data-mid="{{item.mid}}"data-type="joinEnd"bindtap='onGoJoinIngDetail'viewclass="weui-cell__hd"imagesrc="{{item.imgs_url}}"style="width:20px;height:20px;margin-right:5px"//viewviewclass="weui-cell__bdweui-cell_primary"view{{item.title}}/view/viewviewclass="weui-cell__ftweui-cell__ft_in-access"/view/view/blockviewhidden="{{activityJoinEnd.length=3}}"class="weui-cellweui-cell_access"hover-class="weui-cell_active"data-type="joinEnd"bindtap='onGoMoreAcitivity'viewclass="weui-cell__bdweui-cell_primarymy-activity-blue"view查看更多/view/viewviewclass="weui-cell__ftweui-cell__ft_in-access"/view/view/view/view/view/view

2.代码里activityJoinIng和activityJoinEnd是定义的数组，用于从逻辑层获取数据渲染任务列表的，主要用到wx:for循环渲染。

布局说难不难，说容易也不是那么容易，对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);varapi=[],ape=[];if(res.data.publish!=null){for(vari=0,len=res.data.publish.length;ilen;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});}});}}总结

3.小程序和Web相似，但还是有不少是有所区别的，个人觉得小程序更好入门吧，如果有兴趣可以去我项目的github地址看看：Github传送门