通用技术 微信小程序-Testerhome

saii · 2016年10月09日 · 最后由 Heyniu 回复于 2016年10月10日 · 200 次阅读

国庆利用了些闲暇的时间看了下关于微信小程序的资料以及一些 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 社区版本

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 5 条回复 时间 点赞

好棒~!国庆本来也想看看,结果净玩了~😂

不错. 比微信原来丑陋的菜单是个很大的进步了. 后面我们也规划下如何把 testerhome 做成微信号. 加我微信 seveniruby. 我邀请你加入 testerhome 的技术维护群.

👍 我公司也准备搞微信小程序

@heyniu 你公司?你都开公司啦?👍

#4 楼 @lucasluo 开飞机,可能我说的不够好,是我们公司

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册