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

前言

这段时间，上海疫情暴发的很重大，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

• 搜寻 NextDay 关键字搜寻不到

  • 应该是刚上架不久，又没做推广，所以搜不到
  • 要全拼 NextDay101

• 音讯揭示

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

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

成果截图

GIF 动静

截图

小程序

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