引言
这...已收藏
最近在书院 (一个提供优质内容 ，专门搞学习 的地方,可私信"星球 "了解和捧场)看到比较多的星友想学习Cocos 进行小游戏开发。
"该从什么方向入手？"
从星友们的主题可以看出，小游戏目前不管是国内还是海外 ，都非常的卷 ，因此笔者给大家整理一下微信小游戏常用API 帮大家更好地卷，大家赶紧收藏用起来吧!
本文源工程可在文末获取，小伙伴们自行前往。
总览
为了更好地演示效果 ，笔者用之前小游戏的资源简单搭了一个Demo 小程序，简单但又不失优雅。
其中分享模块 和流量主广告模块 相关配置可视化调整。
资源结构清晰易懂 ，分享 、广告 独立成模块。组件简单易用。
Cocos3.8.1 、2.4.11 和其他多版本支持。
分享模块
微信小游戏依赖 于它的环境，容易分享传播 ，因此我们小游戏务必 接入分享模块 ，不能错过一次裂变的机会。
1.转发菜单
点击右上角按钮 ，会弹出菜单 ，菜单中的"转发 "选项默认不展示。通过 wx.showShareMenu() 和 wx.hideShareMenu() 可动态显示 、隐藏这个选项。
接口如下：
typescript
/**
* 注册微信事件
*/
registerEvent(): void {
//显示分享按钮(shareAppMessage转发,shareTimeline朋友圈)
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
});
}2.被动转发
用户点击右上角菜单 中的"转发 "选项后，会触发转发事件 ，如果小游戏通过 wx.onShareAppMessage() 监听了这个事件，可通过返回自定义转发参数来修改 转发卡片的内容，否则使用默认内容。
接口如下：
typescript
/**
* 注册微信事件
*/
registerEvent(): void {
//转发
wx.onShareAppMessage(() => {
return this.getShareData();
});
//分享朋友圈
wx.onShareTimeline(() => {
return this.getShareData();
});
}
/**
* 随机获取配置的分享内容
*/
getShareData() {
var data = {
title: "",//分享微信的标题
imageUrl: "", //通过MP系统审核的图片地址
query: "",//自定义附加参数
};
return data;
}3.主动转发
游戏内可通过 wx.shareAppMessage()接口直接调起 转发界面，与被动转发类似，可以自定义 转发卡片内容。
接口如下：
typescript
/**
* 主动转发
*/
shareAppMessage(title: string = "", imageUrl: string = "", query: string = "", shareCallback: any = null): void {
var data = {
title: title,
imageUrl: imageUrl,
query: query
};
wx.shareAppMessage(data);
}流量主广告模块
流量主 作为个人小游戏的主要收入来源 ，如果你想实现变现 ，必须要接入这个模块。
1.激励视频
激励视频广告组件 是由客户端原生的图片、文本、视频控件组成的，层级最高，会覆盖在上屏 Canvas 上。
接口如下：
typescript
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 上。
接口如下：
typescript
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.插屏广告
插屏广告组件 是由客户端原生的图片、文本、视频控件组成的，层级最高，会覆盖在普通组件上。
接口如下：
typescript
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 上。
接口如下：
typescript
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.用户信息获取
用户信息 指的是微信用户的昵称、头像等个人信息。
接口如下：
typescript
/**
* 通过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.振动
使手机发生振动 。常用于互动反馈。
接口如下：
typescript
/**
* 使手机发生较短时间的振动（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.重启小程序
重启当前小程序 ，可让用户重启小程序完成 资源或者配置的更新。
接口如下：
typescript
/**
* 重启当前小程序
*/
restartMiniProgram() {
wx.restartMiniProgram({
success: () => {
console.log("wx小程序重启成功");
},
fail: () => {
console.log("wx小程序重启失败");
}
});
}3.小程序跳转
打开另一个小程序，常用于搭建自己的小游戏矩阵。
接口如下：
typescript
/**
* 打开另一个小程序
*/
navigateToMiniProgram(appId: string) {
wx.navigateToMiniProgram({ appId: appId });
}其他模块
1.获取系统信息
常用于获取屏幕宽高，完成适配。
接口如下：
typescript
getSystemInfoSync(): { screenWidth: number, screenHeight: number } {
return wx.getSystemInfoSync();
}2.显示消息提示框
显示小程序自带的提示框。
接口如下：
typescript
showToast(title: string, success: boolean, duration: number = 0) {
wx.showToast({
title: title,
icon: success ? "success" : "error",
duration: duration
})
}3.菜单按钮
获取菜单按钮 （右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。用于适配。
接口如下：
typescript
getMenuButtonBoundingClientRect(): { width: number, height: number, top: number, right: number, bottom: number, left: number } {
return wx.getMenuButtonBoundingClientRect();
}4.事件上报
用于We分析后台上报事件，用于运营调优。
接口如下：
typescript
reportEvent(eventId: string, data: object) {
wx.reportEvent(eventId, data)
}5.游戏圈
创建游戏圈按钮 ，创建方式和获取用户信息类似，用于跳转游戏圈(类似社区)。
接口如下：
typescript
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.剪贴板
设置系统剪贴板 的内容，便于用户复制分享。
接口如下：
typescript
setClipboardData(data: string): void {
wx.setClipboardData({ data: data })
}7.好友排行榜
对用户托管数据 进行写数据操作。允许同时写多组 KV 数据。常用于实现好友排行榜。
typescript
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.开放域
发消息到开放域,与开放域进行交互 ，常用于发消息请求开放域去获取好友排行信息，绘制排行榜。
typescript
postMessage(data): void {
let openDataContext = wx.getOpenDataContext()
openDataContext.postMessage(data)
}结语
以上是整理的全部核心内容 ，整理不易，时间宝贵，需要源工程 的小伙伴可以阅读原文获取，付费 不仅是知识的获取 ，更是对笔者的支持和认可，感谢！
我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。
AD:笔者线上的小游戏《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。
实不相瞒，想要个赞 和在看 ！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐专栏：