前端也要做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: './'