一周时间，从无到上线的所有开发过程记录如下。小游戏上线由于时间关系，没有接广告（调用微信的API，看完笔记就会了）。小游戏游戏上线3天的流量是4万人左右，端午节的时候哦（没有集大力推广，上线试水），后期用户流失较大（运营的事），小游戏不涉及自己的服务器，只有排行榜是利用的微信的服务器。
主域（主工程）
子域（子工程）
一、游戏内容
1.开发工具
CocosCreator 1.9.1、微信开发工具（最新）、Sublime
2.游戏本身玩法：游戏玩法逻辑，不作介绍，根据游戏自身写逻辑
3.排行榜：微信统计，只有“分数”一个数据，所有游戏本身的围绕一个分数来展开哦
4.分享：分享到微信好友或者微信朋友圈
5.需要创建2个工程，主域和子域
二、上线准备工作
三、开发核心点（坑点）
1.主域
1）游戏主工程（排行榜脚本和排行榜资源不能在这里）：游戏玩法逻辑，subCanvas渲染，分数提交，分析等逻辑
2）主域的ui结构：需要创建一个subCanvas
image.png
GameMain.jsvarUIHelper =require("UIHelper")varSHARE_TITLE ="分享标题"varSHARE_IMAGE_URL ="http://47.106.91.153/wechatgame/game_share_icon.png"cc.Class({extends: cc.Component,gameWebSokcet:null,properties: {subCanvas: cc.Sprite, },onLoad:function(){ cc.Client = {} cc.Client.UIHelper =newUIHelper() cc.Client.GameMain =thisthis.updateFlag =false},start:function(){if(window.wx !=undefined) {window.wx.showShareMenu({withShareTicket:true});this.tex =newcc.Texture2D(); } },shareToFriends:function(){if(cc.sys.platform === cc.sys.WECHAT_GAME){ wx.shareAppMessage( {title:"端午大作战",imageUrl:"http://47.106.91.153/wechatgame/game_share_icon.png"}); } },// 刷新子域的纹理_updateSubDomainCanvas:function(){if(window.sharedCanvas !=undefined) {this.tex.initWithElement(window.sharedCanvas);this.tex.handleLoadedTexture();this.subCanvas.spriteFrame =newcc.SpriteFrame(this.tex); } },setUpdateFlag:function(bOn){this.updateFlag = bOn },update:function(dt){if(this.updateFlag){this._updateSubDomainCanvas(); } },})
this._updateSubDomainCanvas(); 必须刷新，这了我用的标记去控制，就是在打开排行的时候去刷新，关闭排行的时候就不刷新，为什么？ 因为，这个东西一直刷新非常非常消耗性能，FPS直接掉30帧，所以在玩游戏的就关闭下，游戏结束，打开排行榜再刷新。
2）发布设置：
image.png
黄色框为资源工程发布的游戏名字（特殊的，子工程发布的时候是发布在主工程发布所有在目录，即主工程的build目录下），对应了主域的子工程名字，发布路径必须是主域的build目录下
2.子域：只有排行榜脚本和资源在这里
1）子域设置：
image.png
排行数据相关类WXStorageMgr.js
cc.Class({extends: cc.Component,ctor:function(){this.RankListData =undefinedthis.ScoreTag ="x1"//"WXStorage_Score"},SubmitScore:function(score){if(window.wx ==undefined) {return}varself =this//获取云端的历史数据wx.getUserCloudStorage({keyList: [self.ScoreTag],success:function(res){console.log("云端读取成功")varlast_score =0//判断当前分数是否大于历史分数if(res.KVDataList.length !=0) {letval = res.KVDataList[0].value val =parseInt(val)if(typeofval =="number") { last_score = val } }console.log("----历史分数:"+ last_score +"----当前分数:"+ score)if(last_score >= score) {console.log("当前分数没有历史分数高，不用记录")return}//开始记录wx.setUserCloudStorage({KVDataList: [{key: self.ScoreTag,value:""+ score}],success:function(res){console.log("云端记录成功") },fail:function(res){console.log("云端记录失败") }, }) },fail:function(res){console.log("云端读取失败") }, }) },GetRankingData:function(call_back){if(window.wx ==undefined) {return}varself =this//获取自己的信息wx.getUserInfo({openIdList: ["selfOpenId"],success:function(res){console.log(res)//取出自己的user_infoif(res.data.length <=0) {console.log("用户信息读取失败") }letmine_info = res.data[0]//openid//获取朋友的信息wx.getFriendCloudStorage({keyList: [self.ScoreTag],success:function(res){ self.RankListData =newArray() res.data.forEach(function(item,index,array){letnew_item = {} new_item.avatarUrl = item.avatarUrl new_item.isMine = item.avatarUrl == mine_info.avatarUrl new_item.nickName = item.nicknameif(item.KVDataList.length >0) { new_item.score =parseInt(item.KVDataList[0].value) }else{ new_item.score =0} self.RankListData[index] = new_item });if(typeofcall_back =="function") { call_back(self.RankListData) }console.log(self.RankListData) },fail:function(res){console.log("朋友信息获取失败") }, }) },fail:function(res){console.log("用户信息读取失败") } }) },});
排行数据调用过程代码：
UIRank.js部分代码：
varWXStorageMgr =require("WXStorageMgr")varMAX_SHOW_RANK =100varsort =function(ranks){ ranks.sort(function(a, b){returnb.score - a.score })}// 用法:AddClickEvent(this.testBtn, this.node, "BtnFunctionTest", this.__classname__)varAddClickEvent =function(node, target, handler, component){if(!component){ log.error("<unknown component>")return}console.log(node.name +":"+ component +":"+ handler)vareventHandler =newcc.Component.EventHandler() eventHandler.target = target eventHandler.component = component eventHandler.handler = handlervarclickEvents = node.getComponent(cc.Button).clickEvents; clickEvents.push(eventHandler)}// 加载该玩家头像varloadWechatHead =function(node, headSprite, head_url){letimage = wx.createImage() image.onload =function(){lettexture =newcc.Texture2D() texture.initWithElement(image) texture.handleLoadedTexture() headSprite.spriteFrame =newcc.SpriteFrame(texture) } image.src = head_url}cc.Class({extends: cc.Component,properties: {btnChallenge:cc.Node,btnReplay:cc.Node,btnReturn:cc.Node,btnViewAllRank:cc.Node,rankListView:cc.ScrollView,content:cc.Node,rankItem:cc.Prefab,curGetScore:cc.Label,top4Node:cc.Node,selfItem:cc.Node,maxItem:cc.Node,subRank:cc.Node,allRank:cc.Node,uiRank:cc.Node,allRankBtnReturn:cc.Node,btnShareToFriends:cc.Node, }, onLoad () { AddClickEvent(this.btnChallenge,this.node,"onBtnChallenge",this.__classname__) AddClickEvent(this.btnReplay,this.node,"onBtnReplay",this.__classname__) AddClickEvent(this.btnReturn,this.node,"onBtnReturn",this.__classname__) AddClickEvent(this.btnViewAllRank,this.node,"onBtnViewAllRank",this.__classname__) AddClickEvent(this.allRankBtnReturn,this.node,"onAllRankBtnReturn",this.__classname__) AddClickEvent(this.btnShareToFriends,this.node,"shareToFriends",this.__classname__)this.storageMgr =newWXStorageMgr()console.log("rank on load finish") },shareToFriends:function(){if(window.wx ==undefined) {return} wx.shareAppMessage( {title:"粽子大作战",imageUrl:"http://47.106.91.153/wechatgame/duanwugame/res/raw-assets/resources/png/login/l_01.849db.png"}); },start:function(){console.log("rank on start")varself =thisif(window.wx !=undefined) {window.wx.onMessage(function(data){//1:设置分数 2:获取排行数据if(data.type ==1) {console.log("设置分数") self.storageMgr.SubmitScore(data.score) }elseif(data.type ==2) {console.log("获取排行数据")varthat = self self.storageMgr.GetRankingData(function(rank_datas){console.log("-----排行数据获取成功-----") that.onWechatCallback(rank_datas) }) }elseif(data.type ==4){ self.closeRankUI() } }) }console.log("rank on start finish") },onAllRankBtnReturn:function(){this.viewSubRank() },onWechatCallback:function(data){for(vari =0; i < data.length; i++) { data[i] }this.uiRank.active =truethis.ranks = data sort(this.ranks)this.viewTop4PlayerRank(this.ranks)// 自己if(this.getMineInfo(this.ranks)){varinfos =this.getMineInfo(this.ranks)this.setItemInfo(this.selfItem, infos.info, infos.rank) }else{console.log("error self info") }// 最大if(this.ranks[0]){console.log(" max info")this.setItemInfo(this.maxItem,this.ranks[0],1) }else{console.log("error max info") }this.viewSubRank() },
3.分享：坑的是，在pc上的微信开发工具，调试期间没有转发功能，然后我在mac上的微信开发工具调试有转发功能！不知道后期是否修复了。
分析代码：
wx.shareAppMessage( {title:"粽子大作战", imageUrl:"http://47.106.91.153/wechatgame/duanwugame/res/raw-assets/resources/png/login/l_01.849db.png"});
4..ui制作规范：
由于子域不能和主域通信（主域能和子域通信），所有我把排行相关的ui按钮做到了主工程里面，然后按钮发送消息给子工程（这里基本思路，通信的内容用微信的api进行）
通信代码例子：
returnBegin:function(){this.uiRankTemp.active =falsethis.uiBegin.active =trueif(cc.sys.platform === cc.sys.WECHAT_GAME){window.wx.postMessage({type:4, }); }varself =thisthis.schedule(function(){ self.canvas.getComponent("GameMain").setUpdateFlag(false) },0.1,1) },
image.png
4.远程资源下载
远程资源下载需要讲资源放置到远程服务器上面，仅限（ 包体大于4mb）， 发布正式版注意事项：需要https域名服务器，域名是备案的域名，调试阶段可以勾选上“不校验合法域名”，发布到手机上需要开启调试模式哦！切记
image.png
在cocos creaator 发布的时候填写好域名地址，不用加res目录，但是你的远程资源服务器上需要是res目录哦。上传好以后，删除本地res，然后清理缓存，在微信工具里面调试下，资源可以正常下载，就可以进入下面的步骤了。
5.发布开发版本
待上面的工作都做完以后，就可以用手机调试了，在微信工具里面点击预览即可，然后用手机扫二维码在手机上调试
6.发布体验版本
开发版本ok了以后，上传到微信后台，进入微信后台管理，将提交的版本选为体验版本即可。
7.发布正式版
将体验版本，提交审核，前提是你的所有手续是齐全的，什么软著啊，自审报告啊，等等
9.微信小游戏服务器相关
============= 单独写一个笔记 ，后续 =============
四、后记
简单的微信小游戏涉及不到服务器的东西，不过后面我开发的几款小游戏都涉及到了服务器，经过上线测试也还算稳定，主要射击到，商城，签到啊之类的，后面将单独写一个笔记关于微信小游戏的发服务器之类的东西，什么分享给好友，好友点击响应等等。
作者：刘伏波Rinnsio1xy
链接：https://www.jianshu.com/p/f7a58bdfe74d
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
网友评论