Cordova+Vue开发Android应用

最新推荐文章于 2021-02-01 00:53:01 发布

weixin_33737774

最新推荐文章于 2021-02-01 00:53:01 发布

阅读量145

点赞数

文章标签：前端 javascript java ViewUI

原文链接：https://juejin.im/post/5c5d889e51882562973c137a

版权

公司为了节约开发时间,要用Cordova+Vue做项目;所以最近一直在研究Android混开。自己第一次做混开，也是厚着脸皮向前端请教了很多问题，才马马虎虎搞出来点东西。下面把最基础的项目创建记录一下。

安装 Npm

这里就不给出具体安装了，可以百度一下或者参考下面拦截 node.js安装官方文档

安装 Vue脚手架

执行命令:

cnpm install --global vue-cli
复制代码

安装 Cordova

已经安装cordova则跳过,否则执行下面命令：

npm install -g cordova
复制代码

创建Cordova项目官方文档 W3C文档

执行命令:

cordova create hello com.example.hello HelloWorld
复制代码

参数说明:

名称	必填	描述
hello	是	工程的文件夹名
com.example.hello	否	应用程序的id, 名如果不指定的话默认为io.cordova.hellocordova
HelloWorld	否	App的名称

添加Android平台

执行命令

cordova platform add android
复制代码

创建Vue项目 vue2官网

执行命令

vue init webpack vue-app
复制代码

在执行命令是会出现下面的配置选项，前3个分包为项目名称、项目描述、和作者。后面几个配置是js相关，一般没什么特殊要求可以按照下面配置。

最终的项目结构：

修改vue项目的index.html

1. 在head之间加入下面代码

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
复制代码

如果加入<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">导致页面样式改变，如果改变则不加，否则还是建议加上。这段主要是防止跨站脚本攻击。

2. 修改vue-app文件中config下的index.js的build配置项

3. body中引入cordova.js

<body>
    <div id="app"></div>
    <script type="text/javascript" src="cordova.js"></script>
    <!-- built files will be auto injected -->
</body>
复制代码