欢迎光临,了解微信小程序开发,就上易用通!

当前位置 : 易用通 > 小程序模板
微信小程序-仿知乎微信小程序-仿知乎
立即下载

微信小程序-仿知乎

模板分类 : 小程序模板 模板编号 : Y173 源码文件 : 完全开源 下载权限 : VIP会员
模板大小 :  模板指数 :  更新时间 : 2018-01-16 15:30 模板等级 : ☆☆☆☆☆

模板截图:

demo 的界面设计以及交互设计均来自于知乎 Android 版本
  • _工具_: [微信 web 开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1477579747265)
  • 已经全面对非邀请内测用户开放, 且在持续更新
(我码代码的过程中就更新了两版, 所以开发时 IDE 版本不唯一) 不过其实忍受了半个小时微信的开发者工具之后, 我就改在 webstorm 中编辑了, 微信工具成了运行预览的工具, 不过听说IDE 中预览的效果, 也不能保证与真机一样哦~
  • _设计和功能_: 知乎安卓版本 非常之简易版
  • _数据_: 毕竟是知乎, 为了防止版权问题, fake 的数据使用的是我自己的回答, 所以...
1. 基础文件
app.json:
  1. {
  2.   "pages":[
  3.     "pages/index/index",
  4.     "pages/discovery/discovery",
  5.     "pages/notify/notify",
  6.     "pages/chat/chat",
  7.     "pages/more/more",
  8.     "pages/answer/answer",
  9.     "pages/question/question"
  10.  
  11.   ],
  12.   "window":{
  13.     "backgroundTextStyle":"light",
  14.     "navigationBarBackgroundColor": "#0068C4",
  15.     "navigationBarTitleText": "知乎",
  16.     "navigationBarTextStyle":"white",
  17.     "enablePullDownRefresh":true
  18.   },
  19.   "tabBar": {
  20.     "color": "#626567",
  21.     "selectedColor": "#2A8CE5",
  22.     "backgroundColor": "#FBFBFB",
  23.     "borderStyle": "white",
  24.     "list": [{
  25.       "pagePath": "pages/index/index",
  26.       "text": "",
  27.       "iconPath": "images/index.png",
  28.       "selectedIconPath": "images/index_focus.png"
  29.     }, {
  30.       "pagePath": "pages/discovery/discovery",
  31.       "text": "",
  32.       "iconPath": "images/discovery.png",
  33.       "selectedIconPath": "images/discovery_focus.png"
  34.     }, {
  35.       "pagePath": "pages/notify/notify",
  36.       "text": "",
  37.       "iconPath": "images/ring.png",
  38.       "selectedIconPath": "images/ring_focus.png"
  39.     }, {
  40.       "pagePath": "pages/chat/chat",
  41.       "text": "",
  42.       "iconPath": "images/chat.png",
  43.       "selectedIconPath": "images/chat_focus.png"
  44.     }, {
  45.       "pagePath": "pages/more/more",
  46.       "text": "",
  47.       "iconPath": "images/burger.png",
  48.       "selectedIconPath": "images/burger_focus.png"
  49.     }]
  50.   },
  51.   "networkTimeout": {
  52.     "request": 10000,
  53.     "downloadFile": 10000
  54.   },
  55.   "debug": true
  56. }
复制代码
app.json文件中是对整个小程序的全局配置, 主要用到的字段有pages, window, tabBar, networkTimeout. * pages 字段:  所有小程序的页面都要在该字段中注册, 该字段数组中的第一个page 默认为小程序首页(设置tab 除外), 没有在 pages 字段注册过的页面貌似不能够进行有效的编译(之前版本的编辑器可以,只是会影响配置文件等的生效, 编辑器更新后会报未注册的错误). * window 字段:  大多是关于小程序顶部 navigationbar 的一些设置 * tabBar字段: 如果你需要首页面底部带tabbar的样式, 那么就在 tabBar 字段中设置每个 tab 对应的页面, 按顺序对应左至右, 包括路径, tab 文字, tab图标和选中状态图标. * netwoTimeout: 设置网络超时时间. * debug: 开启 debug 模式. app.wxss 文件中为全局样式, 也就是说这个文件中的样式在所有的 page 中均可使用, 若其他页面文件的 wxss 中定义了与该样式文件中相同的属性, 则该文件中的样式被覆盖, 规则与 css 优先规则大致相通. app.js: 调用 login接口, 回调, 周期函数, 本地存储等等逻辑代码. 2. 页面文件: 微信小程序-仿知乎(图1)  页面文件由四部分组成 例如我们有一个首页叫做 index, 则需要在 pages 文件夹下创建文件名相通的三个必要文件:
  • index.wxml
  • index.wxss
  • index.js
