目录
一、环境搭建
1. 构建示例时运行环境(版本无需固定,根据自己需要调整):
二、构建步骤
1. 准备一个纯净的uni-app项目
1.1 通过vue-cli创建uni-app
2. 运行uniapp2wxpack-cli(uniapp2wxpack 3.0以上版本)
2.1 运行uniapp2wxpack-cli
2.2 添加project.config.json文件
2.3 在src目录下手动创建plugin.json
2.4 对src/main.js进行js接口的设置(非必须)
2.5 运行命令
2.6 微信开发者工具预览
2.7 插件上传
三、文献参考
一、环境搭建
1. 构建示例时运行环境(版本无需固定,根据自己需要调整):
macOS Monterey 12.5
Hbuilder X 3.4.18.20220630
微信开发者工具 Stable v1.05.2204250
npm 8.1.0
yarn 1.22.19
node 16.13.0
uniapp2wxpack 3.4.2
vue 2.6.11
vue/cli 4.5.15
二、构建步骤
1. 准备一个纯净的uni-app项目
1.1 通过vue-cli创建uni-app
npm install -g @vue/cli@4
vue create -p dcloudio/uni-preset-vue plugindemo
选择默认模板即可
2. 运行uniapp2wxpack-cli(uniapp2wxpack 3.0以上版本)
2.1 运行uniapp2wxpack-cli
npx uniapp2wxpack --create
运行完成后此时的项目目录
cli命令运行完之后,项目同时具备uni-app解耦模式的开发和插件开发能力
在package.json中分别会生成以下命令
build:mp-weixin-pack
dev:mp-weixin-pack
build:mp-weixin-pack-plugin
dev:mp-weixin-pack-plugin
并且会自动创建文件projectToSubPackageConfig.js
自动创建目录mainWeixinMp(此目录打包后会成为miniprogram目录,也就是插件开发模式的预览小程序)
2.2 添加project.config.json文件
手动在项目根目录创建插件开发需要的project.config.json,并且内容miniprogramRoot和pluginRoot属性按以下填写,并且在appid字段中自行填写真实的appid(小程序的appid)
{
"miniprogramRoot": "miniprogram/",
"pluginRoot": "uniSubpackage/",
"compileType": "plugin",
"setting": {},
"appid": "xxxxxxxxx",
"projectname": "plugindemo",
"simulatorType": "wechat",
"simulatorPluginLibVersion": {},
"condition": {}
}
2.3 在src目录下手动创建plugin.json
main属性必须按以下内容填写,也就意味着插件的接口文件指向src/main.js(因为打包后路径会变成common/main.js)
{
"publicComponents": {
"hello-component": "components/test"
},
"pages": {
"hello-page": "pages/index/index"
},
"main": "common/main.js"
}
publicComponents是小程序插件提供给第三方使用的自定义组件路径配置,components目录需要手动生成,不需要可以不做,pages是插件页面路径配置
2.4 对src/main.js进行js接口的设置(非必须)
在main.js的最底部填写相关需要的内容
其中如果需要对第三方小程序公开自定义组件的使用,需要定义vue的全局组件,见如下范例
插件的接口使用特殊的API __uniPluginExports进行暴露
/**
* 要输出给第三方小程序使用的自定义组件,必须声明全局组件
* 如果只是单纯的引入,不声明全局组件,build模式会无法正常输出组件
*/
import test from './components/test'
Vue.component('test',test)
// 插件接口输出使用特殊的API
__uniPluginExports = {
hello: function() {
console.log('Hello plugin!')
}
}
2.5 运行命令
npm run dev:mp-weixin-pack-plugin (开发模式)
npm run build:mp-weixin-pack-plugin (生产模式)
运行 npm run dev:mp-weixin-pack-plugin后MainWeixinMp目录下会生成app.js文件,此时还需要手动添加pages文件夹和app.json文件
app.json内容
{
"pages": [
"pages/index/index"
],
"plugins": {
"hello-plugin": {
"version": "dev",
"provider": "xxxxxxxxxxxx"
}
}
}
pages中包含了预览小程序的页面路径,是个string数组。plugins是引用的插件配置,”hello-plugin”是对引用的插件进行自定义命名,version是使用的插件版本,调试开发版时值为”dev”,线上版本则选择版本号(如1.0.0),provider是插件提供小程序的appid
pages中页面的结构和写法是原生小程序的写法,uniapp2wxpack编译时不会处理该文件夹下的语法结构,这点需要注意下
2.6 微信开发者工具预览
使用微信开发者工具预览dist目录下相关环境的mp-weixin-pack-plugin目录
微信开发者工具打开后预览如下
minprogram是预览小程序的目录,即uniapp项目中MainWeixinMp目录下的文件,uniSubpackage是小程序插件的文件目录
2.7 插件上传
微信开发者工具上传就可以
三、文献参考
使用uniapp2wxpack将uni-app项目打包成微信小程序插件
使用vue-cli创建uniapp项目
今天的文章uniapp开发小程序插件_小程序uniapp[通俗易懂]分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/57743.html