数日前、仕事で問題が発生しました。要件は、HTTP プロトコルの H5 ページからアプレットに直接ジャンプすることでした。アプレットはすべて HTTPS に関連していたため、ジャンプできませんでした。最終的に、私たちの解決策はHTTPS プロトコルを作成するための中間ページで、指定されたアプレットにジャンプします。ここでは、wx-open-launch-weapp タグが必要で、その中にボタンを配置し、指定されたアプレットに簡単にジャンプできる関連設定を実行します。実装コードの HTML 部分は次のとおりです。
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxxxxx"
path="pages/index/index.html">
<template>
<div> <button class="wx-btn">跳转小程序</button> </div>
</template>
</wx-open-launch-weapp>
コードのJS部分は次のとおりです
window.onload=function () {
initWeixin(function(){
console.log("666")
});
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
};
ここでは、デフォルト スタイルのボタンを取得しますが、これは非常に見苦しいです。実際のプロジェクトにはデフォルト スタイルのボタンは配置しません。参考までに設計図を示します。そのため、デフォルトのスタイルを変更する必要があります。ボタンのスタイルを変更してみました インポートしたCSSコードとJSコードのスタイルを変更してみました 理由は、wx-open-launch-weappのボタンがテンプレート転送後に自動的に外側に表示されるためです 余分なdivが追加されました、この div のスタイルは調整できず、コンテンツによってのみサポートされるため、インライン スタイルを使用して、wx-open-launch-weapp のフレックス レイアウトを使用してコンテンツを内部の中央に配置し、インライン スタイルを使用してボタンのスタイルを調整して効果を実現するには、HTML コードは次のとおりです。
<div id="jump_tab">
<span class="jump_btn" id="btn1">
<!-- 这里填写小程序的原始ID -->
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxxxxx"
path="/pages/index/page1.html"
style="display: flex;width:100%;height:100%;
justify-content: center;align-items: center;">
<template>
<button
style="width: 100%;height: 100%;color:#ff974f;
background-color: rgba(0,0,0,0);
border: none;font-size: 18px"
class="btn">装修设计
</button>
</template>
</wx-open-launch-weapp>
</span>
<span class="jump_btn" id="btn2">
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxxxxx"
path="/pages/index/page2.html"
style="display: flex;width:100%;height:100%;
justify-content: center;align-items: center;">
<template>
<button
style="width: 100%;height: 100%;color:#ff974f;
background-color: rgba(0,0,0,0);
border: none;font-size:18px"
class="btn">建材家居
</button>
</template>
</wx-open-launch-weapp>
</span>
</div>
対応する図は次の図に示すとおりです
. このようにして、H5 ジャンプ アプレットとボタン スタイルの問題は解決されます. ここにはまだ小さな問題があります. ボタン内のテキスト サイズは rem で書くことはできませんが、rem でのみ記述することができますより完璧な解決策を見つけた場合は、修正してください。
新人さんの最初の投稿に「いいね！」をお願いします、ありがとうございます〜