小程序插件开发

官网小程序插件开发地址

• 按照官方描述，先把项目目录创建起来，提供了一个hello的例子。
• 先整插件部分的内容。在plugin的目录下提供了一个index.js的文件

module.exports = {
  resetConfig(config = null) {
    if (config) {
      this.config = config;
    }
  },
  config: null,
  sayHello: function () {
    console.log('Hello plugin!')
  },
  answer: 42
}

测试了下index.js的使用，发现如果在外部调用resetConfig方法后，设置的config可以在插件里面全局通用。无论在外部的小程序，或者是插件内容，都能拿到设置后的config。

测试数据

• 在plugin的目录下提供了plugin.json的配置文件，可以暴露出去组件，或者是页面，都可以。外部的小程序可以引入组件或者用navigator跳转到新页面。
• publicComponents下的路径就是指向到插件内部的页面。

{
  "publicComponents": {
    "empty-component": "components/empty/index"
  },
  "pages": {
    "hello-page": "pages/hello-page"
  },
  "main": "index.js"
}

• 外部小程序的配置，外部调用其实和平常的调用组件或者跳转页其实没什么差别。首先在app.json中引入插件，并且给它命名。这边命名的是radish-plugin，其中provider就是插件小程序的appid。

{
  "pages": [
    "pages/index/index",
    "pages/index2/index"
  ],
  "plugins": {
    "radish-plugin": {
      "version": "dev",
      "provider": "wxbdbc93731a2557d9"
    }
  },
  "sitemapLocation": "sitemap.json"
}

• 在外部小程序的某个页面里面的index.json引入插件。这边要注意的是，radish-plugin就是上面（app.json）里面命名的插件名字。empty-component则是插件暴露出来的publicComponents

{
  "usingComponents": {
    "empty-component": "plugin://radish-plugin/empty-component"
  }
}

• 在外部小程序的index.wxml中，引入插件里面的组件，或者是navigator到插件的某个页面。

<!-- 跳转到插件的某个页面 -->
<navigator id="nav" url="plugin://radish-plugin/hello-page">
  Go to Plugin page
</navigator>


<view class="content">
  <view bindtap="showIndex">to === index2</view>
  <!-- 引入插件的某个组件 -->
  <empty-component show="{{show}}"></empty-component>
</view>

• 在外部小程序的index.js里面可以引入插件名字，画重点（是插件名字） 不是插件暴露出来的某个组件。是整个插件！！！

const plugin = requirePlugin("radish-plugin");

Page({
  data: {
    // items: [],
    // currentItem: 0
    show: false,
  },
  onLoad() {
    
    plugin.resetConfig({
      title: 'program title',
      image: '/miniprogram/pages/index/1.jpeg',
      detail: 'pages/index/index'
    });
    setTimeout(()=>{
      this.setData({
        show: true
      })
    }, 2000)
  },
  addItem: function () {
    // this.data.items.push(this.data.currentItem++);
    // this.setData({
    //   items: this.data.items,
    //   currentItem: this.data.currentItem
    // });
  },
  showIndex() {
    wx.navigateTo({
      url: "/pages/index2/index"
    });
      
  }
});

，总结下插件的配置

• 在plugin文件夹下的index.js下可以暴露出去给外部小程序使用的方法，可以让外部小程序传入一些配置项或者。。。。。并且index.js下的属性或者方法都是全局（不管是外部小程序或者是内部插件）通用的。
• 在plugin文件夹下的plugin.json将插件中希望暴露出去的组件或者页面，暴露出去给外部小程序使用。
• 在外部小程序中的app.json先引入组件的，并且给它起个名字。
• 在外部小程序中某个想要用插件的页面中，导入插件的组件。