颖想家

在微信小程序上做了个汉字书写的小工具。使用的Hanzi Writer 是 javascript 免费开源库。按照官方给的文档没办法成功使用。这里记录一下我遇到的问题。

由于微信APIwx.createCanvasContext停止维护的原因，hanzi-writer-miniprogram并不能正常显示，只能在基础库2.7.7及以下版本正常显示，所以不能直接使用官方给出的npm install hanzi-writer-miniprogram来下载。需要下载hanzi-writer-miniprogram@beta版本才能正常使用。方法为：npm install hanzi-writer-miniprogram@beta

1、在开发文件夹的目录下新建hanzi-writer-miniprogram文件夹

2、把npm下载的包中文件node_modules/hanzi-writer-miniprogram/src下所有文件放入hanzi-writer-miniprogram文件夹下

3、把npm下载的包中文件node_modules/hanzi-writer/dist下的hanzi-writer.js也放入hanzi-writer-miniprogram文件夹

4、修改hanzi-writer-context.js第一行引入import HanziWriter from './hanzi-writer';

5、下载来的汉字数据来源于jsdelivr CDN，你也可以使用cnchar-data生成离线数据放入自己服务器请求。这样就需要修改hanzi-writer-miniprogram/defaultCharDataLoader.js文件的第二行，将getCharDataUrl的地址改为你自己服务器的请求地址就可以了。

后面基本上就可以按照官方文档的说明来操作了。这里写一下我这里的操作，我这里因为在开发目录下新建了hanzi的文件夹，所以相对地址可能会与看到这篇文章的人的有所区别：

在hanzi/index.json下新增自定义组件

"usingComponents": {

  "hanzi-writer-view": "../../hanzi-writer-miniprogram/hanzi-writer-view"

}

在hanzi/index.wxml页面下主要代码如下：

<view class="container">

  <view class="title">汉字书写顺序小程序</view>

  <view class="weui-cell">

    <view class="weui-cell__hd" style="width: 220rpx;">请输入汉字</view>

    <view class="weui-cell__bd" style="width: 300rpx;">

      <input type="text" class="weui-input" placeholder="请输入汉字" size="1" value="{{inputstr}}" bindinput="inputstrBtn" />

    </view>

  </view>

  <view style="display: flex; width: 100%; align-items: center; justify-content: center; margin-top: 50rpx;">

    <button class="weui-btn" type="primary" bindtap="updateCharacter" >确定</button>

  </view>

  <view id="target">

    <hanzi-writer-view id="hz-writer" width="300" height="300" >

    </hanzi-writer-view>

  </view>

</view>

在hanzi/index.js页面下主要代码如下：

import createHanziWriterContext from '../../hanzi-writer-miniprogram/index'

Page({

  /**

   * 页面的初始数据

   */

  data: {

    inputstr: '',

    writerCtx: null

  },

  onLoad(options) {

    wx.showLoading({title: '加载中...'});

    let storeChar = '';

    try {

      storeChar = wx.getStorageSync('character')

    } catch (e) {

      console.log('storeChar为空');

    }

    if (storeChar == '') {

      storeChar = '涵';

    }

    this.setData({

      inputstr: storeChar,

    });

    wx.hideLoading();

    this.drawCharacter(storeChar);

  },

  drawCharacter:function(inputCharacter) {

    if (this.writerCtx == null) {

      this.writerCtx = createHanziWriterContext({

        id: 'hz-writer',

        character:inputCharacter,

        page: this,

      });

    } else {

      this.writerCtx.setCharacter(inputCharacter);

    }

    this.writerCtx.loopCharacterAnimation();

  },

  // 输入框

  inputstrBtn:function(e){

    var val = e.detail.value;

    this.setData({

      inputstr: val,

    });

  },

  //更新

  updateCharacter:function(e){

    let inputstr = this.data.inputstr

    if (inputstr == '' || inputstr == undefined) {

      wx.showToast({

        title: '请输入汉字！',

        icon: 'none'

      });

      return;

    } else if(inputstr.length > 1) {

      wx.showToast({

        title: '只能输入一个汉字！',

        icon: 'none'

      });

      return;

    }

    

    wx.setStorage({

      key: 'character',

      data: this.data.inputstr

    })

    this.drawCharacter(this.data.inputstr);

  },

})

至此基本就实现了微信小程序使用hanzi-writer-miniprogram来进行汉字的书写功能。