dntzhang / cax

Canvas 渲染引擎,支持 SVG,兼容了小程序、小游戏和 Web

Home Page:https://dntzhang.github.io/cax

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

如何不使用小程序组建的形式在小程序中使用,我想在uniapp中使用应该怎么做?

awen1988 opened this issue · comments

水平比较菜,详细案例最好了,哈哈

看了一下源码,虽然看不懂,但发现在小程序中必须要使用自定义组件才行page.selectComponent('#' + id)
然后看了一下uniapp有对小程序自定义组件的支持
第一步:在根目录创建文件夹 wxcomponents,应该随便在哪儿创建都可以,只要找得到路径,没有试过
第二步:在wxcomponents目录下新建cax将小程序组件原封不动的复制过来 包含(cax.wxml、cax.wxsss、cax.json、cax.js、index.js)四个文件
第三步:在uniapp的pages.json 中添加小程序组件配置
{ "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", "usingComponents": { "cax": "/wxcomponents/cax/cax" } } } ], …… }
第四步:在页面中加载使用
`

<script> import cax from '../../wxcomponents/cax/index.js' export default { …… onReady () { const stage = new cax.Stage(200, 200, 'aa', this) const rect = new cax.Rect(100, 100, { fillStyle: 'black' }) rect.originX = 50 rect.originY = 50 rect.x = 100 rect.y = 100 rect.rotation = 30 rect.on('tap', () => { console.log('tap') }) stage.add(rect) stage.update() }, …… } </script>

`
只是这样就要用条件编译来兼容H5和小程序了,那个自定组件也可以照到官方的写法改一下,比如有边框我这边就不需要。
如果你已经在调试运行中,会有一个报错,重启运行就可以了
参考:https://www.jianshu.com/p/bdad9f541867

总结蛮到位