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 })})})
}
关于锚点跳转方法的调用,查看uniapp 之 实现商品详情的锚点跳转(类似京东商品详情-点击顶部按钮跳转的对应的页面的内容区域)