程咬金3斧头
程咬金3斧头
  • 发布:2019-06-12 20:03
  • 更新:2021-08-11 14:09
  • 阅读:26559

微信内H5使用JSSDK分享!!!注意目前Hbuilderx2.3.7版本存在问题!!!

分类:uni-app

今天发现Hbuilderx2.3.7存在问题,给一下解决方案,顺便希望官方看下是更新了什么内容导致不兼容!!!(11月5日)
当前最新版本Hbuilderx2.3.7,在IOS上使用以下代码分享时,调试一切正常,真机提示签名错误。

分析原因:

  1. 使用微信复制链接功能,显示的是第一次进入网站的地址,
  2. 刷新页面,再次分享正常。

解决办法:

  1. ios下记录第一次进入网站时候url地址
  2. 在调用分享jssdk的位置,使用上一步记录的url地址进行签名。
  3. 具体代码就不写了,在app.vue中获取location.href存入全局变量就可以了

最近一直有人问jssdk的问题,官方贴也太简单,没有说明。所以这里再写一篇简单教程,附有代码。其实这个sdk还是比较简单的,只是因为uni-app的h5端是SPA单页应用,所以容易出现签名错误,或者配置没有正确初始化的问题。

服务端计算签名

文档地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

引入JSSDK

推荐使用npm安装,参考 http://ask.dcloud.net.cn/article/35380

创建一个js文件,封装微信相关功能

笔者是放在common目录,文件名称是wechat.js
代码如下:

import request from './request'; //笔者自己封装的网络请求类,也可以直接使用uni.request  
var jweixin = require('jweixin-module');  
  
export default {  
        //判断是否在微信中  
	isWechat:function(){  
		var ua = window.navigator.userAgent.toLowerCase();  
		if(ua.match(/micromessenger/i) == 'micromessenger'){  
			return true;  
		}else{  
			return false;  
		}  
	},  
        //初始化sdk配置  
	initJssdk:function(callback ,url){  
                //服务端进行签名 ,可使用uni.request替换。 签名算法请看文档  
		request.post('/api/oauth/wechat/sign',{url:url},function(res){  
			if(res.data){  
				jweixin.config({  
					 debug: false,  
					 appId: res.data.appId,  
					 timestamp:res.data.timestamp,  
					 nonceStr: res.data.nonceStr,  
					 signature:res.data.signature,  
					 jsApiList: [  
						 'checkJsApi',  
						 'onMenuShareTimeline',  
						 'onMenuShareAppMessage'  
					 ]  
				});  
				//配置完成后,再执行分享等功能  
				if(callback){  
					callback(res.data);  
				}  
			}  
		   
		});  
	},  
        //在需要自定义分享的页面中调用  
	share:function(data ,url){  
		url =url ? url :window.location.href;  
		if(!this.isWechat()){  
			return ;  
		}  
                //每次都需要重新初始化配置,才可以进行分享  
		this.initJssdk(function(signData){  
			jweixin.ready(function(){    
				var shareData = {  
					 title: data&&data.title ? data.title: signData.site_name,  
					 desc: data&&data.desc ? data.desc: signData.site_description,  
					 link: url,  
					 imgUrl: data&&data.img ?data.img :signData.site_logo,  
					 success: function (res) {  
                                                 //用户点击分享后的回调,这里可以进行统计,例如分享送金币之类的  
						request.post('/api/member/share');  
					 },  
					 cancel: function (res) {  
					 }  
				 };  
				 //分享给朋友接口  
				 jweixin.onMenuShareAppMessage(shareData);  
				 //分享到朋友圈接口  
				 jweixin.onMenuShareTimeline(shareData);  
			});  
		} ,url);  
	}  
}

全局引用

在main.js中引入

// #ifdef H5  
import wechat from './common/wechat'  
if(wechat.isWechat()){  
	Vue.prototype.$wechat =wechat;  
}  
// #endif

在页面中调用

例如,在文章详情页面自定义分享内容。

// #ifdef H5  
if (this.$wechat && this.$wechat.isWechat()) {  
     this.$wechat.share({  
          desc: article.title,  
          img: article.image  
    });  
}  
// #endif

注意事项

1 测试时,可以将debug设置为true,可以看到日志信息
2 签名建议在服务端,签名的url必须和当前页面的url一致,否则自定义分享无效
3 每个页面都需要单独初始化配置,即jweixin.config()
4 在公众号后台设置安全域名
5 笔者的例子是在history模式下,Android、IOS手机均已正常上线使用。若您使用的是hash模式,请自行测试,理论上应该也可以,如果有问题,请检查上述几点。如果还不行,请尝试在签名的事哈去掉url上的 '#'以后部分(含'#')
6 如有遗漏或建议,欢迎下面留言

19 关注 分享
DCloud_UNI_GSQ yorick 程咬金3斧头 o***@163.com 1***@qq.com j***@126.com 2***@qq.com 1***@qq.com ybs5431 h***@isotool.cn 达达x 星剑如雨 5***@qq.com 1***@qq.com yzdemo zmqq PHP全栈工程师 ice_covered 吃个大西瓜

要回复文章请先登录注册

5***@qq.com

5***@qq.com

能不能分享一下request.js???
2020-06-13 13:27
程咬金3斧头

程咬金3斧头 (作者)

回复 2***@qq.com :
你的路由是hash模式吧?
2020-04-21 20:31
2***@qq.com

2***@qq.com

我的分享的图片和描述都出来了,但是为什么点击分享后跳转到主页去了?
link属性我也指定了,但感觉没起作用!
2020-03-08 02:03
m***@163.com

m***@163.com

192这种本地开发的时候可以测试吗,用的是测试公众号
2020-02-22 18:56
云淡风轻gfg

云淡风轻gfg

JS接口需要填写安全域名,请问本地环境你们都是怎么做的
2020-01-15 17:34
Ayaw

Ayaw

pc上及手机别的浏览器没有错,log能出来,但在微信浏览器就出现invalid signature,咋回事呀,有没有人救救我
2020-01-03 16:33
Riceecir

Riceecir

引入的 jweixin-module 是 undefined 是什么问题呢? 出现频率大概有 1/5
2019-12-31 09:23
j***@live.cn

j***@live.cn

回复 JUNHUAing :
我也是报这个,后来你怎么解决的?
2019-10-29 14:53
yzdemo

yzdemo

感谢分享
2019-09-27 12:24
超长

超长

最近好像报错了jweixin的 Cannot read property 'config' of undefined
2019-09-04 11:42