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 属性,动态的把当前路径写为 当前预览图片地址!


支持识别以下二维码:

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


相关文章
|
2月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
56 1
|
25天前
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
32 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
332 3
|
2月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
952 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
57 0
微信小程序更新提醒uniapp
|
2月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
50 2
|
2月前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
33 0
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
116 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
2月前
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
90 0