一、运行环境

小程序接入流程：注册-小程序信息完善-小程序开发-提交审核发布

我们知道微信小程序运行在三个终端上：iOS，以及用于调试的开发者工具。本文将介绍微信小程序如何在开发者工具中运行

(1）申请小程序账号

点击填写信息并按照指引提交相应信息，即可拥有自己的小程序账号，这个账号叫

申请小程序账号后微信小程序的开发环境介绍，我们可以在小程序管理平台进行其他相关设置，包括：管理您的小程序权限、查看数据报表、发布小程序等。

(2）下载“微信开发者工具”

下载地址：

(3）初始化小程序项目

说明：

在项目目录中选择一个空文件夹，自己选择项目名称，也就是你刚刚申请的小程序账号

点击“确定”，可以看到如下界面，此时你的小程序项目初始化完成：

开发工具界面介绍

1、模拟器：微信小程序界面效果在此展示，开发者可以选择不同的设备 2、编辑器：在这个地方可以看到整个项目的文档目录结构 3、调试器，包含7大功能模块：Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace 8、 Storage，使用 wx.setStorage 或者 wx.setStorageSync 对数据进行存储。这里注意，不需要该数据时应及时销毁 9、 AppData, 显示当前项目运行时小程序 的具体数据，实时地反映项目数据情况，可以在此处编辑数据，并及时地反馈到界面上 10、 Wxml，相当于浏览器控制台的 “Elements”，在这里开发人员可以方便的查看 dom 结构，或者可以进行 CSS 样式的调整 4、通常使用小程序模式 5、编译模式。小程序项目启动的时候，通常选择 “普通编译”。在这里我们还可以 “添加编译模式”， 添加目标页面进行编译，这样我们每次编译后就可以直接看到想要查看的页面。 在这里可以点击“预览”， 弹出一个二维码，使用手机进行扫描就可以在手机端进行查看 6、前后台切换。默认是前台，这样在模拟器我们看到的是页面展示效果；当选择切换到后台的时候，此时用户可以在模拟器进行选择，帮助开发者模拟一些客户端的环境操作 7、清缓存 11、Sensor（翻译为：感应）。开发者可以在这里选择模拟地理位置，或者调试重力感应 API 12、显示该小程序的AppID，项目地址等。一个小程序只有一个AppID，这个AppID相当于该小程序的身份标识 13、项目设置 基础调试库：可以在此选择不懂版本的开发工具 ES6 转 ES5：勾选后，会默认使用 babel 将开发者 ES6 语法代码转换为三端都能很好支持的 ES5 的代码，帮助开发者解决环境不同所带来的开发问题，注意这里默认开启 javascript 严格模式 上传代码时样式自动补全。这里需要开发者在 iOS 和 Android 上分别检查小程序的真实表现 14、域名信息。在此将显示小程序的安全域名信息 15、腾讯云状态。在此显示腾讯云状态、开发环境信息、域名信息

二、目录结构

初始化项目的目录结构如下：

四种不同类型的文件：json、wxml、wxss、js

(1）json 文件

小程序配置app.json

全局配置，配置项包括所有页面的路径、界面性能、网络超时、底部标签等

本地配置。配置方法和上面app.json的配置方法一样

通常你在使用一个工具的时候，会根据自己的喜好做一些个性化的配置，比如界面颜色、编译配置等。当你在另一台电脑上重新安装工具时，你必须重新配置它。 .

考虑到这一点，小程序开发工具会在每个项目的根目录下生成一个..json，你在工具上所做的任何配置都会写入这个文件，当你重新安装工具或更换电脑时工作，

只要你加载了同一个项目的代码包，开发者工具就会自动恢复你开发项目时的个性化配置，包括编辑器的颜色、上传时自动压缩代码等。系列选项

(2）wxml 文件

微信小程序采用MVVM开发模式，提倡渲染与逻辑分离。因此，WXML 具有一些能力：数据绑定、列表渲染、条件渲染、模板、事件、引用（和），见以下链接

(3）wxss 文件

WXSS拥有CSS的大部分特性，小程序也对WXSS做了一些扩展和修改。

增加了大小单位rpx，小程序底层直接转换。开发者无需考虑不同移动设备的屏幕会有不同的宽度和设备像素比

提供全局和本地样式。可以写app.wxss为全局样式，会应用到小程序的所有页面，局部样式page.css只写当前页面

(4）js 文件

我们通过 js 脚本处理用户操作

这里的事件可以是：与手指触摸相关的一系列事件（如：手指触摸动作的开始、触摸后的移动、触摸动作的结束等）、一系列事件与小程序的动画相关（如：动画何时开始，一次迭代中的第一次，动画完成时等）

三、生命周期

(1）注册程序

注册过程只有3个生命周期：,,,

除了App()函数中的三个小程序生命周期函数，还有哪些函数可以调用？

我们还可以在App()函数中添加错误监听函数，页面不存在时的监听函数，或者任何其他自定义函数，

(2）注册页面

注册页面有5个生命周期：、、、、

前后端定义：当用户点击左上角关闭，或者按下设备home键离开微信时，小程序不直接销毁，而是进入后台；当用户再次进入微信或再次打开小程序时，会再次从后台启动。进入前台

小程序什么时候销毁（也叫关闭小程序）：当小程序进入后台一段时间，或者系统占用资源过多，小程序就会被销毁；当用户扫描、转发等时，入口进入小程序，没有顶部小程序退出（下面有截图，分别展示了转发入口和小程序）

四、与H5比较

能力

(1)什么是H5

首先，H5！ = 。 H5 是一个包含一系列技术规范的标准。当我们谈论 H5 时，我们实际上是在谈论一个问题的解决方案。例如：如果我们想做一个很酷的移动网站，我们需要讨论一个解决方案。这个解决方案不仅包括一些新标签的使用，还包括css3、通信、标准盒子模型等。前端基础什么的都可以。

我们使用一组称为 H5 的标准开发网页。通常这些网页可以嵌入到一些APP或者小程序中，小程序可以通过容器组件web-view来托管网页

(2)微信小程序和H5有什么区别

这个话题也可以这样解释：使用微信小程序标准开发项目和使用H5标准开发项目有什么区别