五一假期：记录一次微信小程序开发流程

记录一次微信小程序开发流程

一眨眼就到了2022年的五月一假期了，时光过的是有点快。希望疫情抓紧结束吧，我想过上正常的生活。这几天趁着月底没事，正好有个微信小程序项目，那就拿来练练手吧，好久不写了，刚开始着实有点手生。

1. XXXX微信小程序

2. 开发工具：

   1. HBuilderX ：官网下载
      1. 地址：https://www.dcloud.io/
   2. 微信开发者工具：微信公众平台下载
      1. 地址：https://mp.weixin.qq.com/
   3. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bGm98Ogi-1652791351153)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220430224550121.png)]
      1. 没有微信小程序AppID的也需要在微信公众平台上申请下,自己开发使用，后期上线后，需要换成公司的
      2. 然后填写在项目的 manifset.json 文件下的微信小程序配置 中（其他的类似，去对应的平台上去申请）

3. 技术栈

   1. 框架：uni-app
      1. 💢 吐槽：找一些封装好的组件比较麻烦，有时间可以自己封装。
   2. 样式：scss（uni-app自带），uni-app-style（gitee开源项目，自己不嫌麻烦也可以写，类似Tailwind CSS ）
      1. 尺寸单位：rpx
         1. 默认把手机宽度分为750份，以iPhone6 为例：宽375px—> 750rpx 1px=2rpx
   3. 图标：uni-icons （uni-app自带组件图标库），iconfont
   4. 组件库
      1. 可以搭配 iview 和 van t使用，但是这个项目我没使用
      2. 图表：ucharts[https://www.ucharts.cn/v2/#/]

4. 项目结构

   1. components：符合vue组件规范的uni-app组件目录
      1. 名字符合规范可以直接在页面使用，不用引入，参考 easycom 配置项
   2. pages： 业务页面文件存放的目录
   3. static：存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
   4. uni-modules：存放uni-modules规范的插件
   5. utils：存放封装的请求方法及其他工具函数
   6. pages.json：配置页面路由、导航条、选项卡等页面类信息，
   7. 其他的就不介绍了，参考uni-app官网 😆

5. 开始前的准备工作

   1. 引入需要的组件库（我没引，所以就没搞 🌊 ）
   2. 用 promise 封装请求
      1. 结合uni-app自带的 uni.request({})
   3. 对uni-app的路由跳转封装
      1. uni.navigateTo({})
   4. 项目中没有用到vuex
   5. 🎗🎗🎗重要重要重要 🎗🎗🎗
      1. 建议还是先看看文档，心里大概有个了解，然后后面不会的再去针对性的找
      2. 内置组件 、api、生命后期等
   6. 目前这个项目，我应该就做了这么多，后面有了我再补充
   7. 然后就可以开始写页面了

6. 新鲜的东西

   1. 用到了 微信同声传译插件

7. API调试

   1. 首先熟悉了uni-app的应用生命周期
      1. 参考uni-app官网
   2. 熟悉一下组件生命周期
      1. 同vue
      2. 熟悉一下 beforeCreate，created，beforeMount,mounted,beforeUpdate，updated,beforeDestroy,destroyed
   3. 封装前奏做好后，后面的接口流程和pc就一样了

8. 开发过程中遇到的问题及知识总结

   1. uni-app内置的input输入框的双向绑定
      1. 不支持v-model
      2. 使用input标签的原生@input 事件和事件对象（event）的value值，实现双向绑定
   2. uni.navigateTo({})
      1. 路由跳转时路径的写法—下面两种写法都可以
         1. 绝对路径
         2. 相对路径
   3. 取消原生的顶部导航栏
      1. 官网有自己的方法
      2. 目的：实现沉浸式状态栏等
   4. uni-app内置组件 button 的颜色问题

      1. 使用primary在不同的软件中，会显示不同的颜色

         1. 微信小程序、360小程序为绿色，App、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色，字节跳动小程序为红色，QQ小程序为浅蓝色。（官网介绍）

      2. 解决方法:如想在多端统一颜色，请改用default，然后自行写样式

   5. 解决安卓的导航栏title布局中的问题
      1. 当前项目中没有做
      2. 思路（参考网上）
         1. 取消原生的导航栏
         2. 自定义导航栏样式
         3. 动态获取高度（还没有实践）
   6. 微信小程序的语音识别功能
      1. 微信公众平台有自己的插件：同声传译插件
         1. 在manifest.json中进行配置
         2. 调用同声传译的 api，参考文档
   7. 关于代理问题
      1. 小程序不需要配置代理，直接将地址写在baseUrl中，所以小程序的后端接口要支持跨域访问（cors）
      2. h5需要配置代理
   8. 关于微信小程序的 cookie ⭐️ ⭐️
      1. 微信小程序不支持原生的cookie操作
      2. 解决办法
         1. 引用 weaapp-cookie 库
         2. 用其他的校验方法替代cookie的功能
   9. 【补充】关于cors 解决跨域问题，
      1. 响应头中的三个字段
         1. Access-Control-Allow-Credentials 访问允许凭证
            1. Access-Control-Allow-Credentials 响应头表示是否可以将对请求的响应暴露给页面。返回true则可以，其他值均不可以。
         2. Access-Control-Allow-Origin 访问控制允许来源
            1. Access-Control-Allow-Origin 响应头指定了该响应的资源是否被允许与给定的origin共享
         3. Access-Control-Expose-Headers
            1. 响应首部 Access-Control-Expose-Headers 列出了哪些首部可以作为响应的一部分暴露给外部。
         4. 更多 CORS 详解，参考阮一峰老师的 博客 《跨域资源共享 CORS 详解》

9. 总结

   1. 这次写的这个小程序，总的来说，在页面和逻辑上都比较简单，所以用到的知识也比较基础
   2. 最大的收获就是复习了一下uni-app的知识和熟悉了一遍开发小程序的流程

   努力提高自己，真的能将把握主动的人生，加油！！！ 这种感觉真的好

上都比较简单，所以用到的知识也比较基础
2. 最大的收获就是复习了一下uni-app的知识和熟悉了一遍开发小程序的流程

努力提高自己，真的能将把握主动的人生，加油！！！ 这种感觉真的好

​