php开发工具 知乎,一个微信小程序版知乎实例分享
本文主要和大家分享从零开始一个微信小程序版知乎,希望能帮助大家开发一个微信版知乎,从中也有更多思路。
展示效果(界面样式设计与交互来自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
关注
推荐
热榜
// ...
// ...
// ...
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、滚动吸顶
页面中的标题栏在滚动到顶部时,吸顶展示。
实现效果
实现方案
整个页面使用包裹,并且绑定bindscroll事件,监听滚动距离。
设置为垂直方向时,需设置的高度。
复制一个相同的标题栏,添加吸顶样式的类fixed。
使用wx:if判断当前页面滚动距离是否达到要求,如果达到所需距离,则渲染这个吸顶的标题栏。
最近热门
最近热门
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。
{{item.content}}
展开全文
收起全文
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;
}
四、总结
通过这次小程序的开发,学到了很多东西,虽然遇到了很多问题,但解决问题的过程让我收获的更多,动手实践才是学习的最好方式。
相关推荐:
php开发工具 知乎,一个微信小程序版知乎实例分享相关推荐
- 从零开始一个微信小程序版知乎
以前工作没直接进行过小程序的开发,最近闲了下来就赶紧学习一下.因为从零开始,所以没有使用任何框架及UI库,记录一下本次开发中踩过的坑吧~ 展示效果(界面样式设计与交互来自iOS 4.8.0版本知乎Ap ...
- 给大家分享一个打卡的工具,是一个微信小程序,名字叫小打卡
给大家分享一个打卡的工具,是一个微信小程序,名字叫小打卡.之前Ben和我讨论过,有没有这样一个方便的工具,能把每天工作学到的零碎知识点记录下来,或者是工作中突然来了一些稍纵即逝的灵感,如果不及时记下来 ...
- php 小程序回调,微信小程序Promise简化回调实例分享
Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供Promise对象.本文主要和大 ...
- 我写了个微信小程序版QQ O(∩_∩)O~
前言 前几天微信官方推出小程序版的QQ,用户可以使用小程序查看消息,但是并不能回复消息. 在微博看到这条热搜,我想我可不可以也做一个微信小程序版的QQ. 小程序效果图 用了一个下午+一个早上的 ...
- 一个程序如何连接到外网_如何从头开始开发一个微信小程序
网上有很多的人在问:怎么开发一个微信小程序?今天我来给大家详细讲讲如何申请开发并部署一个微信小程序,大家看完这篇文章后就能够自己运营一个属于自己的小程序了. 现在的小程序有百度小程序,头条小程序,支付 ...
- 2天3夜开发了一个微信小程序,用它挣了10.7万
大家好,我是对白. 粉丝一直说要推荐一个微信小程序的项目,找到下面这个希望大家白嫖快乐.本项目可用于二次开发接私活,前段时间有粉丝给我反馈他用这个项目改造3天挣了10多万. 项目介绍 youlai-m ...
- 了解微信小程序、掌握微信小程序开发工具的使用、了解小程序的目录以及文件结构、掌握小程序中常用的组件、掌握WXML、WXSS、WXS的基本使用
1 微信小程序介绍以及开发准备 1.1 了解微信小程序 百度百科: 微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及&quo ...
- 创建一个微信小程序——如何注册账号,安装微信开发者工具,创建一个小程序(详细步骤版)
一.注册账号 注册地址 注册地址:微信公众平台 注册 右上角--[立即注册]. 选择[小程序]. 按照步骤完成注册. 按照步骤激活邮箱后,在信息登记这里选择个人. 填写相关信息. 完成注册. 这一步可 ...
- 一个微信小程序开发示例
一个微信小程序开发示例(豆瓣电影) 新版本(不包含工作流)请移步至:https://github.com/zce/weapp-douban 当前仓库会暂缓更新,主要留下来给大家答疑 需要基础教程的朋友 ...
- 开发一个微信小程序,对酒店经营管理有哪些好处?
据腾讯2022年第一季度财报数据显示,微信小程序日活跃账户已经突破5亿,流量巨大.不论企业用户还是个体商家都积极使用小程序开展商业活动,从这庞大流量里获利. 酒店行业也不例外,很多酒店都开发了微信小程 ...
最新文章
- 对 android apk 进行重新签名操作
- 爱与家庭,魔兽世界怀旧父亲为儿子打造精致音乐盒,满满的都是爱
- mysql 排名_微服务架构下,如何利用Mysql的limit配合orderby进行排名统计
- [PAT乙级]1041 考试座位号
- java kafka 分区_Java kafka如何实现自定义分区类和拦截器
- Redis如何实现刷抖音不重复-布隆过滤器(Bloom Filter)
- http的response遇到illegalstateexception解决办法
- 新冠疫情数据可视化python_【一点资讯】新冠疫情数据分析 | Python可视化工具看全国各地的新增趋势 www.yidianzixun.com...
- java 并发 处理机制 和 cas 理解
- RemObjects Elements 11.0
- UPDATE更新数据库数据详解
- 看完一篇论文,如何写该论文研究思路?
- 微信支付 H5端 和小程序端 统一下单接口 4个JAVA源码文件代码
- 键盘按d就计算机,电脑为什么一按D就返回桌面?一按M也回桌面、按L直接待机了?:excle按d就返回桌面...
- 读书笔记 ---- 三毛
- AI风起荆楚,人工智能中国体系即刻启航
- 年底了,你敢炒老板鱿鱼吗?
- 云网融合 — 云网业务统一承载技术
- 字符串中取数求和(1)
- python 画图——樱花树