JavaScript强化教程 —— Cocos2d-JS游戏快速接入微信JS-SDK

本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍：JavaScript强化教程 —— Cocos2d-JS游戏快速接入微信JS-SDK
1.申请公众号

因为微信只能使用公众号接入SDK，所以我们必须先注册一个公众号。

微信公众平台：https://mp.weixin.qq.com/



2.设置公众号

登录公众平台后，点击左下角的 设置-公众号设置。右侧有一个js接口安全域名的设置，这里可以绑定3个用到的域名，必须填入顶级域名。

然后点击左下角的 开发者中心，右侧会有一个AppID和一个AppSecret。这两个先记录下来，过后会用到。



3.生成token

打开页面 微信公众平台接口调试工具 并且填入刚才的appid和secret，点击检查问题。记录下返回结果里面的“access_token”的值。



4.获取ticket

复制这个链接：https://api.weixin.qq.com/cgi- ... en%3D填写刚刚获取的access_token&type=jsapi

并在里面的access_token=后面填入刚刚获取的access_token（对的，就是那一串乱码一样的东西），回车！！

然后把“ticket”的值复制出来，并保存起来，这个就是当前appid的ticket了。



5.生成签名

打开微信JS接口签名校验工具填入相应的数据：

1）jsapi_ticket: 填入上一步获取的ticket

2）noncestr: 这里随机生成一个字符串填进去(VQhYOUJRz6RolHqN)

3）timestamp: 这里填入一个时间戳，去掉毫秒的3位(如：1420870884) - 这里尽量写ticket生成后的一段时间，new Date() - 0可以获取当前的时间戳

4）url: 准备放页面的地址（域名必须在第二部中设置到安全域名内，如：http://www.cocos2d-x.org/wechat.html）

点击生成签名。记录下下面出现的signature这个值。



6.页面引入微信SDK并初始化

在页面中加入：


<script src="http://res.wx.qq.com/open/js/j ... gt%3B
并且执行初始化：

wx.config({
        debug: true,
        appId: '第二步获取的AppID',
        timestamp: 第五步填入的那个时间戳,
        nonceStr: '第五步填入的随机字符串',
        signature: '第五步生成的signature值',
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'hideMenuItems',
            'showMenuItems',
            'hideAllNonBaseMenuItem',
            'showAllNonBaseMenuItem',
            'translateVoice',
            'startRecord',
            'stopRecord',
            'onRecordEnd',
            'playVoice',
            'pauseVoice',
            'stopVoice',
            'uploadVoice',
            'downloadVoice',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'getNetworkType',
            'openLocation',
            'getLocation',
            'hideOptionMenu',
            'showOptionMenu',
            'closeWindow',
            'scanQRCode',
            'chooseWXPay',
            'openProductSpecificView',
            'addCard',
            'chooseCard',
            'openCard'
        ]
    });
jsApiList填入的是当前需要使用的接口，需要注意的是，如果公众号不具备某些接口的权限，填进去也无法执行。

这时候将页面上传到第五步填入的url地址，并在微信中打开，应该能够看见config:ok的提示。

如果出现了Invalid Url或者Invalid Domain等提示，说明公众号配置里面出现了问题。而出现Invalid signature的话，则是signature生成出现了问题，检查下timestamp以及随机字符串等是否正确。



到这里我们就可以酣畅淋漓的使用微信的SDK啦。



比方说我们判断wifi加载音频，而非wifi情况则不加载任何音频文件:

//资源列表
    var audioResList = [
        "bgMusic.mp3",
        "changeMusice.pm3"
    ];
    var audioSwitch = true;
    wx.ready(function () {
        wx.getNetworkType({
            success: function (res) {
                if(res.networkType != "wifi"){
                    audioResList.lenght = 0;
                    audioSwitch = false;
                }
                start();
            },
            fail: function (res) {
                audioResList.lenght = 0;
                audioSwitch = false;
                start();
            }
        });
    });


在游戏中判断网络并提示相关信息:

wx.getNetworkType({
        success: function (res) {
            var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
            if(networkType == "2g"){
                if(!confirm("您还在使用2g网络？流量还够吗？是否继续访问游戏？")){
                    wx.closeWindow();
                }
            } else if(networkType == "3g"){
                alert("您正在使用4G网络访问喵,速度还行吗？");
            } else if(networkType == "4g"){
                alert("哇，您正在使用4G网络访问喵，快吗？");
            } else if(networkType == "wifi"){
                alert("您当前正在使用wifi, 不用担心流量哟！");
            } else {
                alert("来自星星的你，使用的是什么网络呢？");
            }
        }
    });
   

在游戏中修改分享的相关信息：

wx.onMenuShareAppMessage({
        title: title, // 分享标题
        desc: message, // 分享描述
        link: wxFriend.link, // 分享链接
        imgUrl: wxFriend.imgUrl, // 分享图标
        success: function () {
            // 用户确认分享后执行的回调函数
            alert("喵喵感谢您！");
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });