微信公众号公司的微信商城商品详情需要做一个自定义分享给朋友的东西,官方自带的不能显示图片
需求:自定义的商品详情分享以后安卓刚开始可以正常显示,但是IOS苹果系统下不行,还有就是目前虽然做好了,但是使用的是微信官方文档提供的即将弃用的接口。新的接口试过了是不可以的
先看下前后效果图!
官方分享好友最新接口文档,问题就在这里,我引用微信官方的JS资源文件的额时候,最新的版本 1.6.0的。并不支持这个新的API
即将废弃的旧的官方API接口,但是目前还是可以用的,但是问题也是层出不穷,旧版参数比新版的参数多,且缺一不可,就算是空值,也要写。新版的是将分享到微信好友和QQ好友综合一个接口
不知道怎么回事,新版的API 安卓和IOS都容易出问题,且引用的官方给出的最新的JS资源文件也是不行的,1.6.0的版本,接下来展示一下自己摸索搞成功的代码
导出查询了好多的不同版本的JS资源文件,目前就只有这个1.0.0的版本是可用的
好了,直接上代码吧,由于我这边用的是Angular.js 的结构写的,所以会包含一部分angluar的代码结构
在这里插入代码片
<div class="views">
<div class="view view-main product" ng-controller="productController">
<span>angular代码主题</span>
</div>
</div>
<!--以下是用到的一些JS资源文件-->
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<!-- WPA start -->
<script src="//wp.qiye.qq.com/qidian/2852151055/99c2d10080a17fb93f44317e6c97f13b" charset="utf-8"></script>
<!-- WPA end -->
<!--站长统计-->
<script src="https://s19.cnzz.com/z_stat.php?id=1262589488&web_id=1262589488" language="JavaScript"></script>
<script src="js/framework7.min.js"></script>
<script src="js/urlConfig.js"></script>
<script src="js/commend.js"></script>
<!--<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>--> <!--此版本暂时不能完美解决问题-->
<!--<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js "></script>--> <!--此版本暂时不能完美解决问题-->
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <!--此版本暂时可以-->
<!--<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>--> <!--此版本暂时不能完美解决问题-->
<script>
<!--此处开始是angluar结构的JS代码-->
anguApp.controller('productController', function($scope, $http) {
//页面一加载就可触发分享接口,相当于vue的created钩子函数
//声明一个变量用来存储当前页面的链接
var url = location.href.replace(location.hash, "");
//angular方式请求接口
$http.post(Wxurl + '/WXBase/WXBase003', {
"Content": {
"AppId": "wxdb068888888888888888", //后端接口必填参数,微信公众号ID
"url": url //后端接口必填参数
},
"IsReturnContent": "string"
}).then(function(data) {
if (data.status == 200) { //请求成功以后触发微信内置方法,并将返回的值给对应的参数
wx.config({
debug: false, //开启调试模式,为true的时候可查看调试结果
appId: 'wxdb068888888888888888', //公众号ID
timestamp: data.data.Content.timestamp, //后端返回的随机时间戳
nonceStr: data.data.Content.noncestr, //后端返回的随机签名字符串
signature: data.data.Content.signature, //后端返回的随机签名字符串
jsApiList: ['onMenuShareAppMessage'], //微信内置分享好友的方法函数
});
wx.ready(function() {
//由于这个分享做在了一个我们自己的微信公众号商城的商品详情页上,需要动态获取商品图片,商品标题
var productTitle = $scope.thisProductInfo.Name; //获取的商品标题作为自定义的标题
var productImgs = $scope.thisProductInfo.PicturePath; //获取的图片作为自定义分享的图片
var DetailUrl = window.location.href; //这个变量用来存储当前页面,分享方法中会用
wx.onMenuShareAppMessage({
title: '微信商城', // 分享标题
link: DetailUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
desc: productTitle, // 分享描述
imgUrl: productImgs, // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function(res) {
alert('已分享');
}
});
});
}
}, function(err) {
alert(JSON.stringify(err))
});
});