Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
T treasure
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 12
    • Issues 12
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Packages & Registries
    • Packages & Registries
    • Container Registry
  • Analytics
    • Analytics
    • CI/CD
    • Repository
    • Value Stream
  • Wiki
    • Wiki
  • External wiki
    • External wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • FE
  • treasure
  • Issues
  • #35

Closed
Open
Created Jun 25, 2021 by xingkai@kevin

短信跳转到小程序

短信跳转到小程序,实际上是网页跳转到小程序,发短信的时候内容带有链接,这个链接最好是短链接。 打开链接场景有三种情况:

  1. pc情况下,提示请用手机打开此链接;
  2. 非微信情况下打开,实际上采取了重定向,小程序要生成对应的Scheme,页面location.href = Scheme;
  3. 微信情况下打开,有两种方式,一种是采取跟非微信情况一样,另外一种采用h5的wx-open-launch-weapp标签。不同点是,方式1,如果在微信情况下打开会有一个弹出框二次确认,方法二点击跳转会直接跳往对应的小程序。

生成scheme注意事项:

  1. 单个小程序每日生成 Scheme 上限为50万个(包含短期有效 Scheme 与长期有效 Scheme)
  2. 有效时间超过31天的 Scheme 或永久有效的 Scheme 为长期有效Scheme,单个小程序总共可生成长期有效 Scheme 上限为10万个,请谨慎调用
  3. 有效时间不超过31天的 Scheme 为短期有效Scheme,单个小程序生成短期有效 Scheme 不设上限

中间跳转的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>
    
    <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: 'wxd31a445fdccea02f', 
        //     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 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) {
        let scheme = "weixin://dl/business/?t=nMNVmu85Xfb"
        if (onBeforeJump) {
          onBeforeJump()
        }
        location.href = scheme;
      }
    </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:" 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_0ad04263aed0" path="/subPackages/home/detail?id=">
          <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>

资料:

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

https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html

演示:

https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html

Edited Oct 30, 2021 by xingkai
Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking