uni-app实现 app 小程序 手机端H5扫码功能

news2024/11/24 15:55:51

首先 扫码这个功能小程序和App都是有现成的方法 但是H5是不行的
我们可以看这样一段代码

<template>
  <view>
	<!-- #ifdef MP-WEIXIN -->
		<button @click="scan">扫描</button>
		<view v-if="result">{{result}}</view>
	<!-- #endif -->
	<!-- #ifdef APP-PLUS -->
		<button @click="scan">扫描</button>
		<view v-if="result">{{result}}</view>
	<!-- #endif -->
	<!-- #ifdef H5 -->
		<view>
			<web-view :src="'http://www.baidu.com'"></web-view>
		</view>
	<!-- #endif -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        result: ''
      }
    },
    methods: {
        scan() {
	        // #ifdef H5
		        uni.showModal({
			        title: '提示',
			        content: '抱歉H5界面暂不支持扫码功能',
					showCancel: false,
					confirmText: '确定'
		        });
	        // #endif
	        // #ifdef MP-WEIXIN
		        uni.scanCode({
		          success: (res) => {
		        	this.result = res.result;
		          }
		        });
	        // #endif
			// #ifdef APP-PLUS
			  uni.scanCode({
				success: (res) => {
				this.result = res.result;
				}
			  });
			// #endif
      }
    }
  }
</script>

这里 我们用了条件编译
App和小程序中的代码是 一样的 他们都可以正常执行scanCode进行扫码
在这里插入图片描述
在这里插入图片描述

至于H5手机端界面 我用web-view套了个百度的链接进来
其实 大家可以参考我的文章
vue实现二维码识别功能 读取二维码内容
做一个vue项目上线 然后用web-view将链接套进来 变向完成H5的扫码

但是
在这里插入图片描述
web-view是只有手机端能支持访问的
如果是WEB PC端
在这里插入图片描述
那就没办法了 uni本身也就是解决手机端问题 还是不要做完美主义 或者想我写一套什么都能用 不然vue和react早就没人用了

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

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

相关文章

长尾词挖掘,挖掘百度相关词和下拉词的操作步骤

什么是下拉词 在搜索引擎的搜索框输入一个关键词的时候&#xff0c;搜索框会推荐一些与这个关键词有关联的长尾关键词&#xff0c;如“汉服”。 什么是相关词 在搜索引擎的搜索框输入一个关键词的时候&#xff0c;一般会推荐与这个关键词相关的长尾关键词。如“汉服”。 挖…

【SpringBoot系列】SpringBoot中 @Configuration 和 @Component 的区别及原理分析

示例 //Component Configuration public class AppConfig {Beanpublic Foo foo() {System.out.println("foo() invoked...");Foo foo new Foo();System.out.println("foo() 方法的 foo hashcode: " foo.hashCode());return foo;}Beanpublic Eoo eoo() {…

华为OD机试真题B卷 Java 实现【等差数列】,附详细解题思路

一、题目描述 等差数列 2&#xff0c;5&#xff0c;8&#xff0c;11&#xff0c;14。。。。 从 2 开始的 3 为公差的等差数列。 输出求等差数列前n项和。 数据范围&#xff1a; 1≤n≤1000 。 二、输入描述 输入一个正整数n。 三、输出描述 输出一个相加后的整数。 四…

Dell电脑出现ac power adapter电压异常的解决办法

最近这段时间不知怎么的&#xff0c;dell笔记本电脑一开机就出现下面错误&#xff1a; The AC Power Adapter Wattage Cannot be Determined. 无法确定此交流电源的功率信息。 The Battery Maynot Charge. 电池将可能无法充电。 The System Will Adjust the Performance to Ma…

springboot+java农产品网上购物商城系统005

基于springboot技术的购物商城系统是属于JavaWeb项目&#xff0c;采用的开发框架为springboot框架&#xff0c;也就是Spring mvc、Spring、MyBatis这三个框架&#xff0c;页面设计用的是jsp技术作为动态页面文件设计&#xff0c;jsp文件里可以对实现html等界面布局的代码&#…

MySQL CAST 函数与 CONVERT 函数

文章目录 CAST 函数与 CONVERT 函数1. 数字和小数点组成的字符串转换为整型2. 非数值字符串转换为整型3. 把整型转换为二进制4. 数字和小数点组成的字符串转换为浮点型 CAST 函数与 CONVERT 函数 前面我们介绍的两个函数用于字符串和日期类型之间进行相互转换&#xff0c;有时我…

C.11医疗领域实体抽取:UIE Slim最新升级版含数据标注、serving部署、模型蒸馏等教学,助力工业应用场景快速落地

NLP专栏简介:数据增强、智能标注、意图识别算法|多分类算法、文本信息抽取、多模态信息抽取、可解释性分析、性能调优、模型压缩算法等 专栏详细介绍:NLP专栏简介:数据增强、智能标注、意图识别算法|多分类算法、文本信息抽取、多模态信息抽取、可解释性分析、性能调优、模型…

量子力学专题:产生算符与消灭算符

