H5跳轉(zhuǎn)微信小程序

這問題，很多情況，分幾類:

一、微信內(nèi)嵌H5跳轉(zhuǎn)內(nèi)部微信小程序頁

1. 小程序頁內(nèi)
<!--pages/webview/webview.wxml-->
<web-view src="https://abc.com/#/home"></web-view>

Tips:

  • 微信頁面 webview 組件
  • 個人小程序不支持
  • abc.com 域名要加到小程序合法域名中
  • 微信開發(fā)者工具中測試時，勾選不校驗域名~
2. H5項目中引入SDK
// 引入微信SDK
http://res.wx.qq.com/open/js/jweixin-1.6.0.js
// 或https
https://res.wx.qq.com/open/js/jweixin-1.6.0.js
// console.log(window.wx)
3. 跳轉(zhuǎn)
  • tabbar頁面
wx.miniProgram.switchTab({
   url: '/pages/index/index'
})
  • 非tabbar頁面
wx.miniProgram.navigateTo({
   url: '/pages/activity/index'
})

Tips:

  • 給一個按鈕來觸發(fā)，需要用戶主動觸發(fā)才行
  • 小程序路徑最前面別忘了是 /

二、微信內(nèi)嵌H5跳轉(zhuǎn)外部微信小程序頁

  • 第一種即微信小程序中創(chuàng)建一中間頁，背景加按鈕，用戶再點一下，跳轉(zhuǎn)其他小程序頁。
  • 由于上述方案多了中間頁，需要用戶再點一次，轉(zhuǎn)化率和用戶體驗都不如原生小程序頁，如果頁面上內(nèi)容不多，可以考慮直接用小程序頁開發(fā)。
  • 那如果小程序不是你負責的內(nèi)容，你只有H5 權限，那還可以試試下面的方案
(1) 開放標簽wx-open-launch-weapp
  • 引入微信SDK，綁定安全域名，看完 上面內(nèi)容一 應該已經(jīng)做好
  • 解除頁面上對陌生標簽的警告(讓頁面開發(fā)心情愉悅)

1、vue2中

Vue.config.ignoredElements = ['wx-open-launch-weapp'];

2、vue3中，有vue.config.js 的 非vite 項目

module.exports = {
  //...其他配置
  chainWebpack: config => {
    config.module
    .rule('vue')
    .use('vue-loader')
    .tap(options => {
      options.compilerOptions = {
        isCustomElement: tag => tag.startsWith('wx-')
      }
      return options
    })
  }
}

3、vue3中，有 vite.config.js 的 vite 項目

export default defineConfig({
  root: process.cwd(),
  base: './', // 如果是根目錄部署請配置為 /  isProduction ? "./" : "/"
  // mode: process.env.NODE_ENV,
  publicDir: 'public',
  plugins: [
    vue({
      template: {
        // 添加以下內(nèi)容
        compilerOptions: {
          isCustomElement: tag => tag.startsWith('wx-') // 微信相關標簽不要警告
        }
      }
    })
  ],
})

4、讓后臺配合給一個接口，獲取微信的config參數(shù)
比如node 后臺 可參照 node 獲取微信簽名并使用jssdk
其它語言的隨便搜搜都有~
Tips

  • 上述步驟會需要企業(yè)小程序的appId 和appSecret，而不是對方的這些信息，提供你外跳的能力，此外成事后，開放的api 你都可以調(diào)用，比如分享
getWxConfig({
    wxMiniId: 'gh_xxxxxx', // gh開頭的原始id，并非appId
    signUrl: window.location.href
}).then(res => {
    const data = res.data.data
    wx.config({
        debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來
        appId: data.appId, // 必填，公眾號的唯一標識
        timestamp: data.timestamp, // 必填，生成簽名的時間戳
        nonceStr: data.nonceStr, // 必填，生成簽名的隨機串
        signature: data.signature, // 必填，簽名
        jsApiList: ['updateTimelineShareData'], // 必填，按需寫
        openTagList: ['wx-open-launch-weapp'] // 可選，需使用開放標簽，如['wx-open-launch-app']
    })
})

5、使用開放標簽
vue2 中

