说明:项目前端框架vue,
解决问题:微信JSSDK分享缩略图片在IOS中不显示,在安卓中显示正常。

1.在基本配置中,获取AppID,并配置IP白名单

在这里插入图片描述

2.设置js接口安全域名

(坑一!!!遇到的第一个坑就是只配置了业务域名,以及网页授权域名,没有配置JS接口安全域名,导致前端一直报错invalid signature)

3.安装微信sdk

  1. 安装
npm install weixin-js-sdk
  1. 引用,在index.html中
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript">

4.上代码

以下操作都在App.vue中完成

  1. 获取wx.config的配置参数,从后台获取
  2. 配置wx.config,并调用方法
//在create中调用此方法

getConfigParam(){
   ajaxSubmit(
       this.$http,
       getConfigParam,
       "get",
       { url:location.href.split('#')[0]},
       resData => {
            	wx.config({
				    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
				    appId: _AppID, // 必填,公众号的唯一标识
				    timestamp:resData.data.timestamp , // 必填,生成签名的时间戳
				    nonceStr: resData.data.noncestr , // 必填,生成签名的随机串
				    signature: resData.data.signature ,// 必填,签名
				    jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填,需要使用的JS接口列表
				});
				wx.error(function(res){
				    console.log(res)
				});
				wx.ready(function(){
			  		var shareTitle="***"
			  		var shareDesc="***************************************"
			  		var shareLink=_localBaseUrl+"login"
			  		var shareImg="################"
			  		wx.onMenuShareAppMessage({
							title: shareTitle, // 分享标题
							desc: shareDesc, // 分享描述
							link: shareLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
							imgUrl:shareImg, // 分享图标
							type: '', // 分享类型,music、video或link,不填默认为link
							dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
							success: function () {
							// 用户点击了分享后执行的回调函数
							}
						});
						wx.onMenuShareTimeline({
					    title: shareTitle, // 分享标题
					    link:shareLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					    imgUrl:shareImg, // 分享图标
					    success: function () {
							},
			  		});
	  	})
       }
      )
  	}

需要注意的地方:

关于微信config:invalid signature:

  1. 配置JS接口安全域名
  2. 确认url是页面完整的url(请在当前页面alert(location.href.split(’#’)[0])确认),包括’http(s)?/‘部分,以及’?‘后面的GET参数部分,但不包括’#'hash后面的部分。
  3. 确认签名算法正确,可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。

微信JSSDK分享缩略图片

  1. 分享缩略图imgUrl不支持相对位置(例如:"…/…/…/static/images/share_img.jpg"),只支持绝对位置(“http://www.baidu.com/static/images/share_img.jpg”)
  2. 分享缩略图片在IOS中不显示,但是在安卓中显示没有问题。官方给出原因是:在iOS微信6.1版本中,分享的图片外链不显示,只能显示公众号页面内链的图片或者微信服务器的图片(微信团队已经确认此问题,会在6.2中修复)
    但是我也不知道为什么在7.0以上版本的微信依旧存在这个问题,
    我的解决方法:
    将图片上传到微信公众号,然后把上传后图片地址考出来放进代码imgUrl

好啦,以上就是我的一个小方法,希望对大家有帮助!

Logo

前往低代码交流专区

更多推荐