微信小程序（一）

1.初识小程序

1.1小程序历史

1. 2017 年度百度百科十大热词之一
2. 微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用 (张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小,下载速度很快,用户感觉不到下载的过程 )
3. 小程序刚发布的时候要求压缩包的体积不能大于 1M,，否则无法通过，在2017年4月做了改进，由原来的1M提升到2M；
4. 2017年1月9日0点，万众瞩目的微信第一批小程序正式低调上线。

1.2小程序的优势

1. 微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容易触达⽤⼾；
2. 推⼴app 或公众号的成本太⾼。
3. 开发适配成本低。
4. 容易⼩规模试错，然后快速迭代。
5. 跨平台。

1.3小程序使用

1. 安装微信小程序开发工具,安装稳定版进行开发

2. 注册小程序账号

3. 使用注册的appid进行使用，如果是测试号会限制很多功能

appid在官网登入后开发管理的开发设置中

 

2.小程序基础知识储备

2.1flex布局

flex布局

2.2移动端相关知识

物理像素

1 屏幕的分辨率

2 设备能控制显示的最小单元，可以把物理像素看成是对应的像素点

设备独立像素 & css 像素

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代

表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在 android 机中 CSS 像素就

不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。

dpr 比 & DPI & PPI

1) dpr: 设备像素比，物理像素/设备独立像素 = dpr， 一般以 Iphon6 的 dpr 为准 dpr =

2

2) PPI: 一英寸显示屏上的像素点个数

3) DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰

移动端适配方案

1. 为什么做 viewport 适配

a) 手机厂商在生产手机的时候大部分手机默认页面宽度为 980px

b) 手机实际视口宽度都要小于 980px，如: iphone6 为 375px

c) 开发需求： 需要将 980 的页面完全显示在手机屏幕上且没有滚动条

2. 实现：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

rem 适配

1. 为什么做 rem 适配

a) 机型太多，不同的机型屏幕大小不一样

b) 需求： 一套设计稿的内容在不同的机型上呈现的效果一致，根据屏幕大小不

同的变化，页面中的内容也相应变化

2. 实现：

function remRefresh() {
let clientWidth = document.documentElement.clientWidth; // 将屏幕等分 10 份
let rem = clientWidth / 10;
document.documentElement.style.fontSize = rem + 'px';
document.body.style.fontSize = '12px'; }
window.addEventListener('pageshow', () => {
remRefresh()
})
// 函数防抖
let timeoutId;
window.addEventListener('resize', () => {
timeoutId && clearTimeout(timeoutId);
timeoutId = setTimeout(() =>{
remRefresh()
}, 300)
})

3. 第三方库实现

lib-flexible + px2rem-loader

3.小程序特点概述

1. 没有 DOM

2. 组件化开发： 具备特定功能效果的代码集合

3. 体积小，单个压缩包体积不能大于 2M，否则无法上线

4. 小程序的四个重要的文件

a) *.js

b) *.wxml ---> view 结构 ----> html

c) *.wxss ---> view 样式 -----> css

d) *. json ----> view 数据 -----> json 文件

小程序适配方案: rpx (responsive pixel 响应式像素单位)

a) 小程序适配单位： rpx

b) 规定任何屏幕下宽度为 750rpx

c) 小程序会根据屏幕的宽度不同自动计算 rpx 值的大小

d) Iphone6 下： 1rpx = 1 物理像素 = 0.5px

 

 

4.小程序准备

4.1创建小程序

 

4.2微信开发者工具介绍

通过点击可依次指定模拟器 编辑器  调试器的显示和隐藏

 

 小程序网络请求只接受https类型的请求 开发时对于http请求可设置不检验合法域名

想要https类型请求也需要到官网进行配置

 

4.3小程序配置文件

⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的app.json 和 ⻚⾯⾃⼰的page.json

全局配置

app.json是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部tab等。普通快速启动项⽬⾥边的 app.json 配置

 详细配置在文档查看

 

页面配置

1. 这⾥的 page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和⼩程序⻚⾯相关的配置。 开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。 ⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容，⻚⾯中配置项会覆盖 app.json 的 window 中相同的配置项。

2. 常用配置属性列举: