- _工具_: [微信 web 开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1477579747265)
- 已经全面对非邀请内测用户开放, 且在持续更新
- _设计和功能_: 知乎安卓版本 非常之简易版
- _数据_: 毕竟是知乎, 为了防止版权问题, fake 的数据使用的是我自己的回答, 所以...
app.json:
- {
- "pages":[
- "pages/index/index",
- "pages/discovery/discovery",
- "pages/notify/notify",
- "pages/chat/chat",
- "pages/more/more",
- "pages/answer/answer",
- "pages/question/question"
- ],
- "window":{
- "backgroundTextStyle":"light",
- "navigationBarBackgroundColor": "#0068C4",
- "navigationBarTitleText": "知乎",
- "navigationBarTextStyle":"white",
- "enablePullDownRefresh":true
- },
- "tabBar": {
- "color": "#626567",
- "selectedColor": "#2A8CE5",
- "backgroundColor": "#FBFBFB",
- "borderStyle": "white",
- "list": [{
- "pagePath": "pages/index/index",
- "text": "",
- "iconPath": "images/index.png",
- "selectedIconPath": "images/index_focus.png"
- }, {
- "pagePath": "pages/discovery/discovery",
- "text": "",
- "iconPath": "images/discovery.png",
- "selectedIconPath": "images/discovery_focus.png"
- }, {
- "pagePath": "pages/notify/notify",
- "text": "",
- "iconPath": "images/ring.png",
- "selectedIconPath": "images/ring_focus.png"
- }, {
- "pagePath": "pages/chat/chat",
- "text": "",
- "iconPath": "images/chat.png",
- "selectedIconPath": "images/chat_focus.png"
- }, {
- "pagePath": "pages/more/more",
- "text": "",
- "iconPath": "images/burger.png",
- "selectedIconPath": "images/burger_focus.png"
- }]
- },
- "networkTimeout": {
- "request": 10000,
- "downloadFile": 10000
- },
- "debug": true
- }
- index.wxml
- index.wxss
- index.js
后面将对于一些我 demo 中写到用到的部分进行说明
列表式的数据渲染
首页
类似于首页以及发现页这种标准列表式的数据展现方式, 微信提供了很好的方案---列表渲染
- <block wx:for="{{feed}}" wx:for-index="idx" wx:for-item="item" data-idx="{{idx}}">
- <view class="feed-item">
- <view class="feed-source">
- <a class="">
- <view class="avatar">
- <image src="{{item.feed_source_img}}"></image>
- </view>
- <text>{{item.feed_source_name}}{{item.feed_source_txt}}</text>
- </a>
- <image class="item-more" mode="aspectFit" src="../../images/more.png"></image>
- </view>
- <view class="feed-content">
- <view class="question" qid="{{question_id}}" bindtap="bindQueTap">
- <a class="question-link">
- <text>{{item.question}}</text>
- </a>
- </view>
- <view class="answer-body">
- <view bindtap="bindItemTap">
- <text class="answer-txt" aid="{{answer_id}}">{{item.answer_ctnt}}</text>
- </view>
- <view class="answer-actions" bindtap="bindItemTap">
- <view class="like dot">
- <a>{{item.good_num}} 赞同 </a>
- </view>
- <view class="comments dot">
- <a>{{item.comment_num}} 评论 </a>
- </view>
- <view class="follow-it">
- <a>关注问题</a>
- </view>
- </view>
- </view>
- </view>
- </view>
- </block>
- for="{{}}"中的内容是想要循环的一组数据, 最外层为数组结构
- for-item 指定数组中当前元素的变量名
- for-index 指定数组中当前元素下标变量名
微信只提供了底部 tabbar, 所以顶部的要自己写喽~
顶部 tabbar 的实现在于 for 列表渲染以及 js 配合
wxml:
- <view class="top-tab flex-wrp flex-tab " >
- <view class="toptab flex-item {{currentNavtab==idx ? 'active' : ''}}" wx:for="{{navTab}}" wx:for-index="idx" wx:for-item="itemName" data-idx="{{idx}}" bindtap="switchTab">
- {{itemName}}
- </view>
- </view>
- <scroll-view scroll-y="true" class="container discovery withtab" bindscrolltoupper="upper" bindscrolltolower="lower" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
- <view class="ctnt0" hidden="{{currentNavtab==0 ? '' : true}}">
- </view>
- <view class="ctnt1 placehold" hidden="{{currentNavtab==1 ? '' : true}}">
- <text>圆桌</text>
- </view>
- <view class="ctnt2 placehold" hidden="{{currentNavtab==2 ? '' : true}}">
- <text>热门</text>
- </view>
- <view class="ctnt3 placehold" hidden="{{currentNavtab==3 ? '' : true}}">
- <text>收藏</text>
- </view>
- </scroll-view>
- //discovery.js
- Page({
- data: {
- navTab: ["推荐", "圆桌", "热门", "收藏"],
- currentNavtab: "0"
- },
- onLoad: function () {
- console.log('onLoad')
- },
- switchTab: function(e){
- this.setData({
- currentNavtab: e.currentTarget.dataset.idx
- });
- }
- });
由于微信不支持任何 dom 和 window 对象, 所以 tabbar的实现依赖于微信提供的视图层的展示逻辑, 以及视图与数据之间的绑定机制.
绑定点击事件, 通过改变一个 data- 属性的值, 来控制元素的类的改变( 从而改变样式等 )
- <swiper class="activity" indicator-dots="{{indicatorDots}}"
- autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
- <block wx:for="{{imgUrls}}">
- <swiper-item>
- <image src="{{item}}" class="slide-image" width="355" height="155"/>
- </swiper-item>
- </block>
- </swiper>
- 作者:Rebecca Han
- 链接:https://zhuanlan.zhihu.com/p/23394858
- 来源:知乎
- 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
- imgUrls: [
- '../../images/24213.jpg',
- '../../images/24280.jpg',
- '../../images/1444983318907-_DSC1826.jpg'
- ],
- indicatorDots: false,
- autoplay: true,
- interval: 5000,
- duration: 1000,
- feed: [],
- feed_length: 0
- 作者:Rebecca Han
- 链接:https://zhuanlan.zhihu.com/p/23394858
- 来源:知乎
- 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
- <scroll-view scroll-y="true" class="container" bindscrolltoupper="upper" upper-threshold="10" lower-threshold="5" bindscrolltolower="lower" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
- <block wx:for="{{feed}}" wx:for-index="idx" wx:for-item="item" data-idx="{{idx}}">
- <view class="feed-item">
- <view class="feed-source">
- <a class="">
- <view class="avatar">
- <image src="{{item.feed_source_img}}"></image>
- </view>
- <text>{{item.feed_source_name}}{{item.feed_source_txt}}</text>
- </a>
- <image class="item-more" mode="aspectFit" src="../../images/more.png"></image>
- </view>
- <view class="feed-content">
- <view class="question" qid="{{question_id}}" bindtap="bindQueTap">
- <a class="question-link">
- <text>{{item.question}}</text>
- </a>
- </view>
- <view class="answer-body">
- <view bindtap="bindItemTap">
- <text class="answer-txt" aid="{{answer_id}}">{ {item.answer_ctnt}}</text>
- </view>
- <view class="answer-actions" bindtap="bindItemTap">
- <view class="like dot">
- <a>{{item.good_num}} 赞同 </a>
- </view>
- <view class="comments dot">
- <a>{{item.comment_num}} 评论 </a>
- </view>
- <view class="follow-it">
- <a>关注问题</a>
- </view>
- </view>
- </view>
- </view>
- </view>
- </block>
- </scroll-view>
- upper: function () {
- wx.showNavigationBarLoading()
- this.refresh();
- console.log("upper");
- setTimeout(function(){wx.hideNavigationBarLoading();wx.stopPullDownRefresh();}, 2000);
- },
- lower: function (e) {
- wx.showNavigationBarLoading();
- var that = this;
- setTimeout(function(){wx.hideNavigationBarLoading();that.nextLoad();}, 1000);
- console.log("lower")
- },
- //scroll: function (e) {
- // console.log("scroll")
- //},
- //网络请求数据, 实现刷新
- refresh0: function(){
- var index_api = '';
- util.getData(index_api)
- .then(function(data){
- //this.setData({
- //
- //});
- console.log(data);
- });
- },
- //使用本地 fake 数据实现刷新效果
- refresh: function(){
- var feed = util.getDiscovery();
- console.log("loaddata");
- var feed_data = feed.data;
- this.setData({
- feed:feed_data,
- feed_length: feed_data.length
- });
- },
- //使用本地 fake 数据实现继续加载效果
- nextLoad: function(){
- var next = util.discoveryNext();
- console.log("continueload");
- var next_data = next.data;
- this.setData({
- feed: this.data.feed.concat(next_data),
- feed_length: this.data.feed_length + next_data.length
- });
- }
由于是 fake 的数据, 所以这个 demo 并没有做真实的带参跳转, 查询等功能
加载数据的同时, 使用微信提供的加载动画wx.showNavigationBarLoading();
- 绑定点击事件, 进行页面的跳转wx.navigateTo
- 部分模块化
- input, image 组件等