本文主要和大家分享从零开始一个微信小程序版知乎，希望能帮助大家开发一个微信版知乎，从中也有更多思路。
展示效果(界面样式设计与交互来自ios 4.8.0版本知乎app)：
动态效果请移步到github查看。
一、开始前的准备
申请账号：根据小程序注册文档，填写信息和提交相应的资料，就可以拥有自己的小程序帐号。
开发工具：微信开发者工具
数据来源：
easy mock: 一个数据模拟神器，可以根据自己需要的格式自己编写返回数据，而且所有的数据都是随机生成的。
mock.js: easy mock引入了mock.js，但是文档中仅提供了部分语法，要想自己的mock数据写的更精简，可以在mock.js中查看更多具体语法。
二、初始化一个小程序
新建一个空文件夹
打开微信开发者工具，按照“你的第一个小程序”文档中的步骤即可创建一个自己的小程序。
目录结构
wechatapp
|___client
| |___assets // 存储图片
| |___pages // 页面
| | |___index // 首页
| | |___index.wxml // 页面结构文件
| | |___index.wxss // 样式表文件
| | |___index.js // js文件
| |___utils // 全局公共函数
| |___app.js // 系统的方法处理文件
| |___app.json // 系统全局配置文件
| |___app.wxss // 全局的样式表
| |___config.json // 域名等配置文件
|___project.config.json
|___readme
小程序配置文件app.json内容
{
// 页面路由
"pages": [
"pages/index/index", // 首页
"pages/findmore/findmore", // 想法页（开始起名为发现页面，后来没改/(ㄒoㄒ)/~~）
"pages/usercenter/usercenter", // 更多（同上，原来起名为个人中心o(╯□╰)o）
"pages/market/market", // 市场
"pages/searchresult/searchresult",// 搜索结果页
"pages/message/message", // 消息列表页
"pages/titledetail/titledetail", // 点击标题进入的问题详情页
"pages/contentdetail/contentdetail"// 点击内容进入的回答详情页
],
// 窗口
"window": {
"backgroundcolor": "#fff", // 窗口的背景色
"backgroundtextstyle": "dark", // 下拉背景字体、loading 图的样式，仅支持 dark/light
"navigationbarbackgroundcolor": "#fff",// 顶部tab背景颜色
"navigationbartitletext": "知小乎", //顶部显示标题
"navigationbartextstyle": "black", // 导航栏标题颜色，仅支持 black/white
"enablepulldownrefresh": true // 是否开启下拉刷新
},
// tab导航条
"tabbar": {
"backgroundcolor": "#fff", // 背景颜色
"color": "#999", // 默认文字颜色
"selectedcolor": "#1e8ae8", // 选中时文字颜色
"borderstyle": "white", // tabbar上边框的颜色， 仅支持 black/white
/**
* tab列表，最少2个，最多5个
* selectediconpath: 选中时图片
* iconpath: 默认图片
* pagepath: 对应页面路由
* text: 对应文案
**/
"list": [{
"selectediconpath": "assets/home-light.png",
"iconpath": "assets/home.png",
"pagepath": "pages/index/index",
"text": "首页"
}, {
"selectediconpath": "assets/find-light.png",
"iconpath": "assets/find.png",
"pagepath": "pages/findmore/findmore",
"text": "想法"
},
{
"selectediconpath": "assets/market-light.png",
"iconpath": "assets/market.png",
"pagepath": "pages/market/market",
"text": "市场"
},
{
"selectediconpath": "assets/msg-light.png",
"iconpath": "assets/msg.png",
"pagepath": "pages/message/message",
"text": "消息"
}, {
"selectediconpath": "assets/more-light.png",
"iconpath": "assets/more.png",
"pagepath": "pages/usercenter/usercenter",
"text": "更多"
}]
}
}
配置接口域名: 因使用的是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
<view class="tab-wrapper" bindtap="setactive">
<view class="tab-item {{isactive == 0 ? 'tab-item-active' : ''}}" data-index="0">关注</view>
<view class="tab-item {{isactive == 1 ? 'tab-item-active' : ''}}" data-index="1">推荐</view>
<view class="tab-item {{isactive == 2 ? 'tab-item-active' : ''}}" data-index="2">热榜</view>
<view class="tab-item-line" animation="{{animationdata}}"></view>
</view>
<view class="tab-content {{isactive == 0 ? 'show' : 'hide'}}">
// ...
</view>
<view class="tab-content {{isactive == 1 ? 'show' : 'hide'}}">
// ...
</view>
<view class="tab-content {{isactive == 2 ? 'show' : 'hide'}}">
// ...
</view>
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判断当前页面滚动距离是否达到要求，如果达到所需距离，则渲染这个吸顶的标题栏。
<view class="find-hot-header fixed" wx:if="{{scrolltop >= 430}}">
<view class="find-hot-title">最近热门</view>
</view>
<view class="find-hot-header">
<view class="find-hot-title">最近热门</view>
</view>
7、展开和收起全文
展示效果
文字部分默认添加class，超出两行文字显示省略号。
.text-overflow{
height: 85rpx;
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
}
点击展开全文和收起全文时对showindex[index]的值取反，对应添加或移除该class。
<view class="find-hot-content {{!showindex[index] ? 'text-overflow' : ''}}">
{{item.content}}
</view>
<view wx:if="{{!showindex[index]}}" class="find-show-all" data-index="{{index}}" bindtap="toggleshow">展开全文</view>
<view wx:if="{{showindex[index]}}" class="find-show-all" data-index="{{index}}" bindtap="toggleshow">收起全文</view>
8、更改switch样式
switch类名如下，一定要加上父类，不然全局的都会被改掉_(:з」∠)_。
父类 .wx-switch-input{
display: inline-block;
position: absolute;
top: 20rpx;
right: 20rpx;
width: 84rpx;
height: 44rpx;
}
父类 .wx-switch-input::before{
width: 80rpx;
height: 40rpx;
}
父类 .wx-switch-input::after{
width: 40rpx;
height: 40rpx;
}
四、总结
通过这次小程序的开发，学到了很多东西，虽然遇到了很多问题，但解决问题的过程让我收获的更多，动手实践才是学习的最好方式。
相关推荐：
微信小程序组件化的解决思路和方法
微信小程序版2048小游戏
微信小程序之购物车的实现代码
以上就是一个微信小程序版知乎实例分享的详细内容。