H5跳转小程序 (成功案例)
一、准备工作根据官方文档提供的资料，需要准备一下几点方法：
认证服务号；
绑定JS接口安全域名；
配置IP白名单；
将小程序和H5公众号进行关联；
需要跳转的小程序页面path和原始ID (gh_xxxxxx)；
引入微信jweixin-1.6.0.js；
二、流程配置是否正确
先看看官方的文档需求：
老规矩传送门【开发前必读文档】
老规矩传送门\【微信JS-SDK说明文档】]
传送门
三、配置https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21
1. 认证服务号；
指微信公众号，不是订阅号，在做之前一定要检查清楚；
2. 绑定JS接口安全域名；
这里有很多小伙伴找不到入口，入口在微信公众号后台配置，不是小程序后台；
3. 配置IP白名单；
IP白单也是在公众号后台配置：进入公众号》设置与开发》安全中心》找到IP白名单区设置》ok
4. 将小程序和H5公众号进行关联；
微信公众后台链接：https://mp.weixin.qq.com/
关联公众号登录 “公众号管理后台-小程序管理” 完成关联
查看关联公众号在小程序后台配置：进入小程序后台》设置》关联设置》关联的公众号》ok
5. 需要跳转的小程序页面path和原始ID (gh_xxxxxx)；
这里跳转的页面可以是任意页面，非tabbar页面，可以大胆尝试；
打开微信小程序后台：版本管理》修改页面路径》页面路径(选填)》ok
原始ID及gh_开头；
打开微信小程序后台：设置》帐号信息》原始ID》ok
代码中的实操方法：【传送门】
6. 引入微信jweixin-1.6.0.js；
微信文档虽然写了一个示例，却不是很详细：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
// 引入微信jweixin-1.6.0.js
<script typet="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
</body>
</html>
以上配置好后，说明我们已经解决的很多不必要出现的bug；下面开始代码分析！
四、代码如何写
1、页面布局代码模块（重点）
2、script js模块（重点）
为什么要分两步将，写法很重要，两步敲定实现功能，请看下面：
1、页面布局代码模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
<script typet="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
<!-- 第一部分代码 -->
<div id="public-web" class="wrapper hidden">
<div class="logo">
<p>旅行的足迹</p>
</div>
<div class="icon-card">
<span>小程序</span>
</div>
<!--
username为小程序的原始id
path对应的是小程序的链接地址 -->
<wx-open-launch-weapp
id="launch-btn"
username="gh_4bad38c1581f"
path="pages/home/home">
<!-- 这里的script 插槽模版及样式均需要通过<script type="text/wxtag-template"></script>进行包裹。 -->
<script type="text/wxtag-template">
<!-- 样式方法 -->
<style type="text/css">
.btn-card { display: flex;
align-items: center; justify-content: center;
border-radius: 8px; background-color: #07c160;
padding: 12px 60px 12px 60px; margin-top: 66%;}
.btn-card p { color: #fff;font-size: 16px;margin: 0;}
.btn-card:hover {background-color: #08b65c;}
.btn-card:active {background-color: #03994c;}
</style>
<div class="btn-card"><p class="btn">打开小程序</p></div>
</script>
</wx-open-launch-weapp>
</div>
<div id="desktop-web-container" class="hidden">
<p >请在手机打开网页链接</p>
<p></p>
</div>
</body>
</html>
pc端显示：
小程序端展示：
2、script js模块
<!-- 为了方便大家能够直接拷贝运行代码，这里用线上jq链接 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- 微信 jweixin-1.6.0.js -->
<script typet="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
$(function () {
// 方便快捷的判断一下端口（是否为小程序端）
const ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) != "micromessenger") {
console.log('微信端')
var containerEl = document.getElementById('public-web')
containerEl.classList.remove('hidden')
containerEl.classList.add('public-web')
$.ajax({
type: 'post',
url: ' 自己或公司的url请求 ',
data: { url: window.location.href},
dataType: 'json',
success: function (data) {
console.log(data);
if (data.state) {
wx.config({
// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
// debug: true,
// 必填，公众号的唯一标识
appId: data.data.appId,
// 必填，生成签名的时间戳
timestamp: data.data.timestamp,
// 必填，生成签名的随机串
nonceStr: data.data.nonceStr,
// 必填，签名
signature: data.data.signature,
// 必填，需要使用的JS接口列表，且任意填写
jsApiList: ['scanQRCode'],
// 可选，需要使用的开放标签列表，wx-open-launch-weapp 指H5跳转小程序 wx-open-launch-app 指H5跳转app
openTagList: ["wx-open-launch-weapp"],
});
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
wx.ready(function () {
var btn = document.getElementById('launch-btn');
// launch 用户点击跳转按钮并对确认弹窗进行操作后触发
btn.addEventListener('launch', function (e) {
console.log(e,'success');
});
// error 用户点击跳转按钮后出现错误
btn.addEventListener('error', function (e) {
console.log(e.detail,'fail');
});
});
wx.error(function (res) {
console.log(res, 'error');
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
});
wx.error(function (res) {
console.log(res,'如签名过期导致验证失败');
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
}
}
})
} else {
console.log('非小程序端')
// 在 pc 上则给提示引导到手机端打开
var containerEl = document.getElementById('desktop-web-container')
containerEl.classList.remove('hidden')
containerEl.classList.add('desktop-web-container')
}
});
</script>
3、css 样式
<style>
body {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -100;
width: 100%;
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
-webkit-box-align: center;
align-items: center;
height: 100%;
}
.wrapper .logo {
padding-top: 147px;
}
.wrapper .logo img {
width: 64px;
height: 64px;
}
.wrapper .logo p {
font-size: 17px;
color: #242627;
margin: 10px 0 9px;
}
.icon-card {
color: rgba(0, 0, 0, 0.3);
font-size: 14px;
}
.icon-card {
display: flex;
align-items: center;
}
.icon-card img {
width: 16px;
height: 16px;
padding-right: 7px;
}
.desktop-web-container {
display: flex;
flex-direction: column;
align-items: center;
}
.desktop-web-container p {
position: absolute;
top: 40%;
}
.hidden {
display: none;
}
</style>
4、献上完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
<!-- H5内测工具 -->
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>
//初始化
let vConsole = new VConsole();
console.log('测试11');
</script>
</head>
<style>
body {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -100;
width: 100%;
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
-webkit-box-align: center;
align-items: center;
height: 100%;
}
.wrapper .logo {
padding-top: 147px;
}
.wrapper .logo img {
width: 64px;
height: 64px;
}
.wrapper .logo p {
font-size: 17px;
color: #242627;
margin: 10px 0 9px;
}
.icon-card {
color: rgba(0, 0, 0, 0.3);
font-size: 14px;
}
.icon-card {
display: flex;
align-items: center;
}
.icon-card img {
width: 16px;
height: 16px;
padding-right: 7px;
}
.desktop-web-container {
display: flex;
flex-direction: column;
align-items: center;
}
.desktop-web-container p {
position: absolute;
top: 40%;
}
.hidden {
display: none;
}
</style>
<body>
<!-- 第一部分代码 -->
<div id="public-web" class="wrapper hidden">
<div class="logo">
<p>旅行的足迹</p>
</div>
<div class="icon-card">
<span>小程序</span>
</div>
<!--
username为小程序的原始id
path对应的是小程序的链接地址 -->
<wx-open-launch-weapp
id="launch-btn"
username="gh_4bad38c1581f"
path="pages/home/home">
<!-- 这里的script 插槽模版及样式均需要通过<script type="text/wxtag-template"></script>进行包裹。 -->
<script type="text/wxtag-template">
<style type="text/css">
.btn-card { display: flex;
align-items: center; justify-content: center;
border-radius: 8px; background-color: #07c160;
padding: 12px 60px 12px 60px; margin-top: 66%;}
.btn-card p { color: #fff;font-size: 16px;margin: 0;}
.btn-card:hover {background-color: #08b65c;}
.btn-card:active {background-color: #03994c;}
</style>
<div class="btn-card"><p class="btn">打开小程序</p></div>
</script>
</wx-open-launch-weapp>
</div>
<div id="desktop-web-container" class="hidden">
<p >请在手机打开网页链接</p>
<p></p>
</div>
<!-- 为了直接拷贝代码能用这里用的是链接jq -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- 微信 jweixin-1.6.0.js -->
<script typet="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
$(function () {
// 方便快捷的判断一下端口（是否为小程序端）
const ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) != "micromessenger") {
console.log('微信端')
var containerEl = document.getElementById('public-web')
containerEl.classList.remove('hidden')
containerEl.classList.add('public-web')
$.ajax({
type: 'post',
url: ' 自己或公司的url请求 ',
data: { url: window.location.href},
dataType: 'json',
success: function (data) {
console.log(data);
if (data.state) {
wx.config({
// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
// debug: true,
// 必填，公众号的唯一标识
appId: data.data.appId,
// 必填，生成签名的时间戳
timestamp: data.data.timestamp,
// 必填，生成签名的随机串
nonceStr: data.data.nonceStr,
// 必填，签名
signature: data.data.signature,
// 必填，需要使用的JS接口列表，且任意填写
jsApiList: ['scanQRCode'],
// 可选，需要使用的开放标签列表，wx-open-launch-weapp 指H5跳转小程序 wx-open-launch-app 指H5跳转app
openTagList: ["wx-open-launch-weapp"],
});
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
wx.ready(function () {
var btn = document.getElementById('launch-btn');
// launch 用户点击跳转按钮并对确认弹窗进行操作后触发
btn.addEventListener('launch', function (e) {
console.log(e,'success');
});
// error 用户点击跳转按钮后出现错误
btn.addEventListener('error', function (e) {
console.log(e.detail,'fail');
});
});
wx.error(function (res) {
console.log(res, 'error');
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
});
wx.error(function (res) {
console.log(res,'如签名过期导致验证失败');
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
}
}
})
} else {
console.log('浏览器')
// 在 pc 上则给提示引导到手机端打开
var containerEl = document.getElementById('desktop-web-container')
containerEl.classList.remove('hidden')
containerEl.classList.add('desktop-web-container')
}
});
</script>
</body>
</html>
五、bug回馈
开启debug: true后会提示！
1、errMsg: “config:invalid signature” 签名错误，需后端提供接口处理！
2、为什么签名出成功后一直提示 errMsg: “invokeMiniProgramAPI:ok”
【a、检查代码抒写格式；b、检查wx-open-launch-weapp；c、wx.config和wx.ready执行顺序】
以上是我在做H5跳转小程序所踩过的坑，走过的路，望大家不要重复踩坑！
总结：
前端路上 | 所知甚少，唯善学。
各位小伙伴有什么疑问，欢迎留言探讨。
页:
[1]