Taro中使用京东小程序原生组件（Taro原生混合）

Taro中使用京东小程序原生组件（Taro原生混合）

一、创建插件目录

1. 在项目中创建组件的文件夹，例：src/components/jdPlugin， 注意：组件名称首字母一定要小写

二、jdPlugin内创建文件

1. index.json 配置文件
   使用小程序的Component，要配置component和usingComponents

{
  "component": true,
  "usingComponents": {}
}

如果插件中引入其他的原生组件或插件，要在usingComponents中配置

usingComponents: {
    'a-plugin': '../../components/componentA/index',
  },

2. index.js 逻辑层

Component({
  properties: {}, // 组件的对外属性
  data: {}, // 组件的内部数据
  // 组件的方法
  methods: {
    // 这里是一个自定义方法
    getPhoneNumber: function (e) {
      console.log('getPhoneNumber', e);

      // 触发父组件事件
      this.triggerEvent('getphone', { res: e });
    },
  },
  // 声明周期
  ready: function () {
    console.log('==jdPlugin ', 'init===');
    console.log('this', this);
  },
});

3. index.jxml 视图层

  <button style="width: 100%; height: 100%; border: 0; outline: none; background: transparent;" bindgetphonenumber="getPhoneNumber" open-type="getPhoneNumber"></button>

三、Taro页面中使用原生组件

页面路径： src/jdTest/index

1. index.config.js中引入原生组件，注意：路径一定要选到index， 否则报Component is not found in path “components/componentA” using by “pages/pageA/index”…

export default {
  navigationBarTitleText: ' ',
  // 定义需要引入的插件
  usingComponents: {
    'jd-plugin': '../../components/jdPlugin/index',
  },
};

2. 页面中使用
   为避免编译异常，绑定事件用的小写

 <jd-plugin ongetphone={getAuthPhoneNumber} />

子组件通过triggerEvent 触发事件

    this.triggerEvent('getphone', { res: e });

四、项目中配置

在config/index.js中配置copy，将组件jdPlugin绕过Taro的编译

  copy: {
    patterns: [
      { from: 'src/components/jdPlugin', to: 'dist/components/jdPlugin' },
    ],
    options: {},
  },

五、运行

启动taro项目

npm run build:jd -- --watch

开发者工具中看到编译后生成的插件代码