uniapp与webview网页交互打开手机扫码

news2024/11/28 1:48:02

公司的uniapp项目有一个专门打开网页的功能,uniapp通过webview去打开对应的url,然后通过监听webview网页发送过来的事件,在uniapp手机端打开手机的扫码功能,然后将扫码识别到的结果传回给网页。

思路

1.网页引入uni.webview.js文件

2.网页在某个时机或者某个事件发送事件

3.uniapp端监听处理事件,调用手机摄像头

4.uniapp将扫码结果传回

5.网页接收处理数据

1.网页引入uni.webview.js文件

因为网页端需要向app发送事件,所以需要引入对应的webview.js文件。这是基础。

如果项目会运行在内网环境,最好是引用已经下载好了的。

假如使用的是vue项目,则可以在index.html文件中去引入。

 2.网页在某个时机或者某个事件发送事件

如果需要在网页打开的时候就去调用,则需要监听uni是否可以安全调用

如果是通过点击事件去触发,一般来说按钮加载出来到可以交互,已经加载完成了。

直接使用uni.postMessage方法就好。最主要就是定义type事件的类型,这样在uniapp中可以根据对应的type值进行不同的处理逻辑。

3.uniapp端监听处理事件,调用手机摄像头

添加web-view组件,定义方法接收传递过来的信息。@message处理信息。

 然后根据type类型处理不同的逻辑,示例中专门处理type值为scanCode时候,就打开摄像头。

4.uniapp将扫码结果传回

这个是比较重要的,原理就是:通过拿到webview的内部对象,去调用系统的evalJS方法,将该方法内部的字符串当做代码去执行。示例中qrCodeWv是在初始化的时候拿到的。

 webview网页内容里面的话,要定义一个全局的appScanCodeResult方法 。如果没有定义,webview网页会报错找不到这个方法。evalJS方法会把里面的内容当做代码来处理,所以方法的参数如果是对象要使用JSON.stringify处理一下,然后引号包裹起来。

5.网页接收处理数据

网页是vue框架的话,最重要的就是如何将app执行的全局方法告诉对应的页面或者组件。所以要使用window的自定义事件CustomEvent。

本来CustomEvent方法是可以传递参数的,但是监听这个事件的时候,接收到的是一个event没有带值。所以干脆就当一个触发,将app传过来的值存储在全局的window上。

vue3的写法,注册监听,离开的时候注销就好。

 拿到扫描结果

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

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

相关文章

【HTML】【一文全解Canvas】从初学到实战,彻底掌握前端绘图神器!

【HTML】Canvas 基本介绍与应用 前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形a. fillRect()b. strokeRect() 2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形 四、Canvas 绘制文本1、 fillText()2、 strokeText() 五、Canvas 绘制图片1、drawImage…

vue中安装使用Mock来模拟数据(详细教程)

在做前后分离的项目时候,比如制作VUE项目,很多时候后端没有提供接口,前端人员可以自己通过mock来造一个接口,返回数据 操作步骤 1) 安装mockjs和axios: npm install mockjs -S npm install axios -S &…

怎么翻译文档?翻译文档的方法你知道几种?

文档翻译在现代社会中已经成为一项重要的工作,随着全球化的加速和跨境交流的增多,越来越多的公司和组织需要将自己的文件、资料等内容进行翻译,以便更好地与国际市场接轨。而如何进行高质量的文档翻译,一直是许多人所关注的问题。…

webstorm+小程序相配合来开发小程序

前言: webstorm可以安装的一个小程序插件: wechat-miniprogram-plugin ,来实现小程序语法的高亮,并识别 rpx 这种小程序专有单位,还可以实现跟开发者工具中一些类似的操作功能。 注意事项: 1、小程序的根目…

使用 javascript 将鼠标指针移动到特定位置

文章目录 使用一些 CSS 样式创建基本的 HTML 结构使用 JavaScript 将鼠标指针移动到特定位置总结 请注意 ,无法将鼠标指针移动到 JavaScript 中的特定位置。 主要原因是它会给用户带来安全问题并损害用户体验。 在这篇文章中,我们将创建一个假的或自定义…

华为OD机试真题 Java 实现【字符串加密】【2023Q1 100分】,附详细解题思路

一、题目描述 有一种技巧可以对数据进行加密,它使用一个单词作为它的密匙。下面是它的工作原理:首先,选择一个单词作为密匙,如TRAILBLAZERS。如果单词中包含有重复的字母,只保留第1个,将所得结果作为新字母表开头,并将新建立的字母表中未出现的字母按照正常字母表顺序加…

计算机网络管理-实验5-安装试用SNMPc网络管理软件

一、实验目的 学习SNMPc网络管理软件安装,初步了解其使用方法,对比常用网管软件的特点。 二、实验内容与设计思想 实验内容:编写代码,测试 1. 安装与配置SNMPc网络管理软件(安装使用方法参见教材第6章)…

自主可控!搭载龙芯二号,飞凌嵌入式FET-2K0500-C核心板发布

