1. 首页
  2. 前端

H5网页跳转微信小程序-nodeJs

iweb • 2021年5月9日 pm10:33 • 前端 • 阅读 185

注

微信中打开网页，可跳转微信小程序操作。

前期准备

  1. 目前仅支持在微信内打开H5页面；
  2. 已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序；
  3. 已认证的非个人主体的小程序，使用小程序云开发的静态网页托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

绑定安全域名：

登录微信公众平台进入【公众号设置】–>【功能设置】里设置好 “js接口安全域名”。

IP白名单设置：

登录微信公众平台进入【开发】–>【基本配置】，这里填写你服务器的IP。

前端代码

JavaScript
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
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
        <script type="text/javascript" src="https://www.bestcyt.com/cyttest/sha.js"></script>
        <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <style>
            #app {
                width: 300px;
                height: 18.75rem;
                border: 2px solid red;
            }
 
            #launch-btn {
                z-index: 10;
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                background: transparent;
                border: 2px solid blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
 
            <wx-open-launch-weapp id="launch-btn" username="gh_c104b771629e" :path="pages/index/index.html">
                <template>
                    <style>
                        .btn {
                            padding: 12px;
                            width: 100px;
                            height: 100px;
                        }
                    </style>
                    <div style="text-align: center;align-items: center;margin: 8rem">
                        <button class="btn">打开小程序</button>
                    </div>
                </template>
            </wx-open-launch-weapp>
        </div>
        <script type="text/javascript">
            let href = location.href.split('#')[0];
            // href = encodeURIComponent(href.split('?')[0])
            
 
            // 随机字符串方法
            function randomString() {
                let len = 16;
                let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
                let maxPos = chars.length;
                let character = '';
                for (let i = 0; i < len; i++) {
                    character += chars.charAt(Math.floor(Math.random() * maxPos))
                }
                return character;
            }
 
            let timestamp = '';    // 时间戳
            
            $.ajax({
                url: "https://www.xxxxxxxt.com/api/user/wxLoginFWH",
                type: "get",
                dataType: "json",
                success: function(data) {
                    console.log('返回数据1---token---', data)
                    if (data.code === 200) {
 
                        let token = {
                            access_token: data.data.access_token
                        }
 
                        $.ajax({
                            url: "https://www.xxxxxx.com/api/user/wxTicket",
                            type: "post",
                            data: token,
                            dataType: "json",
                            success: function(dataToken) {
                                if (dataToken.code === 200) {
                                    timestamp = Math.round(new Date() / 1000);
                                    let noncestr = randomString();
                                    let ticket = dataToken.data.ticket;
 
                                    let signature =
                                        `jsapi_ticket=${ticket}&noncestr=${noncestr}&timestamp=${timestamp}&url=${href}`;
                                    
 
                                    wx.config({
                                        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                                        appId: 'wx287004cb8ad1a4f6', // 必填，公众号的唯一标识
                                        timestamp, // 必填，生成签名的时间戳
                                        nonceStr: noncestr, // 必填，生成签名的随机串
                                        signature: hex_sha1(signature),// 必填，签名
                                        jsApiList: ['onMenuShareTimeline', 'scanQRCode','chooseImage', 'previewImage','openLocation'],// 必填，需要使用的JS接口列表,
                                        openTagList: ['wx-open-launch-weapp','wx-open-launch-app']
                                    });
 
 
                                    wx.ready(function() {
                                        // alert('接口配置成功');
 
                                        $(".btn").trigger("click")
                                        $("#launch-btn").trigger("click")
                                        
                                    });
                                    var btn = document.getElementById('launch-btn');
                                    btn.addEventListener('launch', function(e) {
 
                                        alert('添加事件success');
                                    });
                                    btn.addEventListener('error', function(e) {
                                        console.log('fail', e.detail);
                                    });
 
                                    $(".btn").trigger("click")
                                    
                                    $("#btn").trigger("click")
 
 
                                }
 
                            }
                        })
                    }
 
                }
            })
        </script>
 
    </body>
</html>

nodejs接口代码

 

赞 (1)
iweb iweb
0
前端文件上传到阿里云OSS存储
« 上一篇 2021年4月18日 pm2:44

相关推荐

联系我们

咨    询：点击这里给我发消息

邮    箱：cyt_web@163.com

小程序：AI前端