uniapp 之一些常用方法的封装（页面跳转，页面传参含页面返回传参等）

zhuangv

已于 2024-07-10 11:30:42 修改

阅读量767

点赞数 8

分类专栏： uniapp 文章标签： uni-app javascript 前端

于 2024-03-16 21:15:00 首次发布

本文链接：https://blog.csdn.net/zhuangvi/article/details/136728639

版权

uniapp 专栏收录该内容

19 篇文章 4 订阅

订阅专栏

util.js

提示：permission.js是uniapp插件市场由官方DCloud_heavensoft提供的App权限判断和提示插件。

import permision from "@/js_sdk/wa-permission/permission.js"


/**
 * uni.toast 封装
 * @param {String} msg  toast 提示内容
 * @param {Number} duration = 1500 提示显示时间，毫秒单位
 */
export const toast = (msg, duration = 1500) => {
	uni.showToast({
		title: msg,
		duration: duration,
		icon: 'none',
		mask: true,
	});
};

/**
 * 返回
 * @param {Function} successCallback 返回成功回调函数 
 * @param {Number} delta = 1， 返回页面层级 
 */
export const pageBack = (delta = 1, successCallback) => {
	uni.navigateBack({
		delta,
		success: successCallback
	});
};

/**
 * 跳转
 * @param {String} url 必填，跳转路径 
 * @param {Object} data 传递的参数，
 */
export const jump = (url, data) => {
	console.log('jump--------', url);
	uni.navigateTo({
		url,
		success: (res) => {
			res.eventChannel.emit('getPrePageData', { data })
		}
	});
};


/**
 * 获取jump 方法 跳转页面传递的参数
 * @param {Object} vm 必填，当前调用此方法的vue实例，传递this即可
 */
export const getPrePageData = (vm) => {
	return new Promise((resolve) => {
		const eventChannel = vm.getOpenerEventChannel();
		// 监听getPrePageData事件，获取上一页面通过eventChannel传送到当前页面的数据
		eventChannel.on('getPrePageData', (data) => {
			resolve(data.data)
		})
	})
}

/**
 * 关闭当前页面跳转
 * @param {String} url 必填，跳转路径 
 */
export const redirectTo = (url) => {
	console.log('redirectTo--------', url);
	uni.redirectTo({
		url
	});
};

/**
 * 关闭所有页面跳转
 * @param {String} url 必填，跳转路径 
 */
export const reLaunch = (url) => {
	console.log('reLaunch--------', url);
	uni.reLaunch({
		url
	});
};

/**
 * tabbar 跳转
 * @param {String} url 必填，跳转路径 
 */
export const switchTabJump = (url) => {
	console.log('switchTabJump--------', url);
	uni.switchTab({
		url
	});
};

/**
 * 显示loading，显示透明蒙层，防止触摸穿透
 * @param {String} title = '加载中'  loading提示文字
 */
export const showLoading = (title = '加载中') => {
	uni.showLoading({
		title,
		mask: true
	});
}

/**
 * 隐藏showLoading
 */
export const hideLoading = () => {
	uni.hideLoading();
}


/**
 * 复制
 * @param {*} data  复制的内容 
 * @param {*} toastTitle = '已复制到粘贴板', 复制成功后的提示语
 */
export const handleCopy = (data, toastTitle = '已复制到粘贴板') => {
	uni.setClipboardData({
		data: data,
		success: function() {
			toast(toastTitle)
		}
	});
}

关于jump方法以及getPrePageData方法的调用

jump调用

<view
    class="list-item flex-box"
    v-for="(item, index) in dataList"
    :key="index"
    @click="jump(`/pages/data-center/settlement-history/settlement-detail`, item)"
>
<!-- ... -->
</view>

getPrePageData调用

async onLoad() {
    const data = await getPrePageData(this)
    console.log('data: ', data)
    this.detail = data
    this.getSettlementDetail()
},

跨页面获取选择数据

一般通过返回api（pageBack 自己通过uni api 封装的页面返回方法）的 successCallback 事件，发送（uni.$emit）chooseData 事件

/**
 * 跨页面获取选择数据，一般通过返回api（pageBack）的 successCallback 事件，发送（uni.$emit）chooseData 事件
 * @param {String} url 页面url
 */
export const getChooseData = async (url = '') => {
	return new Promise((reslove, reject) => {
		uni.$once('chooseData', (data) => {
			if (data === null) {
				reject('navigate back');
			} else {
				reslove(data);
			}
		});
		jump(url);
	});
};

调用：

A 页面

// A页面引用并调用
import { getChooseData } from '@/utils/util.js';

// 跳转到B页面，选择数据
let list = await getChooseData ('/pages/index/xxx');
console.log('list', list); // 这个list 也就是B页面点击确定后返回传过来的arr

B 页面

