uniapp 之 一些常用方法的封装(页面跳转,页面传参等)

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);});
};

调用:

  1. A 页面
// A页面引用并调用
import { getChooseData } from '@/utils/utls.js';// 跳转到B页面,选择数据
let list = await getChooseData ('/pages/index/xxx');
console.log('list', list); // 这个list 也就是B页面点击确定后返回传过来的arr
  1. 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 之 实现商品详情的锚点跳转(类似京东商品详情-点击顶部按钮跳转的对应的页面的内容区域)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/762023.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot项目如何打包成war包,并部署在tomcat上运行

项目场景&#xff1a; 正常情况下&#xff0c;我们开发 SpringBoot 项目&#xff0c;由于内置了Tomcat&#xff0c;所以项目可以直接启动&#xff0c;部署到服务器的时候&#xff0c;直接打成 jar 包&#xff0c;就可以运行了。 有时我们会需要打包成 war 包&#xff0c;放入外…

Redis进阶(持久化、复制、集群、多线程、缓存)

Redis进阶 1.Redis持久化1.1 什么是Redis持久化&#xff1f;为什么需要持久化&#xff1f;1.2 Redis持久化方式——RDB(Redis DataBase)1.2.1 什么是RDB&#xff1f;1.2.2 备份文件位置1.2.3 触发RDB的方式1.2.3.1 自动触发1.2.3.2 手动触发1.2.3.3 其他触发方式 1.2.4 RDB优缺…

【GPT概念04】仅解码器(only decode)模型的解码策略

一、说明 在我之前的博客中&#xff0c;我们研究了关于生成式预训练转换器的整个概述&#xff0c;以及一篇关于生成式预训练转换器&#xff08;GPT&#xff09;的博客——预训练、微调和不同的用例应用。现在让我们看看所有仅解码器模型的解码策略是什么。 二、解码策略 在之前…

阿里云代理仓库地址

在天朝使用jcenter、mavenCentral及google三个远程仓库&#xff0c;Gradle Sync会很慢&#xff0c;google仓库甚至需要科学上网才能访问。为了加快Gradle Sync速度&#xff0c;一招教你优先用 阿里云仓库服务 的仓库作为下载源。 一劳永逸之道 将本项目的gradle/init.d/init.g…

【小程序开发】功能页面 API 汇总集合

ty.device.openCategoryActivatorPage 进入配网-选品类首页 需引入DeviceKit&#xff0c;且在>2.3.2版本才可使用 参数 Object object 属性类型默认值必填说明completefunction否接口调用结束的回调函数&#xff08;调用成功、失败都会执行&#xff09;successfunction否…

【Jenkins】Spark on Yarn 部署脚本

文章目录 停止 Yarn 集群中的 Spark 应用提交 Spark 应用到 YARN✔️ 目标:提供 Jenkins 脚本,用于 在 Jenkins 中实现 Spark 任务提交到 YARN 及重启操作。 停止 Yarn 集群中的 Spark 应用 Shell 脚本: # 停止spark应用(仅支持一个yarn应用,如果跑了多个应用,会报错)…

【Linux】多线程编程基础

&#x1f4bb;文章目录 &#x1f4c4;前言&#x1f33a;linux线程基础线程的概念线程的优缺点线程与进程的区别 线程的创建 &#x1f33b;linux线程冲突概念互斥锁函数介绍加锁的缺点 &#x1f4d3;总结 &#x1f4c4;前言 无论你是否为程序员&#xff0c;相信多线程这个词汇应…

How to install Miniconda on ubuntu 22.04

How to install Miniconda on ubuntu 22.04 介绍安装脚本细节 初始化脚本细节 卸载脚本细节 介绍 通常来说&#xff0c;要安装conda有以下三种安装方案&#xff1a; Miniconda Miniconda 是 conda 的免费最小安装程序。它是 Anaconda 的一个小型引导版本&#xff0c;仅​​包…

量子计算机

近日&#xff0c;在AWS re&#xff1a;Invent全球大会上&#xff0c;亚马逊官宣AWS三箭齐发量子计算组合拳&#xff1a;Braket、AWS量子计算中心和量子解决方案实验室。 随着亚马逊的强势入局&#xff0c;加上此前鼓吹量子霸权的谷歌、起步最早的IBM、暗自发力的微软&#xff…

