小程序文档：

https://developers.weixin.qq.com/miniprogram/dev/

创建小程序很简单，按文档走几步就行；生成的工程目录如下：

其中app.json和project.config.json是配置文件。

app.json

1. {
2.  
3.   "pages":[
4.  
5.     "pages/index/index"
6.  
7.   ],
8.  
9.   "window":{
10.  
11.     "backgroundTextStyle":"light",
12.  
13.     "navigationBarBackgroundColor": "#fff",
14.  
15.     "navigationBarTitleText": "",
16.  
17.     "navigationBarTextStyle":"black"
18.  
19.   }
20.  
21. }

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。  看下本例子中的主页面: (page/index)

这是经典的 HTML + CSS + JS 样式，wxss相当于css样式，wxml相当于html，js就是js样式，json用于描述数据。

在wxml中定义一个Canvas组件:

1. <canvas canvas-id="myCanvas"></canvas>

在index.js中进行绘制：

1. Page({
2.  
3.   data: {
4.  
5.     winNum: 0
6.  
7.   },
8.  
9.   //生命周期，刚进来
10.  
11.   onLoad: function () {
12.  
13.   },
14.  
15.   canvasIdErrorCallback: function (e) {
16.  
17.     console.error(e.detail.errMsg)
18.  
19.   },
20.  
21.   onReady: function (e) {
22.  
23.     // 使用 wx.createContext 获取绘图上下文 context
24.  
25.     var ctx = wx.createCanvasContext('myCanvas')
26.  
27.     ctx.strokeRect(10, 10, 25, 15)
28.  
29.     ctx.setLineWidth(1)
30.  
31.     ctx.scale(2, 2)
32.  
33.     ctx.strokeRect(10, 10, 25, 15)
34.  
35.     ctx.scale(2, 2)
36.  
37.     ctx.strokeRect(10, 10, 25, 15)
38.  
39.     ctx.draw()
40.  
41.   }
42.  
43. })

绘制的方式如上，先从组件创建一个上下文，接着调用上下文的绘制api，最后draw出来。

看下绘制效果：

这段绘制程序，就是用不同比例进行矩形绘制，而且这个scale是可以叠加的。

更多绘制api的说明文档如下：

https://developers.weixin.qq.com/miniprogram/dev/api/canvas/reference.html

问题是，这里的js绘制指令，在android客户端上是怎么执行的？

先讲下过程：

1. 前端的调用绘制指令的js代码，其实是在一个js的对象上操作的，这些绘制指令会将信息汇聚到这个对象中。

2. 前端和客户端的交互，是通过webview的js bridge来进行的，客户端注册webview的js监听（addJavascriptInterface），收到相关数据（定义好的数据协议），然后再还原成像绘制指令一样的列表，再进行端上绘制。

补充：其中的数据格式，也是一个绘制列表，比如每个绘制指令是一个action结构的话，那么就是一个action列表的结构。  具体一点：

1. 前端写了js代码：

1.     ctx.strokeRect(10, 10, 25, 15)
2.  
3.     ctx.scale(2, 2)
4.  
5.     ctx.strokeRect(10, 10, 25, 15)
6.  
7.     ctx.draw()

1. 那么汇聚得到的传输数据大概是这样：

1. "canvasId":"myCanvas","actions":"[{\"method\":\"strokeRect\",\"data\":[10,10,25,15]},{\"method\":\"setLineWidth\",\"data\":[1]},{\"method\":\"scale\",\"data\":[2,2]},{\"method\":\"strokeRect\",\"data\":[10,10,25,15]},{\"method\":\"scale\",\"data\":[2,2]},{\"method\":\"strokeRect\",\"data\":[10,10,25,15]}]"

1. 在客户端上先解析这些数据，形成类似的Action列表数据，然后在View的onDraw中把这些指令绘制出来。

过程大体如此，那么绘制指令其实可以分为几批次，比如上下文相关的，形变类的，普通绘制（比如矩形，文本等）；在客户端的实现中，一定要注意执行的顺序（包括设定上下文的），不能在解析数据的时候就立即执行上下文设定否则会错乱。

另外微信绘制api基本是和android对齐的，因为大部分都有相同的绘制名称和参数对应上；ios的话就可能有点儿麻烦了。。。

先到这里。