Html5页面跳转小程序的三种方式

小罗同学

前言

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

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

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

复制代码

2.编写auth.html

1. <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
   
2. <script type="text/javascript">
   
3.                 let url = window.location.href;
   
4.                 if(url.includes(code)) {
   
5.                         if (wx.miniProgram) {
   
6.                                 wx.miniProgram.reLaunch({
   
7.                                         url: `/pages/home/index?code=${url中的code}&appId=${url中的appid}`,
   
8.                                         success: function() {
   
9.                                                 ......
   
10.                                         },
    
11.                                         fall: function() {
    
12.                                                 ......
    
13.                                         }
    
14.                                 })
    
15.                         }
    
16.                 } else {
    
17.                         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"
    
18.                 }
    
19.         </script>

复制代码

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

1.编写auth.html

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

复制代码

3.调用，微信内打开跳转的是正式版，微信外可以跳转体验版和开发板，具体通过env_version参数设置小程序版本
我这里是写个html文件通过a标签访问

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

复制代码

到此这篇关于Html5页面跳转小程序的三种方式的文章就介绍到这了,更多相关Html5页面跳转小程序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

奇迹笔记

保持尊重和礼貌对待其他成员是必要的。

阳光下的稻草人

我们一起努力，共同解决问题吧。

快换个

顶一个，观点非常中肯！

越过913

每日一回

sky未成年丶

谢谢你分享这个信息

囧王者小迷妹

说得太好了，完全同意！