uniapp 窗口小工具、桌面小部件、微件 Ba-AppWidget

最新推荐文章于 2024-04-27 13:01:21 发布

三杯五岳

最新推荐文章于 2024-04-27 13:01:21 发布

阅读量3.5k

点赞数 1

分类专栏： uni-app 文章标签： uni-app 桌面小工具窗口小部件微件原生插件

本文链接：https://blog.csdn.net/u013164293/article/details/128449186

版权

uni-app 专栏收录该内容

53 篇文章 23 订阅

订阅专栏

简介（下载地址）

Ba-AppWidget 是一款窗口小工具（桌面小部件、微件）插件，默认为音乐播放器的样式，有其他界面需要，可联系作者定制。

支持点击事件监听
支持动态更改页面内容
支持设置小工具的预览图片
支持自定义样式

截图展示

在这里插入图片描述

使用方法

在 script 中引入组件

	const appWidget = uni.requireNativePlugin('Ba-AppWidget')

在 script 中调用（示例参考，可根据自己业务和调用方法自行修改）

	const appWidget = uni.requireNativePlugin('Ba-AppWidget')
		export default {
			data() {
					return {
						msgList: [],
						textColor1: "#FF0000",
						contents: [{
							text1: "text11",
							text2: "text21",
							imgUrl1: "http://www.lihuisem.com/mwj/zb_users/upload/2021/28/1611837327969_1.jpeg"
						}, {
							text1: "text12",
							text2: "text22",
							imgUrl1: "http://www.lihuisem.com/mwj/zb_users/upload/2021/28/1611837327969_5.jpeg"
						}],
						index: 0
					}
				},
				methods: {
					init() { //初始化配置，使用默认配置可以不调用
						appWidget.init({
						        isTest: true,//仅用于测试效果
								textColor1: this.textColor1,
								text1: "text11",
								text2: "text21",
								imgUrl1: "http://www.lihuisem.com/mwj/zb_users/upload/2021/28/1611837327969_1.jpeg"
							},
							res => {
								console.log(res);
								uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 3000
								})
			
							});
					},
					requestPin() { //添加到桌面，也可以通过桌面的方式添加
						let that = this;
						appWidget.requestPin(
							res => {
								console.log(res);
								that.msgList.unshift(JSON.stringify(res))
								uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 3000
								})
					
							});
					},
					subClick() { //监听点击事件
						let that = this;
						appWidget.subClick(
							res => {
								console.log(res);
								if (res.data) {
									if(res.data.id){//根据id判断点击的事哪个按钮
										
									}
									that.updateAW();//更新页面内容
									that.msgList.unshift(JSON.stringify(res))
								}
								uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 3000
								})
			
							});
					},
					updateAW() {//更新内容
						let that = this;
			
						if (this.index == 0) {
							this.index = 1;
						} else {
							this.index = 0;
						}
			
						let content = this.contents[this.index];
						appWidget.updateAW(content,
							res => {
								console.log(res);
								if (res.data) {
									that.msgList.unshift(JSON.stringify(res))
								}
								uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 3000
								})
			
							});
					},
				}
			}

api 列表

方法名	说明
init	初始化配置，使用默认配置可以不调用
requestPin	添加小工具到桌面
subClick	监听小工具的点击事件
updateAW	更新小工具的内容

init 方法参数

初始化配置，使用默认配置可以不调用

属性名	类型	必填	默认值	说明
text1	String	false	‘’	文本1的内容
text2	String	false	‘’	文本2的内容
textColor1	String	false	‘#181818’	文本1颜色
textColor2	String	false	‘#666866’	文本2颜色
textSize1	Number	false	14	文本1的字体大小，单位dp
textSize2	Number	false	12	文本2的字体大小，单位dp
btnIcon1	String	false	‘’	按钮1的图标，原生配置地址，见原生图标配置说明
btnIcon2	String	false	‘’	按钮2的图标，同上
btnIcon3	String	false	‘’	按钮3的图标，同上
btnIcon4	String	false	‘’	按钮4的图标，同上
btnIcon5	String	false	‘’	按钮5的图标，同上
imgUrl1	String	false	‘’	图片1，网络地址

updateAW 方法参数

更新小工具的内容

属性名	类型	必填	默认值	说明
text1	String	false	‘’	文本1的内容
text2	String	false	‘’	文本2的内容
textColor1	String	false	‘#181818’	文本1颜色
textColor2	String	false	‘#666866’	文本2颜色
textSize1	Number	false	14	文本1的字体大小，单位dp
textSize2	Number	false	12	文本2的字体大小，单位dp
btnIcon1	String	false	‘’	按钮1的图标，原生配置地址，见原生图标配置说明
btnIcon2	String	false	‘’	按钮2的图标，同上
btnIcon3	String	false	‘’	按钮3的图标，同上
btnIcon4	String	false	‘’	按钮4的图标，同上
btnIcon5	String	false	‘’	按钮5的图标，同上
imgUrl1	String	false	‘’	图片1，网络地址

原生图标配置

注意：配置更改后，需要重新制作基座才生效，建议提前配置。

按钮图标：建议必填，不填使用默认图标，在项目的 “nativeplugins\Ba-AppWidget\android\res\drawable” 目录下（没有就新建），添加图标，然后在init或updateAW方法设置，对应的参数传图标的名称即可（如，图标文件为“ba_aw_ic_pause.png”，那参数的值为“ba_aw_ic_pause”）
小工具的预览图片：建议必填，不填使用默认图标，在项目的 “nativeplugins\Ba-AppWidget\android\res\drawable” 目录下（没有就新建），添加名称为“ba_appwidget_preview.png”的图标，文件名必须一致

在这里插入图片描述