uniapp开发小程序插件_小程序uniapp[通俗易懂]

uniapp开发小程序插件_小程序uniapp[通俗易懂]使用uniapp+uniapp2wxpack构建微信小程序插件_uniapp2wxpack

目录

一、环境搭建

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

选择默认模板即可

uniapp开发小程序插件_小程序uniapp[通俗易懂]

2. 运行uniapp2wxpack-cli(uniapp2wxpack 3.0以上版本)

2.1 运行uniapp2wxpack-cli

npx uniapp2wxpack --create

运行完成后此时的项目目录

uniapp开发小程序插件_小程序uniapp[通俗易懂]

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": {}
}

uniapp开发小程序插件_小程序uniapp[通俗易懂]

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"
}

 uniapp开发小程序插件_小程序uniapp[通俗易懂]

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!')
    }
}

uniapp开发小程序插件_小程序uniapp[通俗易懂]

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文件

uniapp开发小程序插件_小程序uniapp[通俗易懂]

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目录

uniapp开发小程序插件_小程序uniapp[通俗易懂]

微信开发者工具打开后预览如下

uniapp开发小程序插件_小程序uniapp[通俗易懂] minprogram是预览小程序的目录,即uniapp项目中MainWeixinMp目录下的文件,uniSubpackage是小程序插件的文件目录

2.7 插件上传

微信开发者工具上传就可以

uniapp开发小程序插件_小程序uniapp[通俗易懂]

三、文献参考

使用uniapp2wxpack将uni-app项目打包成微信小程序插件

使用vue-cli创建uniapp项目

今天的文章uniapp开发小程序插件_小程序uniapp[通俗易懂]分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/57743.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注