短信链接跳转微信小程序

1.用到的技术    URL Scheme

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html

2.前端做一个中转页面 请求后端接口返回的地址

 

 

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
<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">
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css"></link>
 
 
    <script>
      function docReady(fn) {
        if (document.readyState === 'complete' || document.readyState === 'interactive') {
          fn()
        } else {
          document.addEventListener('DOMContentLoaded', fn);
        }
      }
      function openWeapp(){
        var xhr = null;
        try{
            xhr = new XMLHttpRequest();
        }catch(error){
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2、调用open -test
        xhr.open("get", "https://lyl.xxxx.com/api/oauth/wechat/noToken/generateScheme", true);
        //3、调用send
        xhr.send();
        //4、等待数据响应
        xhr.onreadystatechange = function(){
          buttonLoadingEl&&buttonLoadingEl.classList.remove('weui-primary-loading')
            if(xhr.readyState == 4){
                //判断本次下载的状态码都是多少
                if(xhr.status == 200){
                  const res = JSON.parse(xhr.responseText)
                  if(res.code == 0){
                    window.location = res.data;
                  }else{
                    alert(res.errorMsg);
                  }
                }else{
                    alert("Error:" + xhr.status);
                }
            }
        }
      }
 
      var button
      var buttonLoadingEl
      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
        }
      docReady(function(){
        buttonLoadingEl = document.getElementById('public-web-jump-button-loading')
        button = document.getElementById('public-web-jump-button')
 
        if(isDesktop){
          var containerEl = document.getElementById('desktop-web-container')
          containerEl.classList.remove('hidden')
          containerEl.classList.add('full', 'desktop-web-container')
        }else{
          openWeapp()
          document.getElementById('public-web-container').classList.remove('hidden')
        }
        button.onclick = function(){
          // button.remove('weui-btn_loading')
          buttonLoadingEl.classList.add('weui-primary-loading')
          openWeapp()
        }
      })
    </script>
    <style>
      .hidden {
        display: none !important;
      }
 
      .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="full public-web-container 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_transparent"><i class="weui-primary-loading__dot"></i></span>
          打开小程序
        </a>
      </div>
      <div id="desktop-web-container" class="hidden">
        <p class="">请在手机打开网页链接</p>
      </div>
    </div>
  </body>
</html>

  

3.手机浏览器注意不要设置为电脑模式,不然跳转不了的

posted @   福超  阅读(528)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示