首页IT科技h5跳转小程序webview(H5页面跳转小程序的三种方式)

h5跳转小程序webview(H5页面跳转小程序的三种方式)

时间2025-06-20 09:19:44分类IT科技浏览6040
导读:前言 实际开发中,小程序和H5往往有很多业务场景需要来回跳转,这里主要介绍三种跳转方式供大家参考。...

前言

实际开发中               ,小程序和H5往往有很多业务场景需要来回跳转                     ,这里主要介绍三种跳转方式供大家参考               。

场景:微信小程序登录有时候需要和公众号进行绑定        ,获取公众号code和appid传给后台进行绑定

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

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

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

2.编写auth.html

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script type="text/javascript"> let url = window.location.href; if(url.includes(code)) { if (wx.miniProgram) { wx.miniProgram.reLaunch({ url: `/pages/home/index?code=${url中的code}&appId=${url中的appid}`, success: function() { ...... }, fall: function() { ...... } }) } } 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>

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

二        、wx-open-launch-weapp

1.编写auth.html

<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 调用

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

2.返回示例

{ "msg": "操作成功", "code": 200, "data": { "openlink": "weixin://dl/business/?t=WqDMv7uIy7g" } }

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

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

<a href="weixin://dl/business/?t=WqDMv7uIy7g">跳转小程序</a>
声明:本站所有文章            ,如无特殊说明或标注        ,均为本站原创发布                        。任何个人或组织                     ,在未征得本站同意时                ,禁止复制                、盗用    、采集                     、发布本站内容到任何网站                   、书籍等各类媒体平台          。如若本站内容侵犯了原著者的合法权益    ,可联系我们进行处理       。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
howdy翻译(How To: Convert VirtualPC .vhd hard drives to VirtualBox .vdi hard drives (or viceversa)) python将数据保存到本地(python怎么把数据保存为excel)