uni-app / vue 使用微信开发标签标签wx-open-subscribe

字多 耐心 看完 别慌张 仔细仔细看

---

经过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