`
周大帅
  • 浏览: 26564 次
社区版块
存档分类
最新评论

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 () {
            // 用户取消分享后执行的回调函数
        }
    });
分享到:
评论

相关推荐

    cocos2d-html5开发的微信朋友圈游戏源码

    【cocos2d-html5开发的微信朋友圈游戏源码】是一种使用HTML5技术与Cocos2d框架构建的游戏,特别适合在移动设备上运行,并且能够无缝接入微信平台,允许玩家在微信朋友圈中分享游戏成就。Cocos2d是一个开源的游戏开发...

    cocos crestor 修改引擎代码实现h5支付,跳转到微信.支付宝.客户端

    1. **Cocos Creator**:Cocos Creator是一款基于Cocos2d-x的游戏开发框架,它支持创建2D游戏和交互式应用。Cocos Creator的H5特性使得开发者能够利用HTML5、JavaScript和CSS3来构建游戏或应用的用户界面,并且可以跨...

    cocos creator 制作游戏--登山赛(可发布到微信小游戏)

    为了使游戏适应微信小游戏平台,我们需要遵循微信小游戏的开发规范,包括使用微信SDK进行社交功能集成,如分享、排行榜和成就系统。Cocos Creator提供了专门的微信小游戏插件,简化了这个过程。在发布前,确保进行...

    cocos2dx3.2微信打飞机 源码

    《cocos2dx3.2微信打飞机 源码》是一个基于Cocos2d-x 3.2版本的游戏开发项目,它展示了如何利用这个强大的跨平台2D游戏引擎来开发一款与微信相结合的休闲游戏——打飞机。下面将详细探讨这个项目中涉及的IT知识点。 ...

    微信HTML5在线朋友圈游戏源码带安装部署教程-爸爸去兜风游戏.rar

    虽然HTML5和JavaScript可以直接构建游戏,但为了提高开发效率和代码复用,开发者常会使用游戏引擎或框架,如Phaser、Cocos2d-js等。这些工具提供了丰富的预设功能,如物理引擎、动画系统、资源管理等,帮助开发者...

    微信h5小游戏源码

    此外,开发者可能会使用到一些专门针对H5游戏开发的框架或库,如Phaser、Cocos2d-js等,它们提供了丰富的功能,简化了游戏开发过程。 1. **HTML5基础**:HTML5是HTML的最新版本,它引入了许多新特性,如canvas画布...

    微信HTML5在线朋友圈游戏源码带安装部署教程-涨姿势.zip

    1. 游戏框架:游戏通常基于现有的HTML5游戏框架,如Phaser、Cocos2d-js或CreateJS等。这些框架提供了丰富的游戏开发工具和功能,如物理引擎、动画系统等,大大简化了开发过程。 2. 游戏逻辑:这是游戏的核心部分,...

    微信HTML5在线朋友圈游戏源码带安装部署教程-捉住胡巴小妖王.zip

    HTML5游戏开发通常会借助游戏框架或引擎,如CreateJS、Phaser、Cocos2d-x等,它们提供了一套完整的开发工具和库,简化了游戏开发过程。“捉住胡巴小妖王”可能采用了其中的一种,通过预设的事件处理、动画系统、物理...

    微信HTML5游戏源码

    在微信HTML5游戏中,通常会使用一些游戏框架或库,如Phaser、Cocos2d-js,它们提供了一系列的工具和API,简化了游戏开发流程。 关于微信小游戏,它是微信平台的一个特色功能,允许开发者上传并发布HTML5游戏,用户...

    微信HTML5在线朋友圈游戏源码带安装部署教程-鸟萌.rar

    1. HTML5游戏引擎:HTML5游戏通常使用游戏引擎如Phaser、Cocos2d-js或CreateJS等进行开发,这些引擎支持跨平台运行,且无需插件即可在浏览器中运行。 2. Canvas和WebGL:HTML5的Canvas API用于动态绘制图形,而WebGL...

    任意球达人源码-cocosCreator js

    《任意球达人源码解析——基于Cocos Creator的JavaScript实现》 在当今的移动游戏市场中,微信小游戏凭借其轻量级、易于分享的特点,深受玩家喜爱。其中,“任意球达人”作为一款以足球为主题的休闲游戏,巧妙地将...

    微信小游戏188个

    1. HTML5游戏框架:许多微信小游戏使用HTML5游戏框架,如Phaser、Cocos2d-js或CreateJS,这些框架提供了丰富的功能,包括渲染、物理引擎、动画和事件处理。 2. JavaScript编程:JavaScript是实现游戏逻辑的核心语言...

    微信原生api绘制排行榜,可用于cocos laya项目

    1. **接入微信SDK**:首先需要在项目中集成微信的SDK,这通常涉及到在工程中添加相应的库文件,并配置好应用的AppID和AppSecret。 2. **登录授权**:用户在游戏内进行操作时,可能需要授权登录,以便将用户数据与...

    微信小游戏 jicilang (源码).zip

    1. **微信小游戏框架**:微信小游戏的开发框架主要基于微信官方提供的WeChat Game SDK,该SDK提供了丰富的API接口,用于游戏场景的渲染、用户交互、网络通信、资源管理等功能。开发者通常会结合Egret、Cocos Creator...

    微信小游戏 duxinshu (源码).zip

    5. **物理引擎和碰撞检测**:为了实现角色的动态行为和碰撞检测,游戏可能会集成轻量级的物理引擎库,如`Cocos2d-js`或`Phaser`。 6. **网络通信**:如果游戏涉及到在线排行榜、用户数据存储等功能,可能需要与...

    nodejs + android studio, cocos creator, unity3d 微信支付,支付宝支付

    Cocos Creator是一款2D和3D游戏开发引擎,它支持JavaScript编程。对于游戏应用,可以通过其JavaScript API来集成支付插件。微信支付和支付宝支付的SDK需要转换为适应Cocos Creator的格式,然后在游戏中添加支付按钮...

    微信小游戏 nddsc (源码).zip

    7. **物理引擎**:部分游戏可能集成物理引擎,如Cocos2d-x的内置物理引擎,用于处理碰撞检测和物理运动。 8. **游戏逻辑**:这是源码的核心部分,包括角色移动、交互、得分计算、关卡设计等。开发者会通过事件监听...

    影视微信前段.zip

    1. 游戏框架:如Phaser、Cocos2d-js等,可以简化开发流程,提供丰富的功能模块。 2. 网络通信:WebSocket或HTTP/HTTPS请求,用于实现服务器交互,如排行榜、成就系统。 3. 数据存储:微信小游戏提供了本地存储API,...

Global site tag (gtag.js) - Google Analytics