微信小程序h5页面跳转小程序的超详细讲解

网友投稿 220 2023-11-09

−目录h5跳转小程序一、不用开放性标签（wx-open-launch-weapp）二、使用开放性标签总结

h5跳转小程序

实战项目从无到完整的h5跳转小程序经验，跳转方式分为云函数跳转和开放性标签跳转。

微信小程序h5页面跳转小程序的超详细讲解

开放性标签是针对微信里面浏览器使用的，而云函数跳转在外部以及微信里面都可以使用。

建议需要的同学先全部浏览一遍本文。内容较长较为啰嗦。

一、不用开放性标签（wx-open-launch-weapp）

官网链接：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html

官方网站写的是比较好的，但是还不够详细和许多坑点，下面是实例代码：

实例代码链接：https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<html>
<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">
<script>
window.onerror = e => {
console.error(e)
alert(发生错误 + e)
}
</script>
<!-- weui 样式 -->
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css" rel="external nofollow" ></link>
<!-- 调试用的移动端 console -->
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
<!-- 公众号 JSSDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 云开发 Web SDK -->
<script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>
<script>
function docReady(fn) {
if (document.readyState === complete || document.readyState === interactive) {
fn()
} else {
document.addEventListener(DOMContentLoaded, fn);
}
}
docReady(async function() {
var ua = navigator.userAgent.toLowerCase()
var isWXWork = ua.match(/wxwork/i) == wxwork
var isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == micromessenger
var isMobile = false
var isDesktop = false
if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
isMobile = true
} else {
isDesktop = true
}
console.warn(ua, ua)
console.warn(ua.match(/MicroMessenger/i) == micromessenger)
var m = ua.match(/MicroMessenger/i)
console.warn(m && m[0] === micromessenger)
if (isWeixin) {
var containerEl = document.getElementById(wechat-web-container)
containerEl.classList.remove(hidden)
containerEl.classList.add(full, wechat-web-container)
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)
})
wx.config({
// debug: true, // 调试时可开启
appId: wxe5f52902cf4de896,
timestamp: 0, // 必填，填任意数字即可
nonceStr: nonceStr, // 必填，填任意非空字符串即可
signature: signature, // 必填，填任意非空字符串即可
jsApiList: [chooseImage], // 安卓上必填一个，随机即可
openTagList:[wx-open-launch-weapp], // 填入打开小程序的开放标签名
})
} else if (isDesktop) {
// 在 pc 上则给提示引导到手机端打开
var containerEl = document.getElementById(desktop-web-container)
containerEl.classList.remove(hidden)
containerEl.classList.add(full, desktop-web-container)
} else {
var containerEl = document.getElementById(public-web-container)
containerEl.classList.remove(hidden)
containerEl.classList.add(full, public-web-container)
var c = new cloud.Cloud({
// 必填，表示是未登录模式
identityless: true,
// 资源方 AppID
resourceAppid: wxe5f52902cf4de896,
// 资源方环境 ID
resourceEnv: postpay-2g5hm2oxbbb721a4,
})
await c.init()
window.c = c
var buttonEl = document.getElementById(public-web-jump-button)
var buttonLoadingEl = document.getElementById(public-web-jump-button-loading)
try {
await openWeapp(() => {
buttonEl.classList.remove(weui-btn_loading)
buttonLoadingEl.classList.add(hidden)
})
} catch (e) {
buttonEl.classList.remove(weui-btn_loading)
buttonLoadingEl.classList.add(hidden)
throw e
}
}
})
async function openWeapp(onBeforeJump) {
var c = window.c
const res = await c.callFunction({
name: public,
data: {
action: getUrlScheme,
},
})
console.warn(res)
if (onBeforeJump) {
onBeforeJump()
}
location.href = res.result.openlink
}
</script>
<style>
.hidden {
display: none;
}
.full {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.public-web-container {
display: flex;
flex-direction: column;
align-items: center;
}
.public-web-container p {
position: absolute;
top: 40%;
}
.public-web-container a {
position: absolute;
bottom: 40%;
}
.wechat-web-container {
display: flex;
flex-direction: column;
align-items: center;
}
.wechat-web-container p {
position: absolute;
top: 40%;
}
.wechat-web-container wx-open-launch-weapp {
position: absolute;
bottom: 40%;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.desktop-web-container {
display: flex;
flex-direction: column;
align-items: center;
}
.desktop-web-container p {
position: absolute;
top: 40%;
}
</style>
</head>
<body>
<div class="page full">
<div id="public-web-container" class="hidden">
<p class="">正在打开 “小程序示例”...</p>
<a id="public-web-jump-button" href="javascript:" rel="external nofollow"  class="weui-btn weui-btn_primary weui-btn_loading" onclick="openWeapp()">
<span id="public-web-jump-button-loading" class="weui-primary-loading weui-primary-loading_transparent"><i class="weui-primary-loading__dot"></i></span>
打开小程序
</a>
</div>
<div id="wechat-web-container" class="hidden">
<p class="">点击以下按钮打开 “小程序示例”</p>
<!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
<wx-open-launch-weapp id="launch-btn" username="gh_d43f693ca31f" path="/page/component/index">
<template>
<button style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">打开小程序</button>
</template>
</wx-open-launch-weapp>
</div>
<div id="desktop-web-container" class="hidden">
<p class="">请在手机打开网页链接</p>
</div>
</div>
</body>
</html>

纯es5写的代码模块，可以改造成任意架构代码。下面讲一下怎么改成自己的项目里面以及坑点：

1、调试工具可以去掉：

2、Appid替换：怎么找到我们需要的id呢？替换位置都在哪呢？

1）登录微信公共平台

2）登录之后点击右上角头像的名字，基本设置里最下面，appid和原始id都在这里。

3）替换位置

?
1
2
3
4
5
6
7
8
9
10
// 这里是给开放性标签准备的，第一种方式暂时用不到
wx.config({
debug: true, // 调试时可开启
appId: 替换的位置,
timestamp: 0, // 必填，填任意数字即可
nonceStr: nonceStr, // 必填，填任意非空字符串即可
signature: signature, // 必填，填任意非空字符串即可
jsApiList: [chooseImage], // 安卓上必填一个，随机即可
openTagList:[wx-open-launch-weapp], // 填入打开小程序的开放标签名
})
?
1
2
3
4
5
<wx-open-launch-weapp id="launch-btn" username="原始id" path="跳转页面的路径">
<template>
<button style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">打开小程序</button>
</template>
</wx-open-launch-weapp>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
else {
var containerEl = document.getElementById(public-web-container)
containerEl.classList.remove(hidden)
containerEl.classList.add(full, public-web-container)
var c = new cloud.Cloud({
// 必填，表示是未登录模式
identityless: true,
// 资源方 AppID
resourceAppid: 替换位置,
// 资源方环境 ID
resourceEnv: 云函数id, // 这里下面会讲
})
await c.init()

4)修改逻辑

这里把判断固定写死false，就是想让网页一直走最后else的逻辑，以后想用开放性标签，就把这里还原即可。代码块放下面了。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
docReady(async function() {
var ua = navigator.userAgent.toLowerCase()
var isWXWork = ua.match(/wxwork/i) == wxwork
var isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == micromessenger
var isMobile = false
var isDesktop = false
if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
isMobile = true
} else {
isDesktop = true
}
console.warn(ua, ua)
console.warn(ua.match(/MicroMessenger/i) == micromessenger)
var m = ua.match(/MicroMessenger/i)
console.warn(m && m[0] === micromessenger)
if (false) {
var containerEl = document.getElementById(wechat-web-container)
containerEl.classList.remove(hidden)
containerEl.classList.add(full, wechat-web-container)

5）跳转函数改造

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
async function openWeapp(onBeforeJump) {
var c = window.c
const res = await c.callFunction({
name: test111, // 这里是创建云函数的云函数名称，下面文章有说道
data: {
action: getUrlScheme, // 这是云函数中函数名字
},
})
console.warn(res)
if (onBeforeJump) {
onBeforeJump()
}
location.href = res.result.openlink
}

3、云函数的构建：

1）我这是构建好的：上文替换栏里面最后一张图说的云函数ID就是图中红色勾选框

没构建好的可以去：https://jingyan.baidu.com/article/a3aad71ac25f86f0fb0096ee.html

按照图文一步一步走就行了，我这里就不写那么多了。

点击云函数，然后点击新构建函数：

云函数名称填写的时候要注意点，这个函数名test111就是我们要用到的云函数名称！

2）调用的时候这里日志会显示你在云函数里面写的打印console内容。

3）云函数权限，测试的时候建议修改为所有用户都可以访问！

4)创建的时候，并不是一定会创建云函数目录，这时候需要手动创建，首先在根目录下面创建一个你喜欢的文件名字，然后在project.config.json中添上你所创建的目录名字

右击这个目录的时候出现弹框这些选项，开发完毕后选择上传不上传node_modules选项就行了。（这是直接发到线上，只要线上代码不调用没啥影响，放心用）

在此目录下会出现test111文件夹，然后打开此文件夹，执行npm init，在package.json中写上：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"name": "test111",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"wx-server-sdk": "~2.3.2"
}
}

然后创建index.js文件，写入：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 云函数入口文件
const cloud = require(wx-server-sdk)
let page = false;
cloud.init();
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext();
console.log(---------------)
console.log(event)
var query = {}
if (event.query && event.query.page && event.query.page == showImage){
page = true;
query.id = event.query.id;
} else {
page = false;
}
switch (event.action) {
case getUrlScheme: { // 自定义函数名
return getUrlScheme(page,query)
}
}
return 没有找到对应的函数
}
async function getUrlScheme(flag,param) { // 自定义函数
console.log(-------getUrlScheme-----)
console.log(flag)
console.log(param)
param = param || {};
return cloud.openapi.urlscheme.generate({
jumpWxa: {
path: ,  // 跳转路径，一定是线上有的页面路径，否则会报错
query: `id=${param.id}`, // 注意传参格式，可以不传参
},
// 如果想不过期则置为 false，并可以存到数据库
isExpire: false,
// 一分钟有效期
expireTime: parseInt(Date.now() / 1000 + 60),
})
}

