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开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦

H5页面打开微信小程序相关推荐

H5静态页面跳转微信小程序；从外部浏览器，点击H5链接跳转打开微信小程序；以及在微信内直接点击H5链接打开微信小程序；
参考链接需求:从外部浏览器,点击H5链接跳转打开微信小程序:以及在微信内直接点击H5链接打开微信小程序: 步骤1: 小程序开发需要使用云开发创建项目,使用云开发生成的项目会自带云函数文件夹: 步骤2 ...
小程序接入h5页面_微信小程序跳转外部链接（h5页面）以及数据交互
最近项目有个需求,在微信小程序中跳转外部链接完成相关的操作,操作完成后返回微信小程序的相关页面. 1.跳转外部链接(官方文档) 1)入口 //跳转到入口 wx.navigateTo({url: '.. ...
小程序嵌套h5页面_微信小程序内嵌h5页面
概况使用标签能在小程序中打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致,否则在真机上是打不开的.如果开发工具上勾选了'不校验域名',在开发 ...
微信小程序嵌套h5页面+发布微信小程序（超级简单）
将发布的h5页面转换成微信小程序,无需重新开发,操作超级简单!!! 使用到的技术为uniapp和web-view 首先,我们先来了解一下web-view是什么: 简单的一句话来讲:web-view 是 ...
h5页面唤起微信小程序（vue）
腾讯文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21 https://de ...
微信小程序webview(H5页面)调用微信小程序支付
1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现: 2.微信小程序(webview访问H5页面)必须使用微信小程序支付: 如何实现以及实现方式以及支付后页面返回 ...
小程序跳到h5页面_微信小程序跳转到H5页面实战篇
有些场景需要从微信小程序跳转到H5页面,通常网上的教程会告诉你使用web-view组件就可以了,但实际开发中还有很多需要注意的地方,尤其是很多概念往往会把初学者弄糊涂了,下面就让我们从概念开始吧!微信 ...
Uni-app的webview，H5页面在微信小程序中webview再跳回小程序的解决方案
场景: 微信小程序:uni-app开发 H5:uni-app开发小程序其中一个场景需要使用webview嵌入H5,待H5里的业务处理完成再跳转回小程序遇到的问题: webview无法跳转回小程序, ...
企业微信H5唤起(打开)微信小程序
1.登录企业微信管理后台(https://work.weixin.qq.com/wework_admin/frame) 2.获取企业ID,我的企业>企业信息>企业ID(ww28b3c6e7 ...
小程序接入h5页面_微信小程序开发接入colorUI
本文接前天的小程序开发第一篇文章,上篇文章完成了微信官方提供的小程序初始模板代码的构建,今天这篇文章主要讲解小程序使用colorUI框架,并构建一个简单的页面. 前注: 1.本文代码基于第一篇文章的基 ...

H5页面打开微信小程序

H5页面打开微信小程序相关推荐

最新文章

热门文章