// B页面点击确定数据后并返回发送chooseData事件
pageBack(1, () => {
    uni.$emit('chooseData', arr);
});

这种方法常用于页面选择数据，例如：A页面需要维护一些表单数据，如公司，但是公司的数据需要在B页面显示，然后B页面通过单选或者复选的方式选择并确定后返回到A页面，并将刚刚选择的数据带到A页面


/**
 * 扫码
 */
export const handleScan = async () => {

	const appAuthorizeSetting = uni.getAppAuthorizeSetting();
	if (plus.os.name.toLocaleLowerCase() === 'ios' && appAuthorizeSetting.cameraAuthorized == 'not determined') {
		// 如果未请求过，在ios默认调用一次，将权限加到列表中
		const res = await scanCode();
		return res;
	} else {
		if (plus.os.name.toLocaleLowerCase() === 'ios') {
			if (!permision.judgeIosPermission('camera')) { // 判断iOS上是否给予权限，有权限返回true，否则返回false
				uni.showModal({
					content: '检测到您没打开获取相机功能权限，是否去设置打开？',
					confirmText: "确认",
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							// 打开系统设置页面
							permision.gotoAppPermissionSetting();
						} else {
							toast('获取相机授权失败，部分功能无法使用')
						}
					}
				})
			} else {
				const res = await scanCode();
				return res;
			}
		} else {
			const res = await permision.requestAndroidPermission('android.permission.CAMERA');
			// 1 已获得权限，0 拒绝本次，-1永久拒绝
			if (res == 1) {
				const res = await scanCode();
				return res;
			} else {
				uni.showModal({
					content: '检测到您没打开获取相机功能权限，是否去设置打开？',
					confirmText: "确认",
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							// 打开系统设置页面
							permision.gotoAppPermissionSetting();
						} else {
							toast('获取相机授权失败，部分功能无法使用')
						}
					}
				})
			}
		}
	}
}

/**
 * scanCode
 */
export const scanCode = async () => {
	return new Promise((resolve) => {
		uni.scanCode({
			success: (res) => {
				resolve(res)
			}
		});
	})
}

/**
 * 对象数组去重
 * @param {array} arr，需要去重的数组
 * @param {string} key，通过指定key值进行去重
 * @returns {array} 返回一个去重后的新数组
 */
export const noRepeatArrOfObj = (arr, key) => {
	const res = new Map();
	return arr.filter((item) => !res.has(item[key]) && res.set(item[key], true));
}


/**
 * 锚点跳转（如：商品详情页面跳转）
 * @param {string} targetId 目标id
 * @param {string} rootId 外层盒子根id
 */
export const goByAnchor = (targetId, rootId) => {
	if (targetId) {
		uni.createSelectorQuery()
			.select('#' + targetId)
			.boundingClientRect(data => {
				// 目标位置节点 类或者 id
				uni.createSelectorQuery()
					.select("#" + rootId)
					.boundingClientRect(res => {
						// 最外层盒子节点类或者 id
						uni.pageScrollTo({
							duration: 300, // 过渡时间　　
							scrollTop: data.top - res.top - 88, // 到达距离顶部的top值
						})
					})
					.exec()
			})
			.exec();
	} else {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
	}
}

/**
 * 选择图片，参数options = {}
 * @param {Number} count = 9  最多可以选择的图片张数，默认9
 * @param {Boolean} isOnlyCamera = [ true | false ] 是否只是用相机
 * @param {Object} crop 裁剪的相关配置，设置后 sizeType 失效
 */
export const chooseImage = (options) => {
	return new Promise((resolve, reject) => {
		let defaultOptions = {
			count: 9,
			isOnlyCamera: false,
		};
		let opt = Object.assign(defaultOptions, options);
		let sourceType = opt.isOnlyCamera ? ['camera'] : ['album', 'camera'];
		uni.chooseImage({
			...opt,
			sourceType: sourceType, // album 从相册选图，camera 使用相机，默认二者都有
			success: (res) => {
				resolve(res);
			},
			fail: (err) => {
				reject(err);
			}
		});
	})
}


/**
 * 获取当前元素的一些info，如：距离顶部的距离
 */
export const getElementInfoById = (elementId) => {
	return new Promise((resolve) => {
		uni.createSelectorQuery()
			.select('#' + elementId)
			.boundingClientRect(data => {
				resolve(data)
			})
			.exec()
	})
}

/**
 * uni.preview 预览图片
 * @@param {Array} imgList = [] 预览的图片链接数组
 */
export const previewImg = (imgList) => {
	// 预览图片
	uni.previewImage({
		urls: imgList,
	});
}

/**
 * 获取manifest.json中的版本号、版本名称
 */
getVisionCode() {
    return new Promise(resolve => {
        plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
            let version = wgtinfo.version; // 版本名称
            let versionCode = wgtinfo.versionCode
            resolve({ version, versionCode })
        })
    })
}