微信小游戏开发实战指南：从基础配置到高级功能的完整教程
声明：本文部分内容使用AI辅助生成，经人工编辑、审核和补充个人经验。
更新说明：技术栈版本信息基于 微信小游戏 API 3.x / Cocos Creator 3.x。
微信小游戏开发实战指南概述微信小游戏是运行在微信客户端内的HTML5游戏，无需下载安装，即点即玩。凭借微信庞大的用户基础和便捷的分享机制，微信小游戏已成为移动游戏市场的重要组成部分。
这里介绍微信小游戏的开发流程，从基础配置到高级功能实现，帮助开发者快速掌握微信小游戏开发。
一、开发环境配置1.1 开发者工具下载安装
访问微信开发者工具下载页面
下载对应系统版本
安装并登录微信扫码
常见问题：服务端口已关闭错误提示：
1工具的服务端口已关闭
解决方案：
打开微信开发者工具
点击 设置（齿轮图标）
选择 安全设置
开启 服务端口
12设置路径：微信开发者工具 -> 设置 -> 安全设置 -> 服务端口 -> 开启
1.2 开发者账号注册
访问微信公众平台
注册小程序/小游戏账号
完成邮箱验证和主体认证
获取AppID
1.3 Cocos Creator配置构建发布123456// 1. 构建面板选择"微信小游戏"// 2. 填写AppID// 3. 配置远程服务器地址（如需要）// 4. 点击构建// 构建完成后，在build/wechatgame目录下找到项目
二、服务器域名配置2.1 配置要求微信小游戏只能与指定的服务器域名进行网络通信，包括：
普通HTTPS请求（wx.request）
上传文件（wx.uploadFile）
下载文件（wx.downloadFile）
WebSocket通信（wx.connectSocket）
2.2 配置流程配置路径：
1小程序后台 -> 开发 -> 开发设置 -> 服务器域名
配置规则：
协议
说明
示例
https
用于request/upload/download
https://api.example.com
wss
用于WebSocket
wss://ws.example.com
注意事项：
必须使用HTTPS/WSS协议
不能使用IP地址（小程序的局域网IP除外）
不能使用localhost
域名必须经过ICP备案
不支持配置父域名，只能配置子域名
2.3 端口配置
协议
端口配置
说明
HTTPS
可选配置
配置后只能访问该端口
WSS
无需配置
默认允许所有端口
示例：
12345678配置：https://api.example.com:8080请求：https://api.example.com:8080 成功请求：https://api.example.com 失败请求：https://api.example.com:443 失败配置：https://api.example.com请求：https://api.example.com 成功请求：https://api.example.com:443 失败（即使443是默认端口）
2.4 开发环境跳过校验在微信开发者工具中，可以临时跳过服务器域名校验：
12开发者工具 -> 详情 -> 本地设置 ->勾选"不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书"
注意：此设置只在开发工具中有效，真机调试仍需配置域名。
三、用户登录与OpenID获取3.1 登录流程12345678910┌─────────────┐ ┌─────────────┐ ┌─────────────┐│ 小游戏 │ --> │ 微信服务器 │ --> │ 开发者服务器││ wx.login() │ │ 返回code │ │ code2Session│└─────────────┘ └─────────────┘ └──────┬──────┘ │ v ┌─────────────┐ │ 返回OpenID │ │ session_key │ └─────────────┘
3.2 客户端登录代码12345678910111213141516171819202122232425262728293031323334353637383940// 微信登录function wxLogin() { return new Promise((resolve, reject) => { wx.login({ success: (res) => { if (res.code) { console.log("登录code:", res.code); // 发送code到开发者服务器 requestOpenId(res.code) .then(resolve) .catch(reject); } else { console.log("登录失败:", res.errMsg); reject(res.errMsg); } }, fail: reject }); });}// 请求OpenIDasync function requestOpenId(code) { try { const response = await wx.request({ url: 'https://your-domain.com/api/login', method: 'POST', data: { code: code } }); if (response.data.openid) { // 保存OpenID wx.setStorageSync('openid', response.data.openid); return response.data; } } catch (error) { console.error("获取OpenID失败:", error); throw error; }}
3.3 服务端获取OpenID1234567891011121314151617181920212223242526272829303132333435// Node.js服务端示例const axios = require('axios');async function getOpenId(code) { const appId = 'YOUR_APP_ID'; const secret = 'YOUR_APP_SECRET'; const url = `https://api.weixin.qq.com/sns/jscode2session`; try { const response = await axios.get(url, { params: { appid: appId, secret: secret, js_code: code, grant_type: 'authorization_code' } }); const data = response.data; if (data.openid) { return { openid: data.openid, session_key: data.session_key, unionid: data.unionid }; } else { throw new Error(data.errmsg); } } catch (error) { console.error("获取OpenID失败:", error); throw error; }}
3.4 返回数据示例1234567{ "openid": "oN_9x5O5WQ2xxxxxxxxxx", "session_key": "xxxxx+xxxxxxxxxx==", "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL", "errcode": 0, "errmsg": "ok"}
字段
说明
openid
用户在该小程序的唯一标识
session_key
会话密钥，用于数据加密
unionid
用户在微信开放平台的唯一标识（需绑定）
四、用户信息获取4.1 获取方式对比
方式
适用场景
需要用户授权
wx.getUserInfo
已废弃，不建议使用
是
wx.getUserProfile
获取用户信息
是
Button.open-type=”getUserInfo”
按钮触发
是
开放数据校验
服务端验证
否
4.2 使用按钮获取用户信息1234567891011121314151617181920212223242526272829303132// 创建授权按钮function createUserInfoButton() { const button = wx.createUserInfoButton({ type: 'text', text: '获取用户信息', style: { left: 10, top: 76, width: 200, height: 40, lineHeight: 40, backgroundColor: '#ff0000', color: '#ffffff', textAlign: 'center', fontSize: 16, borderRadius: 4 } }); button.onTap((res) => { if (res.errMsg.indexOf(':ok') > -1 && res.rawData) { console.log("用户信息:", res.userInfo); console.log("加密数据:", res.encryptedData); console.log("IV:", res.iv); // 发送到服务端解密 decryptUserData(res.encryptedData, res.iv); } }); return button;}
4.3 推荐的使用方式1234567891011121314151617181920212223242526272829303132// 先检查是否已授权wx.getSetting({ success: (res) => { if (res.authSetting['scope.userInfo'] === true) { // 已授权，直接获取 wx.getUserInfo({ success: (res) => { console.log("用户信息:", res.userInfo); } }); } else { // 未授权，创建按钮 const button = wx.createUserInfoButton({ type: "image", image: "images/login.png", style: { left: 100, top: 100, width: 100, height: 100 } }); button.onTap((res) => { if (res.errMsg.indexOf(':ok') > -1 && res.rawData) { console.log("用户信息:", res.userInfo); button.destroy(); // 获取成功后销毁按钮 } }); } }});
4.4 服务端数据解密123456789101112131415161718192021222324// 使用session_key解密用户数据const crypto = require('crypto');function decryptData(sessionKey, encryptedData, iv) { const sessionKeyBuffer = Buffer.from(sessionKey, 'base64'); const encryptedBuffer = Buffer.from(encryptedData, 'base64'); const ivBuffer = Buffer.from(iv, 'base64'); try { const decipher = crypto.createDecipheriv( 'aes-128-cbc', sessionKeyBuffer, ivBuffer ); decipher.setAutoPadding(true); let decoded = decipher.update(encryptedBuffer, 'binary', 'utf8'); decoded += decipher.final('utf8'); return JSON.parse(decoded); } catch (err) { throw new Error('解密失败'); }}
五、广告接入5.1 开通条件
条件
要求
独立访客（UV）
累计不低于1000
违规记录
无严重违规
5.2 开通方法1小程序后台 -> 推广 -> 流量主 -> 申请开通
5.3 广告类型
类型
特点
eCPM
Banner广告
常驻显示，占用空间
较低
激励视频广告
用户主动观看，收益高
高
插屏广告
全屏展示，打断性强
中
5.4 Banner广告12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849// 创建Banner广告let bannerAd = null;function createBannerAd() { if (wx.createBannerAd) { bannerAd = wx.createBannerAd({ adUnitId: 'your-ad-unit-id', style: { left: 10, top: 76, width: 320 } }); bannerAd.onLoad(() => { console.log('Banner广告加载成功'); }); bannerAd.onError((err) => { console.error('Banner广告加载失败:', err); }); bannerAd.onResize((res) => { console.log('Banner尺寸:', res.width, res.height); }); }}// 显示广告function showBannerAd() { if (bannerAd) { bannerAd.show(); }}// 隐藏广告function hideBannerAd() { if (bannerAd) { bannerAd.hide(); }}// 销毁广告function destroyBannerAd() { if (bannerAd) { bannerAd.destroy(); bannerAd = null; }}
5.5 激励视频广告1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950// 激励视频广告是全局单例let rewardedVideoAd = null;function initRewardedVideoAd() { if (wx.createRewardedVideoAd) { rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'your-ad-unit-id' }); rewardedVideoAd.onLoad(() => { console.log('激励视频广告加载成功'); }); rewardedVideoAd.onError((err) => { console.error('激励视频广告加载失败:', err); }); rewardedVideoAd.onClose((res) => { // 用户点击了【关闭广告】按钮 if (res && res.isEnded) { // 正常播放结束，发放奖励 console.log('广告播放完成，发放奖励'); grantReward(); } else { // 播放中途退出，不发放奖励 console.log('广告未播放完成'); } }); }}// 播放激励视频function showRewardedVideoAd() { return new Promise((resolve, reject) => { if (!rewardedVideoAd) { reject('广告未初始化'); return; } rewardedVideoAd.show().catch(() => { // 失败重试 rewardedVideoAd.load().then(() => { rewardedVideoAd.show(); }).catch(err => { console.error('激励视频广告显示失败:', err); reject(err); }); }); });}
5.6 插屏广告123456789101112131415161718192021222324252627282930let interstitialAd = null;function initInterstitialAd() { if (wx.createInterstitialAd) { interstitialAd = wx.createInterstitialAd({ adUnitId: 'your-ad-unit-id' }); interstitialAd.onLoad(() => { console.log('插屏广告加载成功'); }); interstitialAd.onError((err) => { console.error('插屏广告加载失败:', err); }); interstitialAd.onClose(() => { console.log('插屏广告关闭'); }); }}// 显示插屏广告function showInterstitialAd() { if (interstitialAd) { interstitialAd.show().catch((err) => { console.error('插屏广告显示失败:', err); }); }}
5.7 广告最佳实践12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061// 广告管理器class AdManager { constructor() { this.rewardedAd = null; this.bannerAd = null; this.init(); } init() { this.initRewardedAd(); this.initBannerAd(); } // 预加载激励视频 preloadRewardedAd() { if (this.rewardedAd) { this.rewardedAd.load().catch(console.error); } } // 显示激励视频（带奖励回调） showRewardedAd(onReward) { if (!this.rewardedAd) { onReward(false); return; } // 保存回调 this.onRewardCallback = onReward; this.rewardedAd.show().catch(() => { this.rewardedAd.load().then(() => { this.rewardedAd.show(); }).catch(() => { onReward(false); }); }); } // 关卡结束显示插屏 onLevelComplete(level) { // 每3关显示一次插屏 if (level % 3 === 0) { this.showInterstitialAd(); } }}// 使用示例const adManager = new AdManager();// 复活时显示激励视频function onRevive() { adManager.showRewardedAd((success) => { if (success) { revivePlayer(); } else { showToast('广告加载失败，请重试'); } });}
六、性能优化6.1 包体优化12主包大小限制：4MB总包大小限制：20MB（通过分包）
优化建议：
图片压缩：使用TinyPNG等工具
代码压缩：开启代码混淆
资源分包：将非必需资源放在分包
音频压缩：使用合适格式和采样率
6.2 性能监控123456789101112131415// 获取性能数据const performance = wx.getPerformance();// 内存警告wx.onMemoryWarning((res) => { console.log('内存警告级别:', res.level); // level: 0(轻微), 1(中等), 2(严重)});// 帧率监控const fpsMonitor = wx.createCameraFrameListener({ success: (res) => { console.log('当前帧率:', res.fps); }});
七、发布流程7.1 提审前检查清单
包体大小符合要求
无敏感内容
用户协议和隐私政策
适龄提示
健康游戏忠告
版号（如需要）
7.2 提审流程123451. 开发者工具上传代码2. 小程序后台提交审核3. 填写版本信息4. 等待审核（1-7个工作日）5. 审核通过后发布
八、常见问题8.1 网络请求失败问题：request:fail url not in domain list
解决方案：
检查域名是否在服务器域名配置中
检查域名是否已完成ICP备案
开发环境可开启”不校验域名”选项
8.2 用户拒绝授权123456789101112wx.getSetting({ success: (res) => { if (!res.authSetting['scope.userInfo']) { // 引导用户开启授权 wx.openSetting({ success: (res) => { console.log(res.authSetting); } }); } }});
8.3 真机调试1开发者工具 -> 真机调试 -> 扫码调试
总结本文详细介绍了微信小游戏的开发要点：
环境配置：开发者工具、服务端口、Cocos Creator
域名配置：HTTPS/WSS协议要求、端口配置
用户系统：登录流程、OpenID获取、用户信息
广告变现：Banner、激励视频、插屏广告
性能优化：包体大小、内存管理
发布流程：提审检查、审核流程
常见问题：网络请求、授权问题
微信小游戏具有庞大的用户基础和便捷的传播机制，是游戏开发者不可忽视的平台。建议持续关注微信官方文档更新，及时适配新功能和政策变化。
参考资源：
微信小游戏官方文档
微信公众平台
微信开发者工具
Cocos Creator微信小游戏发布