微信小程序入门开发及问题整理

Posted 2021-02-28 baimeishaoxia

开发改图助手 小程序过程中遇到的问题，解决方法，和具体开发流程

小程序开发流程

需求确认

确认需求的时候注意微信的一些限制条件。这里列出来我遇到的点。

• 包的总大小不超过1m

• 页面总数不超过5张

• 存在编辑器和真机部分api效果不同 （例如：canvasToTempFilePath编辑器不能执行）

• 只有添加appid后才能有预览功能 并进行真机调试。但此时所有请求必须为配置好的第三方服务器。

前端脚手架确定

选择脚手架原因

• 微信小程序自带的编辑器 （不支持热更新 配置文件不支持注释 没有代码压缩。。。。等等）

脚手架介绍

• 集成了Redux，数据管理更方便

• 开发过程中，使用xml取代wxml，对开发工具更友好

• 开发过程中，使用less取代wxss，功能更强大

• 引入es-promise，以便可以创建并使用Promise

• 添加promisify工具函数，可以便捷的将官方Api转换成Pormise模式

• 引入normalizr，可以将数据扁平化，更方便进行数据管理

• 引入babel自动进行ES2015特性转换

• 对wxml/wxss/js/img压缩，相对开发者工具提供的压缩，会减小一丢丢体积。

这里主要是用的一个现成的脚手架

建议学习redux

1. 所有state都以对象树形式存储在一个单一的store里面

2. 唯一可改变state是用action,描述发生了什么。

3. 描述action如何改变state 需编写reducers

你应该把要做的修改变成一个普通对象，这个对象被叫做 action，而不是直接修改 state。然后编写专门的函数来决定每个 action 如何改变应用的 state，这个函数被叫做 reducer。

开发小程序

官方文档参上：https://mp.weixin.qq.com/debu...

问题记录

• 移动端适配问题

采用小程序rpx单位直接按照设计图来就可以 相当于升级版rem

• 主题色 标题栏颜色配置

在app.json可以配置

• canvas画图不能使用网络资源与base64,只能用本地文件

使用自带api存储成本地临时文件 再进行生产渲染

• 样式切换

1)可以直接绑定一个变量的 class 或者style 2)用wx:if wx:else

• 部分生成文件夹缺失

注意下编译信息有无报错

• 放在本地服务器 再用小程序打开 闪退

目前原因不定 只能先放到本地

webpack的中文文档

本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=h00c2c2cb0j