具体修改需求
原本的点击查看任务,直接请求显示 任务的 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;
}
网友评论