H5跳小程序

大致分为两种，

一种是在微信内打开，

一种则是浏览器或者短信等环境打开。

微信内

微信内的网页如需打开小程序使用微信开放标签 -小程序跳转按钮

使用

使用前提和jssdk一致

然后，需要注入权限验证配置并申请所需开放标签

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
    appId: '', // 必填，公众号的唯一标识
    timestamp: 0, // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [], // 必填，需要使用的JS接口列表
    openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
    appId: '', // 必填，公众号的唯一标识
    timestamp: 0, // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [], // 必填，需要使用的JS接口列表
    openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

最后使用开发标签

html

<wx-open-launch-weapp
    id="launch-btn"
    appid="wx12345678"
    path="pages/home/index?user=123&action=abc"
>
    <script type="text/wxtag-template">
        <style>.btn {
            padding: 12px
        }</style>
        <button class="btn">打开小程序</button>
    </script>
</wx-open-launch-weapp>
<script>
    var btn = document.getElementById('launch-btn');
    btn.addEventListener('launch', function (e) {
        console.log('success');
    });
    btn.addEventListener('error', function (e) {
        console.log('fail', e.detail);
    });
</script>

<wx-open-launch-weapp
    id="launch-btn"
    appid="wx12345678"
    path="pages/home/index?user=123&action=abc"
>
    <script type="text/wxtag-template">
        <style>.btn {
            padding: 12px
        }</style>
        <button class="btn">打开小程序</button>
    </script>
</wx-open-launch-weapp>
<script>
    var btn = document.getElementById('launch-btn');
    btn.addEventListener('launch', function (e) {
        console.log('success');
    });
    btn.addEventListener('error', function (e) {
        console.log('fail', e.detail);
    });
</script>

开放对象

已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

此时可以跳过绑定域名即可使用，并且 wx.config 不需要认证（不需计算签名），填入小程序 id 即可

wx.config({
    // debug: true, // 调试时可开启
    appId: '小程序 AppID', // <!-- replace -->
    timestamp: 0, // 必填，填任意数字即可
    nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
    signature: 'signature', // 必填，填任意非空字符串即可
    jsApiList: ['chooseImage'], // 必填，随意一个接口即可 
    openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
})

wx.config({
    // debug: true, // 调试时可开启
    appId: '小程序 AppID', // <!-- replace -->
    timestamp: 0, // 必填，填任意数字即可
    nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
    signature: 'signature', // 必填，填任意非空字符串即可
    jsApiList: ['chooseImage'], // 必填，随意一个接口即可 
    openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
})

浏览器环境

这个时候就得生成 URL Scheme 或者 URL Link ，来完成跳转

两个都有时效性，需要接口生成，所以需要服务端配合

URL Link 不可定制UI，URL Scheme 可以定制UI

URL Scheme

通过服务端接口可以获取打开小程序任意页面的 URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。

生成的 URL Scheme 如下所示：

weixin://dl/business/?t= *TICKET*

iOS系统支持识别 URL Scheme，可在短信等应用场景中直接通过Scheme跳转小程序。

注意： Android系统不支持直接识别 URL Scheme，用户无法通过 Scheme 正常打开小程序，开发者需要使用 H5 页面中转，再跳转到 Scheme 实现打开小程序，跳转代码示例如下：

location.href = 'weixin://dl/business/?t= *TICKET*'

该跳转方法可以在用户打开 H5 时立即调用，也可以在用户触发事件后调用。

所以，最好是写一个中转页面，然后在中转页面中跳转

URL Link

通过服务端接口可以获取打开小程序任意页面的 URL Link。适用于从短信、邮件、网页、微信内等场景打开小程序。

生成的 URL Link 如下所示：

https://wxaurl.cn/*TICKET* 或 https://wxmpurl.cn/*TICKET*

云开发静态网站

静态网站 H5 跳小程序

非个人主体并且已认证的(微信认证)小程序，使用云开发静态网站托管的网页，可以免鉴权跳转任意合法合规的小程序。

即可以在微信内部浏览器的 H5 跳转小程序，也可以在微信外部浏览器或其他部分 App （如企业微信、QQ 等）跳转微信小程序。

使用开放标签

静态网站网页在微信客户端打开时，wx.config 可以传入小程序 AppID 并且不需计算签名，也就是免鉴权即可使用跳转小程序的能力。

wx.config({
    // debug: true, // 调试时可开启
    appId: '小程序 AppID', // <!-- replace -->
    timestamp: 0, // 必填，填任意数字即可
    nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
    signature: 'signature', // 必填，填任意非空字符串即可
    jsApiList: ['chooseImage'], // 必填，随意一个接口即可 
    openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
})

wx.config({
    // debug: true, // 调试时可开启
    appId: '小程序 AppID', // <!-- replace -->
    timestamp: 0, // 必填，填任意数字即可
    nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
    signature: 'signature', // 必填，填任意非空字符串即可
    jsApiList: ['chooseImage'], // 必填，随意一个接口即可 
    openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
})

云函数生成 UrlScheme

此时，云函数无需鉴权（无需accessToken之类的步骤），可以直接生成 UrlScheme

完整案例

网页会判断所在的环境来决定采用哪种跳转方式，

如检测到微信客户端内，则免鉴权使用开放标签跳转，

如检测到在外部浏览器或 App，则使用 URL Scheme 跳转小程序。

需要将 replace 替换为自己的小程序及目标小程序数据

html


<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"></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
            }

            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: '小程序 AppID', // <!-- replace -->
                    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: '小程序 AppID', // <!-- replace -->
                    // 资源方环境 ID
                    resourceEnv: '云开发环境 ID', // <!-- replace -->
                })
                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> <!-- replace -->
        <a id="public-web-jump-button" href="javascript:" 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> <!-- replace -->
        <!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
        <wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID（gh_ 开头的）" path="要跳转到的页面路径"> <!-- replace -->
            <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>


<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"></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
            }

            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: '小程序 AppID', // <!-- replace -->
                    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: '小程序 AppID', // <!-- replace -->
                    // 资源方环境 ID
                    resourceEnv: '云开发环境 ID', // <!-- replace -->
                })
                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> <!-- replace -->
        <a id="public-web-jump-button" href="javascript:" 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> <!-- replace -->
        <!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
        <wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID（gh_ 开头的）" path="要跳转到的页面路径"> <!-- replace -->
            <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>

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
207
208

H5跳小程序 ​

微信内 ​

使用 ​

开放对象 ​

浏览器环境 ​

URL Scheme ​

URL Link ​

云开发静态网站 ​

使用开放标签 ​

云函数生成 UrlScheme ​

完整案例 ​