微信小程序-Testerhome
来源:互联网 发布:三维动画制作软件手机 编辑:程序博客网 时间:2024/04/30 10:45
国庆利用了些闲暇的时间看了下关于微信小程序的资料以及一些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>
.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社区版本
0 0
- 微信小程序-Testerhome
- testerhome
- https://testerhome.com/topics/4695
- TesterHome android app 编写历程(一)
- TesterHome android app 编写历程(二)
- TesterHome android app 编写历程(三)
- TesterHome android app 编写历程(四)
- TesterHome android app 编写历程(六)
- TesterHome android app 编写历程(五)
- 腾讯WeTest&TesterHome手游测试沙龙
- 微信小程序
- 微信小程序
- 微信小程序
- 微信小程序
- 微信小程序
- 微信小程序
- 微信小程序
- 微信小程序
- 拦截器实现未登录跳转
- unity中对象池运用
- Python yield 使用浅析
- maven编写配置文件遇到的问题
- 线程安全
- 微信小程序-Testerhome
- 开始博客第一天
- okHttp的学习
- Mock Server利器 - Moco
- LeetCode-Rotate List
- Java笔记- 多线程-死锁
- 阅读过的文章列表
- 对Rockerstar Games这个公司GTA5这个游戏的看法
- 单片机中数码管蜂鸣器炸弹