ミニ プログラムのようなサブスクリプション メッセージ ポップアップ ボックスを WeChat 公式アカウントに追加する必要があり、ユーザーは [許可] をクリックしてメッセージをユーザーにプッシュする必要があります。以下に示すように
WeChat 公式ドキュメント: wx-open-subscribe
公式の例は次のとおりです。
このコードは一目で理解できる<wx-open-subscribeが入っており、使い方も公式が大まかに説明しています。
問題が発生しました
私たちは独自のビジネスを統合し、wx ドキュメントに従ってボタンとスタイルをカスタマイズしました。その目的は、次のような効果を実現することです。「今すぐ購入する」をクリックすると、メッセージ購読ポップアップ ボックスが
表示されます。ただし、WeChat ドキュメントによると、結果は上の図のようになりません (フロントエンド フレームワーク)は freemark であり、Vue ではありません。インターネット上にたくさんあります。サンプルはすべて vue です）
スタイルは完全にめちゃくちゃですが、公式ドキュメントによると、コードを自己チェックしたところ、問題は見つかりませんでした。
まずはセルフチェック
<wx-open-subscribe template="DAIkcS0au7ryCPVFXg1-N6CbEz6c6eYNB4I8" id="subscribe-btn" >
<script type="text/wxtag-template" slot="style">
<style>
.paywraper{
line-height: 1.3rem;
padding-left: 0.3rem;
position:fixed;
bottom: 0;
left: 0;
text-align: center;
width: 100%;
box-shadow: 0 0 0.3rem 0 rgba(0,0,0,.1);
}
.bg-fff{
background-color: #fff;
}
.o-h{
overflow: hidden;
}
.f-l{
float: left;
}
.ppvalue{
}
.paybtn{
background-color: #36d5dd;
color: #fff;
width: 2.5rem;
height: 1.3rem;
line-height: 1.3rem;
}
.f-r{
float: right;
}
</style>
</script>
<script type="text/wxtag-template">
<div class="paywraper bg-fff o-h">
<div class='f-l'>总计: <span style="color: #ff7800;" id="payValue">￥11</span></div>
<div class='paybtn f-r' id="payBtn">立即购买</div>
</div>
</script>
</wx-open-subscribe>
公式の wx ドキュメントに次のような注記があることに今気づきましたか?
この状況はたまたまスタイルにも存在するため、これに基づいて次のように改善し、これらのレイアウトと位置関連のスタイルをラベルまたは親ノードに配置します。
<wx-open-subscribe template="DAIkcS0au7ryCPVFXg1-N6CbEz6c6eYNB4I8" id="subscribe-btn"
style="position:fixed; line-height: 1.3rem; bottom: 0; left: 0; text-align: center;
width: 100% ; box-shadow: 0 0 0.3rem 0 rgba(0,0,0,.1)">
<script type="text/wxtag-template" slot="style">
<style>
.subscribe-btn2 {
color: #ce3c39;
background-color: #07c160;
}
/*.paywraper{*/
/* line-height: 1.3rem !important;*/
/* padding-left: 0.3rem !important;*/
/* bottom: 0 !important;*/
/* left: 0 !important;*/
/* text-align: center !important;*/
/* width: 100% !important;*/
/* box-shadow: 0 0 0.3rem 0 rgba(0,0,0,.1) !important;*/
/*}*/
.bg-fff{
background-color: #fff !important;
}
.o-h{
overflow: hidden !important;
}
.f-l{
float: left !important;
}
.ppvalue{
color: #ff7800 !important;
}
.paybtn{
background-color: #36d5dd !important;
color: #fff !important;
width: 2.5rem !important;
height: 1.3rem !important;
line-height: 1.3rem !important;
}
.f-r{
float: right !important;
}
</style>
</script>
<script type="text/wxtag-template" >
<div class="paywraper bg-fff o-h">
<div class='f-l'>总计: <span style="color: #ff7800;" id="payValue">￥11</span></div>
<div class='paybtn f-r' id="payBtn">立即购买</div>
</div>
</script>
</wx-open-subscribe>
wx コミュニティの多くの投稿を読みましたが、どれも同じで、解決策は効果がありません。注意深く分析した結果、実際には理由は 3 つだけであることがわかりました。
1. wx タグが独自のスタイルを飲み込む
2. 一部のスタイルは wx タグと互換性がありません
3. wx タグを不適切に使用しているため、スタイルが正しくありません。
しかし、最初の点はすぐに削除されます。それが飲み込まれてしまうと、なぜ一部の CSS が OK になるのでしょうか。3 番目の点の問題点を探していて、多くの落とし穴にはまってしまいました。2 番目の点の非互換性については、どのスタイルが互換性がありませんか?
後でそれがレムの問題だったことが分かりました
rem はルート要素（html）のフォントサイズを表す相対単位です。CSS では、rem を使用して要素のフォント サイズ、幅、高さ、その他の属性を設定し、ルート要素のフォント サイズを基準にして拡大縮小することができます。
これは wx タグでは無効であるため、絶対ピクセルの高さと幅に変更する必要があります。これで問題は完全に解決されます。
<wx-open-subscribe
template="DAIkcS0au7ryCPVFXg1-N6CbEz6c6eYNB4I8"
id="subscribe-btn"
class="paywraper bg-fff o-h"
style="line-height: 1.3rem; padding-left: 0.3rem; position: fixed; bottom: 0; left: 0; text-align: center;
width: 100%; box-shadow: 0 0 0.3rem 0 rgba(0,0,0,.1); background-color: #fff; overflow: hidden;">
<#--<span class="ppvalue" id="payValue">￥11</span>-->
<script type="text/wxtag-template" slot="style">
<style>
.f-l{
float: left;
text-size: 16px ;
text-align: center ;
line-height: 69px ;
}
.ppvalue{
color: #ff7800 ;
text-size: 16px ;
}
.paybtn{
background-color: #36d5dd ;
color: #fff ;
width: 133px ;
height: 69px ;
line-height: 69px ;
}
.f-r{
float: right ;
text-size: 16px ;
text-align: center ;
}
</style>
</script>
<script type="text/wxtag-template" id="payTemplate">
<div class="paywraper" id="test2">
<div class='f-l'>总计: <span class="ppvalue" id="payValue"></span></div>
<div class='paybtn f-r' id="payBtn">立即购买</div>
</div>
</script>
</wx-open-subscribe>
コードに合計や金額などの動的な割り当てが入っているので、ここで展開してみますが、wx-open-subscribeタグを追加したため、jsでは内部のidクラスなどが取得できなくなりました。
通常は以下のコードを使用できます
$("#payValue").text(11)
しかし、これは機能しないので、解決策は何でしょうか。次のコードの原則は、タグの下の HTML を取得し、それを解析して 2 回目に割り当てることです。
var templateContent = document.getElementById("payTemplate").textContent;
var parser = new DOMParser();
var doc = parser.parseFromString(templateContent, 'text/html');
var payValueElement = doc.getElementById("payValue");
payValueElement.textContent = 11;
document.getElementById("payTemplate").textContent = doc.body.innerHTML;
OK、私は穴を通り抜けました、それがあなたを助けることを願っています。