国庆利用了些闲暇的时间看了下关于微信小程序的资料以及一些 demo。顺便想对比下开发 Testerhome 的 app 的成本多大。

由于微信实际上大多数的接口都已经封装的很好了，所以你需要做的东西真的是很少的了，我们先看看实际的效果图

我们简单的从几个地方入手开始开发 (如果对于微信小程序什么都不太清楚的话,可以参考下框架目录结构)

• tabBar 由于是没有支持 Android drawlayout 的控件的，通用的还是 tabBar, 所以我们使用它来做为程序的几大模块，在 app.json 中配置好我们的 tabBar

"tabBar": {
  "color": "#9B9DB1",
  "selectedColor": "#3cc51f",
  "borderStyle": "black",
  "backgroundColor": "#ffffff",
  "list": [{
    "pagePath": "pages/home/home",
    "iconPath": "images/tab_main_home.png",
    "selectedIconPath": "images/tab_main_home.png",
    "text": "社区"
  }, {
    "pagePath": "pages/topics/topics",
    "iconPath": "images/tab_main_topic.png",
    "selectedIconPath": "images/tab_main_topic.png",
    "text": "话题"
  },
   {
    "pagePath": "pages/job/job",
    "iconPath": "images/tab_main_job.png",
    "selectedIconPath": "images/tab_main_job.png",
    "text": "招聘"
  }

• 顶部的 tab, 这里实际上只是说是 css 样式的问题了，

<view class="top-bar">
    <view class="top-bar-item" style="color:{{recent}}" id="recent" catchtap="onTapTag">最新</view>
    <view class="top-bar-item" style="color:{{popular}}" id="popular" catchtap="onTapTag">最热</view>
    <view class="top-bar-item" style="color:{{no_reply}}" id="no_reply" catchtap="onTapTag">沙发</view>
    <view class="top-bar-item" style="color:{{excellent}}" id="excellent" catchtap="onTapTag">精华</view>
  </view>

aa

.top-bar-item {
  display:inline-block;
  width: 25%;
  text-align: center;
  line-height: 36px;
  font-size: 14px;
}

以上实际上就是 html 跟 css 了。
上面的 color 根据 page 页面中 data 的数据 进行实时的更改 (这个是微信小程序中天然的一套数据和 UI 绑定的机制) 并且同时绑定了一个点击事件, 对每次的点击请求不同的数据，同时更改 tab 的颜色等。

• 列表的处理， 这里可以参考列表渲染 用到 wx:for 即可。

<block wx:for-items="{{datas}}" wx:for-item="item">
  <view  id="{{item.id}}"  class="posts-item" bindtap="didSelectCell" >
    <image class="cellimage" mode="scaleToFill" src="{{item.user.avatar_url}}"/>
    <view class="celllabel">
      <text class="celltext" >{{item.title}}</text>
      <view class="cellrow">
        <text class="celldetail">{{item.user.login}}</text>
        <text class="celltip">{{item.created_at}}</text>
      </view>
      <view class="cellrow">
        <text class="celldetail">{{item.node_name}}</text>
        <view class="replycountBg">
            {{item.replies_count}}
        </view>
      </view>
    </view>
  </view>
</block>

上边的 datas 实际上就是我们页面加载时，获取到的接口数据。
当然这里面还会涉及到 banner 轮播图的显示，这里需要考虑哪里需要显示他，哪里不显示，所以需要用到 wx:if。具体代码可以参考 github 上的weixin_Testerhome

总结

• 微信小程序的开发效率高, 对于有前端基础的花一天多的时间基本就能够搞定了
• 部分东西还是限制了，类似于不能够跳转外部链接, 目前文本不支持 html。等等
• 微信小程序感觉更适用于刚需低频的应用，类似于 天气，航班等。当然 web 资讯类阅读的也很合适。

参考资料

工具下载地址
开发文档
微信小程序 cnode 社区版本