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 })
})
})
}
关于锚点跳转方法的调用，查看uniapp 之 实现商品详情的锚点跳转（类似京东商品详情-点击顶部按钮跳转的对应的页面的内容区域）
1175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
