前端 2020-08-13 18:30:48
作者 啊伍 · 阅读 2176

使用Taro开发微信小程序插件

开发

开发准备

==开放范围：企业、媒体、政府及其他组织主体==

  1. 开通插件功能
  2. 填写开发信息并开发
  3. 完善基本信息

初始化

  1. 执行taro init
  2. 选择wxplugin模板
  3. 修改 project.conf.json 的 appid 字段和 src/app.js 的 prodiver 字段为同一 appid。

项目结构

推荐的插件项目结构如下：

├── config                 配置目录
├── src                    源码目录
|   ├── pages              调试页面目录，用于调试插件
|   |   └── index          
|   ├── plugin             插件目录
|   |   ├── doc            插件文档目录
|   |   ├── component      组件插件目录
|   |   ├── page           页面插件目录
|   |   ├── index.js       接口插件文件
|   |   └── plugin.json    插件配置文件
|   ├── app.css            项目总通用样式
|   └── app.js             项目入口文件
└── package.json
└── package.config.json

注意，==最后发布的是 plugin 文件夹内的内容==，插件的所有内容及除了 npm 包以外的依赖都应写在 plugin 文件夹内。src/pages 内的页面只是用于调试插件。

开放插件组件、页面、接口

向使用者小程序开放的所有自定义组件、页面和 js 接口都必须在插件配置文件 plugin.json 列出，格式如下：

{
  "publicComponents": {
    "avatar": "components/avatar/avatar"
  },
  "pages": {
    "list": "pages/list/list"
  },
    "main": "index.ts"
  }
  • publicComponents：自定义组件
  • pages：页面
  • main：接口

编译项目

// 该命令编译出来的代码在开发者工具白屏，通过小程序引用插件时正常使用
taro build --plugin weapp
taro build --plugin weapp --watch

通过

taro build --plugin weapp --watch

编译出来的项目结构如图：
http://alicdn.miaokefu.com/blogs/taro-weapp-plugin-structure.jpg

我们看下根目录的project.config.json

  • miniprogramRoot指定了用于调试插件的小程序目录
  • pluginRoot指定了插件项目的目录
{
	"miniprogramRoot": "miniprogram/",
	"pluginRoot": "miniprogram/miniprogram/plugin/",
	"compileType": "plugin",
	"appid": "touristappid",
	"projectname": "thunderbolt",
	"description": "登录模块",
	"setting": {
		"urlCheck": true,
		"es6": false,
		"postcss": false,
		"minified": false,
		"newFeature": true
	}
}

添加小程序项目

在微信开发者工具中添加 Taro 插件项目根目录。

使用插件

引入插件代码包

使用插件前，使用者要在 app.json 中声明需要使用的插件，例如：

plugins: {
  // 引用名（如当前例子中的 myPlugin）由使用者自定义, 无需和插件开发者保持一致或与开发者协调
  myPlugin: {
    version: 'dev',
    provider: 'wxidxxxxxxxxxxxxxxxx'
  }
}

使用插件页面

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

页面使用路径： plugin://[app.js 中注册的插件名]/[plugin.json 中注册的页面名] 进行跳转。

小程序与插件页面传输数据

插件中：

插件接口提供Get方法供小程序获取数据

// main.ts
let userInfo = {};

export function setUserInfo(data) {
  userInfo = data;
}

export function getUserInfo() {
  return userInfo;
}

插件页面调用Set方法保存数据

// 插件页面代码
loginSuccess = (e) => {
    console.log(e.detail.code) // wx.login 的 code
    console.log(e.detail.userInfo) // wx.getUserInfo 的 userInfo
    // 保存userInfo
    setUserInfo({
      code: e.detail.code,
      userInfo: e.detail.userInfo
    })
    // 从插件返回小程序，触发onShow事件
    navigateBack({ delta: 1 });
}
小程序中
componentDidShow() {
    // 页面onShow触发时获取插件页面已保存的数据
    const myPlugin = Taro.requirePlugin('myPlugin');
    const userInfo = myPlugin.getUserInfo();
    console.log('userInfo:', userInfo);
}

使用插件组件

config: Config = {
    navigationBarTitleText: '首页',
    // 配置页面中使用的插件组件
    usingComponents: {
      'avatar': 'plugin://myPlugin/avatar'
    }
}
// render中使用
<Avatar />

在页面配置 config.usingComponents 中配置好插件名和插件路径（plugin://[app.js 中注册的插件名]/[plugin.json 中注册的组件名]）：

使用插件接口

const myPluginInterface = Taro.requirePlugin('myPlugin')

myPluginInterface.sayHello()
const answer = myPluginInterface.answer

微信小小程序插件

使用微信官方demo初始化完毕后，项目为如下结构：
http://alicdn.miaokefu.com/blogs/weapp-plugin-structure.jpg

  • plugin 目录：插件代码目录。
  • miniprogram 目录：放置一个小程序，用于调试插件。
  • doc 目录：用于放置插件开发文档。
  • project.config.json ：配置文件

