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: {
			// 绑定属性变化时会自动调用initWriter
			initWriter(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可以正常运行，其他平台没试过不知道效果怎么样，有需要的朋友可以试试。