美文网首页让前端飞Web前端之路
修改移动端项目增加微信一次性订阅消息

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

作者: Maxine708 | 来源:发表于2019-08-16 16:59 被阅读1次

    具体修改需求

    原本的点击查看任务,直接请求显示 任务的 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;
            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;
        }
    

    相关文章

      网友评论

        本文标题:修改移动端项目增加微信一次性订阅消息

        本文链接:https://www.haomeiwen.com/subject/sayfsctx.html