作为国内领先的信息技术核心产品研发企业,龙芯中科致力于打造自主开放的软硬件生态和信息产业体系,为国家战略需求提供自主、安全、可靠的处理器。现在,飞凌嵌入式与龙芯中科强强联手,共同推出FET-2K0500-C核心板! 飞…

接口耗时2000多秒!我人麻了!

接口耗时2000多秒!我人麻了! 前几天早上,有个push服务不断报警,报了很多次,每次都得运维同学重启服务来维持,因为这个是我负责的,所以我顿时紧张了起来,匆忙来到公司,早饭…

有什么好用的通用型项目管理软件

目前市面上的项目管理产品非常丰富,在选择项目管理软件的过程中一一了解这些产品哪个更好更适合自己的团队,无疑会浪费很多时间成本。通用性项目管理工具可以满足大部分团队的项目管理需求,那有什么好用的通用型项目管理软件呢?知…

漏洞利用 --- VSFTPD 2.3.4 后门

Metasploit工具 &#xff08;1&#xff09;术语解释&#xff1a; <1> 渗透攻击&#xff08;Exploit&#xff09;&#xff1a;指由攻击者或渗透测试者利用一个系统、应用或服务中的安全漏洞&#xff0c;所进行的攻击行为。 <2> 攻击载荷&#xff08;Payload&…

go快速开发入门指南(一)

Go快速开发指南 &#x1f4a1; 由于工作和未来大数据发展需要&#xff0c;需要对Go语言进行一定学习与使用&#xff0c;特此记录。本系列不会说太多文字概念&#xff0c;重在业务实践和相关开发技巧的总结&#xff0c;和错误的排查记录。因此&#xff0c;如有片面或不足之处&am…

Java 实现类似于网盘一样的文件管理功能

**需求是使用阿里云oss存储&#xff0c;实现一个文件管理功能,支持新建文件夹、文件的上传、下载、批量下载、删除、批量删除、预览、移动、名称搜索、文件路径搜索等。**本人也参考了网上的一些项目&#xff0c;这里记录一下后端的Java代码实现&#xff1a; 首先是表设计的实…

SpringBoot共享图书平台(有文档)

1.简介 SpringBoot共享图书平台 本项目比较简单&#xff0c;适合练手&#xff0c;也适合二开 1.访问地址 http://localhost/ 超级管理员账户 账户名&#xff1a;admin 密码&#xff1a;admin123 普通用户 账户名&#xff1a; zhangsan 密码&#xff1a;123456 普通用户 账…

Talk| CMU博士胡亚飞 :基于离线强化学习的机器人自主探索

本期为TechBeat人工智能社区第503期线上Talk&#xff01; 北京时间6月07日(周三)20:00&#xff0c;CMU Robotics Institute 在读博士生—胡亚飞的Talk将准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “基于离线强化学习的机器人自主探索 ”&#xff0c…

chatgpt赋能python:Python快速复制

Python快速复制 Python是一种高级编程语言&#xff0c;具有简单易学、优雅简洁的编程风格&#xff0c;也被称为“胶水语言”&#xff0c;因为它可以与其他编程语言很好地结合使用。在Python中&#xff0c;复制文件或文件夹是一个常见的任务&#xff0c;因此在本文中&#xff0…

过五关斩六将,欧科云链荣膺2023安博会“创新产品优秀奖”

6月7日&#xff0c;由中华人民共和国公安部指导、中华人民共和国商务部批准&#xff0c;公安部主管的中国安全防范产品行业协会主办和承办的2023中国国际社会公共安全产品博览会&#xff08;以下简称&#xff1a;安博会&#xff09;正式开幕。 此次安博会&#xff0c;欧科云链携…

6月9日,亚马逊云科技携手出海新势力一同而来

向全球价值链上游奋进 中国企业增强国际竞争力的关键&#xff0c;是努力朝全球价值链上游奋进&#xff0c;发力技术出海。中国的出海新机遇&#xff0c;背后曾是疫情在全球按下数字互联和数字化升级的快进键&#xff0c;跨境电商、在线社交、移动支付、数字服务等数字经济迎来…

chatgpt赋能python:Python快速处理数据的SEO文章

Python快速处理数据的SEO文章 Python是一种通用的高级编程语言&#xff0c;被广泛用于处理数据和科学计算。它以其简洁和高效的语法闻名&#xff0c;可以在短时间内编写出大量的代码&#xff0c;从而快速处理数据。在本文中&#xff0c;我们将讨论如何使用Python快速处理数据&…

万字详解普遍操作系统进程七态与Linux进程七态

作为一个称职的系统管理员&#xff0c;为了更熟悉进程的管理流程&#xff0c;我们必须要知道进程的不同状态所对应的意义。 目录 了解进程状态普遍操作系统的概念就绪状态运行状态等待状态阻塞状态挂起状态暂停状态终止状态 Linux下的进程状态R (running)运行状态S (sleeping)可…