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

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

前言:

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

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

我们先看官网描述:

OBJECT 参数说明

image.png

二、具体实现

<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 => {
        onsole.log('err', err);
      }
    });
}

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


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


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


支持识别以下二维码:

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


相关文章
|
3天前
|
存储 小程序 前端开发
【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码(阿里云)
【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码(阿里云)
8 0
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
19 3
|
6天前
|
小程序 定位技术
uniapp微信小程序地图全屏显示配送范围
uniapp微信小程序地图全屏显示配送范围
11 1
|
9天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
24 4
|
3天前
|
JSON 缓存 小程序
技术笔记:uniapp微信小程序支付
技术笔记:uniapp微信小程序支付
|
9天前
|
小程序 前端开发 Android开发
Android企业微信分享到小程序
Android企业微信分享到小程序
12 0
|
11天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的教育培训微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的教育培训微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
11天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的课堂考勤微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的课堂考勤微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
11天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园顺路代送微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园顺路代送微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
11天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园约拍微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园约拍微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)