1. 插件引入

在项目的 `pages.json` 文件中添加插件配置信息：

"plugins": {
  "onon-plugin": {
    "version": "3.2.3",
    "provider": "wxb2f7c4a9b0a42e98"
  }
}

2. 配置页面路由

在需要使用插件的页面中（例如 pages/test/test），添加如下配置：

{
  "path": "pages/test/test",
  "style": {
    "navigationBarTitleText": "Onon输入法",
    "disableScroll": true,
    "mp-weixin": {
      "usingComponents": {
        "ononime": "plugin://onon-plugin/ononime",
        "ononcom": "plugin://onon-plugin/ononcom"
      }
    }
  }
}

3. 页面使用示例

在页面 pages/test/test.vue 中引入组件并使用：

template 部分

<template>
  <view class="ononcomtest">
    <ononime 
      @exportIme="exportIme" 
      @exportSingleKeyVal="exportSingleKeyVal"
      :OnonMpImeBaseInfo="form[0]"
      :ononTextType="'textarea'" 
      :imeShow="imeShow" 
    />

    <view class="item">
      <ononcom
        ref="ononcom"
        :words="form[0].displayWord"
        :ononTextType="form[0].ononTextType"
        :FC="'#333'"
        :H="400"
        :W="200"
        BDC="#ccc"
        :BDR="0"
        :BDS="1"
        :FS="22"
        :LH="1"
        PH="请点击输入"
        :COMNAME="0"
        @clickInput.stop="clickInput"
      />
    </view>
  </view>
</template>

script 部分

<script>
export default {
  data() {
    return {
      imeShow: false,
      form: [
        {
          ononTextType: 'textarea',
          txt: '',
          key: Date.now(),
          id: '0',
          displayWord: []
        }
      ]
    };
  },
  methods: {
    clickInput(e) {
      this.imeShow = true;
      this.ononTextType = e.detail.ononTextType;
      this.comname = e.detail.comname;
    },
    exportIme(e) {
      const timestamp = Date.now();
      this.form[this.comname].txt = e.detail.imetext;
      this.form[this.comname].displayWord = e.detail.displayWord;
      this.form[this.comname].key = timestamp;
      this.imeShow = e.detail.imeShow;
    },
    exportSingleKeyVal(e) {
      console.log("实时词:", e.detail);
    }
  }
};
</script>

style 部分

<style>
.ononcomtest {
  display: flex;
}
.ononcomtest .item {
  margin: 10rpx 0 0 10rpx;
}
</style>

1. 在 app.json 中声明插件

在 app.json 顶部添加 plugins 配置，例如：

{
  "plugins": {
    "onon-plugin": {
      "version": "3.2.3",
      "provider": "wxb2f7c4a9b0a42e98"
    }
  },
  "pages": ["pages/index/index"],
  "window": {
    "navigationBarTitleText": "Onon输入法"
  }
}

2. 注册插件组件

在需要使用的页面的 json 文件中添加 usingComponents，例如 pages/index/index.json：

{
  "usingComponents": {
    "ononime": "plugin://onon-plugin/ononime",
    "ononcom": "plugin://onon-plugin/ononcom"
  }
}

3. 页面使用

wxml

<view class="ononcomtest">
  <ononime 
    bind:exportIme="exportIme" 
    bind:exportSingleKeyVal="exportSingleKeyVal"
    ononMpImeBaseInfo="{{form[0]}}"
    ononTextType="textarea"
    imeShow="{{imeShow}}"
  />

  <view class="item">
    <ononcom
      words="{{form[0].displayWord}}"
      ononTextType="{{form[0].ononTextType}}"
      FC="#333"
      H="400"
      W="200"
      BDC="#ccc"
      BDR="0"
      BDS="1"
      FS="22"
      LH="1"
      PH="请点击输入"
      COMNAME="0"
      bind:clickInput="clickInput"
    />
  </view>
</view>

js

Page({
  data: {
    comname: 0,
    imeShow: false,
    form: [
      {
        ononTextType: 'textarea',
        txt: '',
        key: Date.now(),
        id: '0',
        displayWord: []
      }
    ]
  },
  clickInput(e) {
    this.setData({
      imeShow: true,
      ononTextType: e.detail.ononTextType,
      comname: e.detail.comname
    });
  },
  exportIme(e) {
    const timestamp = Date.now();
    let form = this.data.form;
    form[this.data.comname].txt = e.detail.imetext;
    form[this.data.comname].displayWord = e.detail.displayWord;
    form[this.data.comname].key = timestamp;
    this.setData({
      form: form,
      imeShow: e.detail.imeShow
    });
  },
  exportSingleKeyVal(e) {
    console.log('实时输入值：', e.detail);
  }
});