2017 年 1 月 9 日小程序正式上线，腾讯开放了个人开发者开发小程序，小程序从此就开始火爆，这一年，小程序狂揽 4 亿用户、1.7 亿的日常活跃，上线 58 万个。这是一个巨大的机会，对于企业宣传，拉新用户存在变革性的影响。

小程序的本质是：轻应用，就是不用安装就能使用的手机APP。

“跳一跳”养成了大家下拉寻找常用小程序的习惯。

小程序对开发者而言也是非常友好的。

微信就是一个“虚拟机”，小程序使用JavaScript编程，小程序将JavaScript翻译为机器能够识别的Java、OC等语言，能操作硬件，比如蜂鸣器、陀螺仪、相册、闪关灯、摄像头。

小程序屏蔽了手机操作系统之间的差异，我们写iOS的小程序、安卓的小程序是不需要考虑系统的差异的。

一个人最多只能有5个小程序项目，只能有5个小程序AppID，公司账户可以有20个小程序项目。

https://mp.weixin.qq.com/

去自己的邮箱点击激活右键的超级链接：

然后在打开的页面选择个人开发者，需要让你填写身份证号码和用户真实姓名，这里为了隐私就不截图了。

https://mp.weixin.qq.com/ 登录

可以有15个人为我们的小程序进行测试。

最高管理员有所有的权限：

添加了一些同学当做体验者权限：

即可看到AppID，备份好。

微信官方的开发者工具，集项目创建、开发、调试于一身。

下载地址：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安装完毕之后，使用：

勾选「建立普通快速启动模板」后，会为项目生成一份Hello World代码，这样可以方便我们了解小程序框架的代码目录结构。你也可以对比看看不勾选时建立的空项目是如何的。

微信小程序开发工具集成度很高：

实时调试热更新

脚手架起步

预览自动打包

控制台有网络请求和console，集成了Chrome浏览器的功能

由于开发条件的限制，不可能对所有尺寸手机的屏幕进行测试，但往往很多bug出现在屏幕适配的问题上，所以这些提供了很多屏幕尺寸进行测试。

当创建“默认普通快速启动模板”之后，项目会自动创建了一些文件。把这样的能够帮我们起步的工具叫做“脚手架”。React，有脚手架React-cli。Vue有脚手架vue-cli，还有第三方脚手架，比如yeoman。

零散文件：

删除app.js文件大括号中的默认配置：

看一下pages文件夹，文件夹中的子文件夹就是小程序的一个个页面。一个页面就是一个文件夹。

每个页面文件夹中，有四个文件，都是同名文件。

将index.wxml的页面删除干净：

将index.js文件删干净：

这里Page函数是内置的函数，表示创建一个页面。大括号中的内容是页面的一些生命周期、数据。

删除logs文件页面，和utils文件夹，此时项目非常干净：

每个小程序都是由多个页面组成的，但在这些页面之上，存在被所有页面共用的内容，比如标题颜色，网络超时设置等，这些被统称为「全局配置」，而app.json文件里保存的就是这些配置内容。

「全局配置」包含5个部份，包括 ：

 pages 「页面路径」：用于指定小程序里所有页面对应的目录路径，只有加入到这个配置项里，页面才会生效

 window「窗口表现」：用于指定小程序窗口的外观表现，比如上面提到的标题颜色、背景颜色等等

 tabBar「底部tab」：小程序允放进开发者设置底部tab进行页面切换，这个配置项就是用于定义底部tab按钮样式。

 networkTimeout「网络请求超时」：在开发小程序的开发过程中，不可避免会出现网络请求失败的情况，如果没有设置一个网络超时时间，在出现错误的时候，小程序就会一直等待请求响应数据，如果有了超时时间，在超过设置的时间没有收到数据时，我们可以为用户输出异常反馈信息，并引导用户后续可以尝试的操作，提高程序代码的可用性

 debug「调试模式」：开启调试模式时，调试信息会输出到控制台里，包括页面路由，数据更新，事件触发等，可以帮助开发者快速定位常见问题。
关于其他配置项细节可以参考文档「小程序的配置 app.json」 。

手册：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。

写程序就两个东西：API、算法，API不用背，算法忘不掉。

tabBar的属性：

其中list属性数组项的属性：

更改之后的完整的app.json文件：

小程序采用 WXML + WXSS + JS 三种开发语言组合，其和网页编程采用的 HTML + CSS + JS 类似，WXML 用来描述当前这个页面的结构，WXSS 用来描述页面的样式，JS 用来处理这个页面和用户的交互。

WXML（WeXin Markup Language）和 HTML 类似，也有标签和属性，但针对小程序平台做了些优化。

相较 HTML，小程序的标签显得更加简洁，比如 div、section、header等块级标签统一为view、p、span、b 等文案类标签统一为text，同时新增很多实用标签，比如 picker 滚动选择器、map 地图、web-view 网页容器等。

