小程序文檔：

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

創(chuàng)建小程序很簡單，按文檔走幾步就行；生成的工程目錄如下：

其中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)

這是經(jīng)典的 HTML + CSS + JS 樣式，wxss相當于css樣式，wxml相當于html，js就是js樣式，json用于描述數(shù)據(jù)。

在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. })

繪制的方式如上，先從組件創(chuàng)建一個上下文，接著調(diào)用上下文的繪制api，最后draw出來。

看下繪制效果：

這段繪制程序，就是用不同比例進行矩形繪制，而且這個scale是可以疊加的。

更多繪制api的說明文檔如下：

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

問題是，這里的js繪制指令，在android客戶端上是怎么執(zhí)行的？

先講下過程：

1. 前端的調(diào)用繪制指令的js代碼，其實是在一個js的對象上操作的，這些繪制指令會將信息匯聚到這個對象中。

2. 前端和客戶端的交互，是通過webview的js bridge來進行的，客戶端注冊webview的js監(jiān)聽（addJavascriptInterface），收到相關(guān)數(shù)據(jù)（定義好的數(shù)據(jù)協(xié)議），然后再還原成像繪制指令一樣的列表，再進行端上繪制。

補充：其中的數(shù)據(jù)格式，也是一個繪制列表，比如每個繪制指令是一個action結(jié)構(gòu)的話，那么就是一個action列表的結(jié)構(gòu)。  具體一點：

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. 那么匯聚得到的傳輸數(shù)據(jù)大概是這樣：

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. 在客戶端上先解析這些數(shù)據(jù)，形成類似的Action列表數(shù)據(jù)，然后在View的onDraw中把這些指令繪制出來。

過程大體如此，那么繪制指令其實可以分為幾批次，比如上下文相關(guān)的，形變類的，普通繪制（比如矩形，文本等）；在客戶端的實現(xiàn)中，一定要注意執(zhí)行的順序（包括設定上下文的），不能在解析數(shù)據(jù)的時候就立即執(zhí)行上下文設定否則會錯亂。

另外微信繪制api基本是和android對齊的，因為大部分都有相同的繪制名稱和參數(shù)對應上；ios的話就可能有點兒麻煩了。。。

先到這里。