项目页面列表
- 主页
- 轮播图、推荐栏、排行榜
- 视频video页
- 个人中心页
- 登录、最近播放
- 登录页
- 推荐歌曲页
- 音乐播放页
前期准备
- 注册微信小程序账号mp.weixin.qq.com/cgi-bin/reg…
- 微信开发者工具developers.weixin.qq.com/miniprogram…
可以使用微信小程序官方指南进行学习 developers.weixin.qq.com/miniprogram…
预备知识
- flex布局
- 移动端相关知识
- 物理像素
- 屏幕的分辨率,设备能控制显示的最小单元,可以把物理像素看成是对应的像素点
- 设备独立像素 & CSS像素
- 虚拟像素
- dpr & DPI & PPI
- dpr:设备像素比,物理像素/设备独立像素 = dpr,一般以iphone6的dpr为准,dpr=2
- PPI:一英寸显示屏上的像素点个数
- DPI:最早指的是打印机在单位面积上打印的墨点数,墨点越多越清晰
- 移动端适配方案
- viewport适配(完美视口)—— 因为实际手机页面比开发的布局页面小
<meta name="viewport" content="width=device-width,initial-scale=1.0">
- rem适配(根字体)——不同的机型屏幕不一样,但是只有一套设计稿
- 第三方库实现
- lib-flexible + px2rem-loader