vue开发微信公众号订阅消息踩坑记录

今天做了一个微信公众号的网页开发，使用的是vue做的开发，没错，就是微信公众号的开发，这都2021年了，还有人有开发微信公众号的需求，我也是晕了，微信公众号是我开发中感觉，最难调试的开发工作，没有之一因为是使用vue开发，我做了 frp的内网穿透，做了nginx的代理转发，做了vue的跨域问题的处理，最终敌不过微信公众号蹩脚的开发规定，遇到订阅消息这一块，还是得老老实实的打包-----

A黄俊辉A

1795人浏览 · 2021-04-22 00:13:55

A黄俊辉A · 2021-04-22 00:13:55 发布

今天做了一个微信公众号的网页开发，使用的是vue做的开发，没错，就是微信公众号的开发，这都2021年了，还有人有开发微信公众号的需求，我也是晕了，微信公众号是我开发中感觉，最难调试的开发工作，没有之一
因为是使用vue开发，我做了 frp的内网穿透，做了nginx的代理转发，做了vue的跨域问题的处理，最终敌不过微信公众号蹩脚的开发规定，遇到订阅消息这一块，还是得老老实实的打包-----上传----真机测试，再打包-----再上传—再测试，这样重复了多少次，我不清楚了，但是两个多小时是没有了，真机上看不到错误提示， TMD 全部猜，内心的慌乱无以复加

言归正传，说坑吧
首先先看微信的官方文档订阅消息，同时我们也会用用到开放标签
这里要说的第一个坑就是开放标签和 jssdk接口列表, 这两个不是同一样的东西，这个不算坑，是我做的时候没有理解到位
开放标签 openTagList 这个是我们要用的
jssdk接口 jsApiList 这个在订阅消息这个页面我没有用（不用可以，但是传参还必须要写，不然就入坑了）
在这里插入图片描述
文档中还有一个地方要注意

上面两个地方开发时要记好，免得出错，不好找
下面是实际开发时的要点
一，有一个 IP 地址白名单要配置，也就是你服务器的ip地址在公众号中配置

签名时的 url

我使用的 easyWechat来做的签名
在这里插入图片描述
这里的setUrl 是vue前端显示时的页面路径，而不是vue请求后端时的后端接口路径
然后就是前端的接收到这个接口的参数

在这里插入图片描述
jsApiList:[], 这一句是不可以少的，别看它没有值，如果少了，你会把自已搞死的，我是差点没死，哈哈
如果没有这句，你就会发现，微信开发工具给你的提示是 errMsg:OK, 真好，但是，你在真机上一运行，真机会给你 errMsg:fail , 同样的代码，开发工具正常，真机错误，这不就是微信要搞死程序员的节奏吗！！！！

这里还是把vue上的代码完整的放上来吧，很多地方说不清

<template>
    <div class="wrapper">
        <van-nav-bar
                title="充值"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <div class="card-wrapper">
            <div class="card">
                <div class="top">
                    <van-image :src="require('../assets/images/icon-wdyk-tx.png')" width="30" height="30"></van-image>
                    <div class="title">公交云卡</div>
                    <span class="icon iconfont icon-ico ico"></span>
                </div>
                <div class="user">
                    <div class="name">{{user_info.card_info.realname}}</div>
                    <div class="money">可用余额:{{user_info.money}}元</div>
                </div>
                <div class="bottom">
                    <div class="card-num">No.{{user_info.card_info.cardno}}</div>
                    <div class="search">查询明细</div>
                </div>
            </div>
        </div>
        <div class="recharge">
            <div class="title">快速充值</div>
            <div class="money-wrapper">
                <div class="money" :class="recharge_money == 20? 'active':''" @click="recharge(20)">
                    <div class="num">20元</div>
                    <div class="desc">售价20元</div>
                </div>
                <div class="money" :class="recharge_money == 50? 'active':''" @click="recharge(50)">
                    <div class="num">50元</div>
                    <div class="desc">售价50元</div>
                </div>
                <div class="money" :class="recharge_money == 100? 'active':''" @click="recharge(100)">
                    <div class="num">100元</div>
                    <div class="desc">售价100元</div>
                </div>
            </div>
            <van-field v-model="recharge_money" placeholder="请输入自定义金额"></van-field>
        </div>
        <div class="type">请选择充值方式</div>
        <div class="wechat-wrapper">
            <van-cell size="large" title="微信支付（默认）">
                <template v-slot:icon>
                    <span class="icon iconfont icon-weixinzhifu weixin"></span>
                </template>
                <template v-slot:right-icon>
                    <span class="icon iconfont icon-duihao1 duihao"></span>
                </template>
            </van-cell>
        </div>

        <div id="subwrapper">
            <wx-open-subscribe template="nWFwCwSdHZQ160IVqs8gHa6dNCw-90psrie-p7b-vag" id="subscribe-btn" style="position:absolute;width:100%;height:60px;left:0px;bottom:0px;overflow:hidden;">
                <script type="text/wxtag-template">
                    <style>
                        .subscribe-btn {
                            color: #fff;
                            background-color: #07c160;
                            bottom:300px;
                            left:0;
                            width:100%;
                            height:60px;
                        }
                    </style>
                    <div >hahahahhahahahah</div>
                    <button class="subscribe-btn">
                        一次性模版消息订阅
                    </button>
                </script>
            </wx-open-subscribe>

        </div>


<!--        <van-button block="block" @click="goPay">确认支付{{recharge_money > 0 ? "("+recharge_money+")元":""}}</van-button>-->
    </div>
</template>

<script>
    import wx from "weixin-js-sdk";
    import { HomeModel } from "../model/HomeModel";
    let homeModel = new HomeModel();
    export default {
        name: "Recharge",
        data(){
            return {
                recharge_money:"",
                user_info:{
                    money:"",
                    card_info:{
                        cardno:"",
                        realname:""
                    }
                }
            }
        },
        created(){

        },
        mounted() {
            this.initdata();
            this.configJssdk();
        },

        methods:{
            configJssdk(){
                homeModel.configJssdk().then(res=>{
                    //这里让用户订阅模板消息， 要到服务器上做才可以
                    wx.config({
                        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: res.appId, // 必填，公众号的唯一标识
                        timestamp: res.timestamp, // 必填，生成签名的时间戳
                        nonceStr: res.nonceStr, // 必填，生成签名的随机串
                        signature: res.signature,// 必填，签名
                        jsApiList:[],
                        openTagList: ["wx-open-subscribe"] // 必填，需要使用的JS接口列表
                    })
                    // wx.ready(function(){
                    //     var btn = document.getElementById('subscribe-btn');
                    //     console.log(btn);
                    //     btn.addEventListener('success', function (e) {
                    //         console.log(123);
                    //         console.log('success', e.detail);
                    //     });
                    //     btn.addEventListener('error',function (e) {
                    //         console.log('fail', e.detail);
                    //     });
                    // })
                })
            },

            onClickLeft(){
                this.$router.go(-1);
            },
            initdata(){
                homeModel.getUserInfo().then((res)=>{
                    this.user_info.card_info.realname = res.data.user_info.card_info.realname;
                    this.user_info.money=res.data.user_info.money;
                    this.user_info.card_info.cardno = res.data.user_info.card_info.cardno.replace(/(.{4})/g,"$1 ");
                })
            },
            recharge(money){
                this.recharge_money = money;
            },
            goPay(){
                let money = this.recharge_money;
                if(money < 5){
                    this.$toast("最小充值金额5元");
                    return;
                }
                console.log("来钱了")
                //todo 去支付

            }
        }
    }
</script>