使用vue + cordova开发安卓app

原创 AWelcom 教程 cordova 373阅读 2018-03-12 18:24:46 举报

Cordova是一套设备API,允许移动应用的开发者使用JavaScript来访问本地设备的功能,比如摄像头、加速计。支持跨平台开发,一套代码多端运行。

下面是以window为例开发教程

  1. 开发环境搭建
    开发需要安卓android SDK、node、java环境,这个大家可以百度搜搜很多相关文档。
  2. 创建cordova工程
    根据官方文档提示创建新项目
    1. 打开终端(Mac)或命令窗口(Windows),键入以下命令来安装Cordova CLI:
      npm install -g cordova
    2. 在命名为cordovaDemo的目录中创建一个命名为CordovaDemo的Cordova项目:
      cordova create cordovaDemo com.yourname.cordovaDemo CordovaDemo
    3. 增加对安卓平台的支持
      cordova platforms add android
    4. 打包安卓应用
      cordova build android
      tip:在Gradle为 4.3.1版本环境中,需要将gradle文件中jcenter()上方添加google()
    5. 添加插件
      cordova plugin add org.apache.cordova.device
  3. 整合vue与cordova
    1. 把vue-cli项目放在cordovaDemo下
    2. 打开vue项目下的config/index.js文件,将index:path里面的打包目录改成'../../www/index.html',将assetsRoot输出目录改成'../../www',assetsPublicPath改成'./'
    3. vue添加cordova依赖
      在index.html中添加<script src="cordova.js"></script>
    4. 安卓4.4需要在main.js中加 window.Promise = require('promise');
  4. 使用混合开发手机端调试可以使用vConsole.js插件

更多问题可以加qq群:558925746讨论
vue-template

评论 ( 3 )
最新评论
人马在冬至追风 2018-06-26 17:10:21 3F

之前有搜过hybird开发的一些资料,个人感觉比较抽象,你这个文档不错,就是希望能补充的再详细些

laysen 2018-03-13 09:22:50 2F

文章很好,收藏了

AWelcom 2018-03-12 18:27:45 1F

大前端加油