CocosCreator-【微信小游戲】小游戲從零開發(fā)到上線全過程，了解下！

一周時間，從無到上線的所有開發(fā)過程記錄如下。小游戲上線由于時間關系，沒有接廣告（調用微信的API，看完筆記就會了）。小游戲游戲上線3天的流量是4萬人左右，端午節(jié)的時候哦（沒有集大力推廣，上線試水），后期用戶流失較大（運營的事），小游戲不涉及自己的服務器，只有排行榜是利用的微信的服務器。

主域（主工程）

子域（子工程）

一、游戲內容

1.開發(fā)工具

CocosCreator 1.9.1、微信開發(fā)工具（最新）、Sublime

2.游戲本身玩法：游戲玩法邏輯，不作介紹，根據(jù)游戲自身寫邏輯

3.排行榜：微信統(tǒng)計，只有“分數(shù)”一個數(shù)據(jù)，所有游戲本身的圍繞一個分數(shù)來展開哦

4.分享：分享到微信好友或者微信朋友圈

5.需要創(chuàng)建2個工程，主域和子域

二、上線準備工作

三、開發(fā)核心點（坑點）

1.主域

1）游戲主工程（排行榜腳本和排行榜資源不能在這里）：游戲玩法邏輯，subCanvas渲染，分數(shù)提交，分析等邏輯

2）主域的ui結構：需要創(chuàng)建一個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:"端午大作戰(zhàn)",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(); 必須刷新，這了我用的標記去控制，就是在打開排行的時候去刷新，關閉排行的時候就不刷新，為什么？ 因為，這個東西一直刷新非常非常消耗性能，F(xiàn)PS直接掉30幀，所以在玩游戲的就關閉下，游戲結束，打開排行榜再刷新。

2）發(fā)布設置：

image.png

黃色框為資源工程發(fā)布的游戲名字（特殊的，子工程發(fā)布的時候是發(fā)布在主工程發(fā)布所有在目錄，即主工程的build目錄下），對應了主域的子工程名字，發(fā)布路徑必須是主域的build目錄下

2.子域：只有排行榜腳本和資源在這里

1）子域設置：

image.png

排行數(shù)據(jù)相關類WXStorageMgr.js

cc.Class({extends: cc.Component,ctor:function(){this.RankListData =undefinedthis.ScoreTag ="x1"http://"WXStorage_Score"},SubmitScore:function(score){if(window.wx ==undefined)? ? ? ? {return}varself =this//獲取云端的歷史數(shù)據(jù)wx.getUserCloudStorage({keyList: [self.ScoreTag],success:function(res){console.log("云端讀取成功")varlast_score =0//判斷當前分數(shù)是否大于歷史分數(shù)if(res.KVDataList.length !=0)? ? ? ? ? ? ? ? {letval = res.KVDataList[0].value? ? ? ? ? ? ? ? ? ? val =parseInt(val)if(typeofval =="number")? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? last_score = val? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? }console.log("----歷史分數(shù):"+ last_score +"----當前分數(shù):"+ score)if(last_score >= score)? ? ? ? ? ? ? ? {console.log("當前分數(shù)沒有歷史分數(shù)高，不用記錄")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("用戶信息讀取失敗")? ? ? ? ? ? }? ? ? ? })? ? },});

排行數(shù)據(jù)調用過程代碼：

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:"粽子大作戰(zhàn)",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:設置分數(shù) 2:獲取排行數(shù)據(jù)if(data.type ==1)? ? ? ? ? ? ? ? {console.log("設置分數(shù)")? ? ? ? ? ? ? ? ? ? self.storageMgr.SubmitScore(data.score)? ? ? ? ? ? ? ? }elseif(data.type ==2)? ? ? ? ? ? ? ? {console.log("獲取排行數(shù)據(jù)")varthat = self? ? ? ? ? ? ? ? ? ? self.storageMgr.GetRankingData(function(rank_datas){console.log("-----排行數(shù)據(jù)獲取成功-----")? ? ? ? ? ? ? ? ? ? ? ? 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上的微信開發(fā)工具，調試期間沒有轉發(fā)功能，然后我在mac上的微信開發(fā)工具調試有轉發(fā)功能！不知道后期是否修復了。

分析代碼：

wx.shareAppMessage(? ? ? ? {title:"粽子大作戰(zhàn)",? ? ? ? ? ? imageUrl:"http://47.106.91.153/wechatgame/duanwugame/res/raw-assets/resources/png/login/l_01.849db.png"});

4..ui制作規(guī)范：

由于子域不能和主域通信（主域能和子域通信），所有我把排行相關的ui按鈕做到了主工程里面，然后按鈕發(fā)送消息給子工程（這里基本思路，通信的內容用微信的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）， 發(fā)布正式版注意事項：需要https域名服務器，域名是備案的域名，調試階段可以勾選上“不校驗合法域名”，發(fā)布到手機上需要開啟調試模式哦！切記

image.png

在cocos creaator? 發(fā)布的時候填寫好域名地址，不用加res目錄，但是你的遠程資源服務器上需要是res目錄哦。上傳好以后，刪除本地res，然后清理緩存，在微信工具里面調試下，資源可以正常下載，就可以進入下面的步驟了。

5.發(fā)布開發(fā)版本

待上面的工作都做完以后，就可以用手機調試了，在微信工具里面點擊預覽即可，然后用手機掃二維碼在手機上調試

6.發(fā)布體驗版本

開發(fā)版本ok了以后，上傳到微信后臺，進入微信后臺管理，將提交的版本選為體驗版本即可。

7.發(fā)布正式版

將體驗版本，提交審核，前提是你的所有手續(xù)是齊全的，什么軟著啊，自審報告啊，等等

9.微信小游戲服務器相關

============= 單獨寫一個筆記 ，后續(xù) =============

四、后記

簡單的微信小游戲涉及不到服務器的東西，不過后面我開發(fā)的幾款小游戲都涉及到了服務器，經(jīng)過上線測試也還算穩(wěn)定，主要射擊到，商城，簽到啊之類的，后面將單獨寫一個筆記關于微信小游戲的發(fā)服務器之類的東西，什么分享給好友，好友點擊響應等等。

作者：劉伏波Rinnsio1xy

鏈接：http://www.itdecent.cn/p/f7a58bdfe74d

來源：簡書

簡書著作權歸作者所有，任何形式的轉載都請聯(lián)系作者獲得授權并注明出處。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容