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生成后的一段时间,newDate()-0可以获取当前的时间戳

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

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

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

在页面中加入:

<scriptsrc="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的提示。

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

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

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

//资源列表

varaudioResList=[

"bgMusic.mp3",

"changeMusice.pm3"

];

varaudioSwitch=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){

varnetworkType=res.networkType;//返回网络类型2g,3g,4g,wifi

if(networkType=="2g"){

if(!confirm("您还在使用2g网络?流量还够吗?是否继续访问游戏?")){

wx.closeWindow();

}

}elseif(networkType=="3g"){

alert("您正在使用4G网络访问喵,速度还行吗?");

}elseif(networkType=="4g"){

alert("哇,您正在使用4G网络访问喵,快吗?");

}elseif(networkType=="wifi"){

alert("您当前正在使用wifi,不用担心流量哟!");

}else{

alert("来自星星的你,使用的是什么网络呢?");

}

}

});

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

wx.onMenuShareAppMessage({

title:title,//分享标题

desc:message,//分享描述

link:wxFriend.link,//分享链接

imgUrl:wxFriend.imgUrl,//分享图标

success:function(){

//用户确认分享后执行的回调函数

alert("喵喵感谢您!");

},

cancel:function(){

//用户取消分享后执行的回调函数

}

});

相关推荐