66资源网 h5在安卓和IOS跳转微信小程序
什么是URL scheme？
URL scheme是App提供给外部的可以直接操作App的规则。
比如微信提供了打开扫一扫的URL scheme。weixin://dl/scan
比如支付宝提供了转账的URL scheme。alipayqr://platformapi/startapp?saId=20000116
比如知乎提供了打开回答页面的URL scheme。zhihu://answers/{id}
有很多应用都提供了URL scheme，方便在网页端打开自己的App，或者方便用户使用自己的App。其中URL scheme的前半部分：tomatodiary://可以用来打开App，detail/taskid 后半部分则定义了App会进行什么操作的规则。
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>打开小程序报名</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta
name=”viewport”
content=”width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1″
/>
<!– 公众号 JSSDK –>
<script src=”https://res.wx.qq.com/open/js/jweixin-1.6.0.js”></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
position: relative;
}
.box {
position: absolute;
top: 20%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.title {
font-size: 16px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #403a7e;
margin-top: 16px;
margin-bottom: 72px;
letter-spacing: 8px;
font-style: italic;
}
.button {
width: 326px;
height: 48px;
background: #58c7fc;
border-radius: 45px 45px 45px 45px;
font-size: 16px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #ffffff;
text-align: center;
line-height: 48px;
cursor: pointer;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”box”>
<img src=”./logo.png” alt=”” />
<div class=”title”>专注海外营销知识输出</div>
<div id=”mobile-web-container” class=”button” onclick=”openWeapp()”>
立即前往报名
</div>
<div id=”wechat-web-container” class=”hidden button”>
<!– 所需跳转的小程序原始id，即小程序对应的以gh_开头的id（跳转时，有appid会优先使用appid，没有appid才会使用username） –>
<wx-open-launch-weapp
id=”launch-btn”
appid=”公众号appid”
username=””
path=”pages/offlineDetail/offlineDetail”
>
<script type=”text/wxtag-template”>
<style>.text { line-height: 48px;color:#ffffff;font-size:16px; }</style>
<div class=”text”>立即前往报名</div>
</script>
</wx-open-launch-weapp>
</div>
</div>
</div>
</body>
<script>
window.onload = function () {
// 获取ua判断是否在微信浏览器中打开
var ua = navigator.userAgent.toLowerCase();
console.log(ua);
var isWeixin = ua.match(/micromessenger/i) == “micromessenger”;
console.log(isWeixin);
if (isWeixin) {
var wxContainerEl = document.getElementById(“wechat-web-container”);
wxContainerEl.classList.remove(“hidden”);
var mobileContainerEl = document.getElementById(“mobile-web-container”);
mobileContainerEl.classList.add(“hidden”);
var launchBtn = document.getElementById(“launch-btn”);
launchBtn.addEventListener(“ready”, function (e) {
console.log(“开放标签 ready”);
});
launchBtn.addEventListener(“launch”, function (e) {
console.log(“开放标签 success”);
});
launchBtn.addEventListener(“error”, function (e) {
console.log(“开放标签 fail”, e.detail);
});
let jsapi_ticket = sessionStorage.getItem(“jsapi_ticket”);
let noncestr = “abcdefg”;
let timestamp = new Date().getTime
let url = location.href.split(“#”)[0];
let signature = genSign(jsapi_ticket, noncestr, timestamp, url); // 后端签名接口
console.log(signature);
wx.config({
debug: true, // 调试时可开启
appId: “小程序appId”, // <!– replace –>
timestamp： timestamp , // 必填，填任意数字即可
nonceStr: noncestr , // 必填，填任意非空字符串即可
signature: signature, // 必填，填任意非空字符串即可
jsApiList: [“chooseImage”], // 必填，随意一个接口即可
openTagList: [“wx-open-launch-weapp”], // 填入打开小程序的开放标签名
});
}
};
function openWeapp() {
let xhr = new XMLHttpRequest();
xhr.open(
“get”,
“https://xxx.com/xcx_scheme”
);
xhr.setRequestHeader(“content-type”, “application/x-www-form-urlencoded”);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let url = JSON.parse(xhr.responseText).url;
console.log(url);
window.location.href = url;
}
};
}
</script>
</html>
欢迎使用66资源网
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
7. 本站有不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别！
66源码网 » h5在安卓和IOS跳转微信小程序
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
7. 本站有不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别！
66源码网 » h5在安卓和IOS跳转微信小程序
