疫情期间,我通过项目重学了小程序
前言
这段时间,上海疫情爆发的很严重,3月12日起笔者就被封在小区,至今已有40多天。这期间经历了面试,抢菜,写文章,到现在又捡起了小程序
笔者近几年用 github 来记录年度计划,并每周设立计划执行
文章图片
像前端知识地图、博客、读书还好,都是日常基本功,但是独立作品今年都没有动作,按照进度,上半年怎么也要有一个,于是乎,就想着从想法里拿出一个做成项目
正文
一开始我是想弄我的几行字,因为几行字是H5版本,所以想再做一版小程序,但做完之后感觉有点简单,就打算再做一个
一个机缘巧合的情况下,我想起了三年前尝试做的独立项目——NextDay
文章图片
想想,这个页面只有一页,但细节多,还有自定义组件,可以从中学习到做一个小程序会碰到的坑,于是乎,我的小程序之旅有一遭没一遭的做了起来
这里记录笔者做小程序时的困难和解决方案
- 手画原型
- 以
NextDay
App 为原型展开
- 以
- 小程序开发
- 微信官方文档·小程序
- 微信开发社区
- 自定义导航条
- 全屏模式下,导航条不让其出现
"navigationStyle": "custom"
- CSS 也要配合的做,不让他上下滑动
postion: fixed
- 全屏模式下,导航条不让其出现
- 调试接口
- 需要授权,拿到
Partner Name
和Partner Secret
- 也正是因为它严明要开源,所以开源了
- 需要在 header 处加上 Date 和 authorization,authorization 需要加上
md5
加密,可去开源处看代码
- 需要授权,拿到
- 主页(主画面)设计、功能
- swiper 滑动功能接入。接口返回数据是从前几日到今天,如何在 onload 处显示今日数据?swiper 的current设置为今天
- 布局上采用绝对定位,适配单位上采用rpx和百分比
- 引入 npm 包
- 返回的接口数据和页面上的数据是不同的,需要我们从中做转换,遂引入 dayjs 库
- 注册小程序
- 小程序流程
- 文案
- 阴影处理
- 前端这边的设计,text-shadow 属性
- 上拉出现设置和分享
- 抽屉组件,点击分享Icon 分享
- 分享给朋友和朋友圈设置
- onShareAppMessage 和 onShareTimeline
- 分享给朋友时,采用的图片应该是
5:4
比例尺寸的图,使用接口返回的小图,意味着需要每次加载时需要记住当前的所在组,每次滑动时都需要改变当前的所在组
- 手机适配
- 接口图片有多种,有适配浏览屏的图片和普通图片
- wxml 中进行条件判断,这里注意不能加空格
- 接口云端化
- 因为 NextDay 的接口是 HTTP 协议,小程序不支持 HTTP 协议的,所以就用云开发做转发
- 主要参考资料:官网微信学堂视频
- 代码重构
- 文件布局,设计,云开发,小程序文件,小程序中又有组件、npm 包等功能
- 接口
- 设计logo
- 不用设计,去官网找即可
- 字体改造、字体适配
- 需要找到和 App 中一样的字体,比较难,采用字体识别 技术,两种字体,数字日期采用华为最细字体,正文描述字体采用日文字体GothicMB(和 App 中一致)
- 截图对比,调整大小
- 点击显示下载按钮
- 如下所示,找到也没用
- 下载图片功能
- 失败,不能下载,图片域名不是 HTTPS,不支持下载,如果把图片放在云函数上免费额度肯定不够,后续再想想需不需要加,有没有必要加
- 设置主页 关于版本、鸣谢
- 多一个关于页面,新版本去除,感觉没必要
- 引入自定义组件
- 抽屉组件,点击弹出
- 设置
- 上拉模糊
- CSS 样式
backdrop-filter
- CSS 样式
- 搜索
NextDay
关键字搜索不到
- 应该是刚上架不久,又没做推广,所以搜不到
- 要全拼
NextDay101
- 消息提醒
- 希望每一天能提示弹出,新的想法,不知道会不会打扰到别人,第一版就没做
效果截图 GIF动态
截图
文章图片
文章图片
文章图片
小程序
文章图片
【疫情期间,我通过项目重学了小程序】项目地址:https://github.com/johanazhu/...
推荐阅读
- 基于SqlSugar的数据库访问处理的封装,在.net6框架的Web|基于SqlSugar的数据库访问处理的封装,在.net6框架的Web API上开发应用
- 我的长大app开发教程第一弹(Fragement布局)
- 产业互联网|苹果Q1营收仅增9%,疫情及缺货将损失80亿美元|看财报
- xp系统我的电脑右键没有安全选项卡的处理办法
- 怎样让所有人看不到我的朋友圈
- Laravel迁移命令
- Laravel生成迁移
- Laravel文件上传
- 满屏的if-else,看我怎么消灭你!
- Laravel控制器中间件