1. 微信小程序的注册流程
- 去微信公众平台注册小程序账号
- 获得appid和appsecret
2. 微信开发者工具安装及使用讲解
- 官方网址直接下载安装
- 出现合法域名校验错误
解决:详情里勾上“不校验安全域名、web-view 域名、TLS 版本以及 HTTPS 证书”
3. 小程序目录结构分析
结构图:
结构
4. 新建一个小程序及框架组成
- 在app.json中的pages中添加我们要新建页面的路径
小程序自动生成结构
5. 小程序生命周期和页面生命周期
- 小程序启动时先执行onlauch>onshow,然后再执行页面onload>onshow>onready
- 小程序生命周期:
- onlauch 小程序初始化调用
- onshow
- onhide
- 页面生命周期:
- onload 页面初始化只调用一次
- onshow
- onready 页面完成只调用一次
- onhide
- onunload
6. 小程序自适应尺寸单位rpx
rpx:根据屏幕宽度进行自适应
不管手机屏幕多宽都是750rpx,rpx是不固定的
尺寸单位
建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
使用步骤:
- 确定设计稿宽度 pageWidth
- 计算比例 750rpx = pageWidth,因此 1px = 750rpx / pageWidth
- 在less文件中,只要把设计稿中的px = 750rpx / pageWidth rpx即可
7. 使用flex弹性布局
在父容器器上加上display:flex,将我们父容器变成弹性容器
.sort_box {
display: flex;
flex-direction: row;//水平排列列
margin: 0 30rpx;
justify-content: space-around;//每个项目的两端间隔相等
}