可以简单理解为，小程序所有的标签都是原生组件。

WXSS（WeXin Style Sheets）是微信定义的一套样式语言，其具有 CSS 大部分特性，同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

小程序使用 rpx（responsive pixel）作为尺寸单位。屏幕宽度固定为 750rpx，设置了 rpx 单位的元素可以根据屏幕宽度进行自适应，所以设计稿统一以 750px 输出（iPhone 6 标准）。

小程序没有 html 、body标签，如果想要设置页面的样式，可以直接使用 page 选择器：

小程序中JavaScript没有 window、document 等变量，大部分浏览器中全局方法会被禁用，比如 alert。但也有部分被支持，比如 setTimeout、encodeURIComponent等，具体可以在开发者工具中尝试使用，官方文档并没有详细的介绍。

 　　　　　　　　　　　　　　　　　　注：表格中的可用性是经过测试得出，小程序升级迭代可能发生变化。

rpx实际上就是系统级的rem（把页面按比例分割750份，1rpx=window.innerWidth/750），或者scale伸缩布局的width=750。也就是说，微信小程序的rpx帮大家把rem中设置根元素字体尺寸这步省了，或者减少了scale伸缩布局不能开启GPU raster的问题。

随着前端开发技术的发展，H5页面的能力越来越大，我们既可以利用IndexedDB建立浏览器本地数据库，也可以通过WebRTC进行网络间点对点实时通信，甚至于利用FileReader和Blob等对本地文件进行读取和修改等操作。另一方面，小程序在设计上，也需要为开发者提供许多微信独有的API，比如获取用户微信昵称，调用微信支付接口等等。如果这些API与现有的前端能力相结合，开发者的能力将被极大扩展，更可能超过微信保护用户的可控范围。为了在“保护用户数据”和“对开发者开放能力”之间找到平衡，自然有必要把这两者放在自己力所能及的「沙盒模型」中实现。而这个沙盒，也就是我们的小程序框架，我们使用WXML+WXSS+JavaScript构建的小程序，都是运行在这个沙盒模型中。

传统的网页开发，是使用HTML进行页面构建的，开发者经常会用到div、span、ul/li等标签进行页面布局，这些基础标签通过互相结合并与CSS定义的样式搭配，从而实现许多功能组件，比如用户确认窗口、日历选择器、滑动广告板等等。在小程序中，开发者同样也会用到标签，但这些标签，已经过微信的一层封装，以组件的形式提供给开发者使用，每个组件都会实现自己特有的功能，提高了开发效率，而布局一般是采用view组件来实现。「组件化」使WXML标签更具语义，通过名称就可以知道组件的具体功能。

WXML还有一个特点与HTML有所不同，就是「数据绑定」。传统的HTML需要通过JavaScript对DOM结点进行操作，才能动态改变页面内容。而在WXML里，数据可以跟页面结构进行绑定，JavaScript只对数据进行操作，而这些数据的修改，最终会反馈给绑定数据的页面结构并动态更新。这种机制类似于Vue.js的声明式渲染，实现了页面和数据的分离。

在web开发的过程中，经常会提到「像素」这个词，那么，像素到底是什么？移动端的像素与桌面端是否有区别？同样大小的手机屏幕，为什么有的像素高，有的像素低？下面让我们通过资料阅读找到这些问题的答案吧。

「像素」是图像显示的基本单位，译自英文「pixel」，一个像素就是屏幕上能够显示一种特定颜色的最小区域。如下图右侧图片中，每一小格子代表一像素：

当设备尺寸相同，但像素变得更密集时，屏幕能显示的画面过渡更细致，图像看起来就更清晰明快。由此定义了「屏幕像素密度PPI（pixel per inch）」，用于代表屏幕上每英寸可以显示的像素点的数量：

随着移动设备屏幕技术的发展，手机的PPI(屏幕像素密度)越来越高。一个典型的例子就是，从iPhone4开始，苹果公司推出了retina视网膜屏幕。之所以叫做视网膜屏幕，是因为屏幕的PPI太高，人的视网膜无法分辨出屏幕上的像素点。iPhone4的PPI提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍。

 当DPR为1时，使用1（1×1）个物理像素显示1个逻辑像素；

 当DPR为2时，使用4（2×2）个物理像素显示1个逻辑像素；

 当DPR为3时，使用9（3×3）个物理像素显示1个逻辑像素。

图示如下：

如何知道自己手机屏幕尺寸？

2、使用微信的示例小程序获取手机屏幕的逻辑像素：

微信扫码进入 – 底部「接口」按钮 – 「设备」选项 - 「获取手机系统信息」选项 - 「获取手机系统信息」按钮 – 「屏幕宽度」和「屏幕高度」。

计算DPR后在下图所示入口进行尺寸设置。