手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

Kujiale-Mobile/Painter 踩小坑以及处理方法

Kujiale-Mobile/Painter是一个优秀的JS生成canvas的库,如果配合https://lingxiaoyi.github.io/painter-custom-poster/,这个在生制作模板的工具,你会发现哇。原来做个二维码这么容易 。

优秀不代表没有缺点,至少我在使用的时候,真是踩了不少坑。网上的例子都是说直接使用"userComponents":{"painter":"path"}

然而我真的遇到了问题,先申明 ,我是在uniapp下面使用这个

1、各种例子说的组件位置都不一样,有说,放在根目录下:components目录,有说wxcomponents目录,甚至也有人说放在static目录下。我一个个都试了,结果 都是报app.json不正常。查了文档,都说路径不对。各种例子里的路径也是千奇百怪。有的路径用的"./components",有的用的是"/components",也有前面没有任何路径的。后面查到了官方,原来在某个版本的更新后,已经可以不用在前面加"./"或者"/"了。然而我还是不正常。最终我没有用这个办法,我是直接在main.js里采用import的方式解决了。【这个后面还要再提一下】

2、Painter 在网上的例子,都是<painter :palette="xxx" >类似这样,或者<painter palette="{{xxx}}" >这样的类似原生的调用方法。在官方的文档中有说:palette支持的是静态模板,也就是说这里的变量是先生成好的。而不是即时生成。。。。这个就很尴尬了,毕竟我不是做早安图之类的。在进页面前,可能不知道模板中的图片路径是不是确定好。再查的时候,就发现了,原来新版已经支持 dancePalette

3、采用dancePalette,果然是随时可以调用了,但又发生了一个问题,即原来canvas生成的时候,有ImgOK事件。但dancePalette没有ImgOK事件,确实,官方文档中有说,didShow事件是在使用dancePalette模板里触发。直接用最新版,会发现didShow方法报错。于是改代码,在didShow后加了个参数,现在只是不报错了,但还是没啥用。

于是猜想,是不是以前正常,现在不正常了呢?因为发现代码中有使用canvas2d,所以直接下载了canvas2d分支。结果下载后,我原来的import方式不能用了,但是那种:userComponents的方式又正常了。好吧,这不是大事。继续 测试didShow,果然这个分支的didShow输出N多内容。然而最重要的。detail节点没有任何内容,也就是说didShow没有生成Canvas的临时地址。这个事情就尴尬了。

当然我没放弃,我就一直在想,painter的palette静态模板调用,我是不是可以用呢。毕竟,uniapp采用的是vue(或者说是伪VUE),我可以利用v-if,先隐藏painter组件,等 palette的模板生成好了。我再加载painter组件,这时候不是就可以了吗?

说做就做,在<painter>外层加了一个view,默认v-if="templateGenerated == true",data()中先设置为false,然后请求完数据,赋值变量palette后,设置templateGenerate=true;

组件顺利调用,ImgOK方法也触发了。有了路径,什么长按保存,点击预览就都好办了。不是嘛~

至此,踩坑完毕,希望能够给同样踩坑的人有个小帮助。

或许有人说,为什么不看源码,提交PR?大哥,我只是画个太阳码,根本没心思看整个源码。。也没时间啊,先绕过去再说,如果有人能够提交PR,我也可以到时候再试试。

最后,感谢:

1、https://lingxiaoyi.github.io/painter-custom-poster/

2、https://github.com/Kujiale-Mobile/Painter/tree/canvas2d

Tags: painter, canvas

How to fix ReferenceError: primordials is not defined in node

 最近在编译的时候,遇到这个问题:primordials is not defined in node,问了一下项目方,说是只能在node11下才行。查了网上遇到这些问题的。也往往都是node12,node13,我。。。node14.。

于是npm -g install n ,然后运行n 11,安装了11,再运行。。。正常了

如果不喜欢用n,也可以安装npm -g install nvm。一样一样的

Use the `--scripts-prepend-node-path` option to include the path

有时候编译的时候会出现这个错误,提示是说:Use the `--scripts-prepend-node-path` option to include the path 。然后会告诉你有两个路径的存在

有个简单的办法,在项目根目录下面增加一个文件.npmrc,加入:

scripts-prepend-node-path=true

问题解决

 

微信视频播放在Android 10下的BUG

起初不知道是微信的BUG还是android 10的BUG,但因为搜索:android10 视频播放横屏 暂停后无法继续播放,等类似关键字都无法找到结果 。

而且在启用eurdaJS后,发现出错的是DomException,再接着去搜索,也没有什么特别好的结果,对于一个非专业前端来说,除了知道可以用unhandlerejection可以用来捕获这个错误外,其他一无所知。

于是开始尝试,打开有赞课堂、荔枝微课、B站等有网页在线播放的页面,发现除了B站外,其他两个都不正常。都是横版情况下,只能暂停,不能播放。如果是先暂停再进入横版,同样不可播放。B站的播放器是自定义的。即使全屏,也是用的自己的控件,所以无法重现。

再之后想了想,是在其他浏览器也正常吗?于是用浏览器打开有赞和荔枝,有赞前几步都很正常,但在点播放的时候,却告诉我,请在微信打开。估计还是捕获了play的事件。荔枝微信可以正常打开,但问题就这么来了。。无论是系统自带的播放器还是chrome中的播放器,他们的界面都是一样的(有分享、有列表,还有投屏功能)。

那么,也就意味着微信浏览器中的video control其实已经被微信定制了。这个BUG应该就是微信更新后的BUG(同样的问题在Android 9上并无)

---

最后,只能用原生的click事件,同时记录播放状态来处理(希望微信在新版中可以改掉这个BUG)

 

被sortable.js坑了一小把

记录一下。如果同一个页面,基于同一个class或者同一个元素,但数据不同进行排序时。记得及时destroy。否则sortable会缓存。一直在使用第一次的数据。

被它坑了好久,浪费了1个小时。原来是首次编辑时,可以变动。但再次编辑时,可以拖动,但数据不会变,打印数据的时候发现,一直在使用传入数据。