uniapp-前端 二维码、扫码、长按、识别等问题

这篇具有很好参考价值的文章主要介绍了uniapp-前端 二维码、扫码、长按、识别等问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一:识别:图片二维码url:

后端返回二维码的图片url,则直接展示,做长按手势识别,再调用方法即可。

<mage>标签长按识别实现(微信版本>2.7.0)

<image show-menu-by-longpress="true" src="../../static/we.png" ></image>

show-menu-by-longpress="true"可实现识别二维码(微信个人码、微信群码、企业微信个人码、 企业微信群码与企业微信互通群码)

uniapp官方文档链接
微信小程序官方文档链接

通过预览图片再长按实现
通过uni.previewImage(OBJECT)实现,该方法可以在新页面中全屏预览图片,长按可打开操作菜单,其中有识别二维码(微信个人码、微信群码、企业微信个人码、 企业微信群码与企业微信互通群码):  这两个api需要一起使用,如果单独使用其中一个并不能达到长按识别 或者点击识别的目的。

<image show-menu-by-longpress="true" src="../../static/we.png" @longpress="openimg"></image>


openimg(e) {
				uni.previewImage({
							// 需要预览的图片链接列表
							urls: ['../../static/we.png'],
							// 为当前显示图片的链接/索引值
							current: "../../static/we.png",
							// 图片指示器样式	
							indicator:'default',
							// 是否可循环预览
							loop:false,
							// 长按图片显示操作菜单,如不填默认为保存相册
							// longPressActions:{
							// 	itemList:[this.l('发送给朋友'),this.l]
							// },
							success: res => {
								console.log('res', res);
							}, 
							fail: err => {
								console.log('err', err);
							}
						});
			},

经代码测验openimg(e) {}获取到的e.target里没有src值,所以这里的urls和current是直接赋值,也可以自定定义个属性来保存。

image src可以是本地也可以是url。

previewImage 里面的urls是大图展示图片,经测验不能为空。可以是本地图片,可以是url。

开启 图片的 :show-menu-by-longpress="true"  属性,就可以识别出长按操作

这两个api做完,可以直接达到的效果是识别图片里的二维码(个人微信二维码、群微信二维码、企业二维码等、小程序二维码)识别出来,

微信个人二维码  --  >  直接跳转到个人页面或者加好友,

群二维码             --  >  直接跳转到群里或者加群页面,

企业群二维码     --  >  直接跳转到加群 或者群内页面,

小程序码            --  >  直接跳转到小程序

所以后续不需要做其他处理,会直接出现圆圈加载识别。 网上很多其他的说只能识别小程序二维码啥的连接,可能是用的旧的api,新版是可以的,这里做了验证处理。

uniapp长按图片识别二维码,uniapp,uni-app,二维码长按识别,二维码扫码uniapp长按图片识别二维码,uniapp,uni-app,二维码长按识别,二维码扫码 

 上图中是个人二维码识别打开和群二维码识别打开。

二:根据后台流返回画成:

 根据后台返回的流生成二维码,布在画布上的,这个需要扫码 或者截图 再识别或者截图保存。

uQRCode 可以采用这个三方uni-app如何使用uQRCode插件生成自定义二维码_uniapp二维码插件_Moran墨染的博客-CSDN博客​​​​​​​

三:扫码

uniapp 系统的扫码api

// 允许从相机和相册扫码
uni.scanCode({
	success: function (res) {
		console.log('条码类型:' + res.scanType);
		console.log('条码内容:' + res.result);
	}
});
 
// 只允许通过相机扫码
uni.scanCode({
	onlyFromCamera: true,
	success: function (res) {
		console.log('条码类型:' + res.scanType);
		console.log('条码内容:' + res.result);
	}
});
 
// 调起条码扫描
uni.scanCode({
	scanType: ['barCode'],
	success: function (res) {
		console.log('条码类型:' + res.scanType);
		console.log('条码内容:' + res.result);
	}
});

是会调取本地相册或者相机选取图片进行扫描。

uni-app实现扫码功能_uniapp 扫码_MINO吖的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-595953.html

