羊仔
羊仔
  • 发布:2019-08-12 11:37
  • 更新:2022-08-24 15:58
  • 阅读:11225

nui-app h5微信分享的jweixin demo

分类:uni-app

第一步:npm install jweixin-module --save
第二步:在main.js里或者具体的页面这样写

import jswx from 'jweixin-module/out/index.js'  
 let wx_config = “后台返回的config”  
  
					 jswx.config(  
					 {  
						 debug:false,  
						 appId:wx_config.appId, // 必填,公众号的唯一标识  
						 timestamp:wx_config.timestamp , // 必填,生成签名的时间戳  
						 nonceStr: wx_config.nonceStr, // 必填,生成签名的随机串  
						 signature: wx_config.signature,// 必填,签名  
						 jsApiList:wx_config.jsApiList // 必填,需要使用的JS接口列表		  
					 }					  			   
					 );  
			jswx.ready(()=>{  
                                          //分享给朋友  
					jswx.onMenuShareTimeline({  
						title: 'xxxx', // 分享标题  
						link: 'https://www.xxx.com', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致  
						imgUrl: 'https:///www.xxx.com/icon.png', // 分享图标  
						success: function () {  
						// 用户点击了分享后执行的回调函数  
					},  
					 });	  
                                         //分享朋友圈  
					 jswx.onMenuShareAppMessage({  
							title: 'xxxx', // 分享标题  
							desc: 'xxxx', // 分享描述  
							link: 'https://www.xxx.com', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致  
						imgUrl: 'https:///www.xxx.com/icon.png', // 分享图标  
							success: function () {  
							 uni.showToast({  
									title: '分享成功',  
									duration: 2000  
								});  
							}  
							});  
				})	

//以上

亲测可用,再有问题就是后台的锅了,怼他们。。。。。还有一个,如果一切正常报:invalid Signature ,那有可能是后台需要获取你前端当前页面的href,否则一直会报这个错,你获取window.location.href给它,如果是tp5的话,应该是

$url = ‘当前链接(前端获取分享那页的链接:window.location.href,传过来这里)’//这步非常重要,官方文档都没有的  
$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";  
   
    $signature = sha1($string);

生成签名的这个位置

最终效果

4 关注 分享
1***@163.com 5***@qq.com damdmen qq1563204347

要回复文章请先登录注册

羊仔

羊仔 (作者)

回复 o***@163.com :
链接需要配置好白名单,在微信公众号里,图片尽量线上图片
2022-08-24 15:58
2***@qq.com

2***@qq.com

域名配置了,签名后端校验了说是对的,url传给了后端,但是还是会报错invalid Signature,已经找不到该怎么去查错了
2022-07-11 16:51
o***@163.com

o***@163.com

const jssdk_share = function(me, option) {
var me = this

var now_url = window.location.href
var can_share = false

var data = {
module: 'app',
action: 'jssdk',
m: 'getData',
url: now_url
}

uni.request({
data,
url: uni.getStorageSync('url'),
header: {
'content-type': 'application/x-www-form-urlencoded'
},
method: 'POST',
success: (res) => {
console.log("================>");
console.log(res);
console.log("================>");

jweixin.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.data.appId, // 必填,公众号的唯一标识
timestamp: res.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.signature, // 必填,签名
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']// 必填,需要使用的JS接口列表
})

console.log("================>1");
console.log(jweixin.config);
console.log("================>1");


jweixin.ready(() => {
let shareData = {
title: "提提",
link: now_url+'&d=m11111',
imgUrl: "images/xlogo.jpg",
success: function(res) {
console.log("====share===");
}
}
//分享到朋友圈接口
jweixin.updateTimelineShareData(shareData);
shareData.desc = "test";
//分享给朋友接口
jweixin.updateAppMessageShareData(shareData);
})



},
})
}
2022-03-18 15:25
o***@163.com

o***@163.com

硬是不行 只有链接 没有标题和图片 求助
2022-03-18 15:23
羊仔

羊仔 (作者)

回复 qq1563204347 :
apilist和前端域名都注意一下,用微信开发工具网页调式看看就知道原因了
2020-12-31 14:04
qq1563204347

qq1563204347

回复 羊仔 :
跟后台接口有关,还是跟前端jsApiList这个里面填写权限有关
2020-12-31 10:18
羊仔

羊仔 (作者)

回复 qq1563204347 :
看看接口有没有开具体的权限
2020-12-29 11:52
羊仔

羊仔 (作者)

回复 [已删除] :
本地的不行,需要线上的地址,并且在腾讯开放平台下配置白名单的方可使用
2020-12-29 11:51
qq1563204347

qq1563204347

提示config:ok,然后不分享是什么原因
2020-12-21 14:05
[已删除]

[已删除]

1.本地那个192.168那种hash 传window.location.href 行吗 2.192.168怎么换成本地xxx.com 3.invalid Signature一直报错 我还用了encodeURIComponent也不行 能帮我解决下吗 谢谢
2020-12-08 17:36