亚洲欧美另类精品二区,亚洲一区二区三区播放,亚洲精品色午夜无码专区日韩

現(xiàn)在小程序越來越普遍了，從H5網(wǎng)頁（要在微信瀏覽器下打開的）跳轉(zhuǎn)到相應(yīng)小程序的場景也越來越多。至此微信提供了相應(yīng)的微信開放標(biāo)簽讓網(wǎng)頁開發(fā)者可安全便捷地使用微信或系統(tǒng)的能力，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗。

需要注意的是，微信開放標(biāo)簽有最低的微信版本和最低的系統(tǒng)版本要求。

微信版本要求為：7.0.12及以上
系統(tǒng)版本要求為：iOS 10.3及以上、Android 5.0及以上

對于符合微信或系統(tǒng)最低版本要求但仍無法使用微信開放標(biāo)簽的場景，將會在下方使用步驟中的wx.config權(quán)限驗證成功后觸發(fā)WeixinOpenTagsError事件告知開發(fā)者。僅無法使用微信開發(fā)標(biāo)簽，JS-SDK其他功能不受影響?？赏ㄟ^如下方法監(jiān)聽并進(jìn)行回退兼容：

document.addEventListener('WeixinOpenTagsError', function (e) {
  console.error(e.detail.errMsg); // 無法使用開放標(biāo)簽的錯誤原因，需回退兼容。僅無法使用開放標(biāo)簽，JS-SDK其他功能不受影響
});

根據(jù)目前已知的錯誤場景，回退兼容建議如下：

iOS15底層 WebKit 接口發(fā)生變更，微信版本8.0.8以下（不包括8.0.8）無法使用開放標(biāo)簽，可引導(dǎo)用戶升級最新版本微信；
開放標(biāo)簽依賴Web Components方案，極少部分 Android 系統(tǒng)可能由于版本太低而不支持，可引導(dǎo)用戶升級系統(tǒng)固件。

H5網(wǎng)頁跳轉(zhuǎn)小程序有如下步驟：

1.在微信公眾號（已認(rèn)證的服務(wù)號）綁定“JS接口安全域名”

如果是公眾號身份的網(wǎng)頁，需要綁定安全域名。登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。

2.引入JS文件

在需要調(diào)用 JS 接口的頁面引入如下 JS 文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

如需進(jìn)一步提升服務(wù)穩(wěn)定性，當(dāng)上述資源不可訪問時，可改訪問：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

注意：js文件必須使用1.6.0版本以上

3.通過config接口注入權(quán)限驗證配置并申請所需開放標(biāo)簽

與使用 JS-SDK 配置方式相同，所有需要使用開放標(biāo)簽的頁面必須先注入配置信息，并通過openTagList字段申請所需要的開放標(biāo)簽，否則將無法使用（同一個 url 僅需調(diào)用一次）。開放標(biāo)簽的申請和 JS 接口的申請相互獨(dú)立，因此是可以同時申請的。

wx.config({
  debug: true, // ??開啟調(diào)試模式,調(diào)用的所有 api 的返回值會在客戶端 alert 出來，若要查看傳入的參數(shù)，可以在 pc 端打開，參數(shù)信息會通過 log 打出，僅在 pc 端時才會打印
  appId: '', // 必填，公眾號的唯一標(biāo)識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機(jī)串
  signature: '',// 必填，簽名
  jsApiList: [], // 必填，需要使用的 JS 接口列表
  openTagList: [] // 可選，需要使用的開放標(biāo)簽列表，例如['wx-open-launch-app']
});

4.通過ready接口處理成功驗證

wx.ready(function () {
  // config信息驗證后會執(zhí)行 ready 方法，所有接口調(diào)用都必須在 config 接口獲得結(jié)果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調(diào)用相關(guān)接口，則須把相關(guān)接口放在 ready 函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用，不需要放在 ready 函數(shù)中
});

5.通過error接口處理失敗驗證

wx.error(function (res) {
  // config信息驗證失敗會執(zhí)行 error 函數(shù)，如簽名過期導(dǎo)致驗證失敗，具體錯誤信息可以打開 config 的debug模式查看，也可以在返回的 res 參數(shù)中查看，對于 SPA 可以在這里更新簽名
});

使用說明

所使用的標(biāo)簽允許提供插槽，由于插槽中模版的樣式是和頁面隔離的，因此需要注意在插槽中定義模版的樣式。插槽模版及樣式均需要通過<script type="text/wxtag-template"></script>或<template></template>進(jìn)行包裹。另外，對于具名插槽還需要通過slot屬性聲明插槽名稱，下文標(biāo)簽插槽中的 default 插槽為默認(rèn)插槽，可不聲明插槽名稱。

對于標(biāo)簽事件，均可通過event.detail獲得詳細(xì)信息。如果無特殊說明，下文標(biāo)簽事件說明中的返回值均指代event.detail中的內(nèi)容。

