修改移动端项目增加微信一次性订阅消息

具体修改需求

原本的点击查看任务,直接请求显示 任务的 H5 落地页。修改为:点击查看任务,跳转微信的一次性订阅授权页面,点击确认返回原来地址继续下面的操作显示任务 H5 落地页。

实现的重点和坑点

这是一个 php 项目,通过 git 和后端同事共同协作,首先这个项目在我本地 mac 电脑跑起来那些配置就很烦,最后通过运维协助在本地环境跑起来了。涉及修改 hosts 文件,启动Nginx,修改 nginx 配置等等我已经有点忘了。
从 Git 上拉取的代码,我前端获取不到$openid值为空,后端已经通过 MVC 模式传过来了,反复调试了很久,最后解决方法很离奇,就是后端同事在他那边进到前端修改页面 console.log("$openid"+'{{$openid}}')输出打印$openid后,他把项目代码推过来,我这次拉取就能获取到$openid值了,后续修改才能继续。
再然后就是微信公众平台官方文档——一次性订阅消息,根据文档,需要引导用户在微信客户端打开如下链接:https://mp.weixin.qq.com/mp/subscribemsg?action=get_confirm&appid=wxaba38c7f163da69b&scene=1000&template_id=1uDxHNXwYQfBmXOfPJcjAS3FynHArD8aWMEFNRGSbCc&redirect_url=http%3a%2f%2fsupport.qq.com&reserved=test#wechat_redirect(这是官方示例链接),其中redirect_url是授权后重定向的回调地址,请使用UrlEncode对链接进行处理。 注:要求redirect_url的域名要跟登记的业务域名一致,且业务域名不能带路径。 业务域名需登录公众号,在设置-公众号设置-功能设置里面对业务域名设置。

具体代码

//一次性订阅授权完成后的操作
    checkAction()
//点击按钮执行一次性授权方法
$(".receive").on("click", function () {
        onceAuth();
    })
//一次性订阅授权
    function onceAuth() {
        //判断测试还是开发环境修改相应的 appid,template_id
        var host = window.location.hostname;
        var dev_host = ["localhost"];
        var dev_host_indexOf = dev_host.indexOf(host);
        var template_id = '...(具体不显示了)';
        var appid = '...(具体不显示了)';
        var redirect_url = window.location.href.replace(/&scene=0/g,"")
        if (dev_host_indexOf == -1) {
            //正式环境
            appid:'...(具体不显示了)';
            template_id:'...(具体不显示了)'
        }
        var task_id = getQueryString('id')
        //检查是否授权
        $.get('/mobile/task/check_scene?op=2&task_id='+task_id+'&openid='+'{{$openid}}',{},function (res) {
            //is_set为1吊起一次性订阅授权否则正常获取任务详情
            if(JSON.parse(res).is_set==1){
                var radom = parseInt(Math.random()*5000)+5000
                var url='https://mp.weixin.qq.com/mp/subscribemsg?action=get_confirm&appid='+appid+'&scene='+radom+'&template_id='+template_id+'&redirect_url='+encodeURIComponent(redirect_url)+'&reserved=tarsocial#wechat_redirect'
                window.location.href = url
            }else{
                getTaskType()
            }
        })
    }
//获取任务跳到H5任务落地页
    function getTaskType() {
        $.post("/mobile/werenwu/receivetask", {task_id: {{$id}}}, function (res) {
            if (res.errcode == 0) {
                if (res.data.task_type == 6) {
                wx.previewImage({
                    current: '', // 当前显示图片的http链接
                    urls: res.data.url.split(",") // 需要预览的图片http链接列表
                });
                } else{
                    location.href = res.data.url;
                }
            } else {
                $(".alert").show().find("p").text(res.errmsg);
            }
        }, "json");
    }
//未授权情况下调起一次性订阅授权,
function checkAction() {
        if(getQueryString('action')){
            var scene = getQueryString('scene');
            var openid = getQueryString('openid');
            var params = {scene:scene,openid:openid}
            var task_id = getQueryString('id')
            //用户同意一次性订阅授权后存scene否则步操作
            if(getQueryString('action') == 'confirm'){
                $.get('/mobile/task/set_scene?scene='+scene+"&openid="+openid+'&op=2&task_id='+task_id,function (res) {
                    // alert(res)
                })
            }
            getTaskType()
        }
    }
   function getQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)
            return  (r[2]);
        return null;
    }

有个 bug,模板消息进入时,点击订阅消息不能被存入记录,经排查,是莫名redirect_url 的回调地址多出现一个 scene=0,调整代码window.location.href.replace(/&scene=0/g,"")

你可能感兴趣的:(修改移动端项目增加微信一次性订阅消息)