Android仿微信视频聊天本地与远程切换功能

一、xml布局 <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.android.com/apk/res-auto&qu…

react-jsx

react04 jsx语法 - 01 基础知识&#xff1a; jsx javascript xml(html) 把js和heml标签混合到一起 react视图编写及构建的简要流程 &#xff1a; 如何在react中使vs code支持格式化和快捷键提示&#xff1a;1, 2,修改文件后缀为jsx&#xff0c;因为webpack的打包规则中可以…

如何通过idea搭建一个SpringBoot的Web项目(最基础版)

通过idea搭建一个SpringBoot的Web项目 文章目录 通过idea搭建一个SpringBoot的Web项目一、打开idea&#xff0c;找到 create new project二、创建方式三、配置项目依赖四、新建项目模块五、总结 一、打开idea&#xff0c;找到 create new project 方式1 方式2 二、创建方式 新…

BERT 论文阅读笔记

文章目录 前言论文阅读同类工作比较模型架构训练方式使用步骤实验结果 其他 前言 BERT是在NLP领域中第一个预训练好的大型神经网络&#xff0c;可以通过模型微调的方式应用于后续很多下游任务中&#xff0c;从而避免了下游NLP应用需要单独构建一个新的神经网络进行复杂的预训练…

合根植物。

4.合根植物 - 蓝桥云课 (lanqiao.cn) 题目描述 w星球的一个种植园&#xff0c;被分成mxn个小格子(东西方向m行&#xff0c;南北方向n列)。每个格子里种了一株合根植物 这种植物有个特点&#xff0c;它的根可能会沿着南北或东西方向伸展从而与另一个格子的植物合成为一体。 如果…

马斯克开源Grok-1

Grok-1是由马斯克AI创企xAI发布的第一代大语言模型&#xff0c;它以其巨大的参数量——高达3140亿&#xff0c;引起了全球范围内的广泛关注。这一参数量远超其他知名模型&#xff0c;如OpenAI的GPT-3.5&#xff0c;后者仅有1750亿参数。在2024年3月17日&#xff0c;马斯克宣布将…

【jvm】jinfo使用

jinfo介绍 jinfo 是一个命令行工具&#xff0c;用于查看和修改 Java 虚拟机&#xff08;JVM&#xff09;的配置参数。它通常用于调试和性能调优。 使用 jinfo 命令&#xff0c;你可以查看当前 JVM 的配置参数&#xff0c;包括堆大小、线程数、垃圾回收器类型等。此外&#xf…

天翼云防火墙配置端口转换案例

环境: 天翼云 云墙 问题描述: 天翼云防火墙配置端口转换案例 云主机192.168.10.9:2231 解决方案: 1.先登入云墙 可以从控制中心登入不用再输入密码 2.新建对象和端口 192.168.10.9:2231 3.到弹性IP这选个公网IP 记住弹性IP和后面虚拟IP 4.新建 目的NAT,按原有复制…

【Arxml专题】-29-使用Cantools将CAN Matrix Arxml自动生成C语言代码

目录 1 安装Python和Cantools 1.1 查看Python已安装的Package包 1.2 在Python中安装Cantools插件包 1.3 获取更多Cantools工具的更新动态 2 CAN Matrix Arxml自动生成C语言代码 2.1 批处理文件CAN_Matrix_Arxml_To_C.bat内容说明 2.2 CAN Matrix Arxml文件要求 2.3 如何…

论文翻译 - Automatically Auditing Large Language Models via Discrete Optimization

Automatically Auditing Large Language Models via Discrete Optimization Abstract1 Introduction2 Related Work3 Formulating and Solving the Auditing Optimization Problem3.1 Preliminaries3.2 The auditing optimization problem Abstract 为意外行为审计大型语言模型…

20232831 2023-2024-2 《网络攻防实践》第3次作业

目录 20232831 2023-2024-2 《网络攻防实践》第3次作业1.实验内容2.实验过程&#xff08;1&#xff09;动手实践tcpdump&#xff08;2&#xff09;动手实践Wireshark&#xff08;3&#xff09;取证分析实践&#xff0c;解码网络扫描器&#xff08;listen.cap&#xff09; 3.学习…