小程序为汉字注拼音

小程序为汉字注拼音，可与上一篇https://blog.csdn.net/zi114323/article/details/110389340配合使用
从网上下载的pinyin.js文件
下载pinyin.js放在utils文件下
复制这段内容后打开百度网盘App，操作更方便哦。 链接:https://pan.baidu.com/s/1HWzXb6mAROxyhso7OoUW6Q 提取码:y9t4

代码
pages/hanziWrite/hanziWrite.wxml

<!-- 拼音start -->
    <view class="pinyin">
       <view class="pinyin_top pinyin_text">{{pinyinval}}</view>
       <view class="pinyin_top"></view>
    </view>
    <!-- 拼音end -->

pages/hanziWrite/hanziWrite.wxss

/* 拼音-----------------------------------------------start */
.pinyin{
  width: 90vw;
  height: 30px;
  border-top: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  margin: 15px auto;
}
.pinyin_top{
  height: 10px;
  border-bottom: 1px solid #bfbfbf;
  text-align: center;
}
.pinyin_text{
  line-height: 30px;
}
/* 拼音-------------------------------------------------end */

pages/hanziWrite/hanziWrite.js

var pinyinjs = require('../../utils/pinyin.js');

Page({
  properties: {},
  data: {
    inputstr: '天',
    inputCharacter: '天',
    content: '天',//内容
    src:'', //
    pinyinval:'',
  },
  onLoad: function(options) {
    console.log("Do something initial when launch")
    //拼音
    this.pinyin();
  },
  // 拼音
  pinyin:function(){
    var char = this.data.inputCharacter;
    if (pinyinjs.hasOwnProperty(char)) {
      console.log(pinyinjs[char].join(', '))
      this.setData({
        pinyinval: pinyinjs[char].join(', ')
      });
    }
    else {
      this.setData({
        pinyinval: '找不到，^_^'
      });
    }
    // this.setData({
    //   pinyinval: pinyin.getPinyin(this.data.inputCharacter),
    // });
    // console.log(this.data.pinyinval)
    // pinyin.getFirstLetter("你好") // NH
  },
})

如果不需要音调的话可以用wl-pinyin来实现
安装

npm i wl-pinyin

使用

//拼音
import pinyin from "wl-pinyin";`
pinyin.getPinyin("天") //tian
pinyin.getFirstLetter("天") // T
``