手机浏览器中H5跳转微信小程序长按识别二维码_微信小程序web-view内嵌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

请求参数

jump_wxa 的结构

返回值

openlink

生成的小程序 scheme 码

异常返回

Object

JSON

errcode 的合法值

返回值说明

如果调用成功，会直接返回生成的小程序 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 的权限，详情

请求参数

jumpWxa 的结构

返回值

openlink

生成的小程序 scheme 码

异常

Object

JSON

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到微信生态，直接可以长按识别二维码了。