1. 首页

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

以前工作没直接进行过小程序的开发,最近闲了下来就赶紧学习一下。因为从零开始,所以没有使用任何框架及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": "更多" }] } }

三、开发中的遇到的问题及解决方案

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; }

四、总结

通过这次小程序的开发,学到了很多东西,虽然遇到了很多问题,但解决问题的过程让我收获的更多,动手实践才是学习的最好方式。

另外,此次项目中仍有许多功能不够完善,一些细节还可以继续优化,长路漫漫啊(๑•̀ㅂ•́)و✧。

如果文章中有错误和不足欢迎批评指正。

项目地址:GitHub

(づ。◕‿‿◕。)づ★ 想要个star

作者:小桔子酱
链接:https://juejin.im/post/5a61b6a1518825732739af03

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:小程序版知乎之从零开始一个微信

链接:https://www.javascriptc.com/2504.html

« 小程序登录鉴权之手摸手教会你
哈哈,滴滴一夏,小程序专车来咯»
Flutter 中文教程资源

相关推荐

QR code