<div style="position: relative; width: 100%; height: 300px">
<img src="http://pic5.40017.cn/i/ori/ed500-18AAgY6YGhW.jpg"/>
   <wx-open-launch-weapp 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" 
    username="gh_72a4eb2d4324" path="sub_inner_pages/r2x/pages/task- 
    home/task-home.html">
     <script type="text/wxtag-template"> <div style="position: absolute; top: 0; left: 
    0; width: 100%; height: 100%; opacity: 0">
     </div></script>
   </wx-open-launch-weapp>
</div>

vue3 中

<!-- 跳轉(zhuǎn)小程序的開放標簽 文檔 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
<!-- vue3中使用微信開放標簽 文檔  https://blog.csdn.net/qq_26834399/article/details/119544394 -->

<div style="position: relative; width: 100%; height: 300px">
<img src="http://pic5.40017.cn/i/ori/ed500-18AAgY6YGhW.jpg"/>
            <wx-open-launch-weapp
              id="launch-btn"
              username="gh_72a4eb2d4324"
              path="sub_inner_pages/r2x/pages/task-home/task-home.html"
              style="
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
              "
            >
              <div v-is="'script'" type="text/wxtag-template">
                 <div style="width: 100%; color: orangered; text-align: center">
                   跳轉(zhuǎn)外部小程序
                 </div>
              </div>
            </wx-open-launch-weapp>
</div>

Tips

  • 一般思路就是把標簽定位在元素上方，用戶點擊后跳走，里面不加任何東西，當然也可以定位個按鈕在原來的圖片上等，自由發(fā)揮即可~

三、短信跳轉(zhuǎn)微信小程序頁

由于短信引流成本低，很多公司都使用這樣的方式去吸引流量，核心是獲取URL Scheme
可查閱微信官方文檔
太長不想看?
核心幾點如下:

  • 自2022年04月11日起，URL Scheme\color{orangered}{有效期最長 30 天，不再支持永久有效}
  • iOS系統(tǒng)支持識別 URL Scheme，短信等應用場景中可直接使用，安卓需要h5中間頁。
    h5中間頁?? 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>過渡h5頁面</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
</style>
<body>
</body>
<script type="text/javascript" async defer>
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) { return pair[1]; }
    }
    return (false);
  }
  // console.log(getQueryVariable('type'))
  // type 為 0就是A中轉(zhuǎn)頁 1就是B中轉(zhuǎn)頁
  var currentType = getQueryVariable('type') || 0
  currentType = Number(currentType)
  var smallRoutineUrl = ['weixin://dl/business/?t=ikYzkt4gxCm', 'weixin://dl/business/?t= *TICKET*'][currentType]
  window.location.href = smallRoutineUrl
</script>
</html>

Tips
如果你這個模板只服務一個短信鏈接，完全可以寫死跳轉(zhuǎn)的url，但是你想搞成通用的，可以像我上面這樣封裝下，根據(jù)類型去不同的小程序。然后URL Scheme也可以向后臺實時獲取新的，確保這個中間頁的鏈接是有效的。

  • 獲取URL Scheme的方法較繁瑣，我們可以通過服務端接口或在小程序管理后臺「工具」-「生成 URL Scheme」入口可以獲取打開小程序任意頁面的 URL Scheme
  • 只能生成已發(fā)布的小程序的 URL Scheme

由于不再支持永久有效，IOS也走中間頁，在中間頁動態(tài)獲取有效的URL Scheme實現(xiàn)跳轉(zhuǎn)

缺點:
這樣后臺要開發(fā)接口配合你來獲取該鏈接，且你的h5地址如果很長，最好能生成短鏈，這樣放在短信中不至于太長。

四、云開發(fā)靜態(tài)網(wǎng)站跳轉(zhuǎn)小程序

無公眾號直接使用小程序身份開發(fā)網(wǎng)頁并免鑒權跳轉(zhuǎn)小程序?可以嗎?
可以參考 官方文檔

希望多多鼓勵，我會繼續(xù)出一些實用的編碼經(jīng)驗和技巧分享給大家，需要前端技術資料可以關注下 Famous 看世界 ~
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容