以前的工作没有直接进行过小程序的开发，但是最近一有空就马上学习。 因为是从零开始的，所以完全没有使用框架和UI库。 记录一下这次开发中踩到的洞吧~
展示效果(从IOs4.8. 0版知乎App开始与界面设计相互作用) :
请转至GitHub以确认动态效果。
一、开始前的准备
申请帐户：只要根据小程序注册文档、填写信息并提交相应的资料，就可以拥有自己的小程序帐户。 开发工具： wechat开发者工具的数据来源： Easy Mock:数据模拟神器，可以根据需要的格式自己制作回复数据。 此外，所有数据都是随机生成的。 Mock.js: Easy Mock引入了Mock.js，但文档中只提供了部分语法。 要想更简洁地写自己的mock数据，可以在Mock.js上看到更具体的语法。 icon:阿里巴巴矢量图形库2，初始化小程序
创建一个新的空文件夹，打开wechat开发人员工具，然后按照“第一个小程序”文档中的步骤创建自己的小程序。 目录结构weChatApp
|___客户端
||_ _ _资产//保存图像
| _ _ _页面//页面
||_ _ _索引//首页
| ||___index.wxml //页面结构文件
|||___index.wxss //样式表文件
||_ _ _索引. js//js文件
||___utils //全局通用函数
||___app.js //用系统方法处理文件
||___app.json //系统全局配置文件
||___app.wxss //全局样式表
||___config.json //配置文件，如域名
| _ _ _项目. config.JSON
| _ _ _自述
复制代码
小程序配置文件app.json的内容{
//页面吉鲁
页面：
“页面/索引/索引”，//主页
' pages/findMore/findMore '，//构思页(开始命名为发现页，然后是/((((() ) (/~~) ) ) ) )
' pages/userCenter/userCenter '，//更多(同上，原命名为个人中心o$o ) )。
“页面/市场/市场”，//市场
“页面/搜索结果/搜索结果”，//搜索结果页面
“页面/消息/消息”，//消息列表页面
单击“页面/标题详细信息/标题详细信息”，//标题进入的问题详细信息页面
单击“页面/内容详细信息/内容详细信息”//内容进入的回答详细信息页面
]、
//窗口
“窗口”:
“背景色”:“# fff”，//窗口的背景色
“背景文本样式”:“暗色”，//下拉背景字体，加载图样式，仅支持暗色/灯光
' navigationbarbackgroundcolor ' : ' # fff '，//顶部选项卡的背景颜色
“导航栏标题文本”:“知乎”，//顶部显示标题
'导航栏文本样式' : '黑色'，//导航栏标题颜色，仅支持黑色/白色
' enablepulldownrefresh ' : true//是否打开下拉刷新
(、
//tab导航栏
“tabBar': {
'背景色' : ' # fff '，//背景色
' color': '#999 '，//缺省字符颜色
“选定颜色”:“# 1e8ae 8”，//选择时的字符颜色
“边框样式”:“白色”，//tabbar的上边框颜色仅支持黑色/白色
//*
* * *标签列表，至少2个，最多5个
* *选择* selectedIconPath:时的图像
* * icon路径：的默认图像
* * *支持* pagePath:的页面吉鲁
* *支持文本：的副本
*/
:
' selectediconpath ' : '资产/家庭光. png '，
“图标路径”:“资产/家庭. PNG”，
“页面路径”:“页面/索引/索引”，
“文本' : '首页”
、{1}
' selectediconpath ' : '资产/查找光. png '，
“图标路径”:“资产/查找. png”，
“页面”:“页面/查找更多/查找更多”，
“文本' : '想法”
(、
{
' selectediconpath ' : '资产/市场光. png '，
' iconPa
th": "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
<view class="tab-wrapper" bindtap="setActive"> <view class="tab-item {{isActive == 0 ? 'tab-item-active' : ''}}" data-index="0">关注</view> <view class="tab-item {{isActive == 1 ? 'tab-item-active' : ''}}" data-index="1">推荐</view> <view class="tab-item {{isActive == 2 ? 'tab-item-active' : ''}}" data-index="2">热榜</view> <view class="tab-item-line" animation="{{animationData}}"></view> </view> <view class="tab-content {{isActive == 0 ? 'show' : 'hide'}}"> // ... </view> <view class="tab-content {{isActive == 1 ? 'show' : 'hide'}}"> // ... </view> <view class="tab-content {{isActive == 2 ? 'show' : 'hide'}}"> // ... </view> 复制代码3、上拉加载和下拉刷新
实现思路
上拉加载：emmmmmm......我指的上拉加载是触底后的加载更多，怕跟大家理解的不一样o(╯□╰)o。
原生方法：onReachBottom，获取到新数据后concat到原有的数据列表后。下拉刷新：
原生方法：onPullDownRefresh，将原有的数据列表concat到获取到的新数据后。要注意的是，每次对数组进行操作后，都要使用setData对原数组重新赋值，否则数据不会更新的啊( ⊙ o ⊙ )！
4、搜索历史的存储
实现思路
wx.setStorage、wx.getStorage和wx.removeStorage
存储搜索历史：使用wx.setStorage，触发搜索时，检查搜索历史列表中是否含有该字段，如果有则忽略，如果没有则将该字段压入数组中。显示搜索历史：使用wx.getStorage，在显示搜索蒙层时，获取到搜索历史列表，循环显示，当搜索历史列表长度大于1时，显示清空搜索历史的按钮。删除搜索历史：单一删除：每个搜索历史都绑定删除事件，获取到改关键词的index，从渠道的搜索历史列表中删除对应index的关键词，并通过wx.setStorage重新存储。全部删除：使用wx.removeStorage，直接移除搜索历史对应的关键字。5、swiper轮播组件
在想法页的轮播组件中，原知乎App中的xxxx人正在讨论是嵌在轮播模块内的垂直方向的文字轮播，但是小程序中的swiper轮播组件不支持互相嵌套，因此没能实现该部分，只好换一种样式去写/(ㄒoㄒ)/~~。
6、滚动吸顶
页面中的标题栏在滚动到顶部时，吸顶展示。
实现效果
实现方案
整个页面使用<scroll-view></scroll-view>包裹，并且绑定bindscroll事件，监听滚动距离。设置<scroll-view>为垂直方向时，需设置<scroll-view>的高度。复制一个相同的标题栏，添加吸顶样式的类fixed。使用wx:if判断当前页面滚动距离是否达到要求，如果达到所需距离，则渲染这个吸顶的标题栏。<view class="find-hot-header fixed" wx:if="{{scrollTop >= 430}}"> <view class="find-hot-title">最近热门</view> </view> <view class="find-hot-header"> <view class="find-hot-title">最近热门</view> </view> 复制代码7、展开和收起全文
展示效果
文字部分默认添加class，超出两行文字显示省略号。
.text-overflow{ height: 85rpx; display: -webkit-box; word-break: break-all; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp:2; } 复制代码点击展开全文和收起全文时对showIndex[index]的值取反，对应添加或移除该class。
<view class="find-hot-content {{!showIndex[index] ? 'text-overflow' : ''}}"> {{item.content}} </view> <view wx:if="{{!showIndex[index]}}" class="find-show-all" data-index="{{index}}" bindtap="toggleShow">展开全文</view> <view wx:if="{{showIndex[index]}}" class="find-show-all" data-index="{{index}}" bindtap="toggleShow">收起全文</view> 复制代码8、更改switch样式
switch类名如下，一定要加上父类，不然全局的都会被改掉_(:з」∠)_。
父类 .wx-switch-input{ display: inline-block; position: absolute; top: 20rpx; right: 20rpx; width: 84rpx; height: 44rpx; } 父类 .wx-switch-input::before{ width: 80rpx; height: 40rpx; } 父类 .wx-switch-input::after{ width: 40rpx; height: 40rpx; } 复制代码四、总结
通过这次小程序的开发，学到了很多东西，虽然遇到了很多问题，但解决问题的过程让我收获的更多，动手实践才是学习的最好方式。
另外，此次项目中仍有许多功能不够完善，一些细节还可以继续优化，长路漫漫啊(๑•̀ㅂ•́)و✧。
如果文章中有错误和不足欢迎批评指正。