技术分享 Technology to share

前端也要做android开发

一、准备工作

Nodejs、AndroidSDK、Jdk、cordova、vue、vux、 webpack


首先安装nodejs (因为安装需要npm所以顺便装个node)

https://nodejs.org/zh-cn/ 建议下载稳定版本

Administrator@YF-XJ MINGW64 ~/Desktop
$ node -v
v8.11.2



vue(负责app视图与数据交互)

https://cn.vuejs.org/


Mint UI(ui组件)

http://mint-ui.github.io/#!/en


webpack(网页打包)

https://webpack.js.org/

Administrator@YF-XJ MINGW64 ~/Desktop
$ webpack -v
4.27.1



AndroidSDK(这里采用 SDK Tools

https://www.androiddevtools.cn/ 选择到SDK Tools 这一栏下载

Administrator@YF-XJ MINGW64 ~/Desktop
$ adb
Android Debug Bridge version 1.0.40
Version 4797878
Installed as D:\android\sdk\android-sdk-windows\platform-tools\adb.exe


sdk Tools 目前 最新的版本为24.6 仅支持 jdk1.8.* 否则安装不成功


接着需要配置 AndroidSDK 的环境变量




Jdk(编辑apk包必须环境)

https://www.oracle.com/technetwork/java/javase/downloads/ 下载jdk(这里建议jdk1.8)

Administrator@YF-XJ MINGW64 ~/Desktop
$ java -version
java version "1.8.0_172"
Java(TM) SE Runtime Environment (build 1.8.0_172-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.172-b11, mixed mode)



jdk 13 今年九月份出 我为了赶一波潮流 也是踩了一波坑 明明配置是正确的 java javac java -sersion 都可以正确打印 安装 android sdk manager 无法正确安装 最后还是换成了jdk1.8.*


cordova(js和java之间的桥梁)

https://cordova.apache.org/

Administrator@YF-XJ MINGW64 ~/Desktop
$ cordova -v
9.0.0



等到 node装完 运行一下命令安装 cordova

npm install -g cordova


这个命令安装后后可以到npm 全局目录看看 是否有cordova


出现如上图所示这个即为安装完毕


接下来可以愉快的

cordova create MyApp
...
cordova build android


省略号这里这里极有可能报错 ╮(╯﹏╰)╭



有可能会让你装一个gradle(Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建开源工具。)


有可能会碰到

Error:A problem occurred configuring project ':app'.
> Could not resolve all dependencies for configuration ':app:_debugApkCopy'.
> Could not find any version that matches com.android.support:appcompat-v7:27.+.
Versions that do not match:
26.0.0-alpha1
25.3.1
25.3.0
25.2.0
25.1.1
+ 31 more

这个多半是你sdk 与java的jdk环境不匹配



最后在一切大功告成时候 把apk拖到手机安装 一看白屏???


因为cordova 对html要求比较高 而 vue cli 3.0 编译后的html把双引号去掉了

所以导致js 为引用


在网上找到了 如下

因此,需要在webpack.prod.conf.js 找到minify参数
将 removeAttributeQuotes: true 改为 removeAttributeQuotes: false (如果该方法没有用那就把整个minify去掉再试一下)
再次 build之后,就会看到 index.html 中的css和js添加了引号


从上面引用可以得出 原来是 html-minifier 插件在起作用 再结合这vue cli 的 vue.config.js得出一下代码


    chainWebpack: config => {
        config.plugin('html').tap(args => {
            args[0].minify = {
                // 关闭去除双引号
                removeAttributeQuotes: false
            }
            return args
        })
    },
    // 根目录
    publicPath: './'