jssdk.php on line 95,微信内H5使用JSSDK分享

最近一直有人问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 如有遗漏或建议，欢迎下面留言