uniapp + uniapp2wxpack构建微信小程序插件

最新推荐文章于 2025-03-24 15:46:47 发布

名侦探柯基

最新推荐文章于 2025-03-24 15:46:47 发布

阅读量3.3k

点赞数 7

分类专栏： uniapp 文章标签：前端微信小程序

本文链接：https://blog.csdn.net/u010246360/article/details/125971683

版权

uniapp 专栏收录该内容

1 篇文章

订阅专栏

一、环境搭建

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接口的设置（非必须）

一、环境搭建

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/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编译时不会处理该文件夹下的语法结构，这点需要注意下