uniapp 微信小程序长按识别二维码,跳转小程序、个人微信

前言:

        业务要求是小程序放一个二维码图片,长按可以识别二维码,进而识别出个人微信,添加个人微信;我们可以通过uni.previewImage(OBJECT) 或者 wx.previewImage(Object object) 预览当前图片去实现

一、uni.previewImage( ) || wx.previewImage(  )

我们先看官网描述:

OBJECT 参数说明

参数名类型必填说明平台差异说明
currentString/Number详见下方说明详见下方说明
urlsArray<String>需要预览的图片链接列表
indicatorString图片指示器样式,可取值:"default" - 底部圆点指示器; "number" - 顶部数字指示器; "none" - 不显示指示器。App
loopBoolean是否可循环预览,默认值为 falseApp
longPressActionsObject长按图片显示操作菜单,如不填默认为保存相册App 1.9.5+
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

二、具体实现

<image :show-menu-by-longpress="true" src="/static/mp-weixin/qrCode.jpg" @click="previewImage"></image>
data(){
    return{
    }
},
methods:{
   previewImage(e) {
		console.log('e', e);
		uni.previewImage({
			// 需要预览的图片链接列表
			urls: [],
			// 为当前显示图片的链接/索引值
			current: '/static/mp-weixin/qrCode.jpg',
			// 图片指示器样式	
			indicator:'default',
			// 是否可循环预览
			loop:false,
			// 长按图片显示操作菜单,如不填默认为保存相册
			// longPressActions:{
			// 	itemList:[this.l('发送给朋友'),this.l]
			// },
			success: res => {
				console.log('res', res);
			}, 
			fail: err => {
				console.log('err', err);
			}
		});
}

可以看到我 image 的 src 并没有用到服务器上的 图片,而是在本地的测试图片,也是可以的!

这个主要是用到 uniapp 内置的图片预览,我这里 URLS 置空的原因是 我不需要预览,只需要开启 图片的 :show-menu-by-longpress="true"  属性,就可以识别出长按操作;需要预览的多张图片的URL 可以直接放在 URLS 里即可用!

可以根据自己的业务 把 current 设置为 e.target.src 属性,动态的把当前路径写为 当前预览图片地址!

支持识别以下二维码:

✅ 识别小程序码 - ✅ 跳转小程序
✅ 识别微信、企微群二维码 - ✅ 跳转到加群页面
✅ 识别名片二维码 - ✅ 跳转到加好友页面
❌公众号二维码

  • 24
    点赞
  • 64
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 23
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Iam_楠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值