从零开始一个微信小程序版知

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

展示效果（界面样式设计与交互来自iOS 4.8.0版本知乎App）：

动态效果请移步到GitHub的查看。

一、开始前的准备申请账号：根据小程序注册文档，填写信息和提交相应的资料，就可以拥有自己的小程序帐号。开发工具：微信开发者工具数据来源：Easy Mock: 一个数据模拟神器，可以根据自己需要的格式自己编写返回数据，而且所有的数据都是随机生成的。Mock.js: Easy Mock引入了Mock.js，但是文档中仅提供了部分语法，要想自己的mock数据写的更精简，可以在Mock.js中查看更多具体语法。icon: 阿里巴巴矢量图标库

二、初始化一个小程序新建一个空文件夹打开微信开发者工具，按照“你的第一个小程序”文档中的步骤即可创建一个自己的小程序。目录结构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切换

实现思路

每个可点击的标签分别绑定数据的索引，在最外层bindtap绑定的方法中获取所点击的标签的索引值，再根据索引的值分别显示对应的选项卡内容

关注推荐热榜//. //. //.复制代码

3、上拉加载和下拉刷新

实现思路

上拉加载：emmmmmm .我指的上拉加载是触底后的加载更多，怕跟大家理解的不一样O（╯□╰）O

XX Native方法：onReachBottom，获取新数据后，连接到原始数据列表。

下拉刷新：

Native方法：onPullDownRefresh，将原始数据列表连接到获得的新数据。

应该注意的是，每次操作数组时，必须使用setData重新分配原始数组，否则数据将不会更新（⊙o⊙）！

4、搜索历史的存储

实现思路

wx.setStorage，wx.getStorage和wx.removeStorage

存储搜索历史记录：使用wx.setStorage时，触发搜索时，检查搜索历史记录列表是否包含该字段，如果是，则忽略它，如果不包含，则将字段推入数组。显示搜索历史：当使用wx.getStorage时，显示搜索掩码时，将获取搜索历史列表，并循环显示显示。当搜索历史列表长度大于1时，显示用于清除搜索历史的按钮。删除搜索历史记录：单删除：每个搜索历史记录绑定删除事件，获取已更改关键字的索引，从通道的搜索历史列表中删除索引对应的关键字，并通过wx.setStorage重新存储。全部删除：使用wx.removeStorage，直接沈阳APP软件

删除与搜索历史记录对应的关键字。

5、swiper轮播组件

在构思页面的轮播组件中，众所周知，应用程序中的xxxx人正在讨论嵌入在轮播模块中的垂直文本轮播，但是小程序中的swiper轮播组件不支持相互嵌套，所以没有实现这一部分，我不得不改变写入/（ㄒoㄒ）/~~的风格。

6、滚动吸顶

滚动到顶部时，页面中的标题栏显示为天花板。

实现效果

实现方案整个页面使用包裹，并且绑定bindscroll事件，监听滚动距离。设置为垂直方向时，需设置的高度。复制一个相同的标题栏，添加吸顶样式的类fixed。使用wx:if判断当前页面滚动距离是否达到要求，如果达到所需距离，则渲染这个吸顶的标题栏。= 430}}"> 最近热门最近热门复制代码

7、展开和收起全文

展示效果

文本部分默认添加类，省略号显示超出两行文本。

.text-overflow {height: 85rpx;显示: -webkit-box; word-break: break-all;文本溢出:省略号;溢出:隐藏; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}复制代码

单击以展开全文，并在showIndex [index]的值反转时折叠全文，对应于添加或删除类。

{{item.content}}展开全文以收集全文复制代码

8、更改switch样式

switch类名如下，你必须添加父类，否则全局将被改为_（:з“∠）_。

父类.wx-switch-input {显示:内联块;位置:绝对;顶部: 20rpx;对错: 20rpx;宽度: 84rpx;高度: 44rpx;}父类wx-switch-input: {width: 80rpx;高度: 40rpx;}父类class.wx-switch-input: {width: 40rpx;高度: 40rpx;}复制代码

四、总结

通过这个小程序的开发，我学到了很多东西。虽然我遇到了很多问题，但解决这些问题的过程让我获得了更多。实践练习是最好的学习方式。

此外，该项目中仍有许多功能不够完善，一些细节可以继续优化，漫长的道路很长（1•ᄇ•）و。

如果文章中有错误和不足，请随时批评和纠正。

项目地址：GitHub

（づ.◕‿‿◕。）づ我想要一个明星