注意：此篇文章不包含服务端的签名。
微信官方jssdk文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
基本操作
第一步 对微信公众号进行配置
详细配置请看这篇位置“微信公众号服务号授权获取用户信息、分享和微信支付的配置”
第二步 引入微信js sdk
// 引入微信的jssdk
<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
// 或者
npm install weixin-js-sdk
var wx = require('weixin-js-sdk');
第三步 通过config接口注入权限验证配置
<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表，我这里用到的接口有"updateAppMessageShareData","updateTimelineShareData","chooseWXPay"
});
</script>
注意：这里的微信配置签名等是由后端程序来生成。
其他接口请查看微信文档。
第四步 使用接口
所有接口的使用必须在：
wx.ready(function(){
// 所有接口必须在这里写，才会保证生效。
});
媒体播放
iPhone手机有个很麻烦的问题，就是在网页中无法自动播放音乐，需要用户手动点击播放才可以。
为此我们使用微信提供的sdk来解决音乐播放问题。
<audio id="bgm" src="test.mp3" loop></audio>
<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
wx.config({
// ...
});
wx.ready(function(){
// 这里即可自动播放音乐
document.getElementById('bgm').play();
});
微信分享
<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
wx.config({
// ...
});
wx.ready(function(){
var shareData = {
title:'标题',
desc:'描述',
link:'http://test.com',//这里要带域名的绝对地址
imgUrl:'http://test.com/image.jpg' //这里要带域名的绝对地址
};
wx.updateAppMessageShareData(shareData);
wx.updateTimelineShareData(shareData);
});
怎样进行动态的更换分享的内容呢？这种使用场景，尝尝用于单页应用场景，如：vue和react项目。
// 其实很简单，只需要把分享的数据挂载到window对象下即可。
window.shareData = {
title:'标题',
desc:'描述',
link:'http://test.com',
imgUrl:'
};
wx.updateAppMessageShareData(shareData);
wx.updateTimelineShareData(shareData);
// 要动态更换时
window.shareData.title = '新标题';
window.shareData.desc = '新描述';
微信支付
<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
wx.config({
// ...
});
wx.ready(function(){
// 注意：下面除了回调函数，其他的像paySign签名等是由服务端下单后生成返回的。
wx.chooseWXPay({
timestamp: 0, // 支付签名时间戳
nonceStr: '', // 支付签名随机串
package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: '', // 支付签名
success: function (res) {
if(res.errMsg == "chooseWXPay:ok"){
alert('支付成功。');
}else if(res.errMsg == "chooseWXPay:cancel"){
alert('支付失败，用户取消支付。');
}else if(res.errMsg == "chooseWXPay:fail"){
alert('支付失败。');
}else{
alert(res.errMsg);
}
},
cancel: function (res) {
alert('支付失败，用户取消支付。');
},
fail: function (res) {
alert('支付失败。');
}
});
});
注意：除了回调函数，其他的像paySign签名等是由服务端下单后生成返回的。