Taro-小程序插件開(kāi)發(fā)

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

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

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

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

修改 appid

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

項(xiàng)目結(jié)構(gòu)

推薦的插件項(xiàng)目結(jié)構(gòu)如下：

注意，最后發(fā)布的是 plugin 文件夾內(nèi)的內(nèi)容，插件的所有內(nèi)容及除了 npm 包以外的依賴(lài)都應(yīng)寫(xiě)在 plugin 文件夾內(nèi)。src/pages 內(nèi)的頁(yè)面只是用于調(diào)試插件。

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

編譯項(xiàng)目

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

添加小程序項(xiàng)目

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

使用頁(yè)面插件

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

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

頁(yè)面使用路徑： plugin://[app.js 中注冊(cè)的插件名]/[plugin.json 中注冊(cè)的頁(yè)面名] 進(jìn)行跳轉(zhuǎn)。

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

使用組件插件

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

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

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

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

Taro v1.3+ 組件插件接受外部 props 的問(wèn)題

#3176

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

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

// 常規(guī) props 傳遞
<Plugin title={this.state.name} desc={this.state.desc} />
// 在使用插件組件時(shí)需要改造成以下形式：
const extraProps = {
  name: this.state.name,
  desc: this.state.desc
}
<Plugin extraProps={extraProps} />

使用接口插件

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

{
  "main": "index.js"
}

頁(yè)面中使用：

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

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

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

項(xiàng)目結(jié)構(gòu)

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

編譯項(xiàng)目

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