从粒子数表象探讨问题 线性谐振子在坐标表象中表示 哈密顿算符 定态薛定谔方程 渐近解 做代换使方程变为在\zeta \approx \pm \infty 时&#xff0c;有渐进解 两端条件要求阶段&#xff0c;因此有 则线性谐振子的定态波函数为&#xff1a; 粒子数表象中线性谐振子能级和波函…

chatgpt赋能python:Python中可以连等吗?

Python中可以连等吗&#xff1f; 在Python中&#xff0c;我们可以使用单个语句实现多个变量的赋值&#xff0c;这被称为连等&#xff08;也称为多重赋值或元组赋值&#xff09;。那么&#xff0c;Python中可以连等吗&#xff1f;让我们深入了解这个问题。 什么是连等&#xf…

Golang指针, 值类型,标识符,关键字,运算符初始

Golang指针, 值类型&#xff0c;标识符&#xff0c;关键字&#xff0c;标识符 采用文章 https://www.runoob.com/go/go-operators.html本章使用go练习工具 https://tour.go-zh.org/welcome/1指针 基本介绍 基本数据类型&#xff0c;变量存的就是值&#xff0c;也叫值类型获…

java基于ssm的的律师事务所预约管理系统的设计与实现

网站前台:关于我们、帮助信息、法律资讯、律师信息、服务信息、服务评价管理员功能 1、管理关于我们、帮助信息 2、管理资讯类型、添加法律资讯 3、添加律师信息(姓名、特长、照片、描述等等 ) 管理服务类型信息(讨薪、民事、刑事等等]、查看服务信息4 5、查看试题信息、查看试…

调用api key使用chatgpt,缓解chatgpt封控

前言&#xff1a; 现在国内的很多网页版的chatgpt网页随处可见 &#xff0c;但是很多都是3.5的接口&#xff0c;而且有些还有次数限制&#xff0c;毕竟现在4.0的api贵的离谱&#xff0c;在前期注册的chatgpt账号&#xff0c;其实官方是赠送有18美金的api额度供我们使用&#x…

Solaris Network:BSC上首个链上合成资产解决方案

Solaris Network 是一个开创性的项目&#xff0c;为 Binance Smart Chain&#xff08;BSC&#xff09;提供链上合成资产解决方案。Solaris 通过在区块链和实际金融领域之间搭建一座独特的桥梁&#xff0c;为多链 Web 3.0 金融衍生品市场奠定了全面基础设施。 本技术分析探讨了 …

MySQL 日期时间函数

文章目录 日期时间函数1. now()2. curdate()3. curtime()4. week(date)5. year(date)、month(date)、day(date)6. datediff(date1,date2)7. adddate(date,n) 日期时间函数 日期操作是 MySQL 中的常用操作&#xff0c;掌握常用的日期时间函数并熟练组合运用&#xff0c;能够帮助…

web的基本漏洞--弱口令漏洞

目录 一、弱口令漏洞介绍 1.弱口令漏洞的原理 2.漏洞识别 3.攻击方式 4.漏洞的危害 5.漏洞防御 二、弱口令漏洞的攻击方式-暴力破解 1.暴力破解的一般流程 2.token并不能有效的防范暴力破解漏洞 3.防范暴力破解常见方法 一、弱口令漏洞介绍 弱口令漏洞是指系统登录口…

港联证券|散户为什么会追涨杀跌?如何避免?

股市是一个充满机会的地方&#xff0c;每天都有大量投资者在里面寻求财富。然而股市中很多散户都是亏损的&#xff0c;一个重要原因就是喜欢追涨杀跌。那么散户为什么会追涨杀跌&#xff1f;如何避免&#xff1f;港联证券也为大家准备了相关内容&#xff0c;以供参考。 散户为什…

【深度学习】李宏毅2021/2022春深度学习课程笔记 - 机器学习的可解释性

文章目录 一、为什么我们需要可解释性的机器学习二、可解释性的 vs 强大的&#xff08;Powerful&#xff09;三、可解释性机器学习的目标四、可解释性的机器学习4.1 Local Explanation 局部的解释4.1.1 特征重要性4.1.2 模型怎么处理数据的&#xff1f;4.1.2.1 可视化4.1.2.2 P…

分割回文串

1题目 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是 回文串 。返回 s 所有可能的分割方案。 回文串 是正着读和反着读都一样的字符串。 示例 1&#xff1a; 输入&#xff1a;s "aab" 输出&#xff1a;[["a","…

糖化学试剂2199491-27-3,L-Glutamamide,激肽释放酶抑制剂肽,信息说明

试剂基团反应特点&#xff08;Reagent group reaction characteristics&#xff09;&#xff1a; L-Glutamamide&#xff08;糖化学试剂&#xff09;激肽释放酶抑制剂肽&#xff0c;陕西新研博美生物科技有限公司提供多肽合成、多肽定制、同位素标记肽、生物素标记肽、荧光标记…

【七】设计模式~~~结构型模式~~~桥接模式(Java)

【学习难度&#xff1a;★★★☆☆&#xff0c;使用频率&#xff1a;★★★☆☆】 2.1. 模式动机 在正式介绍桥接模式之前&#xff0c;我先跟大家谈谈两种常见文具的区别&#xff0c;它们是毛笔和蜡笔。假如我们需要大中小3种型号的画笔&#xff0c;能够绘制12种不同的颜色&am…