生僻字适配方案

1.引言

在MADP项目中，如何适配生僻字对于使用Weex和H5开发的应用来说是一个重要问题。生僻字的适配主要涉及输入和显示两个方面。对于需要录入生僻字的情况，我们需要在项目中集成相应的键盘，包括原生键盘和H5键盘。

2.键盘集成

通常情况下，很少有开源的生僻字键盘方案可用。因此，项目组可以考虑采购适用于生僻字的键盘。

2.1 Weex工程中的适配方案

在Weex工程中，需要分别针对iOS和安卓原生端进行适配。具体步骤如下：

iOS原生端适配

首先，在Weex工程中集成适配生僻字的SDK。这个SDK应该提供相关的标签和方法，以便Weex可以调用。集成SDK的具体方法可以参考iOS原生开发的相关文档。

安卓原生端适配

对于安卓原生端，同样需要集成适配生僻字的SDK。这个SDK应该提供与iOS端相似的功能，包括标签和方法的暴露。集成SDK的具体方法可以参考安卓原生开发的相关文档。

2.2 H5工程中的适配方案

对于H5工程，我们需要集成适配生僻字的键盘JS。以下是具体的步骤：

集成键盘JS

在H5工程中，引入适配生僻字的键盘JS文件。这个JS文件应该提供相应的方法和功能，以便在项目中使用。可以通过在HTML文件中添加标签来引入该JS文件。

键盘的使用

在项目中，根据需要的场景使用适配生僻字的键盘。可以通过监听输入框的事件，在需要输入生僻字的时候调用键盘进行输入。具体的使用方法可以参考键盘JS的文档或示例代码

3.显示

显示生僻字需要使用相应的生僻字字体库。目前市面上存在一些免费商用的字体库，例如阿里巴巴普惠字体库。如果项目中已采购键盘，则可以使用对应的字体库。

3.1 上传字体库文件

在MADP后管的main文件夹下新建font文件夹，并将生僻字字体库文件上传至该文件夹。

后管font文件夹

3.2 weex适配

在App.vue文件中加载自定义字体。

<script>
const domModule = weex.requireModule('dom')
export default {
  created () {
    this.addRule()
  },
  methods: {
    addRule(){
      domModule.addRule('fontFace', {
       'fontFamily': "iconfont1",
       'src': "url('/font/JinbiaoSong.ttf')"
       });
    }
  }
}

在需要展示生僻字的text标签中，设置class对应的font-family样式。

.menu_text{
  font-family: iconfont2;
}

3.3 h5适配

原理与Weex类似，先加载生僻字字体库，然后在需要展示的标签中设置class对应的字体font-family样式。

@font-face {
    font-family: "iconfont2";
    src: url("/font/JinbiaoSong.ttf") format('truetype');;
}
.menu_text {
    font-family: iconfont2;
  }

4、其他注意事项

  1. 如果生僻字字体库文件较大，建议将字体库文件放到客户端预制包中，以提高加载和渲染速度。

  2. 当需要加载第三方链接或协议时，文件中包含生僻字，需注意以下事项：

  • 自定义加载字体库：根据页面需要加载的字体库文件，编写相应的自定义加载代码。
  • 路径设置：由于自定义加载字体库，路径不能与之前H5工程中使用的路径url('/font/JinbiaoSong.ttf')完全相同。根据具体情况，需要根据自定义加载的方式和路径规则，调整字体库文件的路径设置。