There is a need to add a subscription message pop-up box similar to a mini program to the WeChat official account. The user needs to click Allow to push messages to the user. As shown below
WeChat official documentation: wx-open-subscribe
The official example is as follows:
This code can be understood at a glance. <wx-open-subscribe is included, and the instructions for use are also roughly explained by the official.
There was a problem
We integrated our own business, customized buttons and styles according to the wx documentation. The purpose is to achieve the following effect. Click to buy now, and the message subscription pop-up box
will pop up. However, according to the WeChat document, the result is not as shown in the picture above (our front-end framework is freemarker, not vue, many on the Internet The examples are all vue)
The styles are completely messed up, but according to the official documentation, I also self-checked the code and found no problems.
First self-check
<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>
Did you notice just now that there is a note in the official wx documentation:
This situation happens to exist in our styles, so based on this we improve as follows, placing these layout and positioning-related styles in the label or on the parent node:
<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>
The result still doesn't work. I read a lot of posts in the wx community and they are all the same and the solutions are ineffective. After careful analysis, there are actually only three reasons:
1. The wx tag swallows up its own style
2. Some styles are incompatible with wx tags
3. We use the wx tag inappropriately, resulting in incorrect styles.
But the first point is quickly eliminated, because if it is swallowed, then why is some css OK? I have been looking for problems in the third point, and I have been stuck in a lot of pitfalls. Regarding the incompatibility in the second point, which styles are incompatible?
Later I found out it was a problem with rem.
rem is a relative unit that represents the font size of the root element (html). In CSS, we can use rem to set the font size, width, height and other attributes of the element so that it scales relative to the font size of the root element.
It is invalid in the wx tag, so we have to change it to the absolute pixel height and width, which perfectly solves the problem.
<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>
Let’s expand here, because now my code has dynamic assignments, that is, totals and amounts. However, due to the addition of the wx-open-subscribe tag, the internal id class, etc. cannot be obtained in js.
Normally we can use the code below
$("#payValue").text(11)
But this doesn’t work, so what is the solution: The following code, the principle is to get the html under the tag and then parse it and assign it a second time.
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, I’ve gone through the pit, I hope it helps you.