到此，云函数跳转，就结束了，有什么问题可以评论告诉我。

二、使用开放性标签

使用开性标签，把上面修改逻辑的代码还原。

然后就是几个问题：

一、域名的坑：

1、开发使用者必须是已认证的服-务-号（服务号可以置顶，订阅号不能），服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。

2、开发使用者必须是已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

3、必须部署到正式服务器，测试公众号不显示图标。

4、必须是在已认证的服务号中做JS接口安全域名验证，“JS接口安全域名”和“IP白名单”都要，IP是指获取微信签名的服务器的IP。

注意：1、2两个条件必须满足其中一个；3、4两个条件必须满足，否则标签中的按钮不会显示（微信文档不讲武德，写的不清楚，稍微不注意就会掉坑）。

官方文档入口：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

还有几点：

1、微信开发者工具，“verifyOpenTagList”:[]，是显示不了图标的。微信开发工具和真机测试结果可能不一样，一定要用真机测试。安卓和ios测试结果也可能不同，都要测试。

2、小程序的web-view不支持wx-open-launch-weapp。

3、jsApiList:[‘chooseImage’, ‘previewImage’]（必须有，不然安卓不显示）

4、微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上

原文链接：https://www.jb51.net/article/273996.htm

二：config配置坑：签名一定要找服务端要，生成规则让服务端自己看。

?
1
2
3
4
5
6
7
8
9
10
// 这里是给开放性标签准备的，第一种方式暂时用不到
wx.config({
debug: true, // 调试时可开启
appId: 替换的位置,
timestamp: 0, // 必填，填任意数字即可
nonceStr: nonceStr, // 必填，填任意非空字符串即可
signature: signature, // 必填，服务端生成的，不能任意
jsApiList: [chooseImage], // 安卓上必填一个，
openTagList:[wx-open-launch-weapp], // 填入打开小程序的开放标签名
})

ps：小程序测试的时候使用线上首页测试最佳~

总结

您可能感兴趣的文章:微信小程序与webview H5交互的方法(内嵌H5跳转原生页面)uniapp中微信小程序与H5相互跳转以及传参详解(webview)微信小程序web-view环境下H5跳转小程序页面方法实例代码微信小程序和H5页面间相互跳转代码实例微信小程序与h5的相互跳转场景分析

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 uniapp
上一篇:信创的操作系统有哪些
下一篇:券商app指南
相关文章

 发表评论

暂时没有评论，来抢沙发吧~