Vue.js实战——移植Html5 App为Android App_10

一、目标

    1、把前面开发的Html5原生获取经纬度、拍照、录音的demo移植至Android平台中，达到Html5可以横跨Web/Android/IOS平台的目标；

    2、在Android系统中，把不支持原生Html5的特性，或者使用原生Android效果更佳的特性，使用原生Android代码来替代html5代码，做到更好的适配效果；

二、步骤

    1、把之前开发的geo_location7项目中获取经纬度、拍照、录音的3个页面合并成1个页面（修改了3个页面的css样式），方便Android App加载，详见geo_location8。稍微会解释为什么需要这样修改；

    2、新建hybird_android根目录，把geo_location8工程整个拷贝至此目录中；

    3、在hybird_android根目录下，新建Android工程，取名为Android。由于涉及Android App开发，建议使用Android Studio单独开发Android App（对应hybird_android根目录下的Android工程）；

    4、Android App基本框架开发完成后，需要把geo_location8工程中编译后的前端代码加载至Android工程的Android/app/src/main/assets路径下，这样每次打出Android Apk时，都是最新的前端代码；

        1）修改hybird_android/geo_location8/package.json，新增App打包构建方式：

"app": "cross-env NODE_ENV=production PLATFORM=APP webpack --progress --hide-modules"

        2）修改hybird_android/geo_location8/package.json，新增Webpack插件：copy-webpack-plugin:

npm install copy-webpack-plugin@4.3.1

        注意：此插件的版本号，版本过高，比如5.0.1，编译代码时，会报如下错误：TypeError: Cannot read property 'emit' of undefined。

        3）修改hybird_android/geo_location8/webpack.config.js，新增如下配置：

if (process.env.PLATFORM == "APP") {
    module.exports.output = {
        path: path.resolve(__dirname, "../Android/app/src/main/assets"),
        publicPath: "",
        filename: "[name].js"
    };
    //此处需要清理的是此webpack外的文件路径，所以需要重新指定root路径，root路径和CleanWebpackPlugin中括号中的路径加一起为清理的目标路径
    module.exports.plugins.unshift(new CleanWebpackPlugin(["./Android/app/src/main/assets"], {
        root: "/Users/yoyo-studio/work/JustInSoft/hybird_android/", //根目录
        verbose: true, //开启在控制台输出信息
        dry: false //启用删除文件
    }));
    //把图片资源从webpack路径下的assets拷贝至Android工程中的assets
    module.exports.plugins.unshift(new CopyWebpackPlugin([{
        from: __dirname + "/src/assets", //源目录
        to: "./assets", //目标目录
    }]));
}

        注意：由于Android加载html时，需要在代码中指定（代码如下图所示），所以需要让webpacke生成的文件名固定，故去掉了filename对应值中的"[hash]"随机数。

webView.loadUrl("file:///android_asset/index.html");

        4）修改hybird_android/geo_location8/webpack.config.js，把压缩gz文件的插件改成只在正常执行npm run build时才生成。因为在Android系统中加载html时，xxx.js.gz压缩文件会被认为与xxx.js重复而报错，二者取其一即可。

if (process.env.NODE_ENV === "production" && process.env.PLATFORM != "APP") {
    module.exports.plugins = (module.exports.plugins || []).concat([
        new CompressionPlugin({
            filename: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.js$/,
            threshold: 1024,
            minRatio: 0.8,
        })
    ]);
}

    5、经过上述修改后，执行npm run dev，运行页面效果如下：

    6、执行npm run app，会把编译后的代码及静态资源拷贝至hybird_android/Android/app/src/main/assets；

    7、编写完Android加载html的框架代码后（此篇仅贴上完整代码，后面几篇详细介绍下具体的流程与知识点），在Android Studio中执行Run app，Android模拟器运行效果如下：

三、总结

    1、介绍了如何把基于Vue.js框架生成的Web端html5前端代码，整改成Android App混合html5开发的前端代码；

    2、结合webpack生态，通过网上资源，完成了编译后的html5代码自动放至Android工程路径的资源路径下，方便Android apk开发；

    3、初步实现了适配多平台的设想，webpack+vue.js一套代码，执行一句命令：npm run xxx，可以让代码分别运行于Android/Web：

    npm run build -----生成Web端代码；

    npm run dev -----生成web端Debug环境；

    npm run app -----生成Android端App前端代码；

    4、后面几篇详细介绍Android App加载html5的框架开发；

四、参考资料

    [1]https://segmentfault.com/q/1010000011165903

    [2]https://github.com/webpack-contrib/copy-webpack-plugin

    [3]https://blog.51cto.com/13677514/2092140

 

上一篇：Vue.js实战——微信拍照时页面会被刷新的BUG定位_9     下一篇：Vue.js实战——开发Android Hybird App之权限设置_11