如何开发微信小程序

小程序是一种不需要下载安装即可使用的应用。它是连接用户与服务的新方式，它实现了应用“触手可及” 的梦想，用户通过扫一扫或者搜一下即可打开应用，应用将无处不在，随时可用，用完即走。

2017年1月，微信正式推出微信小程序。同年9月，支付宝也推出了支付宝小程序。2018年7月，百度也不甘落后，推出百度智能小程序。从此BAT三巨头都进军了小程序领域。

此篇是微信小程序开发的一个简明介绍和关键说明。

微信小程序的主要开发语言是 JavaScript，如果你使用过 Vue 或者 React，你将会对微信小程序的开发有一种亲切感，它们的一些理念有一些类似，比如数据绑定、数据驱动视图等。

不过跟开发普通网页不同，开发微信小程序需要进行一些特定的准备工作。

一、准备工作

1. 注册小程序账号
   注册地址
2. 获取AppID
   位于小程序管理平台的菜单 “开发”-“开发设置”
3. 安装小程序开发者工具
   下载地址
4. 配置项目
   • 打开小程序开发者工具，用微信扫码登录开发者工具
   • 新建项目
   • 选择小程序项目
   • 选择在本地准备好的代码路径
   • 填入第二步获取到的AppID
   • 完成，进入开发界面

微信开发者工具会很贴心地为我们初始化好一个默认的工程，好让我们不用从零开始编写。

二、一些重要的概念

1. 小程序的组成
   小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

2. 一个小程序主体部分由三个文件组成，必须放在项目的根目录：

   • app.js 小程序逻辑
   • app.json 小程序公共配置——相当于html
   • app.wxss 小程序公共样式表（非必须）——相当于css

3. 一个小程序页面由四个文件组成：

   • .js文件 页面逻辑
   • .wxml文件 页面结构
   • .json文件 页面配置（非必须）
   • .wxss文件 页面样式表（非必须）

   为了方便开发者减少配置项目，描述页面的四个文件必须具有相同的路径与文件名。

4. 最终，一个小程序的基本目录结构，大致长这个样子：

   |—pages/
   |   |—about/
   |      |—about.js
   |      |—about.json
   |      |—about.wxml
   |      |—about.wxss
   |—app.js
   |—app.json
   |—app.wxss
   |—project.config.js // 工具配置,存放开发者对开发工具的一些个性化配置，例如界面颜色、编译配置等

5. 宿主环境
   每个小程序都是运行在它所在的微信客户端上的，通过微信客户端给他提供的运行环境，小程序可以直接获取微信客户端的原生体验和原生能力。

6. 基本架构
   小程序的运行环境分为渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

   其中渲染层的界面使用 WebView 线程进行渲染，逻辑层采用 jsCore 线程运行。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程，这两个线程的通信会经由微信客户端（Native）做中转，逻辑层发送网络请求也经由 Native 转发。

   

三、小程序语法

• WXML 语法参考
• WXS 语法参考

四、小程序发布流程

1. 在开发工具里，提交代码，填写版本信息
2. 在小程序管理平台提交审核
3. 收到审核通过通知后，在小程序管理平台，点击发布
4. 小程序将会发布到线上提供服务，可以下载二维码让别人扫码使用了