vue+Cordova

劉厚水發布于2019-08-23 18:40 / 1875人閱讀

摘要：系列安裝安裝搭建工程注自定義命名工程加入注自定義命名注意事項修改目錄下的執行時，會把打包內容指定到文件夾內，根據文件夾內容構建。添加平臺在加平臺前，需要修改的內容，包名的命名一般是，與申請微信時所用的包名對應。

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...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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