Site icon 时鹏亮的Blog

微信小程序二维码关注外部公众号示例

小程序如果和公众号非同一主体,也非同一关联主体,是没办法用官方优雅姿势直接引导用户到公众号的。

那么就需要搞个图片形式的二维码让用户长按关注了。问了下GPT,得到的答案整理如下:

index.wxml

<view class="container">
<button bindtap="showQRCode">关注公众号</button>

<view wx:if="{{showModal}}" class="modal">
<view class="modal-content">
<image class="qr-code" src="/assets/qrcode.jpg" mode="aspectFit" show-menu-by-longpress="{{true}}" />
<button bindtap="hideQRCode">关闭</button>
</view>
</view>
</view>

index.wxss

.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}

.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}

.modal-content {
background: white;
padding: 20px;
border-radius: 10px;
text-align: center;
}

.qr-code {
width: 200px;
height: 200px;
margin-bottom: 20px;
}

index.js

Page({
data: {
showModal: false,
},

showQRCode() {
this.setData({
showModal: true,
});
},

hideQRCode() {
this.setData({
showModal: false,
});
});
},
});

注意,qrcode.jpg的存放位置。

之后展示的二维码长按即可显示关注公众号的相关菜单了。


如您从本文得到了有价值的信息或帮助,请考虑扫描文末二维码捐赠和鼓励。

尊重他人劳动成果。转载请务必附上原文链接,我将感激不尽。


与《微信小程序二维码关注外部公众号示例》相关的博文:

Exit mobile version