最近用angular做微信的分享,发现动态去赋值分享接口的title desc都不管用 后来百度了一下,微信分享的title会读取html里<title></title>里的内容,而我在title里写了{{title}},所以每次分享 分享的标题都是{{title}},解决方法是
//设置页面标题这样做了之后还是不行,document.title=$scope.title;//增加页面元素变动,从而保证标题一定会刷新//解决问题:由于部分手机浏览器bug,导致标题更新后不会自动刷新var $body = $('body');var $iframe = $("<iframe style='display:none;' src='/favicon.ico'></iframe>");$iframe.on('load',function() { setTimeout(function() { $iframe.off('load').remove(); }, 0);}).appendTo($body);
我的代码是:
wx.ready(function () { wx.onMenuShareAppMessage({ title:$scope.title, desc: $scope.desc, link:$scope.link, imgUrl:$scope.imgUrl, success: function (res) { alert('已分享'); $scope.isShare=false; $scope.$apply() }, cancel: function (res) { alert('已取消'); $scope.isShare=false; $scope.$apply() }, fail: function (res) { $scope.isShare=false; $scope.$apply() } });})
我猜测在调用分享接口时并没有读取到$scope.title $scope.desc等数据,
后来我就把微信的配置和分享封装到一个方法中,然后把分享需要的参数作为方法的参数传入,这样在调用风险方法时就可以百分百保证数据是成功读取到的
$scope.wechat=function(title,desc,link,imgUrl){ var ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) == 'micromessenger'){ var timestamp=Math.round(new Date().getTime()/1000); var url=window.location.href; var noncestr="dianjingwang"; var signature='',appId=""; $.ajax({ type: 'POST', url: '/wx/sign.json', data: {timestamp:timestamp,url:url,noncestr:noncestr}, dataType: 'json', async :false, //默认为true 异步 success:function(data){ if(data.msg="success"){ appId=data.ret; signature=data.value; } } }); wx.config({ debug: false, appId:appId, timestamp:timestamp, nonceStr:"dianjingwang", signature:signature, jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'closeWindow' ] }); wx.ready(function () { wx.onMenuShareAppMessage({ title:title, desc: desc, link:link, imgUrl:imgUrl, success: function (res) { alert('已分享'); $scope.isShare=false; $scope.$apply() }, cancel: function (res) { alert('已取消'); $scope.isShare=false; $scope.$apply() }, fail: function (res) { $scope.isShare=false; $scope.$apply() } }); wx.onMenuShareTimeline({ title:title, desc: desc, link:link, imgUrl:imgUrl, success: function (res) { alert('已分享'); $scope.isShare=false; $scope.$apply() }, cancel: function (res) { alert('已取消'); $scope.isShare=false; $scope.$apply() }, fail: function (res) { alert(JSON.stringify(res)); $scope.isShare=false; $scope.$apply() } }); wx.onMenuShareQQ({ title:title, desc:desc, link:link, imgUrl:imgUrl, complete: function (res) { $scope.isShare=false; $scope.$apply() }, success: function (res) { alert('已分享'); $scope.isShare=false; $scope.$apply() }, cancel: function (res) { alert('已取消'); $scope.isShare=false; $scope.$apply() }, fail: function (res) { alert(JSON.stringify(res)); $scope.isShare=false; $scope.$apply() } }); wx.onMenuShareWeibo({ title:title, desc:desc, link:link, imgUrl:imgUrl, complete: function (res) { alert(JSON.stringify(res)); $scope.isShare=false; $scope.$apply() }, success: function (res) { alert('已分享'); $scope.isShare=false; $scope.$apply() }, cancel: function (res) { alert('已取消'); $scope.isShare=false; $scope.$apply() }, fail: function (res) { alert(JSON.stringify(res)); $scope.isShare=false; $scope.$apply() } }); wx.onMenuShareQZone({ title:title, desc: desc, link:link, imgUrl:imgUrl, complete: function (res) { $scope.isShare=false; $scope.$apply() }, success: function (res) { alert('已分享'); $scope.isShare=false; $scope.$apply() }, cancel: function (res) { alert('已取消'); $scope.isShare=false; $scope.$apply() }, fail: function (res) { alert(JSON.stringify(res)); $scope.isShare=false; $scope.$apply() } }); }); }
这样就完美的解决了这个问题。记录一下。