一个微信小程序版知乎实例分享
Jan 25, 2018 pm 01:51 PM本文主要和大家分享从零开始一个微信小程序版知乎,希望能帮助大家开发一个微信版知乎,从中也有更多思路。
展示效果(界面样式设计与交互来自iOS 4.8.0版本知乎App):
动态效果请移步到GitHub查看。
一、开始前的准备
申请账号:根据小程序注册文档,填写信息和提交相应的资料,就可以拥有自己的小程序帐号。
开发工具:微信开发者工具
数据来源:
Easy Mock: 一个数据模拟神器,可以根据自己需要的格式自己编写返回数据,而且所有的数据都是随机生成的。
Mock.js: Easy Mock引入了Mock.js,但是文档中仅提供了部分语法,要想自己的mock数据写的更精简,可以在Mock.js中查看更多具体语法。
二、初始化一个小程序
新建一个空文件夹
打开微信开发者工具,按照“你的第一个小程序”文档中的步骤即可创建一个自己的小程序。
目录结构
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
|
配置接口域名: 因使用的是Easy Mock模拟接口数据,因此可以在小程序管理后台-开发设置-服务器域名中将request合法域名配置为https://www.easy-mock.com。
三、开发中的遇到的问题及解决方案
1、小程序渲染HTML片段
看了网页版知乎,接口返回的回答数据是一段HTML的代码片段,所以答案中可以在任意位置都插入图片。
对,没错,就是下面酱紫的(╯°□°)╯︵┻━┻
经过反复尝试,发现原生写法不支持渲染一段HTML代码片段,因此放弃了返回HTML的代码片段的做法,所以我的回答列表中也没有图片(ಥ_ಥ)。
但在调研中发现了一个自定义组件:wxParse-微信小程序富文本解析组件,还没尝试使用,准备在下次优化项目时尝试一下。
2、首页的顶部tab切换
实现思路
每个可点击的tab分别绑定data-index,在最外层bindtap绑定的方法中获取所点击的tab的index值,再根据index的值分别显示对应的tab-content
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
3、上拉加载和下拉刷新
实现思路
上拉加载:emmmmmm......我指的上拉加载是触底后的加载更多,怕跟大家理解的不一样o(╯□╰)o。
原生方法:onReachBottom,获取到新数据后concat到原有的数据列表后。
下拉刷新:
原生方法:onPullDownRefresh,将原有的数据列表concat到获取到的新数据后。
要注意的是,每次对数组进行操作后,都要使用setData对原数组重新赋值,否则数据不会更新的啊( ⊙ o ⊙ )!
4、搜索历史的存储
实现思路
wx.setStorage、wx.getStorage和wx.removeStorage
存储搜索历史:
使用wx.setStorage,触发搜索时,检查搜索历史列表中是否含有该字段,如果有则忽略,如果没有则将该字段压入数组中。
显示搜索历史:
使用wx.getStorage,在显示搜索蒙层时,获取到搜索历史列表,循环显示,当搜索历史列表长度大于1时,显示清空搜索历史的按钮。
删除搜索历史:
单一删除:每个搜索历史都绑定删除事件,获取到改关键词的index,从渠道的搜索历史列表中删除对应index的关键词,并通过wx.setStorage重新存储。
全部删除:使用wx.removeStorage,直接移除搜索历史对应的关键字。
5、swiper轮播组件
在想法页的轮播组件中,原知乎App中的xxxx人正在讨论是嵌在轮播模块内的垂直方向的文字轮播,但是小程序中的swiper轮播组件不支持互相嵌套,因此没能实现该部分,只好换一种样式去写/(ㄒoㄒ)/~~。
6、滚动吸顶
页面中的标题栏在滚动到顶部时,吸顶展示。
实现效果
实现方案
整个页面使用<scroll-view></scroll-view>包裹,并且绑定bindscroll事件,监听滚动距离。
设置<scroll-view>为垂直方向时,需设置<scroll-view>的高度。
复制一个相同的标题栏,添加吸顶样式的类fixed。
使用wx:if判断当前页面滚动距离是否达到要求,如果达到所需距离,则渲染这个吸顶的标题栏。
1 2 3 4 5 6 |
|
7、展开和收起全文
展示效果
文字部分默认添加class,超出两行文字显示省略号。
1 2 3 4 5 6 7 8 9 |
|
点击展开全文和收起全文时对showIndex[index]的值取反,对应添加或移除该class。
1 2 3 4 5 |
|
8、更改switch样式
switch类名如下,一定要加上父类,不然全局的都会被改掉_(:з」∠)_。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
四、总结
通过这次小程序的开发,学到了很多东西,虽然遇到了很多问题,但解决问题的过程让我收获的更多,动手实践才是学习的最好方式。
相关推荐:
以上是一个微信小程序版知乎实例分享的详细内容。更多信息请关注PHP中文网其他相关文章!

热门文章

热门文章

热门文章标签

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)