手机浏览器中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_token	string		是	接口调用凭证
jump_wxa	Object		否	跳转到的目标小程序信息。
is_expire	boolean	false	否	生成的 scheme 码类型，到期失效：true，永久有效：false。注意，永久有效 scheme 和有效时间超过180天的到期失效 scheme 的总数上限为10万个，详见获取 URL scheme，生成 scheme 码前请仔细确认。
expire_type	number	0	否	到期失效的 scheme 码失效类型，失效时间：0，失效间隔天数：1
expire_time	number		否	到期失效的 scheme 码的失效时间，为 Unix 时间戳。生成的到期失效 scheme 码在该时间前有效。最长有效期为1年。is_expire 为 true 且 expire_type 为 0 时必填
expire_interval	number		否	到期失效的 scheme 码的失效间隔天数。生成的到期失效 scheme 码在该间隔时间到达前有效。最长间隔天数为365天。is_expire 为 true 且 expire_type 为 1 时必填

jump_wxa 的结构

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

返回值

openlink

生成的小程序 scheme 码

异常返回

Object

JSON

属性	类型	说明
errcode	number	错误码
errmsg	string	错误信息

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 的权限，详情

请求参数

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

jumpWxa 的结构

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

返回值

openlink

生成的小程序 scheme 码

异常

Object

JSON

属性	类型	说明
errCode	number	错误码
errMsg	string	错误信息

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