到了这里,关于uniapp-前端 二维码、扫码、长按、识别等问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序长按识别二维码

    小程序开发中要实现长按识别二维码的功能很简单,只需要在image标签里添加如下属性即可: 小程序版本: show-menu-by-longpress=\\\"{{true}}\\\" uniapp版本: :show-menu-by-longpress=\\\"true\\\" 举例: 小程序版本: image show-menu-by-longpress=\\\"{{true}}\\\" :src=\\\"src\\\" mode=\\\"widthFix\\\" / uniapp版本: image :src=\\\"src\\\" mode=\\\"

    2024年02月04日
    浏览(43)
  • 微信小程序:长按图片识别二维码

    方法一:使用小程序提供的image组件,image组件上有一个show-menu-by-longpress的属性,设置为true,当image被长按时会弹出选择菜单 方法二:当图片预览时,长按图片会弹出菜单:

    2024年02月12日
    浏览(40)
  • 微信小程序长按识别二维码

    有两种方式,第一种是在页面直接长按识别,第二种是预览图片,然后识别。 第一种实现:直接在页面中长按识别二维码 在图片组件中添加 show-menu-by-longpress=\\\"{{true}}\\\" ; 示例代码 第二种实现:放大预览图片后,长按识别二维码

    2024年02月11日
    浏览(50)
  • 微信小程序长按图片识别二维码

    设置show-menu-by-longpress=\\\"true\\\"即可,长按图片后会弹出一个菜单,若图片中包含二维码或小程序码,菜单中会有响应入口 官方说明

    2024年02月03日
    浏览(40)
  • 微信小程序加入(长按识别)群聊(群二维码)

    目前小程序放群二维码,长按识别 【支持】企业个人微信二维码 【不支持】企业微信群固定码 【支持】企业微信群码(7天过期) 【支持】个人微信码 【支持】微信群码二维码 微信小程序中长按识别二维码_猫老板的豆的博客-CSDN博客_小程序长按识别二维码 小程序内嵌二维

    2024年02月16日
    浏览(41)
  • OpenHarmony应用实现二维码扫码识别

    二维码的应用场景非常广泛,在购物应用中,消费者可以直接扫描商品二维码,浏览并购买产品,如图是购物应用的扫描二维码的页面。 本文就以 橘子购物示例应用 为例,来讲解OpenHarmony应用二维码开发相关的技术点。 我们先看下二维码相关的几个概念。 二维码 生成 Ope

    2024年02月11日
    浏览(42)
  • 如何微信小程序实现长按识别图片二维码

    如何微信小程序实现长按识别图片二维码

    2024年01月23日
    浏览(67)
  • 使用uniapp生成二维码并下载,小程序扫码进入指定页面

    功能1:通过扫码链接进入小程序指定页面(带参数) 功能2:将网址链接(带参数)在微信小程序中使用二维码展示出来,并可以点击下载二维码图片  扫码链接进入指定页面并且带参数 在小程序管理后台-开发管理-开发设置-扫普通链接二维码打开小程序中,配置链接地址,

    2024年02月11日
    浏览(51)
  • iOS上h5长按识别图片二维码,图片会默认放大,禁用这一默认行为

    结果:可以禁用 结果:无法禁用 在这里插入图片描述 结果:无法显示菜单。 draggable=\\\"false\\\" + -webkit-touch-callout: none; 能使图片失去响应 参考社区回答:https://developers.weixin.qq.com/community/develop/doc/000046efc385e00bdcfe10c3c5b400

    2024年01月18日
    浏览(45)
  • 前端实现 微信扫码登录网站 pc端(二维码嵌套页面) 超详细,包会

    本人申明:本案例使用到的appid和AppSecret都是无效的 appid:应用唯一标识,在微信开放平台提交应用审核通过后获得 AppSecret:在微信开放平台提交应用审核通过后获得 1.在根目录html文件引入,既index.html 2.通过js添加节点 注意事项: 如果二维码出来,但是跳转失败,一定要看

    2024年02月04日
    浏览(76)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包