|
小程序文檔：
https://developers.weixin.qq.com/miniprogram/dev/
創(chuàng)建小程序很簡(jiǎn)單，按文檔走幾步就行；生成的工程目錄如下：
其中app.json和project.config.json是配置文件。
app.json
-
{
-
-
"pages":[
-
-
"pages/index/index"
-
-
],
-
-
"window":{
-
-
"backgroundTextStyle":"light",
-
-
"navigationBarBackgroundColor": "#fff",
-
-
"navigationBarTitleText": "",
-
-
"navigationBarTextStyle":"black"
-
-
}
-
-
}
pages字段 —— 用于描述當(dāng)前小程序所有頁(yè)面路徑，這是為了讓微信客戶端知道當(dāng)前你的小程序頁(yè)面定義在哪個(gè)目錄。
window字段 —— 小程序所有頁(yè)面的頂部背景顏色，文字顏色定義在這里的。 看下本例子中的主頁(yè)面: (page/index)
這是經(jīng)典的 HTML + CSS + JS 樣式，wxss相當(dāng)于css樣式，wxml相當(dāng)于html，js就是js樣式，json用于描述數(shù)據(jù)。
在wxml中定義一個(gè)Canvas組件:
-
<canvas canvas-id="myCanvas"></canvas>
在index.js中進(jìn)行繪制：
-
Page({
-
-
data: {
-
-
winNum: 0
-
-
},
-
-
//生命周期，剛進(jìn)來(lái)
-
-
onLoad: function () {
-
-
},
-
-
canvasIdErrorCallback: function (e) {
-
-
console.error(e.detail.errMsg)
-
-
},
-
-
onReady: function (e) {
-
-
// 使用 wx.createContext 獲取繪圖上下文 context
-
-
var ctx = wx.createCanvasContext('myCanvas')
-
-
ctx.strokeRect(10, 10, 25, 15)
-
-
ctx.setLineWidth(1)
-
-
ctx.scale(2, 2)
-
-
ctx.strokeRect(10, 10, 25, 15)
-
-
ctx.scale(2, 2)
-
-
ctx.strokeRect(10, 10, 25, 15)
-
-
ctx.draw()
-
-
}
-
-
})
繪制的方式如上，先從組件創(chuàng)建一個(gè)上下文，接著調(diào)用上下文的繪制api，最后draw出來(lái)。
看下繪制效果：
這段繪制程序，就是用不同比例進(jìn)行矩形繪制，而且這個(gè)scale是可以疊加的。
更多繪制api的說(shuō)明文檔如下：
https://developers.weixin.qq.com/miniprogram/dev/api/canvas/reference.html
問(wèn)題是，這里的js繪制指令，在android客戶端上是怎么執(zhí)行的？
先講下過(guò)程：
-
前端的調(diào)用繪制指令的js代碼，其實(shí)是在一個(gè)js的對(duì)象上操作的，這些繪制指令會(huì)將信息匯聚到這個(gè)對(duì)象中。
-
前端和客戶端的交互，是通過(guò)webview的js bridge來(lái)進(jìn)行的，客戶端注冊(cè)webview的js監(jiān)聽(tīng)（addJavascriptInterface），收到相關(guān)數(shù)據(jù)（定義好的數(shù)據(jù)協(xié)議），然后再還原成像繪制指令一樣的列表，再進(jìn)行端上繪制。
補(bǔ)充：其中的數(shù)據(jù)格式，也是一個(gè)繪制列表，比如每個(gè)繪制指令是一個(gè)action結(jié)構(gòu)的話，那么就是一個(gè)action列表的結(jié)構(gòu)。 具體一點(diǎn)：
-
前端寫了js代碼：
-
ctx.strokeRect(10, 10, 25, 15)
-
-
ctx.scale(2, 2)
-
-
ctx.strokeRect(10, 10, 25, 15)
-
-
ctx.draw()
-
那么匯聚得到的傳輸數(shù)據(jù)大概是這樣：
-
"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]}]"
-
在客戶端上先解析這些數(shù)據(jù)，形成類似的Action列表數(shù)據(jù)，然后在View的onDraw中把這些指令繪制出來(lái)。
過(guò)程大體如此，那么繪制指令其實(shí)可以分為幾批次，比如上下文相關(guān)的，形變類的，普通繪制（比如矩形，文本等）；在客戶端的實(shí)現(xiàn)中，一定要注意執(zhí)行的順序（包括設(shè)定上下文的），不能在解析數(shù)據(jù)的時(shí)候就立即執(zhí)行上下文設(shè)定否則會(huì)錯(cuò)亂。
另外微信繪制api基本是和android對(duì)齊的，因?yàn)榇蟛糠侄加邢嗤睦L制名稱和參數(shù)對(duì)應(yīng)上；ios的話就可能有點(diǎn)兒麻煩了。。。
先到這里。
|
