你知道和不知道的微信小游戏常用API整理，赶紧收藏用起来~

好的马上

引言

这…已收藏

最近在书院(一个提供优质内容，专门搞学习的地方,可私信“星球”了解和捧场)看到比较多的星友想学习Cocos进行小游戏开发。

“该从什么方向入手？”

从星友们的主题可以看出，小游戏目前不管是国内还是海外，都非常的卷，因此笔者给大家整理一下微信小游戏常用API帮大家更好地卷，大家赶紧收藏用起来吧!

本文源工程可在文末获取，小伙伴们自行前往。

总览

为了更好地演示效果，笔者用之前小游戏的资源简单搭了一个Demo小程序，简单但又不失优雅。

简单但又不失优雅

其中分享模块和流量主广告模块相关配置可视化调整。

简单配置

资源结构清晰易懂，分享、广告独立成模块。组件简单易用。

结构清晰

Cocos3.8.1、2.4.11和其他多版本支持。

多版本支持

分享模块

微信小游戏依赖于它的环境，容易分享传播，因此我们小游戏务必接入分享模块，不能错过一次裂变的机会。

给我一次裂变的机会

1.转发菜单

点击右上角按钮，会弹出菜单，菜单中的“转发”选项默认不展示。通过 wx.showShareMenu() 和 wx.hideShareMenu() 可动态显示、隐藏这个选项。

由你决定

接口如下：

/**
 * 注册微信事件
 */
registerEvent(): void {
    //显示分享按钮(shareAppMessage转发,shareTimeline朋友圈)
    wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
    });
}

2.被动转发

用户点击右上角菜单中的“转发”选项后，会触发转发事件，如果小游戏通过 wx.onShareAppMessage() 监听了这个事件，可通过返回自定义转发参数来修改转发卡片的内容，否则使用默认内容。

这很被动

接口如下：

/**
 * 注册微信事件
 */
registerEvent(): void {
  //转发
  wx.onShareAppMessage(() => {
      return this.getShareData();
  });
  //分享朋友圈
  wx.onShareTimeline(() => {
      return this.getShareData();
  });
}
/**
 * 随机获取配置的分享内容
 */
getShareData() {
    var data = {
        title: "",//分享微信的标题
        imageUrl: "", //通过MP系统审核的图片地址
        query: "",//自定义附加参数
    };
    return data;
}

3.主动转发

游戏内可通过 wx.shareAppMessage()接口直接调起转发界面，与被动转发类似，可以自定义转发卡片内容。

主动点

接口如下：

/**
 * 主动转发
 */
shareAppMessage(title: string = "", imageUrl: string = "", query: string = "", shareCallback: any = null): void {
    var data = {
        title: title,
        imageUrl: imageUrl,
        query: query
    };
    wx.shareAppMessage(data);
}

流量主广告模块

流量主作为个人小游戏的主要收入来源，如果你想实现变现，必须要接入这个模块。

1.激励视频

激励视频广告组件是由客户端原生的图片、文本、视频控件组成的，层级最高，会覆盖在上屏 Canvas 上。

小小激励

接口如下：

private rewardedVideoAd: any;
private rewardAdCallback: any;
private rewardAdCallbackObj: any;
/**
 * 播放激励视频广告
 */
showRewardedVideoAd(rewardAdCallback: Function, rewardAdCallbackObj: any): void {
    this.rewardAdCallback = rewardAdCallback;
    this.rewardAdCallbackObj = rewardAdCallbackObj;

    this.createRewardedVideoAd();

    if (!this.rewardedVideoAd) {
        this.onRewardAdCallback(false);
        return;
    }

    // 用户触发广告后，显示激励视频广告
    this.rewardedVideoAd.show().catch(() => {
        // 失败重试
        this.rewardedVideoAd.load()
            .then(() => this.rewardedVideoAd.show())
            .catch(err => {
                this.onRewardAdCallback(false);
            })
    })
}
/**
 * 创建激励视频广告
 */
createRewardedVideoAd() {
    if (!this.rewardedVideoAd && this.rewardedVideoAdConfig.adUnitId != "") {
        this.rewardedVideoAd = wx.createRewardedVideoAd({
            adUnitId: this.rewardedVideoAdConfig.adUnitId
        })

        this.rewardedVideoAd.onClose(res => {
            // 用户点击了【关闭广告】按钮
            // 小于 2.1.0 的基础库版本，res 是一个 undefined
            if (res && res.isEnded || res === undefined) {
                // 正常播放结束，可以下发游戏奖励
                this.onRewardAdCallback(true);
            }
            else {
                // 播放中途退出，不下发游戏奖励
                this.onRewardAdCallback(false);
            }
        })

        this.rewardedVideoAd.onError(err => {
            this.onRewardAdCallback(false);
        })
    }
}
/**
 * 激励视频广告回调
 */
