目录

1.引入微信JSSDK

cnpm install weixin-js-sdk --save

import wx from "weixin-js-sdk";

2.微信配置

App.vue 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: /*后台返回*/, // 必填，公众号的唯一标识
    timestamp: /*后台返回*/, // 必填，生成签名的时间戳
    nonceStr: /*后台返回*/, // 必填，生成签名的随机串
    signature: /*后台返回*/, // 必填，签名
    jsApiList: [
        "onMenuShareTimeline",
        "onMenuShareAppMessage",
        "onMenuShareQQ",
        "onMenuShareWeibo",
        "chooseWXPay",
        "hideAllNonBaseMenuItem",
        "showMenuItems",
        "checkJsApi"
    ] // 必填，需要使用的JS接口列表
});
wx.ready(function() {
    wx.hideAllNonBaseMenuItem(); //隐藏所有非基础按钮接口
    wx.checkJsApi({
        jsApiList: [
        "onMenuShareTimeline",
        "onMenuShareAppMessage",
        "onMenuShareQQ",
        "onMenuShareWeibo",
        "chooseWXPay"
        ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        fail: function(res) {
            //微信版本不支持部分功能
        }
    });
});
wx.error(function(res) {
    //微信验证失败
});

3.微信接口

  1. 分享接口
    demo.vue 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    		 
    wx.ready(function() {
    //分享到朋友圈
    wx.onMenuShareTimeline({
        title: "", // 分享标题
        desc: "",
        link: "", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: "", // 分享图标,必须是绝对路径
        success: function() {
            // 用户确认分享后执行的回调函数
        },
        cancel: function() {
            // 用户取消分享后执行的回调函数
        }
    });
});
  2. 在微信内置浏览器内调用支付接口
    demo.vue 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    		 
    wx.ready(function() {
    wx.chooseWXPay({
        timestamp: /*后台返回*/, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: /*后台返回*/, // 支付签名随机串，不长于 32 位
        package: /*后台返回*/, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
        signType: /*后台返回*/, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: /*后台返回*/, // 支付签名
        success: function(res) {
        //支付成功
        },
        fail: function(res) {
        //支付失败
        },
        cancel: function() {
        //支付取消
        }
    });
});
  3. 在移动端浏览器内调用支付接口

后台会通过接口返回给你一串url，只要将这串url拼接下，后面加上支付成功后你希望回跳的地址，然后直接访问该地址即可

var url=res +"&redirect_url=" +encodeURIComponent(payUrl);
window.location.href = url;

4. 开发过程中遇到的问题

1. 微信JSSDK签名出错

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）

也就是说，android下的微信客户端里，不支持vue-router的history模式。

解决方案：

  • vue-router使用hash模式
  • 每次url更改的时候，重新调用JSSDK的config接口
  • 微信支付的url需要进行encodeURIComponent

在ios端，第一次访问的url地址都会出现签名失败的问题，但是第二次访问时就可以了，至今原因不明，暂时的解决方案是：

demo.vue 
1
2
3
 
wx.error(function(res) {
    window.location.reload();
});

2. 微信环境下音频自动播放

IOS设备系统是不允许视频音频自动播放的，需要用户明确指定播放（通过一定的交互动作），相关的音频或视频才能被加载。

解决方案：

demo.js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
// 引入sdk
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

var audio = (function(){
  var _audio = new Audio();
  _audio.src = 'xxx';
  _audio.load();
  return _audio;
})()

// 微信配置信息（即使不正确也没问题
wx.config({
  debug: false,
  appId: '',
  timestamp: 1,
  nonceStr: '',
  signature: '',
  jsApiList: []
});
// 在ready时触发相关事件
wx.ready(function() {
  // 触发一下play事件
  audio.play();
});

3.音频预加载

audio标签属性preload兼容性不太好，推荐使用createjs里的preloadjs，但还需要配合soundjs使用。

  1. preloadjs + soundjs

    demo.vue 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    		 
    var queue = new createjs.LoadQueue();

// 添加声音支持
queue.installPlugin(createjs.Sound)

queue.addEventListener("fileload", handleFileLoad);
queue.addEventListener('progress', handleLoading)
queue.addEventListener("complete", handleComplete);
 
queue.loadFile({id:"bgm", src:"assets/bgm.mp3"});
// OR
queue.loadManifest([
  {id:"bgm", src:"assets/bgm.mp3"},
  {id:"myImage2", src:"assets/image2.jpg"}
]);

// 资源全部加载完成时触发
var handleComplete = function () {
  // 在次调用weixinReady事件，让浏览器获得音频对象
  /*
     注意：音频实例为 var bgmInstance = createjs.Sound.play("bgm")
     然后可以通过控制 bgmInstance.play() OR bgmInstance.stop() 播放暂停音效
  */
  wx.config({
    debug: false,
    appId: '',
    timestamp: 1,
    nonceStr: '',
    signature: '',
    jsApiList: []
  });
  wx.ready(function() {
    musicControlData['bgm'].instance = createjs.Sound.play('bgm');
    musicControlData['bgm'].instance.stop();
  });
}

  2. 仅使用soundjs

    demo.js 
    1
    2
    3
    		 
    // createjs.Sound.alternateExtensions = ["mp3"]; 控制音频类型
createjs.Sound.registerSound({id:"bgm", src:"assets/bgm.mp3"});
createjs.Sound.play("bgm");

使用preloadjs会在预加载时调用createjs.Sound.registerSound事件注册声音，所以无需显示调用。