微信小程序插件開發(fā)

微信小程序插件開發(fā)概述

創(chuàng)建插件開發(fā)模版

微信小程序插件分為頁面、組件、接口三種。開發(fā)者可以使用 taro init 命令，然后選擇生成微信小程序插件模版，即可在當前目錄生成包含上述三種插件類型的 Taro 微信小程序插件項目。

修改 appid

創(chuàng)建完模版后，首先需要修改 project.conf.json 的 appid 字段和 src/app.js 的 prodiver 字段為同一 appid。

項目結構

推薦的插件項目結構如下：

注意，最后發(fā)布的是 plugin 文件夾內的內容，插件的所有內容及除了 npm 包以外的依賴都應寫在 plugin 文件夾內。src/pages 內的頁面只是用于調試插件。

├── config                 配置目錄
├── src                    源碼目錄
|   ├── pages              調試頁面目錄，用于調試插件
|   |   └── index          
|   ├── plugin             插件目錄
|   |   ├── doc            插件文檔目錄
|   |   ├── component      組件插件目錄
|   |   ├── page           頁面插件目錄
|   |   ├── index.js       接口插件文件
|   |   └── plugin.json    插件配置文件
|   ├── app.css            項目總通用樣式
|   └── app.js             項目入口文件
└── package.json
└── package.config.json

編譯項目

taro build --plugin weapp
taro build --plugin weapp --watch

添加小程序項目

在微信開發(fā)者工具中添加 Taro 插件項目根目錄。

使用頁面插件

plugin.json 的 pages 字段加入頁面插件路徑：

{
  "pages": {
    "list": "pages/list/list"
  }
}

頁面使用路徑： plugin://[app.js 中注冊的插件名]/[plugin.json 中注冊的頁面名] 進行跳轉。

<Navigator url='plugin://myPlugin/list'>
  Go to pages/list!
</Navigator>

使用組件插件

plugin.json 的 publicComponents 字段加入組件插件路徑：

{
  "publicComponents": {
    "avatar": "components/avatar/avatar"
  }
}

在頁面配置 config.usingComponents 中配置好插件名和插件路徑（plugin://[app.js 中注冊的插件名]/[plugin.json 中注冊的組件名]）：

export default class Index extends Component {
  config = {
    usingComponents: {
      'avatar': 'plugin://myPlugin/avatar'
    }
  }
}

Taro v1.3+ 組件插件接受外部 props 的問題

#3176

Taro v1.3 對 props 系統(tǒng)進行了改造，使得不能兼容原生組件通過 properties 傳入的屬性。

目前可以通過把所有需要傳入組件插件的 props，通過借助 extraProps 屬性來解決。

// 常規(guī) props 傳遞
<Plugin title={this.state.name} desc={this.state.desc} />

// 在使用插件組件時需要改造成以下形式：
const extraProps = {
  name: this.state.name,
  desc: this.state.desc
}
<Plugin extraProps={extraProps} />

使用接口插件

plugin.json 的 main 字段加入接口插件路徑：

{
  "main": "index.js"
}

頁面中使用：

const myPluginInterface = Taro.requirePlugin('myPlugin')

export default class Index extends Component {
  componentWillMount () {
    myPluginInterface.sayHello()
    const answer = myPluginInterface.answer
    console.log('answer: ', answer)
  }

支付寶小程序插件開發(fā)

支付寶小程序插件開發(fā)概述

項目結構

目前支付寶小程序只支持開發(fā)頁面插件，因此項目結構和普通 Taro 項目的一致。只需在源碼目錄下再增加 plugin.json 和 plugin-mock.json 兩個文件即可。

編譯項目

taro build --plugin alipay
taro build --plugin alipay --watch