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

发布日期： 2018-01-25 阅读量： 作者： 网络

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

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

# 小程序 # 分享 # 实例

上一篇: 选择Go语言框架的要素：全面指南

下一篇: linux中的scp命令怎么用？（用法详解）

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

随便看看