微信订阅消息PHP AND VUE

只在开发者工具中验证成功走通，首先前端先注入权限

1、vue

<div  v-if="is_show_subscribe" style="position:fixed;bottom:20px;width:100%;text-align:center" >
         <wx-open-subscribe template="订阅id" id="subscribe-btn">
            <script type="text/wxtag-template" slot="style">
                <style>
                .subscribe-btn { color: #fff; background-color: #1890ff;border:none;border-radius:5px;padding:5px; }
                </style>
            </script>
            <script type="text/wxtag-template">
                <button class="subscribe-btn" >
                一次性模版消息订阅              
                </button>
            </script>
        </wx-open-subscribe>
     </div>

2、vue下的methods

subscribe_to_messages(){
          if(!this.is_start_subscribe) return false
          var that = this
           document.addEventListener('WeixinOpenTagsError', function (e) {
                console.log(e)
            console.error(e.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开放标签，JS-SDK其他功能不受影响
            });
           
            this.getAction('/test_wx_subscribe.php',{url:location.href.split('#')[0],action:"get_wx_config_auth"}).then(res => {
                if(res.success){
                    var result = res.result
                    wx.config({
                        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
                        appId: window.appId, // 必填，公众号的唯一标识
                        timestamp: result.timestamp, // 必填，生成签名的时间戳
                        nonceStr: result.noncestr, // 必填，生成签名的随机串
                        signature: result.signature,// 必填，签名
                        jsApiList: ['checkJsApi','chooseImage','previewImage'], // 必填，需要使用的JS接口列表
                        openTagList: ['wx-open-subscribe'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
                    });
                    wx.ready(function () {
                            console.log("注册api成功-")
                            // alert('注册api成功');
                            // success && success();
                            that.is_show_subscribe = true
                            
                           setTimeout(()=>{
                                var btn = document.getElementById('subscribe-btn');
                                btn.addEventListener('success', function (e) {            
                                    console.log('success', e.detail);
                                    console.log(JSON.parse(e.detail.subscribeDetails));
                                });   
                                btn.addEventListener('error',function (e) {             
                                console.log('fail', e.detail);
                                });
                           },0)
                    });
                    wx.error(function (res) {
                            console.log("注册api失败-： ",res)
                            // error && error(res);
                            that.$toast.fail('注册微信api失败，请联系相关人员!')
                    });  
                }
            })
      }

3、php处理

function getAccessToken(){
    $appid = "";
    $secret = "";
    $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appid&secret=$secret";
    $res = getAction($url);
    $result = json_decode($res,true);
    $token = $result['access_token'];
    $token_invalid_time=(time()*1000)+(intval($result["expires_in"])*1000);
    $array= array(
        "token"=>$token,
        "token_invalid_time"=>$token_invalid_time
    );
    $myfile = fopen("./wx_config/token.txt", "w") or die("Unable to open file!");
    $txt = json_encode($array);
    fwrite($myfile, $txt);

    return $token;
    
}
function get_current_token(){
    $str = file_get_contents("./wx_config/token.txt");//将整个文件内容读入到一个字符串中
    //return json_decode($str,true)['token'];
    if($str){
        $result = json_decode($str,true);
        $token=$result['token'];
        $token_invalid_time=$result['token_invalid_time'];
        if((time()*1000) > $token_invalid_time){
            return getAccessToken();
        }else{
            return $token;
        }
    }else{
       return getAccessToken(); 
    }
}
function get_jsapi_ticket(){
    $token = get_current_token();
    $url="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$token&type=jsapi";
    $res = getAction($url);
    $result = json_decode($res,true);
    $jsapi_ticket = $result['ticket'];
    $jsapi_ticket_invalid_time=(time()*1000)+(intval($result["expires_in"])*1000);
    $array= array(
        "jsapi_ticket"=>$jsapi_ticket,
        "jsapi_ticket_invalid_time"=>$jsapi_ticket_invalid_time
    );
    $myfile = fopen("./wx_config/wx_ticket.txt", "w") or die("Unable to open file!");
    $txt = json_encode($array);
    fwrite($myfile, $txt);
    return $jsapi_ticket;
}

function get_current_ticket(){
    $str = file_get_contents("./wx_config/wx_ticket.txt");
    if($str){
        $result = json_decode($str,true);
        $jsapi_ticket = $result['jsapi_ticket'];
        $jsapi_ticket_invalid_time = $result['jsapi_ticket_invalid_time'];
        if((time()*1000) > $jsapi_ticket_invalid_time){
            return get_jsapi_ticket();
        }else{
            return $jsapi_ticket;
        }
    }else{
        return get_jsapi_ticket();
    }
}
function get_wx_config_auth_verify($url){
    $params = array(
        "noncestr"=>getRandomStr(),
        "jsapi_ticket"=>get_current_ticket(),
        "timestamp"=>time()*1000,
        "url"=>$url
    );
    $noncestr = $params['noncestr'];
    $jsapi_ticket = $params['jsapi_ticket'];
    $timestamp = $params['timestamp'];
    $sign="jsapi_ticket=$jsapi_ticket&noncestr=$noncestr&timestamp=$timestamp&url=$url";


    $signature = sha1($sign);
    $params['signature'] = $signature;
    return $params;
}

if($_GET){
    $action = $_GET['action'];
    $data=$_GET;
    if($action == 'get_wx_config_auth'){
        $url=$data['url'];
        $result = get_wx_config_auth_verify($url);
        echo http_result_structure($result);
    }
   
}

 4、vue测试发送

send_subscribe_message(){
          const formData = new FormData();
          formData.append('action','send_subscribe_message')
          var obj = {
               template_id:"订阅id",
               touser:"openid",
               name:"新任务通知",
               page:"",
               data:{
                    // 任务名称
                     "thing1": {
                        "value": "某某"
                    },
                    // 任务类型
                    "phrase3": {
                        "value": "￥100"
                    },
                    // 任务时间
                    "thing4": {
                        "value": "广州至北京"
                    },
                    // 任务内容
                    "time10": {
                        "value": "2018-01-01"
                    }
               }
           }
          for(let item in obj){
            formData.append(item,obj[item])
          }
          this.postAction('/test_wx_subscribe.php',formData).then(res => {
              console.log(res)
              if(res.errmsg == 'ok'){
                    this.$message.success('发送成功')
                }else{
                    this.$message.warning(res.errmsg)
                }
          })
      }

5、php接受发送订阅

if($post){
    
    $action = $post['action'];
    $data=$post;
    
    if($action == 'send_subscribe_message'){
        $token = get_current_token();
        $url = "https://api.weixin.qq.com/cgi-bin/message/subscribe/bizsend?access_token=$token";
        $params = $data;
        unset($params['action']);
        echo postAction($url,$params);
    }
   
}