小程序文档: https://developers.weixin.qq.com/miniprogram/dev/ 创建小程序很简单,按文档走几步就行;生成的工程目录如下:
其中app.json和project.config.json是配置文件。 app.json
pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。 window字段 —— 小程序所有页面的顶部背景颜色,文字颜色定义在这里的。 看下本例子中的主页面: (page/index)
这是经典的 HTML + CSS + JS 样式,wxss相当于css样式,wxml相当于html,js就是js样式,json用于描述数据。 在wxml中定义一个Canvas组件:
在index.js中进行绘制:
绘制的方式如上,先从组件创建一个上下文,接着调用上下文的绘制api,最后draw出来。 看下绘制效果:
这段绘制程序,就是用不同比例进行矩形绘制,而且这个scale是可以叠加的。 更多绘制api的说明文档如下: https://developers.weixin.qq.com/miniprogram/dev/api/canvas/reference.html 问题是,这里的js绘制指令,在android客户端上是怎么执行的? 先讲下过程:
补充:其中的数据格式,也是一个绘制列表,比如每个绘制指令是一个action结构的话,那么就是一个action列表的结构。 具体一点:
过程大体如此,那么绘制指令其实可以分为几批次,比如上下文相关的,形变类的,普通绘制(比如矩形,文本等);在客户端的实现中,一定要注意执行的顺序(包括设定上下文的),不能在解析数据的时候就立即执行上下文设定否则会错乱。 另外微信绘制api基本是和android对齐的,因为大部分都有相同的绘制名称和参数对应上;ios的话就可能有点儿麻烦了。。。 先到这里。 |
微信小程序---绘制指令
发布:2018-05-08 14:29浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08