資訊專欄INFORMATION COLUMN
摘要：系列安裝安裝搭建工程注自定義命名工程加入注自定義命名注意事項(xiàng)修改目錄下的執(zhí)行時(shí)，會(huì)把打包內(nèi)容指定到文件夾內(nèi)，根據(jù)文件夾內(nèi)容構(gòu)建。添加平臺(tái)在加平臺(tái)前，需要修改的內(nèi)容，包名的命名一般是，與申請(qǐng)微信時(shí)所用的包名對(duì)應(yīng)。
vue-cordova
vue2.0系列+Cordova
安裝vue-clinpm install -g vue-cli安裝Cordova
npm install -g cordova搭建Cordova工程
cordova create myapp*
*注：自定義命名
工程加入vuecd myapp* vue init webpack myapp*
*注：自定義命名
注意事項(xiàng)：修改config目錄下的index.js,執(zhí)行npm run build時(shí)，webpack會(huì)把打包內(nèi)容指定到www文件夾內(nèi)，Cordova根據(jù)www文件夾內(nèi)容構(gòu)建app。
添加平臺(tái)：
在加平臺(tái)前，需要修改config.xml的內(nèi)容，包名的命名一般是××.××.com，與申請(qǐng)微信時(shí)所用的包名對(duì)應(yīng)。
之后運(yùn)行命令：
cordova platform add android
(cordova platform rm android可以刪除platform內(nèi)的android文件夾)
添加插件，如相機(jī)等：cordova plugin add cordova-plugin-camera
*Cordova插件都不能在PC端使用
代碼編寫：在src文件夾內(nèi)編寫工程代碼，components文件夾存放.vue文件，組件化方式調(diào)用
本工程使用了vue-router處理單頁面路由跳轉(zhuǎn)，使用VueCookies監(jiān)聽服務(wù)端提供的token
npm install vue-router –save-dev npm install vue-cookies –save-dev
*VueCookies的使用主要在登錄時(shí)，與服務(wù)端約定token的有效時(shí)間是7天，使用VueCookies設(shè)置token期限，與路由守衛(wèi)搭配使用，在token過期或退出登錄時(shí)強(qiáng)制用戶重新登錄
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工程構(gòu)建加入到www文件夾運(yùn)行命令：
npm run build
debug包直接運(yùn)行：
cordova build android
release包需要先獲得安卓簽名：
運(yùn)行命令生成apk簽字,
*自定義命名
keytool -genkey -v -keystore C:********myappsande.keystore -alias -keyalg RSA -validity 20000
在工程根目錄下創(chuàng)建build.json文件，根據(jù)apk簽字生成過程寫入：
{
"android": {
"release": {
"keystore": "sande.keystore",
"alias": "sande",
"storePassword": "****",
"password": "****"
}
}
}
sande.keystore文件存在工程根錄下
在android工程目錄內(nèi)建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文件存放的位置
之后運(yùn)行命令：
cordova build android –release
得到簽字后的apk
安卓9網(wǎng)絡(luò)問題：
安卓9即使加入網(wǎng)絡(luò)白名單依然會(huì)有不能發(fā)出請(qǐng)求的問題，需要修改AndroidManifest.xml文件，加入networkSecurityConfig
并在xml文件夾內(nèi)新建network_security_config.xml文件
寫入：
開發(fā)過程遇到問題，一起交流~ GitHub地址：https://github.com/yazimei/vu...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105648.html
摘要：效果圖集成并使用在下新建文件夾再下新建在添加新建文件夾下新建文件同時(shí)要在項(xiàng)目目錄下安裝，和插件如此類推，如果你需要?jiǎng)e的插件也是這樣添加。如果對(duì)您有幫助請(qǐng)動(dòng)動(dòng)鼠標(biāo)右下方給我來個(gè)贊，您的支持是我最大的動(dòng)力。安裝 //安裝 vue-cil npm install --global vue-cli //安裝cordova npm i cordova -g cordova 新建項(xiàng)目 //新建...
摘要：經(jīng)過網(wǎng)上查找很多資料，發(fā)現(xiàn)很多只有的項(xiàng)目整合，但是使用插件的文章很少，現(xiàn)在把從創(chuàng)建和創(chuàng)建到使用插件到項(xiàng)目打包到手機(jī)運(yùn)行過程記錄下來先上項(xiàng)目結(jié)構(gòu)目錄項(xiàng)目創(chuàng)建安裝環(huán)境這個(gè)這邊就不描述了，網(wǎng)上很多教程創(chuàng)建應(yīng)用創(chuàng)建項(xiàng)目為目錄命名空間項(xiàng)目名稱添加平臺(tái) 經(jīng)過網(wǎng)上查找很多資料，發(fā)現(xiàn)很多只有vue+cordova的項(xiàng)目整合，但是vue使用cordova插件的文章很少，現(xiàn)在把從創(chuàng)建cordova和創(chuàng)建v...
摘要：經(jīng)過網(wǎng)上查找很多資料，發(fā)現(xiàn)很多只有的項(xiàng)目整合，但是使用插件的文章很少，現(xiàn)在把從創(chuàng)建和創(chuàng)建到使用插件到項(xiàng)目打包到手機(jī)運(yùn)行過程記錄下來先上項(xiàng)目結(jié)構(gòu)目錄項(xiàng)目創(chuàng)建安裝環(huán)境這個(gè)這邊就不描述了，網(wǎng)上很多教程創(chuàng)建應(yīng)用創(chuàng)建項(xiàng)目為目錄命名空間項(xiàng)目名稱添加平臺(tái) 經(jīng)過網(wǎng)上查找很多資料，發(fā)現(xiàn)很多只有vue+cordova的項(xiàng)目整合，但是vue使用cordova插件的文章很少，現(xiàn)在把從創(chuàng)建cordova和創(chuàng)建v...
摘要：摘要是可以讓我們使用開發(fā)即使來移動(dòng)應(yīng)用的框架。如果你熟悉可以直接使用開發(fā)，但如果你熟悉使用或并且也想使用，可以使用版本，本文就以來說明這兩者如何結(jié)合使用。除此之外還引入和來對(duì)把我們代碼打包成安卓或應(yīng)用。。 摘要 ionic是可以讓我們使用web開發(fā)即使來移動(dòng)應(yīng)用的框架。ionic4之前，ionic只能和angular搭配使用，ionic4后把ionic抽離成四個(gè)版本，@ionic/co...
摘要：先上項(xiàng)目目錄關(guān)與和項(xiàng)目整合的部分，參考我前面寫過的文章項(xiàng)目引入極光推送之所以會(huì)使用極光插件是因?yàn)闃O光本身就支持，所以優(yōu)先選擇的極光插件地址鏈接描述極光官網(wǎng)創(chuàng)建創(chuàng)建過程比較簡單就不一一截圖出來了需要注意的是中間那欄推送設(shè)置一定要設(shè)置，不然會(huì)獲 先上項(xiàng)目目錄showImg(https://segmentfault.com/img/bV8c0f?w=482&h=677); 關(guān)與vue和co...
閱讀 647·2021-11-24 09:39
閱讀 3489·2019-08-30 15:53
閱讀 2528·2019-08-30 15:44
閱讀 3246·2019-08-30 12:54
閱讀 2216·2019-08-29 12:23
閱讀 3311·2019-08-26 14:05
閱讀 2113·2019-08-26 13:36
閱讀 3443·2019-08-26 13:33
