实现 UniApp 右上角按钮“扫一扫”功能实战教学
实现 UniApp 右上角按钮“扫一扫”功能实战教学
需求
点击右上角扫一扫按钮(onNavigationBarButtonTap监听),打开扫一扫页面(uni.scanCode) 扫描后,以网页的形式打开扫描内容(web-view组件),限制只能浏览带有执行域名的网站,例如(baidu.com)。
实现功能
步骤一、配置pages.json文件
{"path": "pages/index/index", "style": {"navigationBarBackgroundColor": "#345DC2", //导航背景色"navigationBarTextStyle": "white" ,//状态和导航字体样式"app-plus": {"bounce": "none", // 禁止回弹"titleNView": { // 导航配置"type": "transparent", // 滚动透明渐变"searchInput": { // 搜索框"align": "center","placeholder": "搜索你想要的内容","borderRadius": "30rpx","backgroundColor": "#F0F1F2","placeholderColor": "#979c9d", //提示字体颜色"disabled": true //禁止输入,点击进入新搜索页面}// #ifdef APP-PLUS,"buttons": [ //扫描二维码只有app才有{"float": "right", //标题栏上显示位置"background":"rgba(0,0,0,0)", //按钮背景色"fontSize": "23", //按钮大小,不要太大,不然会被隐藏"fontSrc": "/static/icon/iconfont.ttf","text": "\ue689" // 以/u开头,后台加上e开头的}]// #endif}}}},
效果:

步骤二、创建打开网页页面组件/pages/public/web-view
<template><view><web-view v-if="isOpen(url)" :src="url"></web-view><view class="tip column"><text>如需浏览,请长按网址复制后使用浏览器访问</text><text selectable>{{url}}</text></view></view>
</template><script>export default{data(){return {url:null}},onLoad(options) {this.url = options.url;},methods:{isOpen(){if(this.url){// 只能访问孟学古的网址return this.url.indexOf('baidu.com') !==-1}}}}
</script>
<style lang="scss">.tip{position: relative;top: 200rpx;width: 300rpx;margin: 0 auto;text-align: center;word-wrap: break-word;font-size: 30rpx;text:first-child{font-size: 40rpx;font-weight: bold;margin-bottom: 30rpx;}}
</style>

步骤三、在pages.json中的pages数组后面添加一个"pages/public/web-view"页面对象
{"path": "pages/public/web-view", //web浏览器组件"style": {"app-plus": {"bounce": "none" // 禁止回弹效果}}
}

步骤四、使用uniapp提供的页面生命周期钩子 onNavigationBarButtonTap 监听点击的导航按钮,使用uni.scanCode 扫描二维码,注意:onNavigationBarButtonTap与methods同级。
onNavigationBarButtonTap(e){// 点击第一个按钮if(e.index===0){// 打开扫一扫功能uni.scanCode({success:function(res){console.log("条码类型"+res.scanType);console.log("条码内容"+res.result);uni.navigateTo({url:`/pages/public/web-view?url=${res.result}`})}})}},
最终效果:

完结~
相关文章:
实现 UniApp 右上角按钮“扫一扫”功能实战教学
实现 UniApp 右上角按钮“扫一扫”功能实战教学 需求 点击右上角扫一扫按钮(onNavigationBarButtonTap监听),打开扫一扫页面(uni.scanCode) 扫描后,以网页的形式打开扫描内容(web-view组件),限制只能浏览带有执行域名的网站,例如…...
【2024亚太杯亚太赛APMCM C题】数学建模竞赛|宠物行业及相关产业的发展分析与策略|建模过程+完整代码论文全解全析
第一个问题是:请基于附件 1 中的数据以及你的团队收集的额外数据,分析过去五年中国宠物行业按宠物类型的发展情况。并分析中国宠物行业发展的因素,预测未来三年中国宠物行业的发展。 第一个问题:分析中国宠物行业按宠物类型的发展…...
ubtil循环函数调用
什么是until until循环是一种控制流结构。它与while循环相反,while循环是在条件为真时执行循环体,而until循环是在条件为假时执行循环体,直到条件为真时才停止循环。 until代码示例: i0 do until [ ! $i -lt 10 ] echo $…...
使用EFK收集k8s日志
首先我们使用EFK收集Kubernetes集群中的日志,本次实验讲解的是在Kubernetes集群中启动一个Elasticsearch集群,如果企业内已经有了Elasticsearch集群,可以直接将日志输出至已有的Elasticsearch集群。 文章目录 部署elasticsearch创建Kibana创建…...
聚水潭与MySQL数据集成案例分享
聚水潭数据集成到MySQL的技术案例分享 在现代数据驱动的业务环境中,如何高效、可靠地实现不同系统之间的数据对接成为企业关注的焦点。本次案例将详细介绍如何通过轻易云数据集成平台,将聚水潭的数据无缝集成到MySQL数据库中,实现从“聚水谭…...
Python 版本的 2024详细代码
2048游戏的Python实现 概述: 2048是一款流行的单人益智游戏,玩家通过滑动数字瓷砖来合并相同的数字,目标是合成2048这个数字。本文将介绍如何使用Python和Pygame库实现2048游戏的基本功能,包括游戏逻辑、界面绘制和用户交互。 主…...
SpringCloud框架学习(第四部分:Gateway网关)
目录 十一、Gateway新一代网关 1.概述 2.Gateway三大核心 3.工作流程 4.入门配置 5.路由映射 (1)8001 外部添加网关 (2)服务间调用添加网关 (3)存在问题 6.Gateway高级特性 (1&#x…...
C++ 类和对象 (上 )
学习本身就是一件很快乐的事情 一. 面向对象和面向过程 我们在学习计算机的过程中经常会听到xxx是一门面向对象的语言 xxx是一门面向过程的语言 那么到底什么是面向对象 什么是面向过程呢? 简单介绍下 面向过程 面向过程关注的是过程 分析出求解问题的步骤&…...
HAProxy面试题及参考答案(精选80道面试题)
目录 什么是 HAProxy? HAProxy 主要有哪些功能? HAProxy 的关键特性有哪些? HAProxy 的主要功能是什么? HAProxy 的作用是什么? 解释 HAProxy 在网络架构中的作用。 HAProxy 与负载均衡器之间的关系是什么? HAProxy 是如何实现负载均衡的? 阐述 HAProxy 的四层…...
探索PyCaret:一个简化机器学习的全栈库
探索PyCaret:一个简化机器学习的全栈库 机器学习领域充满了挑战,从数据预处理、特征工程到模型训练与评估,再到模型部署。对于数据科学初学者或者时间有限的开发者,这一流程可能显得繁琐且复杂。幸运的是,PyCaret 提供…...
英语写作中“联系、关联”associate correlate 及associated的用法
似乎是同义词的associate correlate 实际上意思差别明显,associate 是人们把两者联系在一起(主观联系),而correlate 指客观联系。 例如: We always associate sports with health.(我们总是将运动和健康联…...
深度学习之目标检测的技巧汇总
1 Data Augmentation 介绍一篇发表在Big Data上的数据增强相关的文献综述。 Introduction 数据增强与过拟合 验证是否过拟合的方法:画出loss曲线,如果训练集loss持续减小但是验证集loss增大,就说明是过拟合了。 数据增强目的 通过数据增强…...
【Flask+Gunicorn+Nginx】部署目标检测模型API完整解决方案
【Ubuntu 22.04FlaskGunicornNginx】部署目标检测模型API完整解决方案 文章目录 1. 搭建深度学习环境1.1 下载Anaconda1.2 打包环境1.3 创建虚拟环境1.4 报错 2. 安装flask3. 安装gunicorn4. 安装Nginx4.1 安装前置依赖4.2 安装nginx4.3 常用命令 5. NginxGunicornFlask5.1 ng…...
Spark核心组件解析:Executor、RDD与缓存优化
Spark核心组件解析:Executor、RDD与缓存优化 Spark Executor Executor 是 Spark 中用于执行任务(task)的执行单元,运行在 worker 上,但并不等同于 worker。实际上,Executor 是一组计算资源(如…...
“AI玩手机”原理揭秘:大模型驱动的移动端GUI智能体
作者|郭源 前言 在后LLM时代,随着大语言模型和多模态大模型技术的日益成熟,AI技术的实际应用及其社会价值愈发受到重视。AI智能体(AI Agent)技术通过集成行为规划、记忆存储、工具调用等机制,为大模型装上…...
离散数学【关系】中的一些特殊关系
在数学中,关系是描述集合之间元素间关系的方式。以下是对一些常见关系的详细分析及举例: 1. 空关系 (Empty Relation) 空关系是指在一个集合中,没有任何元素之间存在关系。即对于集合中的所有元素,空关系都不包含任何有序对。 …...
docker 配置代理
创建 Docker 服务配置文件: sudo mkdir -p /etc/systemd/system/docker.service.d sudo vim /etc/systemd/system/docker.service.d/http-proxy.conf添加代理配置: [Service] Environment"HTTP_PROXYhttp://<proxy-address>:<port>&q…...
Dockerfile详解:构建简单高效的容器镜像
引言 在容器化技术日益普及的今天,Dockerfile 成为了构建 Docker 镜像的核心工具。通过编写 Dockerfile,开发者可以将应用程序及其依赖打包成一个可移植、可复用的镜像,从而简化部署和运维工作。本文将详细介绍 Dockerfile 的基本概念、常用指…...
RHCD-----shell
要求: 通过shell脚本分析部署nginx网络服务 1.接收用户部署的服务名称 2.判断服务是否安装 已安装;自定义网站配置路径为/www;并创建共享目录和网页文件;重启服务 没有安装;安装对应的软件包 3.测试 判断服务是…...
<硬件有关> 内存攒机认知入门,内存的选择 配置 laptop PC 服务器
原因 这不是黑五吗,给我儿子买了台最便宜 ($300) DELL laptop,CPU 是 i5-1235U,但只有 8GB 内存。升级内存吧。 如何选择内存:家用范围 这里不考虑品牌,在我眼里,区别就是价格,还有所谓的物理…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案: 语义化标签: <header>:页头<nav>:导航<main>:主要内容<article>&#x…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接:3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学(ECC)是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础,例如椭圆曲线数字签…...
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
