小程序模板网

微信小程序---绘制指令

小程序文档:

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的话就可能有点儿麻烦了。。。

先到这里。



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24350.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询