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-devnpm 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.keystorekey.alias=sandekey.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>