利用Cordova将移动站点打包

发表于 2017-07-02 更新于 2024-11-21 本文字数： 1.6k 阅读时长 ≈ 3 分钟

本文介绍关于利用Cordova将移动站点打包，包括使用场景、实现细节等，以提高关于利用Cordova将移动站点打包的效率。

最近客户提出一个要求，就是虽然我们已经有了移动网页版站点，但是让客户记住网址，输入网址这个是很辛苦的，那么就需要有APP，但是单纯开发APP的成本还是不少，那么如何最大限度的复用既有的东西呢，比如移动网页版，这个时候就催生这么一种解决方案，利用Cordova这种混合开发工具将移动站点打包为APP，那么APP这种存在就有了，对于特定客户，其实APP跟网页唯一的区别只是存在形式的不同，并不需要有什么差异性的功能，那么这种情境下，将M站点进行打包APP就再合适不过了。

可行性

能打包吗？

答案：OK,说白了就是利用系统浏览器打开网页,cordova有浏览器插件,所以肯定可以。

能上架吗?

答案:现在可以直接说结论,目前大部分可以，都不行的话，这篇文章不用看了，无太大意义。
本人利用这个方案打包的APP，在主流的苹果、应用宝、360、豌豆荚、华为、魅族、vivo均OK。
小米商店不行，提交审核会被打回,明确指出单纯加壳APP不行。

既然目前主要的商店都支持，那就继续看下如何实现吧！

具体策略

cordova初始化项目
初始化开发环境及细节请参见官方doc，这里没必要重复,点击这里
安装主要几个插件

$ cordova plugin add cordova-plugin-whitelist
$ cordova plugin add cordova-plugin-splashscreen
该插件主要控制APP启动画面的设定
$ cordova plugin add cordova-plugin-inappbrowser
该插件实现在APP中利用内置浏览器打开目标网页

在index.js文件中，实现应用启动后打开对应站点

var app = {
    // Application Constructor
    initialize: function () {
        document.addEventListener('deviceready', onDeviceReady, false);
    },

    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function () {
        this.receivedEvent('deviceready');
    },

    // Update DOM on a Received Event
    receivedEvent: function (id) {
    }
};
function onDeviceReady() {
    // window.open = cordova.InAppBrowser.open;
    var url = 'http://apache.org';
    var target = '_blank';
    var options = "location=no,toolbar=no";
    cordova.InAppBrowser.open(url, target, options);
}
app.initialize();