H5页面跳转小程序的3种实现方式

网友投稿 2271 2023-11-10

−目录前言一、web-view标签返回小程序二、wx-open-launch-weapp三、URL Scheme总结 

前言

实际开发中，小程序和H5往往有很多业务场景需要来回跳转，这里主要介绍三种跳转方式供大家参考。场景：微信小程序登录有时候需要和公众号进行绑定，获取公众号code和appid传给后台进行绑定

一、web-view标签返回小程序

H5页面跳转小程序的3种实现方式

1.小程序启动页面只写web-view标签跳转到授权页面。

?
1
2
3
<template>
<web-view src="https://www.xxx-/auth.html"></web-view>
</template>

2.编写auth.html

3、把auth.html放到服务器就可以测试访问，打开小程序默认进入启动页面中的webview跳转到H5，授权成功后，通过wx.miniProgram.reLaunch方法携带参数跳回小程序

二、wx-open-launch-weapp

1.编写auth.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="app">
<wx-open-launch-weapp id="launch-btn" username="原始ID" path="赋值自己的path页面">
<template>
<button class="btn">跳转小程序</button>
</template>
</wx-open-launch-weapp>
</div>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript">
let url = window.location.href;
//如果url中包含code，说明授权成功，开始注册微信config
if(url.includes(code)) {
//通过接口拿到appId,nonceStr,signature,timestamp
wx.config({
debug: false,
appId,
timestamp,
nonceStr,
signature,
jsApiList: [chooseImage, previewImage], //必写，否则不显示
openTagList: [wx-open-launch-weapp]//必写，否则不显示
});
} else {
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=自己的appid&redirect_uri=还是当前页面&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
}
</script>

2、公众号后台配置好相应的域名和ip白名单，把auth.html放到服务器就可以测试访问，点击按钮，跳转到小程序首页(标签中的path属性)，在onLoad函数中获取参数

三、URL Scheme

该接口用于获取小程序 scheme 码，适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景。通过该接口，可以选择生成到期失效和永久有效的小程序码，有数量限制，目前仅针对国内非个人主体的小程序开放。

1.HTTPS 调用

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

2.返回示例

?
1
2
3
4
5
6
7
{
"msg": "操作成功",
"code": 200,
"data": {
"openlink": "weixin://dl/business/?t=WqDMv7uIy7g"
}
}

3.调用，微信内打开跳转的是正式版，微信外可以跳转体验版和开发板，具体通过env_version参数设置小程序版本

我这里是写个html文件通过a标签访问

?
1
<a href="weixin://dl/business/?t=WqDMv7uIy7g" rel="external nofollow" >跳转小程序</a>

总结 

到此这篇关于H5页面跳转小程序的3种实现方式的文章就介绍到

您可能感兴趣的文章:微信小程序和H5页面间相互跳转代码实例小程序跳转到的H5页面再跳转回跳小程序的方法小程序跳转H5页面的方法步骤微信小程序与webview H5交互的方法(内嵌H5跳转原生页面)微信小程序h5页面跳转小程序的超详细讲解微信小程序web-view环境下H5跳转小程序页面方法实例代码

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 小程序 微信小程序 网页 参数
上一篇:微信小程序实现手写签名的示例代码
下一篇: 迎接移动时代的最佳选择：全面探索移动渠道管理平台的功能和优势
相关文章

 发表评论

暂时没有评论，来抢沙发吧~