极光征文| Hello 小程序

极光

极光一直致力于提供行业大数据标准化产品和服务，目前推出了包括推送，IM，统计等场景是业务 SDK。每一款 SDK 除了有基于 Android 和 iOS 原生系统支持，还扩展了 RN，Cordova 等各式各样的插件集成，web 方面也支持了 IM ，快应用的统计等。

前言

微信小程序发展很快，即用即走，各家服务商均推出了基于小程序的 SDK 集成，极光也有小程序的 IM SDK。
开发一款 SDK，首先要对开发环境要有了解，本文小程序 SDK 的开发前序旨在对微信小程序开发环境的简介，后续再继续分享我的 SDK 封装思路。

一、小程序介绍和开发环境

1.1 小程序与普通网页开发的区别

• 小程序主要开发语言也是 JavaScript ，但是逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中；网页的开发渲染线程和脚本线程是互斥的。
• 小程序缺少相关的 DOM API 和 BOM API，所以无法使用前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等。
• 小程序缺少 Native 模块和 NPM 包管理的机制，小程序中无法加载原生库，也无法直接使用大部分的 NPM 包。
• 网页开发环境面向浏览器，小程序开发面向微信客户端

1.2 小程序的运行环境

1.3 账号问题

• 一个邮箱只能注册一个小程序，个人最多注册 5 个，组织机构最多注册 50 个。
• 注册地址 ：https://mp.weixin.qq.com/wxopen/waregister?action=step1

1.4 官方开发工具

• 微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

二、小程序开发

2.1四种基本文件

• 配置代码 JSON 文件：小程序里 JSON 扮演的静态配置的角色。
• 模板代码 WXML 文件：是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。类似 Web 开发的 HTML。
• 样式代码 WXSS 文件：是一套用于小程序的样式语言，用于描述 WXML 的组件样式，也就是视觉上的效果。类似 web 开发的 CSS，WXSS 做了补充和修改。
• 逻辑代码 JavaScript 文件：开发业务逻辑以及调用小程序的 API 来完成业务需求。

2.2 代码构成

2.2.1 整体架构

小程序包含一个 app 来描述整体，包含多个 page 来描述对应单页面。代码结构如下图：

2.2.2 程序主体

程序主体 app 由三个文件组成，必须放在项目根目录，如下：

2.2.3 小程序页面

一个小程序页面 page 由四个文件组成，分别是：

2.3 三方框架

除了原生微信开发，很多前端框架也推出了适应微信小程序开发的版本

• wepy ，github：https://github.com/Tencent/wepy
• mpvue ，github：https://github.com/Meituan-Dianping/mpvue
• taro ，github：https://github.com/NervJS/taro
• 其他

三、其他相关资料

微信小程序开发资源汇总

「本文为极光征文参赛文章」