柿饼派M7开启键盘输入功能

发布于 2022-07-28 13:55:10 浏览：735 订阅该版

[tocm]

## 先上图看看效果

![柿饼派M7开启键盘输入法功能01.gif](https://oss-club.rt-thread.org/uploads/20220728/5ebb9045bf9109b4a3c23d87f6f10d4e.gif "柿饼派M7开启键盘输入法功能01.gif")

![柿饼派M7添加键盘输入法功能02.gif](https://oss-club.rt-thread.org/uploads/20220728/21156dd259bbff8734d5468b5cc694f4.gif "柿饼派M7添加键盘输入法功能02.gif")

## 使用说明

- 步骤1：创建UI 工程或使用现有的工程，添加提供的中英文键盘输入法示例的，可以将附件提供示例的 `src/pages/`目录下的 `KeyBoard`文件夹拷贝到新创建的 UI 工程或现有的项目中的 `src/pages/`目录下。
- 步骤2：新建自定义页面，并命名为`KeyBoardCustom`，也可以直接拷贝示例中`src/panels/KeyBoardCustom.xml`文件，到新创建的 UI 工程或现有的项目中的 `src/panels/`目录下。
- 步骤3：将提供示例中的 `src/res/images`下的`keyboard.png` 和 `keyboardPush.png` 文件拷贝到工程中的 `src/res/images` 下
- 步骤4：在UI 工程中的 `main`页面中，根据实际需求设计UI 界面，这里以Demo 示例为主，在界面上放置一个 button 和 一个 label 控件并设置button 控件的bindtap 属性为 type_input
- 步骤5：修改`main`页面的 `main.js`的代码，添加触发键盘输入的功能代码。

```javascript
Page({
  /* 页面加载时触发该函数 */
  onLoad: function (event) {},

/* 此方法展示窗体后发生 */
  onResume: function (event) {},

/* 页面显示时触发该函数 */
  onShow: function (event) {},

/* 页面隐藏时触发该函数 */
  onHide: function (event) {},

/* 页面退出时触发该函数 */
  onExit: function (event) {},
  onUpdate: function (event) {
    if (event) if (typeof event.text == "string") {
      this.text = event.text;
      this.setData({
        label1: this.text
      });
    } 
  },
  type_input: function (event) {
    pm.navigateTo({
      url: 'pages/KeyBoard/KeyBoard',
      value: {
        text: this.text
      }
    });
  },
  onBack: function (event) {
    pm.navigateBack();
  }
});

```

- 步骤6：中文输入法需要在文件系统上存在/mnt/sd0/dict_pinyin.dat 文件，可以先在板子的终端上使用`mkdir`命令进行创建和使用`udb push`命令把文件传输到板子上。

（1）板子上先创建 `/mnt/sd0/`目录。

```shell
  msh />mkdir mnt
  msh />cd mnt 
  msh />mkdir sd0
  msh /mnt>ls
  Directory /mnt:
  sd0        
  ```

（2）PC 端通过 udb push 命令把 dict_pinyin.dat 文件同步到板子上。

```shell
  udb.exe push dict_pinyin.dat  /mnt/sd0/
  ```

![使用说明1.jpg](https://oss-club.rt-thread.org/uploads/20220728/e0b036519de4f81431af7bc89f60d838.jpg.webp "使用说明1.jpg")

![使用说明2.jpg](https://oss-club.rt-thread.org/uploads/20220728/8a243c7e8bbae006d4852b0c92bb8eec.jpg.webp "使用说明2.jpg")

![使用说明3.jpg](https://oss-club.rt-thread.org/uploads/20220728/a30ae6caf98921255cd84c91c689f631.jpg.webp "使用说明3.jpg")

## 附件
- 1.可以直接把这个压缩包解压缩后通过udb 同步到板子上的`/system/apps/`目录下
[com.example.keyboard_demo.zip](https://club.rt-thread.org/file_download/32f5e3a67ea5b6a6)
- 2.Demo 的示例代码
[keyboard_demo.zip](https://club.rt-thread.org/file_download/6c44ca5fabf02b5d)