258资源分享网

以前工作没直接进行过小程序的开发，最近闲了下来就赶紧学习一下。因为从零开始，所以没有使用任何框架及UI库，记录一下本次开发中踩过的坑吧~

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