微信小程序开发

小程序内容简介

• 能够知道如何创建小程序项目
  • 微信开发者工具的使用、appID 的获取
• 能够清楚小程序项目的基本组成结构
  • app.js、app.json、app.wxss、pages 文件夹
• 能够知道小程序页面由几部分组成
  • wxml、wxss、json、js
• 能够知道小程序中常见的组件如何使用
  • view、text、image
• 能够知道小程序如何进行协同开发和发布
  • 成员管理、发布小程序、查看运营数据

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

1.运行环境不同

• 网页运行在浏览器环境中
• 小程序运行在微信环境中

2.API不同

由于运行环境的不同，所以小程序中无法调用 DOM 和 BOM 的 API。但是，小程序中可以调用微信环境提供的各种 API，例如:地理定位、扫码、支付

3.开发模式不同

• 网页的开发模式: 浏览器 + 代码编辑器
• 小程序有自己的一套标准开发模式
  • 申请小程序开发账号
  • 安装小程序开发者工具
  • 创建和配置小程序项目

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

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

小程序的核心技术主要是三个：

• 页面布局：WXML，类似HTML
• 页面样式：WXSS，几乎就是CSS(某些不支持，某些进行了增强，但是基本是一致的)
• 页面脚本：JavaScript+WXS(WeixinScript)

小程序架构：

逻辑层 App Service

小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发 JavaScript 代码的运行环境以及微信小程序的特有功能。

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。

在 JavaScript 的基础上，微信增加了一些功能，以方便小程序的开发：

• 增加 App 和 Page 方法，进行程序注册和页面注册。

• 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。

• 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。

• 提供模块化能力，每个页面有独立的作用域。

注意：小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等。

视图层 View

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language) 用于描述页面的结构。

WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

组件(Component)是视图的基本组成单元。

目录结构

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

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

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

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

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

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

从上述的架构图、文件组成部分来看，重点分析的就是小程序的逻辑层。而逻辑层主要的组成部分是由 app.js、app.json、js 文件、json 配置文件等组成，因此测试过程中主要分析的对象就是这一些。

---

微信小程序源码提取与常见漏洞

测试准备

系统

windows

常用工具

名称	用途	下载地址
wxappUnpacker	小程序源代码获取工具
wxapkgconvertor	小程序源代码获取工具	https://github.com/ezshine/wxapkg-convertor/releases
UnpackMiniApp	小程序解密
微信开发者工具	调试获取的小程序代码	https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
BurpSuite	抓包分析测试	https://portswigger.net/burp
proxifier	流量代理	https://www.proxifier.com/