簡訊連結跳轉微信小程式

阿新 • • 發佈：2022-05-31

1.用到的技術 URL Scheme

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

2.前端做一箇中轉頁面請求後端介面返回的地址

<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.手機瀏覽器注意不要設定為電腦模式，不然跳轉不了的