引言
这...已收藏
最近在书院(一个提供优质内容，专门搞学习的地方,可私信“星球”了解和捧场)看到比较多的星友想学习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:笔者线上的小游戏《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。
实不相瞒，想要个赞和在看！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐专栏：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。