京东6.18大促主会场领京享红包更优惠

 找回密码
 立即注册

QQ登录

只需一步,快速开始

Html5页面跳转小步伐的三种方式

2024-11-3 16:27| 发布者: f5db4| 查看: 94| 评论: 0

摘要: 前言 实际开辟中,小步伐和H5每每有许多业务场景需要往返跳转,这里主要先容三种跳转方式供大家参考。场景:微信小步伐登录有时间需要和公众号举行绑定,获取公众号code和appid传给后台举行绑定 一、web-view标签返

前言

实际开辟中,小步伐和H5每每有许多业务场景需要往返跳转,这里主要先容三种跳转方式供大家参考。
场景:微信小步伐登录有时间需要和公众号举行绑定,获取公众号code和appid传给后台举行绑定

一、web-view标签返回小步伐

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

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

2.编写auth.html

[code]<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>[/code]

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

二、wx-open-launch-weapp

1.编写auth.html

[code]<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>[/code]

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

三、URL Scheme

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

1.HTTPS 调用

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

2.返回示例

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

3.调用,微信内打开跳转的是正式版,微信外可以跳转体验版和开辟板,详细通过env_version参数设置小步伐版本

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

[code]<a href="weixin://dl/business/?t=WqDMv7uIy7g">跳转小步伐</a>[/code]

到此这篇关于Html5页面跳转小步伐的三种方式的文章就先容到这了,更多相关Html5页面跳转小步伐内容请搜刮脚本之家从前的文章或继承欣赏下面的相关文章,希望大家以后多多支持脚本之家!


来源:https://www.jb51.net/html5/915125.html
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
关闭

站长推荐上一条 /6 下一条

QQ|手机版|小黑屋|梦想之都-俊月星空 ( 粤ICP备18056059号 )|网站地图

GMT+8, 2025-7-2 03:44 , Processed in 0.045262 second(s), 18 queries .

Powered by Mxzdjyxk! X3.5

© 2001-2025 Discuz! Team.

返回顶部