网络知识 娱乐 H5页面打开微信小程序

H5页面打开微信小程序

发布: 2023年2月14日 10:17:50

一、介绍

  • 背景：用于实现外部H5页面中实现打开微信小程序的功能(微信内打开请使用微信开放标签方式)，用户在网页中一键唤起小程序，能够给用户提供更好的体验。采用的技术是URL Scheme，是微信小程序后台生成一种地址，适用于从短信、邮件、微信外网页等场景打开小程序任意页面。通过URL Scheme打开小程序的场景值为 1065
  • 整体思路：前端调用后端接口，后端调用微信接口生成Url Scheme返回给前端，前端得到Url Scheme后，打开该链接即可实现跳转
    生成的 URL Scheme 如下所示
location.href = 'weixin://dl/business/?t=SagndxolUds'

示例网页H5地址
https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html
二、操作步骤
2.1 开发前的准备工作

必须是企业的小程序

  • 获取AppID，也就是小程序唯一凭证，可在微信公众平台 - 设置 - 开发设置」页中获得。（需要已经成为开发者，且帐号没有异常状态）
  • 获取AppSecret，也就是小程序唯一凭证密钥

2.2 进入开发阶段
关于URL Scheme
微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html
后端

  • 代码逻辑：后端调用微信接口获取access_token，在用获取access_token去调用微信接口生成URL Scheme，在将URL Scheme返回给前端

1.获取access_token
微信官方文档https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html

  • 请求地址
GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
  • 参数列表：
参数含义
grant_type固定为client_credential
appid小程序唯一凭证，即 AppID
secret小程序唯一凭证密钥，即 AppSecret
  • 得到以下数据说明成功：
{"access_token": "56_iut0Umy6*********wERTaAHAVIK", "expires_in": 7200}

2.生成URL Scheme
微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html

  • 请求地址
POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN
  • 参数列表：
参数含义
access_token接口凭证
  • 得到以下数据说明成功：
{
    "errcode": 0,
    "errmsg": "ok",
    "openlink": "weixin://dl/business/?t=SagndxolUds"
}

此时已经拿到了openlink ，也就是URL Scheme，将该信息返回前端即可

前端
请求后端接口拿到URL Scheme，然后已URL形式打开即可，该方式仅支持手机浏览器，如果是微信浏览器则需要使用(微信开放标签)方式

<a href="weixin://dl/business/?t=SagndxolUds">打开小程序</a>

href 绑定的是 URL Scheme 地址。

完

相关文章