vue和cordova項目整合打包，并實現vue調用android的相機的demo

zhonghanwen 發布于2019-08-22 15:54 / 2359人閱讀

摘要：經過網上查找很多資料，發現很多只有的項目整合，但是使用插件的文章很少，現在把從創建和創建到使用插件到項目打包到手機運行過程記錄下來先上項目結構目錄項目創建安裝環境這個這邊就不描述了，網上很多教程創建應用創建項目為目錄命名空間項目名稱添加平臺

經過網上查找很多資料，發現很多只有vue+cordova的項目整合，但是vue使用cordova插件的文章很少，現在把從創建cordova和創建vue到vue使用插件到項目打包到android手機運行過程記錄下來；

先上項目結構目錄

cordova項目創建

1、安裝cordova環境這個這邊就不描述了，網上很多教程
2、創建cordova應用

cordova create app com.demo app

cordova create 創建cordova項目 app為目錄 com.demo命名空間 app項目名稱

3、添加平臺

cd app
cordova platform add android

cd命令進入到項目文件夾里面添加安卓平臺，要添加ios就把安卓換成ios就可以了

4、編譯安卓app

cordova build android

編譯安卓系統，如果成功就表示編譯完成
注：如果沒編譯成功，那么就用檢查環境命令去檢查

cordova requirements

運行命令后會有提示環境或者其他問題

5、cordova emulate android
在安卓模擬器上運行

cordova serve android

在瀏覽器上面運行

cordova run android

在安卓手機上面運行，前提是電腦連接了安卓手機并且裝好驅動和打開usb調試

到這里cordova項目創建完成

vue項目創建

1、vue環境和webpack安裝這邊就不詳述了，網上很多
2、安裝好vue后進入到cordova項目里面

vue init webpack vue

最后的‘vue’為項目的名字
3、

4、根據圖上面提示的cd 指向vue項目后 npm run dev用開發模式跑起來項目

vue和cordova項目整合

1、把cordova項目的index.html里面的meta標簽和cordova.js引用復制到vue項目的index.html

2、修改vue項目里面的配置，直接上圖，

到這里修改完成

添加cordova插件

這里以相機為例
1、進入到cordova項目目錄，不是vue

cordova plugin add cordova-plugin-camera

添加相機插件

cordova plugin ls

列出所有已安裝的cordova插件

參考w3c的文檔https://www.w3cschool.cn/cord...

到這里cordova安裝的相機插件

重點來了：vue怎么用相機

1、修改vue項目的main.js的寫法

添加deviceready事件監聽，當cordova設備準備完成后再new vue
2、創建一個js文件，我這邊叫cordovaplugin.js

3、修改App.vue文件，增加按鈕和事件調用

到這邊就完成了，剩下編譯和打包
4、進入vue文件夾

npm run build

到這邊vue項目編譯完成
5、回到cordova項目文件夾，進行打包

cordova run android

運行到安卓手機上，前提是有用手機連接電腦

完成-手機截圖

云服務器 GPU云服務器 vue整合webrtc 環信語音聊天vue demo vue 集成webrtc實時音視頻demo vue中調用js

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93852.html

vue和cordova項目整合打包，并實現vue調用android的相機的demo

摘要：經過網上查找很多資料，發現很多只有的項目整合，但是使用插件的文章很少，現在把從創建和創建到使用插件到項目打包到手機運行過程記錄下來先上項目結構目錄項目創建安裝環境這個這邊就不描述了，網上很多教程創建應用創建項目為目錄命名空間項目名稱添加平臺經過網上查找很多資料，發現很多只有vue+cordova的項目整合，但是vue使用cordova插件的文章很少，現在把從創建cordova和創建v...

QiuyueZhong 2019-08-02 10:05 評論0 收藏0
cordova+vue打包ios調用相機閃退解決

摘要：項目打包，打開相機正常使用，但是打包后，需要多幾個配置，才能打開，否則當調用的時候會閃退，上配置圖需要在選中的文件里面添加也可以在里面配置，配置后就可以請求訪問相機了 cordova+vue項目打包android，打開相機正常使用，但是打包ios后，需要多幾個配置，才能打開，否則當調用的時候會閃退，上配置圖showImg(https://segmentfault.com/img/bVb...

Labradors 2019-08-26 11:55 評論0 收藏0
cordova+vue打包ios調用相機閃退解決

摘要：項目打包，打開相機正常使用，但是打包后，需要多幾個配置，才能打開，否則當調用的時候會閃退，上配置圖需要在選中的文件里面添加也可以在里面配置，配置后就可以請求訪問相機了 cordova+vue項目打包android，打開相機正常使用，但是打包ios后，需要多幾個配置，才能打開，否則當調用的時候會閃退，上配置圖showImg(https://segmentfault.com/img/bVb...

RancherLabs 2019-08-02 10:33 評論0 收藏0
vue+Cordova

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

劉厚水 2019-08-23 18:40 評論0 收藏0