喜大普奔,微信终于支持外网打开小程序啦!

胡哥有话说 等级 965 0 1

前言

千呼万唤始出来,微信小程序终于支持以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>),完整版的小程序唤起业务流程图来啦~

喜大普奔,微信终于支持外网打开小程序啦!

后记

以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得点赞收藏呀,关注胡哥有话说,学习前端不迷路,欢迎多多留言交流...

胡哥有话说,专注于大前端技术领域,分享前端系统架构,框架实现原理,最新最高效的技术实践!

收藏
评论区

相关推荐

喜大普奔,微信终于支持外网打开小程序啦!
前言 千呼万唤始出来,微信小程序终于支持以URL Scheme的形式从外部唤起了。 long long ago 我们只能在微信内的网页中使用微信开发标签小程序跳转按钮
微信小程序支付功能全流程实践
前言 微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能。在小程序内可调用微信的API完成支付功能,方便、快捷。小程序开发者在开发小程序时,支付流程是必然要接触到,今天胡哥就小程序支付的全流程为大家一一细说,让小伙伴能快速得掌握小程序支付能力,避免踩坑! 知己知彼,方能百战不殆 小程序支付流程图 小程序支付交互流程图(https:/
微信小程序modal
首先创建一个组件component,组件命名可以为modal modal.wxml的内容为 <view class'modalmask' wx:if'{{show}}' bindtap'clickMask' <view class'modalcontent' <scrollview scrolly class'mainc
微信小程序轮播图
实现效果 wxml代码 <view style"height:20rpx;"</view <view class"swiper"
微信小程序验证url地址
笔记类 var that this that.optional()是验证是否为空方法 url(value) { return that.optional(value) || /^(?:(?:(?:https?|ftp):)?//)(?:S(?::S)?@)?(?:
微信小程序部分api 会触发 onShow onHide
解决部分api触发小程序 onShow onHide 首先要明白 微信小程序的 onShow() onHide()分为页面级的和应用级的,应用级的就是app.js里面的那几个,页面级的就是pages里的 当使用了下列api时,均会触发页面级和应用级的onShow onHide 1. 点击右上角小圆点关闭小程序。 2. 图片预览:wx.preview
微信小程序 - 引入字体图标
网站图标要想做到清晰无锯齿,使用普通图片或者雪碧图都很难达到这个目的,一般我们都会引入字体图标(svg转font,使用图标像使用字体一样,详见《web页面使用字体图标》,那么如何在微信小程序中使用自定义图标呢?请看详细步骤:1、从上选择喜欢的图标加入购物车,在购物车弹窗中点击“下载代码”后,解压阿里图库 加入购物车购物车 下载代码图标文件内容2.、进入导入第
微信小程序 - 页面间传值
小程序页面间传值大家晚上好,说晚上好是因为是在晚上写的,说这句话是因为这句话开篇不那么突然。那么小程序的页面间传值,在我使用这段时间里,我就非常的主观的把它们分为wx.navigateTo和非wx.navigateTo的,因为wx.navigateTo有一个事件参数event,我从当前页跳转到下一页,如果需要能返回,我都用的wx.naviga
微信小程序体验composition-api(类似vue3)
微信小程序compositionapi用该是什么样子? 使用使用起来应该像是这个样子wxue(options) setup配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下import wxue, reactive from 'wxue'wxue( setup(option
5G消息与微信小程序互联互通?北京国都互联这么做……
最近微信小程序上线了一个超级流量的新入口 URL Scheme,据微信官网介绍,scheme码适用于短信、邮件、外部网页等拉起小程序的业务场景。通过小程序页面的URL Scheme,可以在短信、邮件或微信外部的网页中打开微信小程序。意义在于将微信流量生态延伸到微信以外渠道,进一步完善了小程序和外部渠道互通的营销场景。 **北京国都互联**第一时
11.11如何卖到一个亿:从0到1的电商爆品打造术 电子书 PDF
* 内容转自:https://download.csdn.net/download/chenyao1994/11191034 * 下载地址:https://pan.baidu.com/s/1uQ1cjm9QH4ZXPoqQRiAw0A * 分享码:如需分享码:\[打开微信\]->\[扫描右侧二维码\]->\[关注码小辫的微信\] 输入"21489
Spring Boot从零入门2_核心模块详述和开发环境搭建
本文属于原创,转载注明出处,欢迎关注微信小程序`小白AI博客` 和微信公众号`别打名名`或者网站 https://xiaobaiai.net 或者我的CSDN http://blog.csdn.net/freeape ![](https://oscimg.oschina.net/oscnet/82460402-3db3-48fd-9942-5746632b
Spring Boot从零入门3_创建Hello World及项目剖析
本文属于原创,转载注明出处,欢迎关注微信小程序`小白AI博客` 和微信公众号`别打名名`或者网站 https://xiaobaiai.net 或者我的CSDN http://blog.csdn.net/freeape ![](https://oscimg.oschina.net/oscnet/89944eff-aec8-41a9-b6ba-d0cce8cf
Spring Boot从零入门5_五脏俱全的RESTful Web Service构建
本文属于原创,转载注明出处,欢迎关注微信小程序`小白AI博客` 和微信公众号`别打名名`或者网站 https://xiaobaiai.net 或者我的CSDN http://blog.csdn.net/freeape ![](https://oscimg.oschina.net/oscnet/378afc2c-41cd-4b4b-a99a-cadb9d83
Spring Boot从零入门6_Swagger2生成生产环境中REST API文档
本文属于原创,转载注明出处,欢迎关注微信小程序`小白AI博客` 和微信公众号`别打名名`或者网站 https://xiaobaiai.net 或者我的CSDN http://blog.csdn.net/freeape ![](https://oscimg.oschina.net/oscnet/cc3a3a51-3823-49e5-ab55-c2a62f01