微信小程序开发(1)-流程

小程序体验

可使用手机微信（6.7.2及版本以上）扫码下方小程序码，体验小程序：

微信小程序开发流程

申请小程序开发账号

1. 点击注册按钮

使用浏览器打开 https://mp.weixin.qq.com/ 网址，点击右上角立即注册即可进入到小程序开发账号的注册流程，主要流程截图如下：

2. 选择注册账号类型

   

3. 填写账号信息

   

   接下来完成注册引导，学习使用注意注册个人类型账号

安装小程序开发者账号

1. 获取小程序的AppID

   

2. 安装微信开发者工具

安装微信开发者工具是官方推荐使用的小程序开发工具，它的主要功能如下：

• 快速创建小程序项目
• 代码的查看和编辑
• 对小程序功能进行调试
• 小程序的预览和发布

3. 下载

4. 扫码登陆

   

创建和配置小程序项目

1. 设置外观和代理

   

2. 填写项目信息

   

3. 创建成功

   

4. 编译和预览

编译可以在开发工具上面预览效果，预览可以手机上面看效果，更加真实（需要手机扫码）。

5. 项目的基本组成结构

   

6. 小程序页面的组成部分

   小程序官方建议把所有小程序的页面，都存在pages目录中，以单独的文件夹存在，如图所示：

​

• .js文件（页面的脚本文件，存放页面的数据、事件处理函数等）
• .json文件(当前页面的配置文件，配置窗口的外观、表现等)
• .wxml文件（页面的模板结构文件，类似html）
• .wxss文件（当前页面的样式表文件，类似css）

小程序的运行机制

1. 小程序的启动过程

   • 把小程序的代码包下载到本地
   • 解析app.josn全局配置文件
   • 执行app.js小程序入口文件，调用App() 函数创建小程序实例
   • 渲染小程序首页
   • 小程序启动成功

2. 小程序页面的渲染过程

   • 加载解析页面的.json配置文件
   • 加载页面的.wxml模板和.wxss样式
   • 执行页面的.js文件，调用Page()创建页面实例
   • 页面渲染完成