android cocoscreator 熱更新超詳細篇（五）-有解無憂

前言

前面學了 android cocoscreator 相互呼叫(三）
這章主要學習在 android 里熱更 js 代碼及資源（cocoscreator 官方也有介紹，不過不是很詳細,也有用熱插件的，商店里有），這章介紹手動操作腳本生成熱更新檔案及測驗熱更新

1: 準備
win7 64位
cocoscreator2.0.10 （新版本如 2.4.7應該也是可以的）
node 版本 13.14 版（再高好像不支持win7了）

2:創建個helloworld 工程再生成APK
1:增加2個按鈕 check hotupdate 分別系結 checkfun hotupdatefun 函式

在這里插入圖片描述
2： HelloWorld.js 代碼如下

cc.Class({
    extends: cc.Component,

    properties: {
        label: {
            default: null,
            type: cc.Label
        },
        // defaults, set visually when attaching this script to the Canvas
     //   text: 'Hello, World!',
		/eh///
		//包名 暫定 org.cocos2d.helloworld
		//project.mainfest  檔案存放地
		manifestUrl: {
            type: cc.Asset,     // use 'type:' to define Asset object directly
            default: null,      // object's default value is null
          },
        _updating: false,		//是否正在更新中
        _canRetry: false,		//能否重試
        _storagePath: ''		//android /data/data/包名/files/ 下就是這個存放目錄
		/
    },

    // use this for initialization
    onLoad: function () {
      //  this.label.string = this.text;
	  /
        this.outputlog("onLoad");
        // Hot update is only available in Native build
        if (!cc.sys.isNative) {
            this.outputlog("jsb is not isNative");
            return;
        }
        if(!jsb){
            this.outputlog("jsb is null");
            return ;
        }

        this._storagePath = ((jsb.fileUtils ? jsb.fileUtils.getWritablePath() : '/') + 'my-remote-asset');// /data/data/包名/files/my-remote-asset
        this.outputlog('Storage path for remote asset : ' + this._storagePath);

        // Setup your own version compare handler, versionA and B is versions in string
        // if the return value greater than 0, versionA is greater than B,
        // if the return value equals 0, versionA equals to B,
        // if the return value smaller than 0, versionA is smaller than B.
        var self = this;
        this.versionCompareHandle = function (versionA, versionB) {
            self .outputlog("JS Custom Version Compare: version A is " + versionA + ', version B is ' + versionB);
            var vA = versionA.split('.');
            var vB = versionB.split('.');
            for (var i = 0; i < vA.length; ++i) {
                var a = parseInt(vA[i]);
                var b = parseInt(vB[i] || 0);
                if (a === b) {
                    continue;
                }
                else {
                    return a - b;
                }
            }
            if (vB.length > vA.length) {
                return -1;
            }
            else {
                return 0;
            }
        };

        // Init with empty manifest url for testing custom manifest
        this._am = new jsb.AssetsManager('', this._storagePath, this.versionCompareHandle);
        // if (!cc.sys.ENABLE_GC_FOR_NATIVE_OBJECTS) {  // this._am.retain(); 沒有這個函式  eh
        //     this._am.retain();
        // }
        // Setup the verification callback, but we don't have md5 check function yet, so only print some message
        // Return true if the verification passed, otherwise return false
        this._am.setVerifyCallback(function (path, asset) {
            // When asset is compressed, we don't need to check its md5, because zip file have been deleted.
            var compressed = asset.compressed;
            // Retrieve the correct md5 value.
            var expectedMD5 = asset.md5;
            // asset.path is relative path and path is absolute.
            var relativePath = asset.path;
            // The size of asset file, but this value could be absent.
            var size = asset.size;
            if (compressed) {
                self .outputlog("Verification passed : " + relativePath);
                return true;
            }
            else {
                self .outputlog("Verification passed : " + relativePath + ' (' + expectedMD5 + ')');
                return true;
            }
        });
        this.outputlog("Hot update is ready, please check or directly update.");
        this.label.string = "Hot update is ready, please check or directly update.";

        if (cc.sys.os === cc.sys.OS_ANDROID) {
            // Some Android device may slow down the download process when concurrent tasks is too much.
            // The value may not be accurate, please do more test and find what's most suitable for your game.
            this._am.setMaxConcurrentTask(2);
            this.outputlog("Max concurrent tasks count have been limited to 2");
        }
        // this.checkfun();
        ///
    },

    // called every frame
    update: function (dt) {

    },
	/eh///
	//日志輸出
    outputlog:function(){//可變引數  arguments
        let strlog="";
		for (var i=0; i<arguments.length; i++) {
			strlog = strlog + arguments[i];
		}
		console.log(strlog);
    },
	
	showlablestr:function(str){
		this.label.string = str ;
	},
	button 系結函式
	checkfun:function(){
		if (this._updating) {
            this.label.string = 'Checking or updating ...';
            return;
        }
        if (this._am.getState() === jsb.AssetsManager.State.UNINITED) {
            // Resolve md5 url
            var url = this.manifestUrl.nativeUrl;
            if (cc.loader.md5Pipe) {
                url = cc.loader.md5Pipe.transformURL(url);
            }
            this._am.loadLocalManifest(url);
        }
        if (!this._am.getLocalManifest() || !this._am.getLocalManifest().isLoaded()) {
            this.label.string = 'Failed to load local manifest ...';
            return;
        }
        this._am.setEventCallback(this.checkCb.bind(this));

        this._am.checkUpdate();
        this._updating = true;
	},
	
	button 系結函式
	hotupdatefun:function(){
		if (this._am && !this._updating) {
            this._am.setEventCallback(this.updateCb.bind(this));

            if (this._am.getState() === jsb.AssetsManager.State.UNINITED) {
                // Resolve md5 url
                var url = this.manifestUrl.nativeUrl;
                if (cc.loader.md5Pipe) {
                    url = cc.loader.md5Pipe.transformURL(url);
                }
                this._am.loadLocalManifest(url);
            }

            this._am.update();
            this._updating = true;
        }
	},
	/熱更代碼 參考官方///
	checkCb: function (event) {
        this.outputlog('Code: ' + event.getEventCode());
        switch (event.getEventCode())
        {
            case jsb.EventAssetsManager.ERROR_NO_LOCAL_MANIFEST:
                this.showlablestr("No local manifest file found, hot update skipped.");
                break;
            case jsb.EventAssetsManager.ERROR_DOWNLOAD_MANIFEST:
            case jsb.EventAssetsManager.ERROR_PARSE_MANIFEST:
            this.showlablestr("Fail to download manifest file, hot update skipped.");
                break;
            case jsb.EventAssetsManager.ALREADY_UP_TO_DATE:
            this.showlablestr( "Already up to date with the latest remote version.");
                break;
            case jsb.EventAssetsManager.NEW_VERSION_FOUND:
                this.showlablestr('New version found, please try to update.');
                break;
            default:
                return;
        }
        
        this._am.setEventCallback(null);
        this._checkListener = null;
        this._updating = false;
    },

    updateCb: function (event) {
        var needRestart = false;
        var failed = false;
        switch (event.getEventCode())
        {
            case jsb.EventAssetsManager.ERROR_NO_LOCAL_MANIFEST:
                this.showlablestr( 'No local manifest file found, hot update skipped.');
                failed = true;
                break;
            case jsb.EventAssetsManager.UPDATE_PROGRESSION:
                break;
            case jsb.EventAssetsManager.ERROR_DOWNLOAD_MANIFEST:
            case jsb.EventAssetsManager.ERROR_PARSE_MANIFEST:
                 this.showlablestr('Fail to download manifest file, hot update skipped.');
                failed = true;
                break;
            case jsb.EventAssetsManager.ALREADY_UP_TO_DATE:
                this.showlablestr('Already up to date with the latest remote version.');
                failed = true;
                break;
            case jsb.EventAssetsManager.UPDATE_FINISHED:
                this.showlablestr( 'Update finished. ' + event.getMessage());
                needRestart = true;
                break;
            case jsb.EventAssetsManager.UPDATE_FAILED:
                this.showlablestr( 'Update failed. ' + event.getMessage());
                this._updating = false;
                this._canRetry = true;
                break;
            case jsb.EventAssetsManager.ERROR_UPDATING:
                this.showlablestr( 'Asset update error: ' + event.getAssetId() + ', ' + event.getMessage());
                break;
            case jsb.EventAssetsManager.ERROR_DECOMPRESS:
                this.showlablestr( event.getMessage());
                break;
            default:
                break;
        }

        if (failed) {
            this._am.setEventCallback(null);
            this._updateListener = null;
            this._updating = false;
        }

        if (needRestart) {
            this._am.setEventCallback(null);
            this._updateListener = null;
            // Prepend the manifest's search path
            var searchPaths = jsb.fileUtils.getSearchPaths();
            var newPaths = this._am.getLocalManifest().getSearchPaths();
            this.outputlog(JSON.stringify(newPaths));
            Array.prototype.unshift.apply(searchPaths, newPaths);
            // This value will be retrieved and appended to the default search path during game startup,
            // please refer to samples/js-tests/main.js for detailed usage.
            // !!! Re-add the search paths in main.js is very important, otherwise, new scripts won't take effect.
            //eh explain 跟main.js var hotUpdateSearchPaths = cc.sys.localStorage.getItem('HotUpdateSearchPaths'); 
            //必須一致  必須一致 必須一致
            cc.sys.localStorage.setItem('HotUpdateSearchPaths', JSON.stringify(searchPaths));
            jsb.fileUtils.setSearchPaths(searchPaths);

            cc.audioEngine.stopAll();
            cc.game.restart();
        }
    },

    loadCustomManifest: function () {
        if (this._am.getState() === jsb.AssetsManager.State.UNINITED) {
            var manifest = new jsb.Manifest(customManifestStr, this._storagePath);
            this._am.loadLocalManifest(manifest, this._storagePath);
            this.showlablestr( 'Using custom manifest');
        }
    },
    
    retry: function () {
        if (!this._updating && this._canRetry) {
            this._canRetry = false;
            
            this.showlablestr( 'Retry failed Assets...');
            this._am.downloadFailedAssets();
        }
    },
   
    onDestroy: function () {
        if (this._updateListener) {
            this._am.setEventCallback(null);
            this._updateListener = null;
        }
    },
	
	/
});

3: 構建再執行腳本生成 manifest 檔案
1> 先構建**（第一次）**
構建是為了生成 build\jsb-link(或jsb_default)\ 這里選擇的是link 模板
主要就是為了res 和 src 這兩個目錄為后面生成manifest檔案用在這里插入圖片描述
2> 把 version_generator.js 放到工程根目錄下

version_generator.js內容如下

var fs = require('fs');
var path = require('path');
var crypto = require('crypto');

var manifest = {
	//記得先裝個node 啊
    //packageUrl 服務器更新資料包根目錄  hotupdate 目錄下有 src res 加 2個 manifest（project,version) 如下
	//version  版本號
    packageUrl: 'http://192.168.1.4/hotupdate/',
    remoteManifestUrl: 'http://192.168.1.4/hotupdate/project.manifest',
    remoteVersionUrl: 'http://192.168.1.4/hotupdate/version.manifest',
    version: '1.0.0',
    assets: {},
    searchPaths: []
};

//生成的manifest檔案存放目錄 就是用node version_generator.js 生成2個manifest 存放的路徑
var dest = 'assets/';
//專案構建后資源的目錄
var src = 'build/jsb-link/'; //這里選擇的是link模板，選擇default 需要修改下

// Parse arguments
var i = 2;
while ( i < process.argv.length) {
    var arg = process.argv[i];

    switch (arg) {
    case '--url' :
    case '-u' :
        var url = process.argv[i+1];
        manifest.packageUrl = url;
        manifest.remoteManifestUrl = url + 'project.manifest';
        manifest.remoteVersionUrl = url + 'version.manifest';
        i += 2;
        break;
    case '--version' :
    case '-v' :
        manifest.version = process.argv[i+1];
        i += 2;
        break;
    case '--src' :
    case '-s' :
        src = process.argv[i+1];
        i += 2;
        break;
    case '--dest' :
    case '-d' :
        dest = process.argv[i+1];
        i += 2;
        break;
    default :
        i++;
        break;
    }
}


function readDir (dir, obj) {
    var stat = fs.statSync(dir);
    if (!stat.isDirectory()) {
        return;
    }
    var subpaths = fs.readdirSync(dir), subpath, size, md5, compressed, relative;
    for (var i = 0; i < subpaths.length; ++i) {
        if (subpaths[i][0] === '.') {
            continue;
        }
        subpath = path.join(dir, subpaths[i]);
        stat = fs.statSync(subpath);
        if (stat.isDirectory()) {
            readDir(subpath, obj);
        }
        else if (stat.isFile()) {
            // Size in Bytes
            size = stat['size'];
            md5 = crypto.createHash('md5').update(fs.readFileSync(subpath, 'binary')).digest('hex');
            compressed = path.extname(subpath).toLowerCase() === '.zip';

            relative = path.relative(src, subpath);
            relative = relative.replace(/\\/g, '/');
            relative = encodeURI(relative);
            obj[relative] = {
                'size' : size,
                'md5' : md5
            };
            if (compressed) {
                obj[relative].compressed = true;
            }
        }
    }
}

var mkdirSync = function (path) {
    try {
        fs.mkdirSync(path);
    } catch(e) {
        if ( e.code != 'EEXIST' ) throw e;
    }
}

// Iterate res and src folder
readDir(path.join(src, 'src'), manifest.assets);
readDir(path.join(src, 'res'), manifest.assets);

var destManifest = path.join(dest, 'project.manifest');
var destVersion = path.join(dest, 'version.manifest');

mkdirSync(dest);

fs.writeFile(destManifest, JSON.stringify(manifest), (err) => {
  if (err) throw err;
  console.log('Manifest successfully generated');
});

delete manifest.assets;
delete manifest.searchPaths;
fs.writeFile(destVersion, JSON.stringify(manifest), (err) => {
  if (err) throw err;
  console.log('Version successfully generated');
});

這里已經把遠程路徑配好了，所以只需要執行 node version_generator.js 會產生manifest 檔案
在這里插入圖片描述

如果沒配置或跟檔案里的不一樣可以用這里第一次版本號先用1.0.0 (下次為個 1.0.1 自己隨意增加)
node version_generator.js -v 1.0.0 -u http://192.168.1.4/hotupdate/ -s build/jsb-link/ -d assets/
就4個附加引數 -v -u -s -d 知道為什么？跟 version_generator.js 一一對應的
在這里插入圖片描述
執行 node version_generator.js 或 node version_generator.js -v -u -s -d 帶引數這種（個人覺得直接在檔案里寫好省事）

為什么會生成在這，看 version_generator.js 里配置或看 -d 的引數在這里插入圖片描述
把project.manifest 檔案拖過去

保存場景再次構建**（第二次）** ，
構建完了，修改build\jsb-link\main.js 在 window.boot(); 前（因為選擇的是link 模板）

var isRuntime = (typeof loadRuntime === 'function');
    if (isRuntime) {
        require('src/settings.js');
        require('src/cocos2d-runtime.js');
        require('jsb-adapter/engine/index.js');
    }
    else {
        require('src/settings.js');
        require('src/cocos2d-jsb.js');
        require('jsb-adapter/jsb-engine.js');
    }
	///eh add/
	//HelloWorld.js  updateCb 函式 cc.sys.localStorage.setItem('HotUpdateSearchPaths', JSON.stringify(searchPaths));
	var hotUpdateSearchPaths = cc.sys.localStorage.getItem('HotUpdateSearchPaths'); //必須一致
	 if (hotUpdateSearchPaths) {
		  window.jsb.fileUtils.setSearchPaths(JSON.parse(hotUpdateSearchPaths));
	 }
	 require('src/settings.js'); //重新加載一次 或上面的就不加載
	 

    cc.macro.CLEANUP_IMAGE_CACHE = true;
    window.boot();

保存main.js,再點編譯生成APK （根據機子好壞等段時間）
在這里插入圖片描述
編譯完成得到APK，路徑這里選擇的是link模板，選擇default 路徑有點區別的

以上是生成APK的工程，可以保存起來，以后修改都是在這個基礎上的進行的

3:修改工程測驗熱跟新
1：第一次測驗，先修改 icon 再加個 lable ,簡單修改下代碼
目標：熱更新完了，左下角新增加了lable 顯示原lable內容+[測驗] 2個字
cocos 圖示會增加一條豎的紅線在這里插入圖片描述
修改如下構建，構建就可以了，構建完了，修改 version_generator.js里的版本號這里修改為1.0.1

修改再執行 node version_generator.js 生成新的 2個manifest 把生成的project.manifest version.manifest ,這里在assets 目錄下，不確定是最新的話，看修改時日期
同時把 build\jsb-link 目錄下 res，src 目錄放到 packageUrl 寫的目錄下，
在這里插入圖片描述
這里是本地測驗，192.168.1.4是本機IP，裝的是xampp ,apk 裝在模擬器里測驗的

安裝完APK 的顯示

點擊check

點擊hotupdate 結果如下圖，重新啟動APK，結果也如下圖，這樣代表熱更新OK了
在這里插入圖片描述
最后看看在android 里的熱更新下載代碼與資源存放目錄
運行在夜神模擬器7.0.0.5里，路徑 /data/data/包名/files 下

4 熱更新及測驗結束（記得保存一份生成APK的工程代碼，后面任何改動可以以此為基礎）
1: project.manifest 一定要在 manifestUrl:{ type: cc.Asset,… } 上，不需要刪，執行 node version_generator.js 會覆寫的
2：只需要構建
3：修改版本號（version_generator.js 里）
4：執行 node version_generator.js
5：把相應檔案及目錄放入遠端服務器目錄下就行了
工程代碼如有需要后續再上傳

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/401677.html

標籤：其他

上一篇：Android開發電商系統程序(仿“拼多多”)

下一篇：移動應用開發課設

android cocoscreator 熱更新 超詳細篇（五）

前言

android cocoscreator 熱更新超詳細篇（五）