乐趣区

关于javascript:喜大普奔微信终于支持外网打开小程序啦

jiezi

前言

千呼万唤始进去，微信小程序终于反对以 URL Scheme 的模式从内部唤起了。

long long ago~ 咱们只能在微信内的网页中应用微信开发标签 - 小程序跳转按钮 <wx-open-launch-weapp>关上小程序，只有这样一种繁多的场景。

而在理论的业务中，咱们心愿在给用户发送的营销短信、邮件或其余渠道如 APP 关上小程序，以疾速获取用户流量，实现引流、导购等目标。

他来啦，他来啦，微信小程序悄咪咪的上线了新性能：反对 URL Scheme 关上小程序 了。

新品上线

URL Scheme 关上小程序新品上线，速来尝鲜。

能够随着胡哥的角度为你一一论述、总结剖析，也能够间接点击官网文档传送门查看官网文档呦~

咱们首先来看下目前微信官网提供的两种关上微信小程序的形式以及相干实用场景。

打开方式 实用场景 场景值 应用形式 备注
URL Scheme 短信、邮件、微信外 网页关上小程序 1065 location.href = 'weixin://dl/business/?t= *TICKET*' TICKET 由服务端接口返回
<wx-open-launch-weapp> 微信内 网页 1167 页面配置 <wx-open-launch-weapp> 标签 需配置 JS 接口域名或云开发动态网站托管绑定的域名下网页

肯定要留神辨别两种形式的实用场景：URL scheme 是实用于微信外网页，<wx-open-launch-weapp>
是实用于微信内的。

小程序 URL Scheme 的获取

小程序的 URL Scheme 的构造为 weixin://dl/business/?t= *TICKET* ，其中 TICKET 由服务端接口返回的。服务端接口辨别两种模式：HTTPS 调用 和云开发调用。

一、HTTPS 调用

  1. 获取 ACCESS_TOKEN

    申请地址：

    GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

    对应的 APPID 和 APPSECRET 换成本人对应的小程序即可。

    返回的数据结构如下：

    {
    "access_token": "ACCESS_TOKEN",
    "expires_in": 7200
}

  2. 获取 URL Scheme

    申请地址：

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

    申请参数：

    | 属性 | 类型 | 默认值 | 必填 | 阐明 |
    | — | — | — | — | — |
    | access_token | string | | 是 | 接口调用凭证 |
    | jump_wxa | Object | | 否 | 跳转到的指标小程序信息。|
    | is_expire | boolean | false | 否 | 生成的 scheme 码类型，到期生效：true，永恒无效：false。|
    | expire_time | number | | 否 | 到期生效的 scheme 码的生效工夫，为 Unix 工夫戳。生成的到期生效 scheme 码在该工夫前无效。最长有效期为 1 年。生成到期生效的 scheme 时必填。|

    jump_wxa 的构造

    | 属性 | 类型 | 默认值 | 必填 | 阐明 |
    | — | — | — | — | — |
    | path | string | | 是 | 通过 scheme 码进入的小程序页面门路，必须是曾经公布的小程序存在的页面，不可携带 query。path 为空时会跳转小程序主页。|
    | query | string | | 是 | 通过 scheme 码进入小程序时的 query，最大 128 个字符，只反对数字，大小写英文以及局部特殊字符：!#$&'()*+,/:;=?@-._~ |

    申请示例：

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

    返回后果：

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

    openlink 就是咱们最终须要的 URL Scheme 啦~

二、云调用

云调用是小程序·云开发提供的在云函数中调用微信凋谢接口的能力，须要在云函数中通过 wx-server-sdk 应用

申请参数：

属性 类型 默认值 必填 阐明
access_token string 是 接口调用凭证
jump_wxa Object 否 跳转到的指标小程序信息。
isExpire boolean false 否 生成的 scheme 码类型，到期生效：true，永恒无效：false。
expireTime number 否 到期生效的 scheme 码的生效工夫，为 Unix 工夫戳。生成的到期生效 scheme 码在该工夫前无效。最长有效期为 1 年。生成到期生效的 scheme 时必填。

留神和 HTTPS 中参数名大小写不统一的状况

jump_wxa 的构造

属性 类型 默认值 必填 阐明
path string 是 通过 scheme 码进入的小程序页面门路，必须是曾经公布的小程序存在的页面，不可携带 query。path 为空时会跳转小程序主页。
query string 是 通过 scheme 码进入小程序时的 query，最大 128 个字符，只反对数字，大小写英文以及局部特殊字符：!#$&'()*+,/:;=?@-._~

申请示例：

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/index/index',
          query: ''
        },
        isExpire: true,
        expireTime: 1606737600
      })
    return result
  } catch (err) {return err}
}

返回后果：

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

openlink 就是咱们最终须要的 URL Scheme 啦~

小程序 URL Scheme 的应用

小程序 URL Scheme 的构造是： weixin://dl/business/?t= *TICKET* ，那咱们拿到这个 scheme 之后如果应用呢。

在 IOS 零碎下是反对间接辨认 URL Scheme 的，所以能够间接将 URL Scheme 发送到短信、邮件中，提供给用户应用。然而在 Android 零碎不反对间接辨认URL Scheme，用户无奈 Scheme 失常关上小程序，所以须要开发者自行应用 H5 页面进行直达，再跳转应用 Scheme 形式关上微信小程序。

端 应用形式 备注
Android location.href='weixin://dl/business/?t= *TICKET*' 只有一种形式
IOS 间接辨认 URL Scheme 或应用 location.href 形式 两种形式

But, 咱们要留神一个问题，当咱们进行短信触达时，无奈确定用户所应用的的手机设施是 IOS 还是Android，

So, 咱们从理论的业务触发，都须要一个 H5 页面进行直达解决。

小程序唤起业务流程图

当当当，综合两种关上小程序的形式（URL Scheme 和 <wx-open-launch-weapp>），完整版的小程序唤起业务流程图来啦~

后记

以上就是胡哥明天给大家分享的内容，喜爱的小伙伴记得 点赞 、 珍藏 呦，关注胡哥有话说，学习前端不迷路，欢送多多留言交换 …

胡哥有话说，专一于大前端技术畛域，分享前端零碎架构，框架实现原理，最新最高效的技术实际！

退出移动版