一个微信小程序版知乎实例分享

一个微信小程序版知乎实例分享
本文主要和大家分享从零开始一个微信小程序版知乎，希望能帮助大家开发一个微信版知乎，从中也有更多思路。

本文主要和大家分享从零开始一个微信小程序版知乎，希望能帮助大家开发一个微信版知乎，从中也有更多思路。

展示效果(界面样式设计与交互来自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": "更多" }] }}