插件使用组件限制

在插件开发中，以下组件不能在插件页面中使用：

  • 开放能力（open-type）为以下之一的 button：
    • contact（打开客服会话）
    • getPhoneNumber（获取用户手机号）
    • getUserInfo（获取用户信息）
  • open-data
  • web-view

以下组件的使用对基础库版本有要求：

插件获取用户信息

插件中如果需要获取用户信息，可以使用用户信息功能页，通过 functional-page-navigator 标签进行跳转，对应的参数 name 应为固定值 loginAndGetUserInfo，其余参数与 wx.getUserInfo 相同

functional-page-navigator 仅在插件中有效，用于跳转到插件功能页。

<FunctionalPageNavigator name="loginAndGetUserInfo" version="develop" onSuccess={this.loginSuccess}>
  <Button>登录到插件</Button>
</FunctionalPageNavigator>

loginSuccess = (e) => {
    console.log(e.detail.code) // wx.login 的 code
    console.log(e.detail.userInfo) // wx.getUserInfo 的 userInfo
}

==对于用户手机号，目前插件暂时没有方法获取==

用户信息功能页

用于帮助插件获取用户信息，包括 openid 和昵称等，相当于 wx.login 和 wx.getUserInfo 的功能。

此外，==自基础库版本 2.3.1 起，用户在这个功能页中授权之后，插件就可以直接调用 wx.login 和 wx.getUserInfo== 。无需再次进入功能页获取用户信息。自基础库版本 2.6.3 起，可以使用 wx.getSetting 来查询用户是否授权过。

在开发版小程序中测试

通常情况下，可以将 miniprogram 下的代码当做使用插件的小程序代码，来进行插件的调试和测试。

但有时，需要将插件的代码放在实际运行的小程序中进行调试、测试。此时，可以使用开发版的小程序直接引用开发版插件。方法如下：

  1. 在开发者工具的插件项目中上传插件，此时，在上传成功的通知信息中将包含这次上传获得的插件开发版 ID （一个英文、数字组成的随机字符串）；
  2. 点击开发者工具右下角的通知按钮，可以打开通知栏，看到新生成的 ID ；
    http://alicdn.miaokefu.com/blogs/wxapp-plugin-dev-id.jpg
  3. 在使用这个插件的任意小程序项目中，可以将插件 version 设置为 "version": "dev-[开发版ID]" 的形式，如 "version": "dev-abcdef0123456789abcdef0123456789" ；
    <font color=red>小程序引入开发版插件时控制台出现插件未授权使用，点击控制台的添加插件，发起插件使用申请</font>
    http://alicdn.miaokefu.com/blogs/add-plugin-tip.jpg
  4. 这样就会引用到这次上传的开发版插件；
  5. 注意，再次上传插件时， ID 可能会改变。

如果开发版小程序引用了开发版插件，此时这个小程序就不能上传发布了。必须要将插件版本设为正式版本之后，小程序才可以正常上传、发布。

审核发布

  1. 插件审核必须先完成插件服务类目填写
  2. 插件审核必须先上传发布开发文档, <font color=red>doc/README.md放在资源管理器最顶层才会出现上传按钮</font>

    编辑 README.md 之后，可以在开发者工具左侧资源管理器的文件栏中右键单击 README.md，并选择上传文档。发布上传文档后，文档不会立刻发布。此时可以使用帐号和密码登录 管理后台 ，在 小程序插件 > 基本设置 中预览、发布插件文档。

常见问题 FAQ

1. functional-page-navigator 跳转到用户信息功能页后提示页面不存在

  • 这种情况是因为插件所有者小程序没有正确设置 "functionalPages": true 。如果 functional-page-navigator 的 version="develop" ，这部手机需要扫码并进入插件所有者小程序一次；如果 version="release" ，请确保包含 "functionalPages": true 的插件所有者小程序已被发布

2. 小程序引入插件后体积变大

  • 小程序整包是包含插件部分的 http://alicdn.miaokefu.com/blogs/weapp-size.jpg

3. 使用Taro开发插件插件包体积大

  • Taro默认插件例子开发环境体积687KB，生产环境体积254KB。建议插件部分使用微信小程序原生写，原生例子仅2KB。

名词解释

插件所有者小程序

开始开发之前，我们需要知道，插件功能页是指 插件所有者小程序 中的一个特殊页面。

插件所有者小程序，指的是与插件 AppID 相同的小程序。例如，“小程序示例”小程序开发了一个“小程序示例插件”，那么无论这个插件被哪个小程序使用，这个插件的 插件所有者小程序 都是“小程序示例”。下文中会继续使用 插件所有者小程序 这个说法。

参考资料

  1. 微信小程序插件功能介绍-开发插件
  2. Taro小程序插件开发
  3. 微信小程序插件开发
  4. 用户功能页
  5. 插件功能页
  6. 使用插件
浙ICP备17001301号-2