onRewardAdCallback(success) {
    if (this.rewardAdCallback) {
        this.rewardAdCallback.call(this.rewardAdCallbackObj, success);
        if (success) {
            this.rewardedVideoAd.load();
        }
        this.rewardAdCallback = null;
        this.rewardAdCallbackObj = null;
    }
}

2.Banner 广告

Banner 广告组件是由客户端原生的图片、文本控件组成的原生组件，层级最高，会覆盖在上屏 Canvas 上。

拉横幅

接口如下：

private bannerAd: any;
/**
 * 显示Banner广告
 */
showBannerAd(show: boolean): void {
    if (show) {
        // 在适合的场景显示 Banner 广告
        this.createBannerAd();
        this.bannerAd.show();
    }
    else {
        this.bannerAd.hide();
        this.bannerAd.destroy();
        this.bannerAd = null;
        this.createBannerAd();
    }
}
/**
 * 创建Banner广告
 */
createBannerAd() {
    if (!this.bannerAd) {
        let sysInfo = wx.getSystemInfoSync();
        // 创建 Banner 广告实例，提前初始化
        var width = 320;
        this.bannerAd = wx.createBannerAd({
            adUnitId: this.bannerAdConfig.adUnitId,
            adIntervals: this.bannerAdConfig.adIntervals,
            style: {
                left: sysInfo.screenWidth / 2 - width / 2,
                top: sysInfo.screenHeight,
                width: width
            }
        })

        this.bannerAd.onResize(res => {
            this.bannerAd.style.top = sysInfo.screenHeight - this.bannerAd.style.realHeight;
        })

        this.bannerAd.onError(err => {
            console.log(err)
        })
    }
}

3.插屏广告

插屏广告组件是由客户端原生的图片、文本、视频控件组成的，层级最高，会覆盖在普通组件上。

突如其来的广告

接口如下：

private interstitialAd: any;
/**
 * 创建插屏广告
 */
createInterstitialAd() {
    // 创建插屏广告实例，提前初始化
    if (wx.createInterstitialAd && !this.interstitialAd) {
        this.interstitialAd = wx.createInterstitialAd({
            adUnitId: this.interstitialAdConfig.adUnitId
        })

        this.interstitialAd.onClose(res => {
            this.interstitialAd = null;
            this.createInterstitialAd();
        })
    }
}
/**
 * 显示插屏广告
 */
showInterstitialAd() {
    // 在适合的场景显示插屏广告
    this.createInterstitialAd();
    if (this.interstitialAd) {
        this.interstitialAd.show().catch((err) => {
            console.error(err)
        })
    }
}

4.原生模板广告

原生模板广告组件是由客户端原生的图片、文本、视频控件组成的原生组件，层级最高，会覆盖在上屏 Canvas 上。

小格子

接口如下：

private customAd: any;
/**
 * 显示自定义广告
 */
showCustomAd(show: boolean, top?: number, left?: number): void {
    if (!this.customAd) {
        this.customAd = wx.createCustomAd({
            adIntervals: this.customAdConfig.adIntervals,
            adUnitId: this.customAdConfig.adUnitId,
            style: {
                fixed: true,
                left: left,
                top: top,
            },
        })
    }
    if (show) {
        this.customAd.show();
    }
    else {
        this.customAd.destroy();
        this.customAd = null;
    }
}

常用模块

1.用户信息获取

用户信息指的是微信用户的昵称、头像等个人信息。

请授权

接口如下：

/**
 * 通过Node获取微信Rect
 */
getWxRect(uiTransform: UITransform) {
    let sysInfo = wx.getSystemInfoSync()
    let rect = uiTransform.getBoundingBoxToWorld();
    let ratio = window.devicePixelRatio;
    let scale = view.getScaleX();
    let factor = scale / ratio;
    var left = rect.x * factor;
    var top = sysInfo.windowHeight - (rect.y + rect.height) * factor;
    var width = rect.width * factor;
    var height = rect.height * factor;
    return { left: left, top: top, width: width, height: height };
}
/**
 * 创建用户信息按钮
 */
createUserInfoButton(uiTransform: UITransform, callback: any) {
    var rect = this.getWxRect(uiTransform);
    var button = wx.createUserInfoButton({
        type: "text",
        text: "",
        style: {
            left: rect.left,
            top: rect.top,
            width: rect.width,
            // backgroundColor: '#ff0000',
            height: rect.height
        }
    });
    button.onTap((res) => {
        //授权成功
        if (res.userInfo) {
            if (callback) {
                callback(res.userInfo);
                button.destroy();
            }
            // res.userInfo.nickName;  //昵称
            // res.userInfo.avatarUrl; //头像链接
        }
        //授权失败
        else {
        }
    })
    /*
    button.show();      //显示
    button.hide();      //隐藏
    */
    return button;
}

