字多 耐心 看完 别慌张 仔细仔细看
经过N久得爬坑,终于做出来了,废话不多说,直接上代码,样例为uniapp vue 同理,直接新建一个文件打开即可 ,同时把所有得wx. 换成uni.;
效果:
有人会问你这一看就是小程序啊,非也非也,我写得是uni,但是呢,是从小程序逆转过来实现得,也支持微信得写法;
前提:
1.模板id必须有,没有跟运维要跟后端要; 即代码中得‘ templateIds’
2.如果出现点击不好使得问题 确保id是初始化就加载,隐藏起来不好使,别问为什么,就是那么回事
3.如果电脑上报错
addEventListener is undefined 啊 啥的暴多,就是id 没有加载出来的问题;
4.保持必须在线上环境测试,硬性要求
5.如果本地微信开发者工具出现甜甜甜,不要慌张,那是系统默认给的,手机上是正常的;
6.点击事件 用的是原生的vue 的点击事件;
7.有人会问,为什么不用vue的success和error方法呀,因为我没调通,不会用,所以就用了原生的点击事件了;
8.如果解决了,可以告知我哈
!!!上代码
<template>
<view>
<view class="subscribe">
<template type="text/wxtag-template">
<view class="subscribe-icon">
<image class="subscribe-icon-one" src="/static/static/img/finger_00.png"></image>
<image class="subscribe-icon-two" src="/static/static/img/finger_01.png"></image>
</view>
<view class="subscribe-cont">
<wx-open-subscribe :template="templateIds[0]" id="subscribe-btn" ref="subscribeBtn">
<script type="text/wxtag-template" slot="style">
<style>
.subscribe-txt{
color: #89663f;
font-weight: bold;
-webkit-animation: subscribeCont 1s linear infinite;
animation: subscribeCont 1s linear infinite;
display: inline-block;
height: 40px;
width: 160px;
text-align: center;
line-height: 40px;
}
@keyframes subscribeCont {
25% {
transform: scale(.98);
}
50%,
100% {
transform: scale(1);
}
75% {
transform: scale(1.05);
}
}
</style>
</script>
<script type="text/wxtag-template">
<view class="subscribe-txt">点击消息提醒</view>
</script>
</wx-open-subscribe>
</view>
</template>
</view>
</view>
</template>
<script>
const jweixin = require('jweixin-module');
export default {
data() {
return {
templateIds: ['R9LbtDjg9sC-o3xUS2kDcSQ9MS4I67LnacAS8Fsmxp0']
}
},
onReady() {
this.getInfo()
},
methods: {
getInfo() {
// 这里是后去config得基本信息(跟后端要接口 wx.$api.index.wpaySubscribeH5Info 别看不懂,这是封装的请求接口而已换成你自己的就行了)
wx.$api.index.wpaySubscribeH5Info(location.href.split('#')[0], ['chooseWXPay', ]).then(res1 => {
let w_pay = JSON.parse(res1.data)
jweixin.config({
debug: false,
appId: w_pay.appId,
timestamp: w_pay.timestamp,
nonceStr: w_pay.nonceStr,
signature: w_pay.signature,
jsApiList: ['wx-open-subscribe', 'wx-open-launch-app', 'launchAppLication'],
openTagList: ['wx-open-subscribe', 'wx-open-launch-app', 'wx-open-subscribe-dialog']
})
// config 准备好了那么就开始操作了,
jweixin.ready(() => {
// wx-open-subscribe 原生绑定点击事件
this.$nextTick(() => {
const btn = this.$refs.subscribeBtn;
btn.addEventListener('success', ({
detail
}) => {
this.content2 = JSON.parse(detail.subscribeDetails)
for (var i in this.content2) {
if (i === this.templateIds[0] || i ===
'EZcWzqrLdU-2Ax6KILdv9uSf6ANbHka7CbYG2KGahPk') {
let status = JSON.parse(this.content2[i]).status
console.log(status)
console.log(this.content2)
if (status === 'accept') {
// 这里跟后端要个接口,绑定;
wx.$api.index.subscribeH5(1).then(res => {
wx.showLoading({
title: res.data,
icon: 'none',
})
// 获取卡权益
// this.indexInfo();
setTimeout(function() {
wx.hideLoading();
}, 1000)
})
} else if (status === 'reject') {
alert('拒绝授权')
}
}
}
});
btn.addEventListener('error', (e) => {
alert('授权失败了,请重试')
});
})
})
}).catch(err => {
wx.showToast({
title: err.message,
icon: 'none'
})
})
}
}
}
</script>
<style>
/* 订阅消息 */
.subscribe {
color: #89663f;
width: 100%;
padding: 0 100rpx;
display: inline-block;
box-sizing: border-box;
margin-top: 50rpx;
display: flex;
/* -webkit-animation: Tada 3s both infinite;
-moz-animation: Tada 3s both infinite;
-ms-animation: Tada 3s both infinite;
animation: Tada 3s both infinite; */
}
.subscribe-icon,
.subscribe-cont {
height: 80rpx;
text-align: center;
line-height: 80rpx;
position: relative;
}
.subscribe-icon {
width: 150rpx;
padding-left: 30rpx;
box-sizing: border-box;
background: linear-gradient(to right, #f3c988, #f9e0b8);
border-radius: 40rpx 0 0 40rpx;
}
.subscribe-icon::after {
position: absolute;
content: '';
right: -50rpx;
top: 0;
width: 0;
height: 0;
border-bottom: 80rpx solid #f9e0b8;
border-right: 50rpx solid transparent;
z-index: 9;
}
.subscribe-cont {
width: calc(100% - 150rpx);
background: linear-gradient(to right, #f3c988, #f9e0b8);
border-radius: 0 40rpx 40rpx 0;
font-weight: 600;
}
.subscribe-cont text {
display: inline-block;
-webkit-animation: subscribeCont 1s linear infinite;
animation: subscribeCont 1s linear infinite;
}
@keyframes subscribeCont {
25% {
transform: scale(.98);
}
50%,
100% {
transform: scale(1);
}
75% {
transform: scale(1.05);
}
}
.subscribe-icon image {
width: 54rpx;
height: 54rpx;
margin-top: 14rpx;
}
@keyframes Tada {
0% {
transform: scale(1);
transform: scale(1)
}
70%,
73% {
transform: scale(1) rotate(-3deg);
transform: scale(1) rotate(-3deg)
}
77%,
83%,
90%,
97% {
transform: scale(1) rotate(3deg);
transform: scale(1) rotate(3deg)
}
80%,
87%,
93% {
transform: scale(1) rotate(-3deg);
transform: scale(1) rotate(-3deg)
}
100% {
transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
}
.subscribe-icon-one {
-webkit-animation: bounce-right 1s linear infinite;
animation: bounce-right 1s linear infinite;
}
@keyframes bounce-right {
25% {
transform: translateX(-3px);
}
50%,
100% {
transform: translateX(0);
}
75% {
transform: translateX(3px);
}
}
.subscribe-icon-two {
-webkit-animation: bounce-two 1s linear infinite;
animation: bounce-two 1s linear infinite;
}
@keyframes bounce-two {
25% {
opacity: 0;
transform: translateX(-3px);
}
75% {
opacity: 1;
transform: translateX(3px);
}
}
subscribe-btn {
width: 100%;
height: 200rpx;
text-align: center;
line-height: 150rpx;
font-size: 30rpx;
font-weight: 500;
color: #ffffff;
background-color: green;
position: relative;
overflow: hidden;
}
</style>
//
备注:图片 自己下载去
图片1:图片名:finger_00
图片2:图片名:finger_01
**现在能想起来的我遇到的问题就这么多,若果有更多问题,欢迎提问,收藏点赞啊 **
看到最后了么?别人遇到的问题,你也可能遇到,对照下
1.全局记得安装~有人遇到问题
npm i jweixin-module -S