字多 耐心 看完 别慌张 仔细仔细看
经过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]).statusconsole.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