uniapp体系开发微信小程序插件
一、开发背景
小程序模块部分业务需要被多方小程序使用。显然小程序插件是符合业务需求的，但是uniapp体系没有直接开发小程序插件的能力，在一番探索之后发现 uniapp2wxpack 比较符合我们的期望。
二、开发准备（以下内容为 uni-project-to-plugin README.md 的细节补充）
注意
项目中涉及appid的部分需要自己修改成项目的实际appid，否则无法开发插件
第一步
通过命令的方式创建 uniapp 项目 (只能通过命令创建方式构建)
npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project
第二步
运行uniapp2wxpack-cli（uniapp2wxpack 3.0以上版本）
npx uniapp2wxpack --create
运行完之后，项目同时具备uni-app 解耦模式 的开发和 插件开发 能力 （ 这里只关注插件开发 ）
1、package.json scripts 中会自动生成以下命令
scripts: {
build:mp-weixin-pack: '***',
dev:mp-weixin-pack: '***',
build:mp-weixin-pack-plugin: '***',
dev:mp-weixin-pack-plugin: '***'
}
2、根目录自动创建文件 projectToSubPackageConfig.js ( 不用修改 )
3、根目录自动创建目录mainWeixinMp （ 此目录打包后会成为 miniprogram 目录， 对应插件开发模式的预览页面 ）
4、mainWeixinMp文件下自动创建app.js文件
mainWeixinMp： 此文件内容为插件运行模式下的调试页面 （ 这里只关注插件开发 ）
1、手动添加pages文件夹
2、添加文件pages/app.json
3、添加文件pages/myTest/index.js，pages/myTest/index.json， pages/myTest/index.wxml，pages/myTest/index.wxss
pages/app.json
// pages/myTest/index.json
{
"pages": [
"pages/myTest/index"
],
"subPackages": [],
"usingComponents": {},
"plugins": {
"custom-plugin": {
"version": "dev",
"provider": "{{appid}}"
}
}
}
pages/myTest/index.js
// pages/myTest/index.js
var customPlugin = requirePlugin("custom-plugin");
console.log('customPlugin', customPlugin)
Page({
// 页面的初始数据
data: {},
// 生命周期函数--监听页面加载
onLoad: function (options) {},
// 生命周期函数--监听页面初次渲染完成
onReady: function () {},
// 生命周期函数--监听页面显示
onShow: function () {},
// 生命周期函数--监听页面隐藏
onHide: function () {},
// 生命周期函数--监听页面卸载
onUnload: function () {},
// 页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh: function () {},
// 页面上拉触底事件的处理函数
onReachBottom: function () {},
// 用户点击右上角分享
onShareAppMessage: function () {}
})
pages/myTest/index.json
// pages/myTest/index.json
{
"usingComponents": {
"componentButton": "plugin://custom-plugin/componentButton"
}
}
pages/myTest/index.wxml
<!--pages/myTest/index.wxml-->
<view class="test-page">
<text class="title">小程序调试页</text>
<view>
<text class="title">跳转到插件page index示例</text>
<navigator url="plugin-private://{{appid}}/pages/index/index">
<button type="primary" size="mini">custom-plugin/pages/index/index</button>
</navigator>
</view>
<view>
<text class="title">跳转到插件page test</text>
<navigator url="plugin-private://{{appid}}/pages/test/index">
<button type="primary" size="mini">custom-plugin/pages/test/index</button>
</navigator>
</view>
<view>
<text class="title">组件示例 button</text>
<customButton/>
</view>
</view>
pages/myTest/index.wxss
/* pages/myTest/index.wxss */
.test-page{
padding: 30rpx;
}
.title{
font-size: 40rpx;
text-align: center;
display: block;
padding: 20rpx;
}
第三步
手动在项目根目录创建插件开发需要的project.config.json，并且内容miniprogramRoot和pluginRoot属性按以下填写
并且自行填写真实的appid
{
"miniprogramRoot": "miniprogram/",
"pluginRoot": "uniSubpackage/",
"compileType": "plugin",
"setting": {},
"appid": "xxxxxxxxx", // 请填好真实的appid
"projectname": "uniapp2wxpack开发微信小程序插件",
"simulatorType": "wechat",
"simulatorPluginLibVersion": {},
"condition": {}
}
第四步
在src目录下手动创建plugin.json
并且main属性必须按以下内容填写，也就意味着插件的接口文件指向src/main.js（因为打包后路径会变成common/main.js）
{
"publicComponents": {
"customButton": "components/custom-button/index"
},
"pages": {
"page-index": "pages/index/index",
"page-test": "pages/test/index"
},
"main": "common/main.js"
}
第五步
对src/main.js进行js接口的设置（非必须）
在main.js的最底部填写相关需要的内容
其中如果需要对第三方小程序公开自定义组件的使用，需要定义vue的全局组件，见如下范例
插件的接口使用特殊的API __uniPluginExports进行暴露
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
/**
* 要输出给第三方小程序使用的自定义组件,必须声明全局组件
* 如果只是单纯的引入,不声明全局组件,build模式会无法正常输出组件
* 补充：需要在src下自己添加组件目录
*/
import customButton from './components/custom-button'
Vue.component('customButton',customButton)
// 插件接口输出使用特殊的API
// 用来给引用的小程序使用的
__uniPluginExports = {
hello: function() {
console.log('Hello plugin!')
}
}
第六步
运行命令
npm run dev:mp-weixin-pack-plugin （开发模式）
npm run build:mp-weixin-pack-plugin （生产模式）
第七步
使用微信开发者工具预览dist目录下相关环境的 mp-weixin-pack-plugin 目录（ 注意不要选择错了 ）
home.png
custom-plugin-test-page.png
