微信公众号自定义分享好友IOS图片不显示

微信公众号公司的微信商城商品详情需要做一个自定义分享给朋友的东西,官方自带的不能显示图片

需求:自定义的商品详情分享以后安卓刚开始可以正常显示,但是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))
				});

});

看到这里,这个功能就完成了,微信官方文档中说明上面用到的这个内置方法可能到那一天就弃用掉了,但是新版的方法并没有兼容处理IOS的情况,不知道腾讯的程序猿是干什么吃的,希望能将新的方法尽快解决掉

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值