uniapp在安卓端实现hanziWriter

最近做了一个HanziWriter的项目，这个插件是一个汉字笔画库，可以实现汉字笔画动画、书写等，非常强大，这里分享一下在uniapp中使用的一点心得。

HanziWriter官网有web端和微信小程序的版本，但是本人需要在uniapp中打包到安卓app使用，一时不知道怎么办，就把两种方法搬到uniapp项目试一试，千辛万苦调出来，显示的汉字基本都严重变型了，查了资料，估计是uniapp兼容性的原因，因为uniapp没有window这个东西，很多方法也没法使用，但是官方提供了一个renderjs，可以在视图层做一些js的事情，后来发现可以在这里做一些dom操作，于是就整了一些骚操作，下面给大家分享一下。

<template><!-- 在dom上绑定一个属性prop，change时触发characterWriter.initWriter，characterWriter是renderjs的模块名称 --><view :prop="data" :change:prop="characterWriter.initWriter":style="{width: size + 'px', height: size + 'px'}"><svg xmlns="http://www.w3.org/2000/svg" class="character-svg" :width="size" :height="size":character="character"></svg></view>
</template>

在合适的时候触发绑定属性的改变：

mounted() {this.data = {char: this.character,size: this.size,data: this.data,}
},

在vue文件中另起一个script标签作为renderjs模块，如下：

<script module="characterWriter" lang="renderjs">import {HanziWriter} from 'common/hanzi-writer.min.js';export default {data() {return {}},methods: {// 绑定属性变化时会自动调用initWriterinitWriter(newValue, oldValue, ownerVm, vm) {let dom = ownerVm.$el.getElementsByClassName('character-svg')[0];let size = newValue.size, half = size / 2;let writer= HanziWriter.create(dom, newValue.char, {width: size,height: size,padding: 10,strokeAnimationSpeed: 0.6,delayBetweenStrokes: 300,strokeColor: '#123283',delayBetweenLoops: 2000,charDataLoader: function(char, onComplete) {onComplete(JSON.parse(newValue.data));}});writer.loopCharacterAnimation();},}}
</script>

于是就这样，把web端的HanziWriter搬到了uniapp，打包到安卓app可以正常运行，其他平台没试过不知道效果怎么样，有需要的朋友可以试试。

uniapp在安卓端实现hanziWriter相关推荐

使用uni-app实现使用浏览器下载功能时，安卓端部分机型不兼容问题（小米/华为）
在公司中使用 uni-app 进行移动端开发过程中涉及到检查更新功能的一些奇葩问题(主要是plus.runtime.openURL的使用)和大家进行分享一下. 文章目录 1. 实现检查更新用的方法 1 ...
uniapp （IOS端安卓端）调用高德、百度、腾讯地图导航
不仅适用于uniapp.vue以及微信小程序和普通手机h5应用都适用,亲测有效直接上代码: // 点击某个地方,调起下面的方法// 方法要传入需要标注地点的纬度latitude,经度longitud ...
微信小程序android错误,app安卓端跳转到微信小程序失败
详细问题描述 (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题) [内容] app安卓端跳转到 ...
安卓端微信H5下载文件处理：让微信自动弹起跳转外部浏览器窗口
配套视频:https://www.bilibili.com/video/BV1oA411B7gv/ 背景今天鼓捣了一下手机投屏到笔记本,就想录个视频展示一下学习成果,正好就想起了很早之前实现的这个功 ...
uni-app打包安卓app如何接入极光推送（JG-JPush）？
最近公司在做uni-app的跨端应用,其中在打包app时需要用到消息推送功能,经过一番摸索也是终于弄通并成功集成了第三方极光推送.话不多说,直接开撸: 一.我们需要用到的一些插件以及极光平台的官网链接 ...
android 自定义键盘高度不对,NVUE 容器一旦设置了position且容器高度不能超过整屏，在安卓端就会被键盘遮挡...
譬如WEEX的这个input的例子,如果把input删的不足以撑满整个界面,在安卓端,不会自动的整页往上浮动,导致input被键盘遮挡,这个问题应该怎么解决啊?IOS正常 http://dotwe.o ...
html百度转到顶部 fixed,科技常识：完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题...
今天小编跟大家讲解下有关完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题的相关资料 ...
MobileIMSDK怎样修改Server端和安卓端TCP连接方式时报文的的限制大小
场景 MobileIMSDK怎样修改服务端核心jar包的源码并替换掉Java服务端的jar包: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/de ...
云信小课堂｜5分钟快速实现安卓端PK连麦场景
Vol. 3 2021年开年,音频社交风靡互联网,语音社交再成风口,直播连麦开启社交新赛道.在实时通信技术不断革新的现状下,直播平台需要不断探索新的方式以满足用户日益增长的需求,直播连麦就是在此背景下 ...

uniapp在安卓端实现hanziWriter

uniapp在安卓端实现hanziWriter相关推荐

最新文章

热门文章