*另外 index.json文件为可选, 功能与 app.json 相同, 为该页面的配置文件, 但定义功能有限.* 3.  UI跟平时开发一样, 最开始当然是码 UI 除了需要依照微信的一些新的标签和样式规则, 其他与平时码 UI 并没有太大的不同 需要强调的是, flex 布局在微信小程序中 hin~~~~好用 不过, 同时作为女生和程序员, 不挑刺可就不是我了, 所以下面列举了一些我遇上的坑, 其中有些也许不正确(多多包涵啦\(//∇//)\), 有些也许已在 IDE 更新中修正 坑们: 1. 有一些 css 样式在微信 IDE 中不支持, 例如 font-weight, letter-spacing(及类似调整字间距的样式)等 2. <text/>不支持嵌套, 两层<text/>嵌套的结构下, 内层<text/>中的内容会连续显示两次 (在 IDE 后续更新中已修正) 3. 若<view/>与<text/>在结构上并列的话, 显示上会重合, 感受上类似<view/>级别高于<text/>, 防止内容相叠, 必须使用<view/>相并列. 所以并不能像某些地方说的, 把<view/>当做<div>去使用! 4. 元素之前有垂直相邻 margin 的时候(符合 margin 折叠规则), 在微信小程序中会double 显示, 即两个元素的 margin 均摊开, 不遵循 margin 折叠规则. 5. <view/>标签 hidden 属性无效 ( v0.10.101400 中已修正 ) 6. 部分情况下, 平级标签 A 与 B 并列, 当 B 通过某些调整向 A 元素位置相叠的时候, 微信 IDE 解析出的效果是 A 的内容和背景色会覆盖 B 元素与之重叠的部分. ( 普通浏览器解析应该是 B 覆盖 A ). 7. 如果用模板+列表渲染的方式来渲染数据的话, 在模板中使用列表渲染的{ {item}}是无效的, 无法被正确识别, 所以列表渲染的时候要把复用的部分写在列表渲染的代码块内 ( 属于数据渲染部分, 后面会提到 )
后面将对于一些我 demo 中写到用到的部分进行说明
列表式的数据渲染
首页
微信小程序-仿知乎(图2)
 
类似于首页以及发现页这种标准列表式的数据展现方式, 微信提供了很好的方案---列表渲染
  1.  
  2. <block wx:for="{{feed}}" wx:for-index="idx" wx:for-item="item" data-idx="{{idx}}">
  3.    <view class="feed-item">
  4.        <view class="feed-source">
  5.            <a class="">
  6.                <view class="avatar">
  7.                    <image src="{{item.feed_source_img}}"></image>
  8.                </view>
  9.                <text>{{item.feed_source_name}}{{item.feed_source_txt}}</text>
  10.            </a>
  11.            <image class="item-more" mode="aspectFit" src="../../images/more.png"></image>
  12.        </view>
  13.        <view class="feed-content">
  14.            <view class="question" qid="{{question_id}}" bindtap="bindQueTap">
  15.                <a class="question-link">
  16.                    <text>{{item.question}}</text>
  17.                </a>
  18.            </view>
  19.            <view class="answer-body">
  20.                <view bindtap="bindItemTap">
  21.                    <text class="answer-txt" aid="{{answer_id}}">{{item.answer_ctnt}}</text>
  22.                </view>
  23.                <view class="answer-actions" bindtap="bindItemTap">
  24.                    <view class="like dot">
  25.                        <a>{{item.good_num}} 赞同 </a>
  26.                    </view>
  27.                    <view class="comments dot">
  28.                        <a>{{item.comment_num}} 评论 </a>
  29.                    </view>
  30.                    <view class="follow-it">
  31.                        <a>关注问题</a>
  32.                    </view>
  33.                </view>
  34.            </view>
  35.        </view>
  36.    </view>
  37. </block>
复制代码
可以直观的看出, 就是 for 循环来用重复的结构渲染一组数据
  • for="{{}}"中的内容是想要循环的一组数据, 最外层为数组结构
  • for-item 指定数组中当前元素的变量名
  • for-index 指定数组中当前元素下标变量名
同样也使用了 for 渲染的还有顶部的发现页和通知页等顶部的自定义 tabbar 顶部 tabbar 实现 微信小程序-仿知乎(图3) 微信小程序-仿知乎(图4)微信小程序-仿知乎(图5) 
微信只提供了底部 tabbar, 所以顶部的要自己写喽~
顶部 tabbar 的实现在于 for 列表渲染以及 js 配合
wxml:
  1. <view class="top-tab flex-wrp flex-tab " >
  2.   <view class="toptab flex-item {{currentNavtab==idx ? 'active' : ''}}" wx:for="{{navTab}}" wx:for-index="idx" wx:for-item="itemName" data-idx="{{idx}}" bindtap="switchTab">
  3.     {{itemName}}
  4.   </view>
  5. </view>
  6. <scroll-view scroll-y="true" class="container discovery withtab" bindscrolltoupper="upper" bindscrolltolower="lower"  scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  7.   <view class="ctnt0" hidden="{{currentNavtab==0 ? '' : true}}">
  8.   </view>
  9.   <view class="ctnt1 placehold" hidden="{{currentNavtab==1 ? '' : true}}">
  10.     <text>圆桌</text>
  11.   </view>
  12.   <view class="ctnt2 placehold" hidden="{{currentNavtab==2 ? '' : true}}">
  13.     <text>热门</text>
  14.   </view>
  15.   <view class="ctnt3 placehold" hidden="{{currentNavtab==3 ? '' : true}}">
  16.     <text>收藏</text>
  17.   </view>
  18. </scroll-view>
复制代码
js:
  1. //discovery.js
  2. Page({
  3.   data: {
  4.     navTab: ["推荐", "圆桌", "热门", "收藏"],
  5.     currentNavtab: "0"
  6.   },
  7.   onLoad: function () {
  8.     console.log('onLoad')
  9.   },
  10.   switchTab: function(e){
  11.     this.setData({
  12.       currentNavtab: e.currentTarget.dataset.idx
  13.     });
  14.   }
  15. });
  16.  
复制代码
由于微信不支持任何 dom 和 window 对象, 所以 tabbar的实现依赖于微信提供的视图层的展示逻辑, 以及视图与数据之间的绑定机制.
绑定点击事件, 通过改变一个 data- 属性的值, 来控制元素的类的改变( 从而改变样式等 )
 
轮播图
  1. <swiper class="activity" indicator-dots="{{indicatorDots}}"
  2.        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  3. <block wx:for="{{imgUrls}}">
  4.    <swiper-item>
  5.      <image src="{{item}}" class="slide-image" width="355" height="155"/>
  6.    </swiper-item>
  7. </block>
  8. </swiper>
  9.  
  10. 作者:Rebecca Han
  11. 链接:https://zhuanlan.zhihu.com/p/23394858
  12. 来源:知乎
  13. 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
复制代码
  1. imgUrls: [
  2. '../../images/24213.jpg',
  3. '../../images/24280.jpg',
  4. '../../images/1444983318907-_DSC1826.jpg'
  5. ],
  6. indicatorDots: false,
  7. autoplay: true,
  8. interval: 5000,
  9. duration: 1000,
  10. feed: [],
  11. feed_length: 0
  12.  
  13. 作者:Rebecca Han
  14. 链接:https://zhuanlan.zhihu.com/p/23394858
  15. 来源:知乎
  16. 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
复制代码
轮播图的实现使用的是微信提供的 swiper 组件, 该组件贴心的提供了各种属性选择, 常用的包括autoplay, interval 时间, duration等 <swiper-item>中包含的是所有轮播的图片, 为了方便修改图片数据, 同样采用 for 渲染绑定 data 的方式 下拉刷新, 上拉加载, 以及数据请求 刷新及继续加载的动作, 依靠的是<scroll-view>标签, 及配套的upper 和 lower 事件 <scroll-view>标签的属性提供了 bindscrolltoupper 和 bindscrolltolower来绑定滚动到顶部及底部所触发的事件, 同时upper-threshold 和 lower-threshold 能够调整触发时距边界的距离 除上述之外, 还提供横向滚动, 滚动触发事件, 及设置滚动条位置等...
  1.  
  2. <scroll-view scroll-y="true" class="container" bindscrolltoupper="upper" upper-threshold="10" lower-threshold="5" bindscrolltolower="lower"  scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  3.     <block wx:for="{{feed}}" wx:for-index="idx" wx:for-item="item" data-idx="{{idx}}">
  4.         <view class="feed-item">
  5.             <view class="feed-source">
  6.                 <a class="">
  7.                     <view class="avatar">
  8.                         <image src="{{item.feed_source_img}}"></image>
  9.                     </view>
  10.                     <text>{{item.feed_source_name}}{{item.feed_source_txt}}</text>
  11.                 </a>
  12.                 <image class="item-more" mode="aspectFit" src="../../images/more.png"></image>
  13.             </view>
  14.             <view class="feed-content">
  15.                 <view class="question" qid="{{question_id}}" bindtap="bindQueTap">
  16.                     <a class="question-link">
  17.                         <text>{{item.question}}</text>
  18.                     </a>
  19.                 </view>
  20.                 <view class="answer-body">
  21.                     <view bindtap="bindItemTap">
  22.                         <text class="answer-txt" aid="{{answer_id}}">{ {item.answer_ctnt}}</text>
  23.                     </view>
  24.                     <view class="answer-actions" bindtap="bindItemTap">
  25.                         <view class="like dot">
  26.                             <a>{{item.good_num}} 赞同 </a>
  27.                         </view>
  28.                         <view class="comments dot">
  29.                             <a>{{item.comment_num}} 评论 </a>
  30.                         </view>
  31.                         <view class="follow-it">
  32.                             <a>关注问题</a>
  33.                         </view>
  34.                     </view>
  35.                 </view>
  36.             </view>
  37.         </view>
  38.     </block>
  39. </scroll-view>
复制代码
滚动至顶或至底时, 触发的加载数据的事件, 本应该调用微信提供的网络请求 API 来获取数据. 但是比较坑的是, 我在选择写仿知乎 demo 的时候没有注意到知乎不提供开放 API, 而微信的 API 不支持直接对.json 文件进行本地请求, 无奈之下, 选择在 js 文件中伪造一段数据, module.exports抛出, 来 fake 数据请求
  1. upper: function () {
  2.     wx.showNavigationBarLoading()
  3.     this.refresh();
  4.     console.log("upper");
  5.     setTimeout(function(){wx.hideNavigationBarLoading();wx.stopPullDownRefresh();}, 2000);
  6.   },
  7.   lower: function (e) {
  8.     wx.showNavigationBarLoading();
  9.     var that = this;
  10.     setTimeout(function(){wx.hideNavigationBarLoading();that.nextLoad();}, 1000);
  11.     console.log("lower")
  12.   },
  13.   //scroll: function (e) {
  14.   //  console.log("scroll")
  15.   //},
  16.  
  17.   //网络请求数据, 实现刷新
  18.   refresh0: function(){
  19.     var index_api = '';
  20.     util.getData(index_api)
  21.         .then(function(data){
  22.           //this.setData({
  23.           //
  24.           //});
  25.           console.log(data);
  26.         });
  27.   },
  28.   //使用本地 fake 数据实现刷新效果
  29.   refresh: function(){
  30.     var feed = util.getDiscovery();
  31.     console.log("loaddata");
  32.     var feed_data = feed.data;
  33.     this.setData({
  34.       feed:feed_data,
  35.       feed_length: feed_data.length
  36.     });
  37.   },
  38.   //使用本地 fake 数据实现继续加载效果
  39.   nextLoad: function(){
  40.     var next = util.discoveryNext();
  41.     console.log("continueload");
  42.     var next_data = next.data;
  43.     this.setData({
  44.       feed: this.data.feed.concat(next_data),
  45.       feed_length: this.data.feed_length + next_data.length
  46.     });
  47.   }
复制代码
 
由于是 fake 的数据, 所以这个 demo 并没有做真实的带参跳转, 查询等功能
加载数据的同时, 使用微信提供的加载动画wx.showNavigationBarLoading();
 
微信小程序-仿知乎(图6)
其他
  • 绑定点击事件, 进行页面的跳转wx.navigateTo
  • 部分模块化
  • input, image 组件等
展示 微信小程序-仿知乎(图7) 

加入收藏
立即下载
分享到微信朋友圈
X

免责声明:

1. 本站所有素材(未指定商用),仅限学习交流,请勿用于商业用途。
2. 本站所有小程序模板Demo和图片均来自用户分享上传和网络收集,模板和图片版权归原作者及原出处所有。
3. 未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材。