另外，需要注意以下幾點：

頁面中與布局和定位相關(guān)的樣式，如position: fixed; top -100;等，盡量不要寫在插槽模版的節(jié)點中，請聲明在標(biāo)簽或其父節(jié)點上；
對于有 CSP 要求的頁面，需要添加白名單frame-src https://*.qq.com webcompt:，才能在頁面中正常使用開放標(biāo)簽。

開放對象

已認(rèn)證的服務(wù)號，服務(wù)號綁定“JS接口安全域名”下的網(wǎng)頁可使用此標(biāo)簽跳轉(zhuǎn)任意合法合規(guī)的小程序。
已認(rèn)證的非個人主體的小程序，使用小程序云開發(fā)的靜態(tài)網(wǎng)站托管綁定的域名下的網(wǎng)頁，可以使用此標(biāo)簽跳轉(zhuǎn)任意合法合規(guī)的小程序。

代碼

參考：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>H5跳轉(zhuǎn)小程序</title>
  <!-- weui 樣式 -->
  <link rel="stylesheet" >
  <!-- 頁面樣式 start -->
  <style>
    /* --------START reset.css------- */
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      background-color: #fff;
    }

    a {
      text-decoration: none;
    }

    a,
    button,
    input,
    span,
    div {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    li {
      list-style-type: none;
    }
    /* --------END reset.css------- */
?
    .hidden {
      display: none;
    }

    .full {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .public-web-container,
    .wechat-web-container,
    .wechat-web-container wx-open-launch-weapp,
    .desktop-web-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .public-web-container p,
    .wechat-web-container p,
    .desktop-web-container p {
      position: absolute;
      top: 40%;
    }

    .public-web-container a {
      position: absolute;
      bottom: 40%;
    }

    .wechat-web-container wx-open-launch-weapp {
      position: absolute;
      bottom: 40%;
      left: 0;
      right: 0;
    }

    .wechat-web-container .open-btn {
      display: block;
      margin: 0 auto;
      padding: 8px 24px;
      width: 200px;
      height: 45px;
      border: none;
      border-radius: 4px;
      background-color: #07c160;
      color: #fff;
      font-size: 18px;
      text-align: center;
    }
  </style>
  <!-- 頁面樣式 end -->
</head>

<body>
  <!-- 頁面容器 start -->
  <div id="h5OpenMiniprogram">
    <!-- <template> -->
    <!-- 頁面內(nèi)容 start -->
    <div class="page full">
      <!-- 移動端微信外部瀏覽器 -->
      <div id="public-web-container" class="hidden">
        <p>正在打開“小程序名字”</p>
        <a href="javascript:" id="public-web-jump-button" 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>

      <!-- 微信內(nèi)部瀏覽器 -->
      <div id="wechat-web-container" class="hidden">
        <p>點擊以下按鈕打開“小程序名字”</p>
        <!-- username：必填，所需跳轉(zhuǎn)的小程序原始id，即小程序?qū)?yīng)的以gh_開頭的id；path：非必填，所需跳轉(zhuǎn)的小程序內(nèi)頁面路徑及參數(shù)-->
        <wx-open-launch-weapp id="launch-btn" username="gh_XXX" path="/pages/XXX">
          <!-- 第一種 -->
          <template>
            <style>
              .open-btn {
                display: block;
                margin: 0 auto;
                padding: 8px 24px;
                width: 200px;
                height: 45px;
                border: none;
                border-radius: 4px;
                background-color: #07c160;
                color: #fff;
                font-size: 18px;
                text-align: center;
              }
            </style>
            <button class="open-btn">打開小程序</button>
          </template>
          <!-- 第二種 -->
          <!-- <script type="text/wxtag-template">
            <style>
              .open-btn {
                display: block;
                margin: 0 auto;
                padding: 8px 24px;
                width: 200px;
                height: 45px;
                border: none;
                border-radius: 4px;
                background-color: #07c160;
                color: #fff;
                font-size: 18px;
                text-align: center;
              }
            </style>
            <button class="open-btn">打開小程序</button>
          </script> -->
        </wx-open-launch-weapp>
      </div>

      <!-- 桌面端 -->
      <div id="desktop-web-container" class="hidden">
        <p>請在手機(jī)打開網(wǎng)頁鏈接</p>
      </div>
    </div>
    <!-- 頁面內(nèi)容 end -->
    <!-- </template> -->
  </div>
  <!-- 頁面容器 end -->

  <!-- 引入jQuery -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <!-- 調(diào)試用的移動端 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>
  <!-- 云開發(fā) Web SDK -->
  <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>

  <script>
    function docReady(fn) {
      document.addEventListener('WeixinOpenTagsError', function (e) {
        console.error(e.detail.errMsg); // 無法使用開放標(biāo)簽的錯誤原因，需回退兼容。僅無法使用開放標(biāo)簽，JS-SDK其他功能不受影響
      });
      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";
      console.log("isWeixin", isWeixin, isWXWork);
      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;
      }

      if (isWeixin) {
        var containerEl = document.getElementById("wechat-web-container");
        containerEl.classList.remove("hidden");
        containerEl.classList.add("full", "wechat-web-container");

        // 獲取簽名，timestamp、nonceStr、signature
        $.ajax({
          url: "請求地址",
          dataType: "json",
          success: function (res) {
            console.log("WeChatConfig", res);
            if (res.id === 1) {
              var data = res.items; // 根據(jù)實際情況返還的數(shù)據(jù)進(jìn)行賦值
              wx.config({
                // debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印
                appId: data.appId, // 必填，公眾號的唯一標(biāo)識
                timestamp: data.timestamp, // 必填，生成簽名的時間戳
                nonceStr: data.nonceStr, // 必填，生成簽名的隨機(jī)串
                signature: data.signature, // 必填，簽名
                jsApiList: ["chooseImage"], // 必填，需要使用的JS接口列表（此處隨意一個接口即可）
                openTagList: ["wx-open-launch-weapp"], // 可選，需要使用的開放標(biāo)簽列表，例如['wx-open-launch-app']
              });

              /**
               * config信息驗證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后。
               * config是一個客戶端的異步操作，所以如果需要在頁面加載時就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。
               * 對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中
               * */
              wx.ready(function (res2) {
                console.log("ready", res2);
                var launchBtn = document.getElementById("launch-btn");
                launchBtn.addEventListener("ready", function (e) {
                  console.log("開放標(biāo)簽 ready");
                });
                launchBtn.addEventListener("launch", function (e) {
                  console.log("開放標(biāo)簽 success");
                });
                launchBtn.addEventListener("error", function (e) {
                  console.log("開放標(biāo)簽 fail", e.detail);
                });
              });

              // config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名
              wx.error(function (err) {
                console.log("error", err);
              });
            }
          }
        })

        // var launchBtn = document.getElementById("launch-btn");
        // launchBtn.addEventListener("ready", function (e) {
        //   console.log("開放標(biāo)簽 ready");
        // });
        // launchBtn.addEventListener("launch", function (e) {
        //   console.log("開放標(biāo)簽 success");
        // });
        // launchBtn.addEventListener("error", function (e) {
        //   console.log("開放標(biāo)簽 fail", e.detail);
        // });

        // wx.config({
        //   // debug: true, // 調(diào)試時可開啟
        //   appId: "", // 小程序APPID
        //   timestamp: 0, // 必填，填任意數(shù)字即可
        //   nonceStr: "nonceStr", // 必填，填任意非空字符串即可
        //   signature: "signature", // 必填，填任意非空字符串即可
        //   jsApiList: ["chooseImage"], // 必填，隨意一個接口即可
        //   openTagList: ["wx-open-launch-weapp"], // 填入打開小程序的開放標(biāo)簽名
        // });
      } else if (isDesktop) {
        // 在 pc 上則給提示引導(dǎo)到手機(jī)端打開
        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");

        // 云函數(shù)
        // 因未開通云開發(fā)環(huán)境，此處不做處理
        // var c = new cloud.Cloud({
        //   identityless: true, // 必填，表示是未登錄模式
        //   resourceAppid: "小程序 AppID", // 資源方 AppID
        //   resourceEnv: '云開發(fā)環(huán)境 ID', // 資源方環(huán)境 ID
        // });
        // await c.init();
        // window.c = c;
        // 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_loadin");
        //     buttonLoadingEl.classList.add("hidden");
        //   })
        // } catch (error) {
        //   buttonEl.classList.remove("weui-btn_loadin");
        //   buttonLoadingEl.classList.add("hidden");
        //   throw error;
        // }
      }
    });

    async function openWeapp(onBeforeJump) {
      console.log("未開通云開發(fā)環(huán)境", onBeforeJump);
      // 因未開通云開發(fā)環(huán)境，此處不做處理
      // var c = window.c;
      // const res = await c.callFunction({
      //   name: "public",
      //   data: {
      //     action: "getUrlScheme",
      //   },
      // });
      // console.warn(res);
      // if (onBeforeJump) {
      //   onBeforeJump();
      // }
      // location.href = res.result.openlink;
    }
  </script>
</body>
</html>

錯誤提示

（1）沒有在“JS接口安全域名”設(shè)置

成功提示

（1）微信開發(fā)者工具

（2）真機(jī)：會有要打開小程序的名字

宅男在线永久免费观看网直播,亚洲欧洲日产国码无码久久99,野花社区在线观看视频,亚洲人交乣女bbw,一本一本久久a久久精品综合不卡

H5網(wǎng)頁跳轉(zhuǎn)小程序

開放對象