精华内容
下载资源
问答
  • 小程序长按识别二维码
    2022-07-13 16:08:22
    <image class="gd_user_wx" show-menu-by-longpress  data-src="" bindtap="previewImage" src=""></image>
    
    
    previewImage(e){
        var cur=e.target.dataset.src;//获取本地一张图片链接
        wx.previewImage({
          current: cur, //字符串,默认显示urls的第一张
            urls: [cur] // 数组,需要预览的图片链接列表
        })
      },

    更多相关内容
  • OBJECT 参数说明参数名类型必填说明平台差异说明currentString/Number详见下方...ApploopBoolean否是否可循环预览,默认值为 falseApplongPressActionsObject否长按图片显示操作菜单,如不填默认为保存相册App 1.9.5+su

    前言:

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

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

    我们先看官网描述:

    OBJECT 参数说明

    参数名

    类型

    必填

    说明

    平台差异说明

    current

    String/Number

    详见下方说明

    详见下方说明

    urls

    Array

    需要预览的图片链接列表

    indicator

    String

    图片指示器样式,可取值:“default” - 底部圆点指示器; “number” - 顶部数字指示器; “none” - 不显示指示器。

    App

    loop

    Boolean

    是否可循环预览,默认值为 false

    App

    longPressActions

    Object

    长按图片显示操作菜单,如不填默认为保存相册

    App 1.9.5+

    success

    Function

    接口调用成功的回调函数

    fail

    Function

    接口调用失败的回调函数

    complete

    Function

    接口调用结束的回调函数(调用成功、失败都会执行)

    二、具体实现

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

    支持识别以下二维码:

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

    展开全文
  • 微信小程序长按识别二维码

    千次阅读 2022-01-04 15:50:15
    在image标签中添加show-menu-by-longpress属性即可 <view class="qrcodeArea"> <image class="qrcode" show-menu-by-longpress src="/assets/img/qrcode.png"> </image>...

    在image标签中添加show-menu-by-longpress属性即可

            <view class="qrcodeArea">
                <image class="qrcode"  	show-menu-by-longpress src="/assets/img/qrcode.png">
                </image>
            </view>
    

    请添加图片描述

    展开全文
  • APP中订购课程后发送短信通知,用户点短信中连接进入H5,此时H5是手机浏览器中打开,不是微信生态所以放的客服二微码无法长按识别

    业务需求:

    APP中订购课程后发送短信通知,用户点短信中连接进入H5,此时H5是手机浏览器中打开,不是微信生态所以放的客服二微码无法长按识别。如果能H5直接进入微信生态。微信这个接口只向一些大的合作企业提供些接口,我们想用只能网上买第三方的,看过几个第三方接口可以实现但是不稳定。

    解决方案:

    H5这条路走不通,那么就看看小程序。小程序中虽然不能直接长按识别二维码,但是还好小程序有WEB_VIEW,引用H5做的二维码就可以识别。

    web-view

    承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用。

    src:webview 指向网页的链接。可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名。

    这个问题解决了,最重要的是怎么让H5在浏览器中打开直接跳转微信生态(打开小程序),下面看看小程序的这个函数接口

    urlscheme.generate

    获取小程序 scheme 码,适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景。通过该接口,可以选择生成到期失效和永久有效的小程序码,有数量限制,目前仅针对国内非个人主体的小程序开放,详见获取 URL scheme

    HTTPS 调用

    请求地址

    POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN
    

    请求参数

    属性类型默认值必填说明
    access_token / cloudbase_access_tokenstring接口调用凭证
    jump_wxaObject跳转到的目标小程序信息。
    is_expirebooleanfalse生成的 scheme 码类型,到期失效:true,永久有效:false。注意,永久有效 scheme 和有效时间超过180天的到期失效 scheme 的总数上限为10万个,详见获取 URL scheme,生成 scheme 码前请仔细确认
    expire_typenumber0到期失效的 scheme 码失效类型,失效时间:0,失效间隔天数:1
    expire_timenumber到期失效的 scheme 码的失效时间,为 Unix 时间戳。生成的到期失效 scheme 码在该时间前有效。最长有效期为1年。is_expire 为 true 且 expire_type 为 0 时必填
    expire_intervalnumber到期失效的 scheme 码的失效间隔天数。生成的到期失效 scheme 码在该间隔时间到达前有效。最长间隔天数为365天。is_expire 为 true 且 expire_type 为 1 时必填

    jump_wxa 的结构

    属性类型默认值必填说明
    pathstring通过 scheme 码进入的小程序页面路径,必须是已经发布的小程序存在的页面,不可携带 query。path 为空时会跳转小程序主页。
    querystring通过 scheme 码进入小程序时的 query,最大1024个字符,只支持数字,大小写英文以及部分特殊字符:`!#$&'()*+,/:;=?@-._~%``
    env_versionstring"release"要打开的小程序版本。正式版为"release",体验版为"trial",开发版为"develop",仅在微信外打开时生效。体验版和开发版仅在iOS上支持,Android将在近期支持。

    返回值

    生成的小程序 scheme 码

    异常返回

    Object

    JSON

    属性类型说明
    errcodenumber错误码
    errmsgstring错误信息

    errcode 的合法值

    说明最低版本
    -1系统繁忙,请稍后重试
    40002暂无生成权限(非个人主体小程序无权限)
    40013生成权限被封禁
    85079小程序未发布
    40165参数path填写错误
    40212参数query填写错误
    85401参数expire_time填写错误,时间间隔大于1分钟且小于1年
    85402参数env_version填写错误
    44990生成Scheme频率过快(超过100次/秒)
    85400长期有效Scheme达到生成上限10万
    45009单天生成Scheme数量超过上限50万

    返回值说明

    如果调用成功,会直接返回生成的小程序 scheme 码。如果请求失败,会返回 JSON 格式的数据。

    示例

    请求

    {
        "jump_wxa":
        {
            "path": "/pages/publishHomework/publishHomework",
            "query": ""
        },
        "is_expire":true,
        "expire_time":1606737600
    }
    

    返回

    {
     "errcode": 0,
     "errmsg": "ok",
     "openlink": Scheme,
    }
    

    云调用

    云调用是微信云开发提供的在云函数中调用微信开放接口的能力,需要在云函数中通过 wx-server-sdk 使用。

    接口方法

    openapi.urlscheme.generate
    

    需在 config.json 中配置 urlscheme.generate API 的权限,详情

    请求参数

    属性类型默认值必填说明
    jumpWxaObject跳转到的目标小程序信息。
    isExpirebooleanfalse生成的 scheme 码类型,到期失效:true,永久有效:false。注意,永久有效 scheme 和有效时间超过180天的到期失效 scheme 的总数上限为10万个,详见获取 URL scheme,生成 scheme 码前请仔细确认
    expireTypenumber0到期失效的 scheme 码失效类型,失效时间:0,失效间隔天数:1
    expireTimenumber到期失效的 scheme 码的失效时间,为 Unix 时间戳。生成的到期失效 scheme 码在该时间前有效。最长有效期为1年。is_expire 为 true 且 expire_type 为 0 时必填
    expireIntervalnumber到期失效的 scheme 码的失效间隔天数。生成的到期失效 scheme 码在该间隔时间到达前有效。最长间隔天数为365天。is_expire 为 true 且 expire_type 为 1 时必填

    jumpWxa 的结构

    属性类型默认值必填说明
    pathstring通过 scheme 码进入的小程序页面路径,必须是已经发布的小程序存在的页面,不可携带 query。path 为空时会跳转小程序主页。
    querystring通过 scheme 码进入小程序时的 query,最大1024个字符,只支持数字,大小写英文以及部分特殊字符:`!#$&'()*+,/:;=?@-._~%``
    envVersionstring"release"要打开的小程序版本。正式版为"release",体验版为"trial",开发版为"develop",仅在微信外打开时生效。体验版和开发版仅在iOS上支持,Android将在近期支持。

    返回值

    生成的小程序 scheme 码

    异常

    Object

    JSON

    属性类型说明
    errCodenumber错误码
    errMsgstring错误信息

    errCode 的合法值

    示例

    请求

    const cloud = require('wx-server-sdk')
    cloud.init({
      env: cloud.DYNAMIC_CURRENT_ENV,
    })
    exports.main = async (event, context) => {
      try {
        const result = await cloud.openapi.urlscheme.generate({
            "jumpWxa": {
              "path": '/pages/publishHomework/publishHomework',
              "query": ''
            },
            "isExpire": true,
            "expireTime": 1606737600
          })
        return result
      } catch (err) {
        return err
      }
    }
    

    返回

    {
     "errcode": 0,
     "errmsg": "ok",
     "openlink": Scheme,
    }

    重要的就是获取这个scheme

    获取 URL Scheme

    通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。 通过 URL Scheme 打开小程序的场景值为 1065。
    生成的 URL Scheme 如下所示:

    <span style="background-color:#f9f9fa"><span style="color:#222222"><span style="background-color:#f9f9fa"><code>weixin://dl/business/?t= *TICKET*
    </code></span></span></span>

    iOS系统支持识别 URL Scheme,可在短信等应用场景中直接通过Scheme跳转小程序。
    Android系统不支持直接识别 URL Scheme,用户无法通过 Scheme 正常打开小程序,开发者需要使用 H5 页面中转,再跳转到 Scheme 实现打开小程序,跳转代码示例如下:

    <span style="background-color:#f9f9fa"><span style="color:#222222"><span style="background-color:#f9f9fa"><code>location.href = 'weixin://dl/business/?t= *TICKET*'
    </code></span></span></span>

    该跳转方法可以在用户打开 H5 时立即调用,也可以在用户触发事件后调用。

    调用上限

    Scheme 将根据是否为到期有效与失效时间参数,分为短期有效Scheme长期有效Scheme

    1. 单个小程序每日生成 Scheme 上限为50万个(包含短期有效 Scheme 与长期有效 Scheme)
    2. 有效时间超过180天的 Scheme 或永久有效的 Scheme 为长期有效Scheme单个小程序总共可生成长期有效 Scheme 上限为10万个,请谨慎调用
    3. 有效时间不超过180天的 Scheme 为短期有效Scheme,单个小程序生成短期有效 Scheme 不设上限

    注意事项

    1. 微信内的网页如需打开小程序请使用微信开放标签-小程序跳转按钮,无公众号也可以直接使用小程序身份开发网页并免鉴权跳转小程序,见云开发静态网站跳转小程序。符合开放范围的小程序可以下发支持打开小程序的短信
    2. 该功能基本覆盖当前用户正在使用的微信版本,开发者无需进行低版本兼容
    3. 只能生成已发布的小程序的 URL Scheme
    4. 通过 URL Scheme 跳转到微信时,可能会触发系统弹框询问,若用户选择不跳转,则无法打开小程序。请开发者妥善处理用户选择不跳转的场景
    5. 部分浏览器会限制打开网页直接跳转,可参考示例网页设置跳转按钮

    开放范围

    针对非个人主体小程序开放。

    至此,完成浏览器H5到微信生态,直接可以长按识别二维码了。

    展开全文
  • 主要介绍了微信小程序webview实现长按点击识别二维码功能,结合实例形式分析了webview二维码识别相关操作技巧,需要的朋友可以参考下
  • “image组件中二维码/小程序码图片不支持长按识别,仅在 wx.previewImage 中支持长按识别” 2.即便实现了 “wx.previewImage” 效果,但依旧是不支持二维码识别的 附录文档位置:小程序图片长按识别 代码设计 好在...
  • 利用图片放大完美解决 wx.previewImage({ current: t.SigninImg, // 当前显示图片的http链接 urls: [t.SigninImg] // 需要预览的图片http链接列表 })
  • 微信小程序长按识别二维码

    万次阅读 2020-09-15 19:08:18
    一直以来我都是这样认为的,微信的官方规则里也是这么写的,直到今天上午,我无意间发现一个小程序里的二维码居然可以长按识别,于是就好奇的去研究了一番,结果还真的可以实现小程序长按识别二维码。不知道是官方...
  • 微信小程序长按识别二维码,小程序相关问题总结 开发小程序中,长按识别二维码,小程序码跳转,已知问题整理:小程序中,不支持长按识别二维码,和小程序码。可利用小程序 图片预览功能识别 小程序码并进行跳转,...
  • uniapp长按识别二维码小程序

    千次阅读 2022-04-20 16:39:26
    uniapp长按识别二维码小程序
  • webview长按图片识别二维码
  • 小程序wxml <image src="{{image}}" bindtap="imgLoad"></image> 小程序js文件 imgLoad: function(event) { let imgList = [ '**', ] wx.previewImage({ current: '**', // 当前显示图片的...
  • web-view <...</web-view> 使用web-view组件,目前安卓8.0.3已经支持长按扫码 ...使用previewImage,点击后全屏展示,长按识别 wxml中: <image class='img' bindtap="previewImage" src='h.
  • 在做这个功能的时候,网上找了好多,都说不行,最终还是找到解决办法了。...1.利用公众号发布一篇文章,其中包含要被长按识别的公众号二维码; 2.将得到的公众号文章链接放入小程序webview中,即可展示。 ...
  • 主要介绍了微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 我们在微信公众号和小程序中在文章后面会放有小程序或者个人企业微信的二维码,以此来引流,拥有自己的私域流量,这个场景就需要这个便捷操作的支持 这个时候想要实现长按二维码跳出添加或者信息弹窗只需要在img上...
  • 小程序长按图片识别二维码

    千次阅读 2021-07-23 19:06:33
    方案1:使用wx....❌ 识别小程序二维码 WXML: <image src="https://img.demo.com/upload/images/qrcode.jpg" mode="widthFix" data-src="https://img.demo.com/upload/images/qrcode.jpg" bindtap=.
  • 小程序长按识别二维码, 网页在小程序中长按识别二维码,web-view长按识别二维码 效果图: html 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>&...
  • webview内嵌h5页面实现长按识别二维码
  • H5页面长按识别二维码

    千次阅读 2022-04-24 17:59:41
    vue 写的H5 ,内嵌在小程序上 <img src="图片路径" style="width: 200px;...微信原生直接写长按识别二维码 aaa(e){ let img = e.target.dataset.src; wx.previewImage({ current: img, ...
  • 实现小程序识别公众号、微信群、个人微信号、企业微信号
  • 我目前所解决的方案就是利用小程序的客服组件,通过客服给用户发送的二维码可以长按识别并分享给好友,保存图片 前端代码里面添加一段代码去小程序客服就好了 &lt;button open-type="contact" ...
  • 企业微信 ...二维码测试</text> <image style="width: 200px; height: 200px;" src="{{url}}" show-menu-by-longpress="{{true}}"></image> </view> index.js Page({ data:
  • 使用公众号发布一篇带有二维码的文章,然后通过web-view内嵌在小程序中,就可以实现长按识别二维码了 2. 微信网页 原文:https://blog.csdn.net/weixin_42865522/article/details/86530461 (1) 设置meta <...
  • uniapp:H5页面长按识别二维码

    千次阅读 2022-03-08 14:02:01
    uniapp:H5页面长按识别二维码 使用原生小程序套uniapp开发的h5页面,然后有长按识别二维码的需求,但是使用uniapp的image,设置了show-menu-by-longpress,长按无效,换成了img就可以了,不知道为啥,记录下。...
  • 小程序中图片二维码小程序码,长按识别支持的情况 三种在小程序中识别图片二维码的方式的对比 image标签 + show long press menu <imagesrc="https://img.qr.com/qr.jpg"style="width: 100%;"mode=...
  • 小程序长按识别二维码, 网页在小程序中长按识别二维码,web-view长按识别二维码 效果图: html 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,340
精华内容 3,336
关键字:

小程序长按识别二维码

友情链接: Horloge.rar