当前位置：首页 > news >正文

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

news 2025/8/18 0:55:53

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调用

<viewclass="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 = datathis.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/utls.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，否则返回falseuni.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 => {// 目标位置节点 类或者 iduni.createSelectorQuery().select("#" + rootId).boundingClientRect(res => {// 最外层盒子节点类或者 iduni.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.versionCoderesolve({ version, versionCode })})})
}