一个微信小程序版知乎实例分享
本文主要和大家分享从零开始一个微信小程序版知乎，希望能帮助大家开发一个微信版知乎，从中也有更多思路。
展示效果(界面样式设计与交互来自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□%p)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的代码片段，所以答案中可以在任意位置都插入图片。对，没错，就是下面酱紫的(%o°□°）%o
