文章目录
背景
关于插件的基本信息，插件的官网说的已经很详细了，这里我更多的是说一些我对插件的感悟。
小程序插件是什么？
- 插件是对一组 js 接口、自定义组件 或页面的封装，用于嵌入到小程序中使用。
插件有什么特点？和小程序封装的 npm 包有什么区别？
- 小程序封装的 npm 包一般我们是封装一些 js 接口或者小程序组件；插件可以封装页面。
- 插件更像是一个独立的功能集合体。
- 插件的发布流程类似小程序，需要小程序官方进行审核后才能发布。
- 一个小程序后台只能申请开发一个小程序插件。
插件审核什么场景？
- 我认为插件更适合封装带有页面的场景，或者是一个完整功能模块（页面、组件、js接口可能都有）的场景，比如说是登录模块，支付模块，订单模块，因为如果是纯组件或者纯 js 接口，那么直接用 npm 包的形式更方便，还不用审核也不用一个占插件的名额。
所以我认为，插件的封装维度是在小程序和组件之间的一个维度。
传值
这里的传值我指的是插件独有的传值方式，像组件通过 props 或者页面通过 query 那种传统的传值方式我这里就不多说了。
小程序 -> 插件
小程序 app.json
{
"myPlugin": {
"version": "1.0.0",
"provider": "wxidxxxxxxxxxxxxxxxx",
"export": "index.js"
}
}
小程序 index.js
module.exports = {
whoami: 'Wechat MiniProgram'
}
插件接受
requireMiniProgram().whoami // 'Wechat MiniProgram'
这里有个小技巧，插件接受的时候可以用下面这个函数来接受，这个函数可以让小程序端可以用函数的形式来传入，比如 whoami: () => { return 'Wechat MiniProgram' }。
// 如果传进来的配置是函数，那么调用并获取值，如果不是函数，那么直接获取值
export const getMiniProgram = () => {
// 有些必须是函数，这些不做转换
const isFunWhiteList = ['rewriteHandConfirmUrl', 'rewriteHandCancelUrl']
const obj = requireMiniProgram()
let newObj = {
}
for (let key in obj) {
const isFun = Object.prototype.toString.call(obj[key]) === '[object Function]'
if (isFun && !isFunWhiteList.includes(key)) {
newObj[key] = obj[key]()
} else {
newObj[key] = obj[key]
}
}
return newObj
}
插件 -> 小程序
插件 plugin.json
{
"publicComponents": {
},
"pages": {
},
"main": "index.js"
}
插件 index.js
module.exports = {
hello: function() {
console.log('Hello plugin!')
}
}
小程序任意位置接受
const myPluginInterface = requirePlugin('myPlugin');
// Hello plugin!
myPluginInterface.hello();
跳转
小程序 -> 插件页/插件页 -> 插件页
const pageUrl = `plugin-private://wxxxxxxxxxxx/pages/index/index`
wx.navigateTo({
url: pageUrl
})
插件页 -> 小程序
wx.navigateTo({
url: `/pages/index/index`
})
疑难问题
1、插件中很多 wx 的 API 无法使用，例如 wx.login 等等，如何解决？
- 插件功能页
- 给插件传入 wx 对象
比如登录的话如果用插件功能页，是需要额外的跳转到这个功能页的，相当于多了一步，如果是业务上这可能是不可接受的，所以可以给插件传入 wx 对象，但是这样插件就有很大的权限了，所以我们做的插件都是只给本公司内部使用，如果外部使用这样做风险太大了。
这里值得一提的是，wx对象如果是小程序传递给小程序或者其他方式都是无法传递的会报错，目前用到的方式只是小程序传给插件
2、插件中不能使用 web-view 怎么办？
可以让小程序提供一个 web-view 页面，然后插件跳到这个页面。