- 浏览: 26305 次
最新评论
本文为 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 () {
// 用户取消分享后执行的回调函数
}
});
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 () {
// 用户取消分享后执行的回调函数
}
});
发表评论
-
JavaScript强化教程 —— 对象创建模式
2016-10-09 17:12 702本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 依赖注入
2016-09-28 17:10 638本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— Select(选择框)
2016-09-23 17:14 820本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 控制器
2016-09-21 17:22 590本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 简介(10)
2016-09-14 17:41 525本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— 与php服务器
2016-09-12 17:49 1286本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS自动JSB绑定规则修改
2016-09-09 18:08 1181本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 —— 资源打包工具的使用及资源的异步加载处理
2016-09-08 17:45 766本文为 HTML5培训 机构官方 HTML5培训 教程,主要介 ... -
JavaScript强化教程 —— Cocos2d-JS极速调试技巧
2016-09-05 16:18 859本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程—— 内置粒子系统
2016-08-29 16:00 761本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——JavaScript Math(算数) 对象
2016-08-26 16:33 552本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
2016-08-25 16:25 1202本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 -- cocosjs场景切换
2016-08-24 16:11 1372本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
CSS基础教程 -- 媒体查询屏幕适配
2016-08-22 15:15 1097本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JQuery强化教程 —— jQuery Easing
2016-08-18 14:54 805本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
fullPage教程 -- 整屏滚动效果插件 fullpage详解
2016-08-17 15:21 831本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——获取内容和属性
2016-08-15 15:35 463本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——jQuery 动画2
2016-08-12 14:12 627本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
bootstrap教程(二) —— 列表组listgroup
2016-08-11 14:46 637本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
bootstrap教程(二)——导航条
2016-08-08 16:22 546本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ...
相关推荐
【cocos2d-html5开发的微信朋友圈游戏源码】是一种使用HTML5技术与Cocos2d框架构建的游戏,特别适合在移动设备上运行,并且能够无缝接入微信平台,允许玩家在微信朋友圈中分享游戏成就。Cocos2d是一个开源的游戏开发...
1. **Cocos Creator**:Cocos Creator是一款基于Cocos2d-x的游戏开发框架,它支持创建2D游戏和交互式应用。Cocos Creator的H5特性使得开发者能够利用HTML5、JavaScript和CSS3来构建游戏或应用的用户界面,并且可以跨...
为了使游戏适应微信小游戏平台,我们需要遵循微信小游戏的开发规范,包括使用微信SDK进行社交功能集成,如分享、排行榜和成就系统。Cocos Creator提供了专门的微信小游戏插件,简化了这个过程。在发布前,确保进行...
《cocos2dx3.2微信打飞机 源码》是一个基于Cocos2d-x 3.2版本的游戏开发项目,它展示了如何利用这个强大的跨平台2D游戏引擎来开发一款与微信相结合的休闲游戏——打飞机。下面将详细探讨这个项目中涉及的IT知识点。 ...
虽然HTML5和JavaScript可以直接构建游戏,但为了提高开发效率和代码复用,开发者常会使用游戏引擎或框架,如Phaser、Cocos2d-js等。这些工具提供了丰富的预设功能,如物理引擎、动画系统、资源管理等,帮助开发者...
此外,开发者可能会使用到一些专门针对H5游戏开发的框架或库,如Phaser、Cocos2d-js等,它们提供了丰富的功能,简化了游戏开发过程。 1. **HTML5基础**:HTML5是HTML的最新版本,它引入了许多新特性,如canvas画布...
1. 游戏框架:游戏通常基于现有的HTML5游戏框架,如Phaser、Cocos2d-js或CreateJS等。这些框架提供了丰富的游戏开发工具和功能,如物理引擎、动画系统等,大大简化了开发过程。 2. 游戏逻辑:这是游戏的核心部分,...
HTML5游戏开发通常会借助游戏框架或引擎,如CreateJS、Phaser、Cocos2d-x等,它们提供了一套完整的开发工具和库,简化了游戏开发过程。“捉住胡巴小妖王”可能采用了其中的一种,通过预设的事件处理、动画系统、物理...
在微信HTML5游戏中,通常会使用一些游戏框架或库,如Phaser、Cocos2d-js,它们提供了一系列的工具和API,简化了游戏开发流程。 关于微信小游戏,它是微信平台的一个特色功能,允许开发者上传并发布HTML5游戏,用户...
1. HTML5游戏引擎:HTML5游戏通常使用游戏引擎如Phaser、Cocos2d-js或CreateJS等进行开发,这些引擎支持跨平台运行,且无需插件即可在浏览器中运行。 2. Canvas和WebGL:HTML5的Canvas API用于动态绘制图形,而WebGL...
《任意球达人源码解析——基于Cocos Creator的JavaScript实现》 在当今的移动游戏市场中,微信小游戏凭借其轻量级、易于分享的特点,深受玩家喜爱。其中,“任意球达人”作为一款以足球为主题的休闲游戏,巧妙地将...
1. HTML5游戏框架:许多微信小游戏使用HTML5游戏框架,如Phaser、Cocos2d-js或CreateJS,这些框架提供了丰富的功能,包括渲染、物理引擎、动画和事件处理。 2. JavaScript编程:JavaScript是实现游戏逻辑的核心语言...
1. **接入微信SDK**:首先需要在项目中集成微信的SDK,这通常涉及到在工程中添加相应的库文件,并配置好应用的AppID和AppSecret。 2. **登录授权**:用户在游戏内进行操作时,可能需要授权登录,以便将用户数据与...
1. **微信小游戏框架**:微信小游戏的开发框架主要基于微信官方提供的WeChat Game SDK,该SDK提供了丰富的API接口,用于游戏场景的渲染、用户交互、网络通信、资源管理等功能。开发者通常会结合Egret、Cocos Creator...
5. **物理引擎和碰撞检测**:为了实现角色的动态行为和碰撞检测,游戏可能会集成轻量级的物理引擎库,如`Cocos2d-js`或`Phaser`。 6. **网络通信**:如果游戏涉及到在线排行榜、用户数据存储等功能,可能需要与...
Cocos Creator是一款2D和3D游戏开发引擎,它支持JavaScript编程。对于游戏应用,可以通过其JavaScript API来集成支付插件。微信支付和支付宝支付的SDK需要转换为适应Cocos Creator的格式,然后在游戏中添加支付按钮...
7. **物理引擎**:部分游戏可能集成物理引擎,如Cocos2d-x的内置物理引擎,用于处理碰撞检测和物理运动。 8. **游戏逻辑**:这是源码的核心部分,包括角色移动、交互、得分计算、关卡设计等。开发者会通过事件监听...
1. 游戏框架:如Phaser、Cocos2d-js等,可以简化开发流程,提供丰富的功能模块。 2. 网络通信:WebSocket或HTTP/HTTPS请求,用于实现服务器交互,如排行榜、成就系统。 3. 数据存储:微信小游戏提供了本地存储API,...