2.振动

使手机发生振动。常用于互动反馈。

非常灵敏

接口如下：

/**
 * 使手机发生较短时间的振动（15 ms）。仅在 iPhone 7 / 7 Plus 以上及 Android 机型生效
 */
vibrateShort(type: "heavy" | "medium" | "light", success: any = null, fail: any = null, complete: any = null) {
    wx.vibrateShort({
        type: type,
        success: success,
        fail: fail,
        complete: complete
    });
}
/**
 * 使手机发生较长时间的振动（400 ms)
 */
vibrateLong(success: any = null, fail: any = null, complete: any = null) {
    wx.vibrateLong({
        success: success,
        fail: fail,
        complete: complete
    });
}

3.重启小程序

重启当前小程序，可让用户重启小程序完成资源或者配置的更新。

重头再来

接口如下：

/**
 * 重启当前小程序
 */
restartMiniProgram() {
    wx.restartMiniProgram({
        success: () => {
            console.log("wx小程序重启成功");
        },
        fail: () => {
            console.log("wx小程序重启失败");
        }
    });
}

3.小程序跳转

打开另一个小程序，常用于搭建自己的小游戏矩阵。

欢迎来到我的游戏矩阵

接口如下：

/**
 * 打开另一个小程序
 */
navigateToMiniProgram(appId: string) {
    wx.navigateToMiniProgram({ appId: appId });
}

其他模块

1.获取系统信息

常用于获取屏幕宽高，完成适配。

适配专用

接口如下：

getSystemInfoSync(): { screenWidth: number, screenHeight: number } {
  return wx.getSystemInfoSync();
}

2.显示消息提示框

显示小程序自带的提示框。

接口如下：

showToast(title: string, success: boolean, duration: number = 0) {
    wx.showToast({
        title: title,
        icon: success ? "success" : "error",
        duration: duration
    })
}

3.菜单按钮

获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。用于适配。

还是适配专用

接口如下：

getMenuButtonBoundingClientRect(): { width: number, height: number, top: number, right: number, bottom: number, left: number } {
    return wx.getMenuButtonBoundingClientRect();
}

4.事件上报

用于We分析后台上报事件，用于运营调优。

运营调优神器

接口如下：

reportEvent(eventId: string, data: object) {
    wx.reportEvent(eventId, data)
}

5.游戏圈

创建游戏圈按钮，创建方式和获取用户信息类似，用于跳转游戏圈(类似社区)。

游戏自己的社区

接口如下：

createGameClubButton(uiTransform: UITransform) {
    var rect = this.getWxRect(uiTransform);
    return wx.createGameClubButton({
        type: "text",
        text: "",
        style: {
            left: rect.left,
            top: rect.top,
            width: rect.width,
            height: rect.height
        }
    });
}

6.剪贴板

设置系统剪贴板的内容，便于用户复制分享。

Ctrl+C

接口如下：

setClipboardData(data: string): void {
    wx.setClipboardData({ data: data })
}

7.好友排行榜

对用户托管数据进行写数据操作。允许同时写多组 KV 数据。常用于实现好友排行榜。

setUserCloudStorage(score) {
    //保存数据
    let KVDataList = [{
        key: "",
        value: ""
    }, {
        key: "",
        value: ""
    }];

    let value = {
        "wxgame": {
            "score": score,
            "update_time": Date.now()
        },
    };

    KVDataList[0].key = "rankName";
    KVDataList[0].value = JSON.stringify({
        "score": score
    });
    KVDataList[1].key = "rankName2";
    KVDataList[1].value = JSON.stringify(value);
    wx.setUserCloudStorage({
        KVDataList: KVDataList,
        success: function (res) {
            console.log("wx.setUserCloudStorage => 保存用户数据成功");
        }
    })
}

8.开放域

发消息到开放域,与开放域进行交互，常用于发消息请求开放域去获取好友排行信息，绘制排行榜。

postMessage(data): void {
    let openDataContext = wx.getOpenDataContext()
    openDataContext.postMessage(data)
}

结语

以上是整理的全部核心内容，整理不易，时间宝贵，需要源工程的小伙伴可以阅读原文获取，付费不仅是知识的获取，更是对笔者的支持和认可，感谢！

我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。

AD:笔者线上的小游戏《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。

实不相瞒，想要个赞和在看！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！

推荐专栏：

你知道王者荣耀是怎么实现技能范围指示器的吗？

8年主程手把手打造Cocos独立游戏开发框架

和8年游戏主程一起学习设计模式

从零开始开发贪吃蛇小游戏到上线系列