uniapp长按识别二维码、小程序码

前言

使用uniapp开发微信小程序：

业务需求1：微信小程序中显示个人微信二维码图片，长按识别二维码，然后添加个人微信；

业务需求2：微信小程序中显示小程序码图片，长按识别小程序码，然后进入小程序。

效果图

      

 知识点

image 官网描述

实现

1、image组件添加可长按操作

2、使用uni.previewImage(Object object) 或者wx.previewImage(Object object) 预览图片并实现。

具体演示代码

1、image组件添加：show-menu-by-longpress="true"

<image :show-menu-by-longpress="true" src="/static/qrCode.jpg" @click="previewImage"></image>

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

小提示：image的src既可以是网络图也可以是static下的本地图片。以上方法都可实现长按识别二维码功能。