乐趣区

关于前端:疫情期间我通过项目重学了小程序

前言

这段时间,上海疫情暴发的很重大,3 月 12 日起笔者就被封在小区,至今已有 40 多天。这期间经验了面试,抢菜,写文章,到当初又捡起了小程序

笔者近几年用 github 来记录年度计划,并每周设立打算执行

像前端常识地图、博客、读书还好,都是日常基本功,然而独立作品往年都没有动作,依照进度,上半年怎么也要有一个,于是乎,就想着从想法里拿出一个做成我的项目

注释

一开始我是想弄我的几行字,因为几行字是 H5 版本,所以想再做一版小程序,但做完之后感觉有点简略,就打算再做一个

一个机缘巧合的状况下,我想起了三年前尝试做的独立我的项目——NextDay

想想,这个页面只有一页,但细节多,还有自定义组件,能够从中学习到做一个小程序会碰到的坑,于是乎,我的小程序之旅有一遭没一遭的做了起来

这里记录笔者做小程序时的艰难和解决方案

  • 手画原型

    • NextDay App 为原型开展
  • 小程序开发

    • 微信官网文档·小程序
    • 微信开发社区
  • 自定义导航条

    • 全屏模式下,导航条不让其呈现 "navigationStyle": "custom"
    • CSS 也要配合的做,不让他高低滑动 postion: fixed
  • 调试接口

    • 须要受权,拿到 Partner NamePartner 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
  • 搜寻 NextDay 关键字搜寻不到

    • 应该是刚上架不久,又没做推广,所以搜不到
    • 要全拼 NextDay101
  • 音讯揭示

    • 心愿每一天能提醒弹出,新的想法,不晓得会不会打扰到他人,第一版就没做

如要跑通这个我的项目,首先要去申请 PartnerName、Partner Secret,这样就能跑通我的项目,具体的答疑曾经在 NextDay 的 README 中答复,如还有其余疑难,可在 Issuse 区提出

成果截图

GIF 动静

截图

小程序

我的项目地址:https://github.com/johanazhu/…

退出移动版