H5页面打开微信小程序

一、介绍

• 背景：用于实现外部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 地址。

完

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