vue+Cordova

刘厚水发布于2019-08-23 18:40 / 1874人阅读

摘要：系列安装安装搭建工程注自定义命名工程加入注自定义命名注意事项修改目录下的执行时，会把打包内容指定到文件夹内，根据文件夹内容构建。添加平台在加平台前，需要修改的内容，包名的命名一般是，与申请微信时所用的包名对应。

vue-cordova

vue2.0系列+Cordova

安装vue-cli

npm install -g vue-cli

安装Cordova

npm install -g cordova

搭建Cordova工程

cordova create myapp*

*注：自定义命名

工程加入vue

cd myapp*
vue init webpack myapp*

*注：自定义命名

注意事项：

修改config目录下的index.js,执行npm run build时，webpack会把打包内容指定到www文件夹内，Cordova根据www文件夹内容构建app。

添加平台：
在加平台前，需要修改config.xml的内容，包名的命名一般是××.××.com，与申请微信时所用的包名对应。

之后运行命令：

cordova platform add android

(cordova platform rm android可以删除platform内的android文件夹)

添加插件，如相机等：

cordova plugin add cordova-plugin-camera

*Cordova插件都不能在PC端使用

代码编写：

在src文件夹内编写工程代码，components文件夹存放.vue文件，组件化方式调用
本工程使用了vue-router处理单页面路由跳转，使用VueCookies监听服务端提供的token

npm install vue-router –save-dev
npm install vue-cookies –save-dev

*VueCookies的使用主要在登录时，与服务端约定token的有效时间是7天，使用VueCookies设置token期限，与路由守卫搭配使用，在token过期或退出登录时强制用户重新登录

this.$cookies.set("status", "logined", 24 * 60 * 60 * 5)

工程需要的依赖包参考package.json文件

"devDependencies": {
    "antd": "^3.15.1",
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-import": "^1.11.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },

打包apk:

将vue工程构建加入到www文件夹运行命令：

npm run build

debug包直接运行：

cordova build android

release包需要先获得安卓签名：
运行命令生成apk签字,
*自定义命名

keytool -genkey -v -keystore C:********myappsande.keystore -alias -keyalg RSA -validity 20000

在工程根目录下创建build.json文件，根据apk签字生成过程写入：

{
  "android": {
    "release": {
      "keystore": "sande.keystore",
      "alias": "sande",
      "storePassword": "****",
      "password": "****"
    }
  }
}

sande.keystore文件存在工程根录下

在android工程目录内建release-signing.properties文件，写入：

// This file is automatically generated.
// Do not modify this file -- YOUR CHANGES WILL BE ERASED!

key.store=C:********myappsande.keystore
key.alias=sande
key.store.password=**
key.alias.password=***

第一行就是sande.keystore文件存放的位置
之后运行命令：

cordova build android –release

得到签字后的apk
安卓9网络问题：
安卓9即使加入网络白名单依然会有不能发出请求的问题，需要修改AndroidManifest.xml文件，加入networkSecurityConfig

并在xml文件夹内新建network_security_config.xml文件

写入：

开发过程遇到问题，一起交流~ GitHub地址：https://github.com/yazimei/vu...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105648.html

vue+cordova构建跨平台应用集成并使用Cordova plugin

摘要：效果图集成并使用在下新建文件夹再下新建在添加新建文件夹下新建文件同时要在项目目录下安装，和插件如此类推，如果你需要别的插件也是这样添加。如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。安装 //安装 vue-cil npm install --global vue-cli //安装cordova npm i cordova -g cordova 新建项目 //新建...

番茄西红柿 2019-04-23 13:10 评论0 收藏0
vue和cordova项目整合打包，并实现vue调用android的相机的demo

摘要：经过网上查找很多资料，发现很多只有的项目整合，但是使用插件的文章很少，现在把从创建和创建到使用插件到项目打包到手机运行过程记录下来先上项目结构目录项目创建安装环境这个这边就不描述了，网上很多教程创建应用创建项目为目录命名空间项目名称添加平台经过网上查找很多资料，发现很多只有vue+cordova的项目整合，但是vue使用cordova插件的文章很少，现在把从创建cordova和创建v...

zhonghanwen 2019-08-22 15:54 评论0 收藏0
vue和cordova项目整合打包，并实现vue调用android的相机的demo

摘要：经过网上查找很多资料，发现很多只有的项目整合，但是使用插件的文章很少，现在把从创建和创建到使用插件到项目打包到手机运行过程记录下来先上项目结构目录项目创建安装环境这个这边就不描述了，网上很多教程创建应用创建项目为目录命名空间项目名称添加平台经过网上查找很多资料，发现很多只有vue+cordova的项目整合，但是vue使用cordova插件的文章很少，现在把从创建cordova和创建v...

QiuyueZhong 2019-08-02 10:05 评论0 收藏0
ionic4+vue+cordova开发混合应用

摘要：摘要是可以让我们使用开发即使来移动应用的框架。如果你熟悉可以直接使用开发，但如果你熟悉使用或并且也想使用，可以使用版本，本文就以来说明这两者如何结合使用。除此之外还引入和来对把我们代码打包成安卓或应用。。摘要 ionic是可以让我们使用web开发即使来移动应用的框架。ionic4之前，ionic只能和angular搭配使用，ionic4后把ionic抽离成四个版本，@ionic/co...

Yujiaao 2019-08-23 17:00 评论0 收藏0
cordova整合vue之后，引入极光推送插件，成功推送

摘要：先上项目目录关与和项目整合的部分，参考我前面写过的文章项目引入极光推送之所以会使用极光插件是因为极光本身就支持，所以优先选择的极光插件地址链接描述极光官网创建创建过程比较简单就不一一截图出来了需要注意的是中间那栏推送设置一定要设置，不然会获先上项目目录showImg(https://segmentfault.com/img/bV8c0f?w=482&h=677); 关与vue和co...

cncoder 2019-08-22 16:13 评论0 收藏0