1. ホーム
  2. Web制作
  3. html5

html5ジャンプアプレット wx-open-launch-weappは落とし穴に踏み込んだ

2022-01-11 23:04:01

IOSのWeChatの最新バージョンは、不便にフローティングウィンドウ機能、小さなプログラムの背景無慈悲なユーザーのフィードバックをキャンセルしたため、現在の公共もフローティングウィンドウをサポートしているので、需要が出た、H5で小さなプログラムを開くためのキーをフローティングウィンドウ、H5は、WeChatが公共のWeb開発のためのオープンタブを持つことを学ぶためにドキュメントを読み、あなたはアプリや小さなプログラムを開くことができますが、プロセスはピットを登るために、次のレコードは多くのピットに発生しました。

1。通常の操作では、パブリックバックエンドバインドドメイン名
2. weixin.jsの導入 現在のバージョン1.6.0
3. wx.configを呼び出し、openTagListに使用するオープンタグを追加します。
次の落とし穴は、ドキュメント上の次のような使用例です。

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index.html?user=123&action=abc"
>
  <template>
<style>.btn { padding: 12px }</style>
<button class="btn">Open applet</button>
  </template>
</wx-open-launch-weapp>
<script> var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
console.log('success');
  });
  btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
  }); </script> 


vueで貼り付けがうまくいかず、トラブルシュートした結果、テンプレートタグの問題であることがわかった

<div class="center" style="width: 100%" ref="launchBtnHome">
      <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/index/index/index" ref=" ;launchBtn">
        <script type="text/wxtage-template">
          <style>
            .jump-btn {
              height: 44px;
              line-height: 44px;
              border: none;
              font-size: 16px;
              color: #ffffff;
              background-color: #f94048;
              text-align: center;
            }
          </style>
          <div class="jump-btn">Open applet</div>
        </script>
      </wx-open-launch-weapp>
    </div>


この基本的な機能は達成されますが、スタイルは、書かれたスタイルの多くは効果がない、最終的な解決策である、中央にすることはできません。スタイルを書き込むdivのオープンタグの外部セットには、オープンタグ自体もIDセレクタのスタイルを介して直接書き込むことができますので、開発は完了です、フォローアップ上司はアプレットを呼び出すために作成されたに直接クリックボタンをシミュレートしたい、私はフォーラムで解決策がないことがわかった取得を参照しようと、また解決されていないWeChatオープンコミュニティでぶら下がって、任意の良い方法を持っているなら一緒に解決するには以下で議論できる関連問題は、ある

また、WeChatオープンコミュニティの問題ハングアップのアドレスも添付します。 https://developers.weixin.qq.com/community/develop/doc/0004604a1d8df03099ba91c965b400

html5ジャンプアプレットwx-open-launch-weappステップピットについてのこの記事は、これに導入され、より関連するhtml5ジャンプアプレットのコンテンツは、スクリプトハウス以前の記事を検索したり、次の関連記事を閲覧し続け、あなたが将来的に多くのスクリプトハウスをサポートして願ってください!.