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:\**\**\**\**\myapp\sande.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:\\**\\**\\**\\**\\myapp\\sande.keystore
key.alias=sande
key.store.password=**
key.alias.password=***

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

cordova build android –release

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

<application android:hardwareAccelerated="true" android:networkSecurityConfig="@xml/network_security_config" android:supportsRtl="true">

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

写入：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <base-config cleartextTrafficPermitted="true" />
</network-security-config>

开发过程遇到问题，一起交流~

GitHub 地址：https://github.com/yazimei/vu…