点击上方亿元程序员+关注和★星标。
引言
这...已收藏
最近在书院(一个提供优质内容，专门搞学习的地方,可私信“星球”了解和捧场)看到比较多的星友想学习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.剪贴板
设置系统剪贴板的内容，便于用户复制分享。
接口如下：
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年游戏主程一起学习设计模式
从零开始开发贪吃蛇小游戏到上线系列
点击下方绿色按钮+关注。