1.绑定域名

公众号设置-》功能设置-》JS接口安全域名

加入要分享的工程域名

2.引入JS文件

因为在内网开发，如果直接引用在内网会报错，所以先判断是微信环境再引用js。

// 判断是否是微信浏览器的函数

isWeiXin : function() {

var ua = window.navigator.userAgent.toLowerCase();

if (ua.match(/MicroMessenger/i) == 'micromessenger' && ua.indexOf('miniprogram') == -1) {

return true;

} else {

return false;

}

},

if(isWeiXin()){

var weixinJs = document.createElement('script');

weixinJs.src = '';

if(window.location.protocol == "https:"){

weixinJs.src = 'https://res/wx.qq.com/open/js/jweixin-1.6.0.js';

}else{

weixinJs.src = 'http://res/wx.qq.com/open/js/jweixin-1.6.0.js';

}

document.body.appendChild(weixinJs);

weixinJs.onload = function(){

//wx.config..

}

}

3.config

wx.config({

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

3.1生成签名的随机串

function createNonceStr() {

return Math.random().toString(36).substr(2, 16);

}

3.2签名

3.2.1获取access_token

3.2.2获取jsapi_ticket

用access_token通过Get请求获取jsapi_ticket

返回内容：

{

"errcode":0,

"errmsg":"ok",

"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",

"expires_in":7200

}

3.2.3生成签名

一共4个参数：noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL，不包含#及其后面部分)。

参数需要安装ASCII 码从小到大排序：jsapi_ticket、noncestr、timestamp、url，使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1：

jsapi_ticket=xx&noncestr=xx&timestamp=xx&url=xx

对string1进行sha1签名，得到signature防止地址出现包含端口的情况，如http://a.com:8080/aaa.jhtml，截取:8080的前半段和后半段拼接起来

if(url.lastIndexOf(":")>5){

url = url.substring(0 ,url.lastIndexOf(":"))+url.substring(url.indexOf("/"),url.lastIndexOf(":"));

}

签名的逻辑需在服务器端实现。

3.3JS接口列表

分享给朋友：updateAppMessageShareData

分享到朋友圈：updateTimelineShareData

4.ready&调用api

如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。

wx.ready(function () { //需在用户可能点击分享按钮前就先调用//分享给好友wx.updateAppMessageShareData({

title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 success: function () {

// 设置成功 }

})

//分享到朋友圈wx.updateTimelineShareData({

title: '', // 分享标题 link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 success: function () {

// 设置成功 }

})

});

对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

5.封装函数

(function(){

var wxShare = function(opts){

var defaults = {

getWxConfigUrl: '', // 获取微信接口权限url

orDebug: false, // 是否开启调试模式

title: $("title").text, // 分享标题

desc: $("title").text, // 分享描述

link: window.location.href.split('#')[0], // 分享链接

imgUrl: '', // 分享图标

success: function(){}, // 用户确认分享后执行的回调函数

cancel: function(){} // 用户取消分享后执行的回调函数

};

var _opts = $.extend(defaults, opts);

// 获取微信权限

$.ajax({

url: _opts['getWxConfigUrl'],

type: 'POST',

dataType: 'json',

data: {link:encodeURIComponent(_opts['link']}),

})

.done(function(res) {

if(typeof res == 'object'){

// 通过config接口注入权限验证配置

wx.config({

// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

debug: _opts['orDebug'],

// 必填，公众号的唯一标识

appId: res.appId,

// 必填，生成签名的时间戳

timestamp: res.timestamp,

// 必填，生成签名的随机串

nonceStr: res.nonceStr,

// 必填，签名，见附录1

signature: res.signature,

// 必填，需要使用的JS接口列表

jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']

});

// 处理config验证成功或失败

_wxReady(res.url);

}else{

console.log('获取微信接口权限失败！');

}

})

.fail(function() {

console.log("获取微信接口权限失败！");

});

// 处理config验证成功或失败

var _wxReady = function(urls){

// wxConfig验证成功处理

wx.ready(function(){

// 分享到朋友圈

wx.updateTimelineShareData({

title: _opts['title'],

link: _opts['link'],

imgUrl: _opts['imgUrl'],

success: _opts['success'],

cancel: _opts['cancel']

});

// 分享给朋友

wx.updateAppMessageShareData({

title: _opts['title'],

desc: _opts['desc'],

link: _opts['link'],

imgUrl: _opts['imgUrl'],

success: _opts['success'],

cancel: _opts['cancel']

});

});

// wxConfig验证失败返回函数

wx.error(function(res){

console.log(res,'wxConfig验证失败')

});

};

};

window.wxShare = wxShare;

})();

6.后端请求接口

入参：link 当前url,需要urldecode

出参(对应wx.config的参数)：appid

timestamp

nonceStr

signature

7.前端调用

if(isWeiXin()){

new wxShare({

title: '微信分享',

desc: '学习微信分享',

link: 'https://www.zhihu.com/people/hu-die-ying',

imgUrl:"https://pic3.zhimg.com/v2-86cf12a9563d739f7d6ab6738b29eef5_xl.jpg",

success:function(){

console.log("分享成功");

},

cancel:function(){

console.log("分享失败");

}

});

}

link参数可以和当前页面链接不同。