摘要:經(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)建vue到vue使用插件到項(xiàng)目打包到android手機(jī)運(yùn)行過程記錄下來;
先上項(xiàng)目結(jié)構(gòu)目錄
1、安裝cordova環(huán)境這個(gè)這邊就不描述了,網(wǎng)上很多教程
2、創(chuàng)建cordova應(yīng)用
cordova create app com.demo app
cordova create 創(chuàng)建cordova項(xiàng)目 app為目錄 com.demo命名空間 app項(xiàng)目名稱
3、添加平臺(tái)
cd app cordova platform add android
cd命令進(jìn)入到項(xiàng)目文件夾里面添加安卓平臺(tái),要添加ios就把安卓換成ios就可以了
4、編譯安卓app
cordova build android
編譯安卓系統(tǒng),如果成功就表示編譯完成
注:如果沒編譯成功,那么就用檢查環(huán)境命令去檢查
cordova requirements
運(yùn)行命令后會(huì)有提示環(huán)境或者其他問題
5、cordova emulate android
在安卓模擬器上運(yùn)行
cordova serve android
在瀏覽器上面運(yùn)行
cordova run android
在安卓手機(jī)上面運(yùn)行,前提是電腦連接了安卓手機(jī)并且裝好驅(qū)動(dòng)和打開usb調(diào)試
到這里cordova項(xiàng)目創(chuàng)建完成
1、vue環(huán)境和webpack安裝這邊就不詳述了,網(wǎng)上很多
2、安裝好vue后進(jìn)入到cordova項(xiàng)目里面
vue init webpack vue
最后的‘vue’為項(xiàng)目的名字
3、
4、根據(jù)圖上面提示的cd 指向vue項(xiàng)目后 npm run dev用開發(fā)模式跑起來項(xiàng)目
vue和cordova項(xiàng)目整合1、把cordova項(xiàng)目的index.html里面的meta標(biāo)簽和cordova.js引用復(fù)制到vue項(xiàng)目的index.html
2、修改vue項(xiàng)目里面的配置,直接上圖,
到這里修改完成
添加cordova插件這里以相機(jī)為例
1、進(jìn)入到cordova項(xiàng)目目錄,不是vue
cordova plugin add cordova-plugin-camera
添加相機(jī)插件
cordova plugin ls
列出所有已安裝的cordova插件
參考w3c的文檔https://www.w3cschool.cn/cord...
到這里cordova安裝的相機(jī)插件
重點(diǎn)來了:vue怎么用相機(jī)1、修改vue項(xiàng)目的main.js的寫法
添加deviceready事件監(jiān)聽,當(dāng)cordova設(shè)備準(zhǔn)備完成后再new vue
2、創(chuàng)建一個(gè)js文件,我這邊叫cordovaplugin.js
3、修改App.vue文件,增加按鈕和事件調(diào)用
到這邊就完成了,剩下編譯和打包
4、進(jìn)入vue文件夾
npm run build
到這邊vue項(xiàng)目編譯完成
5、回到cordova項(xiàng)目文件夾,進(jìn)行打包
cordova run android
運(yùn)行到安卓手機(jī)上,前提是有用手機(jī)連接電腦
完成-手機(jī)截圖文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/52119.html
摘要:經(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...
摘要:項(xiàng)目打包,打開相機(jī)正常使用,但是打包后,需要多幾個(gè)配置,才能打開,否則當(dāng)調(diào)用的時(shí)候會(huì)閃退,上配置圖需要在選中的文件里面添加也可以在里面配置,配置后就可以請求訪問相機(jī)了 cordova+vue項(xiàng)目打包android,打開相機(jī)正常使用,但是打包ios后,需要多幾個(gè)配置,才能打開,否則當(dāng)調(diào)用的時(shí)候會(huì)閃退,上配置圖showImg(https://segmentfault.com/img/bVb...
摘要:項(xiàng)目打包,打開相機(jī)正常使用,但是打包后,需要多幾個(gè)配置,才能打開,否則當(dāng)調(diào)用的時(shí)候會(huì)閃退,上配置圖需要在選中的文件里面添加也可以在里面配置,配置后就可以請求訪問相機(jī)了 cordova+vue項(xiàng)目打包android,打開相機(jī)正常使用,但是打包ios后,需要多幾個(gè)配置,才能打開,否則當(dāng)調(diào)用的時(shí)候會(huì)閃退,上配置圖showImg(https://segmentfault.com/img/bVb...
摘要:系列安裝安裝搭建工程注自定義命名工程加入注自定義命名注意事項(xiàng)修改目錄下的執(zhí)行時(shí),會(huì)把打包內(nèi)容指定到文件夾內(nèi),根據(jù)文件夾內(nèi)容構(gòu)建。添加平臺(tái)在加平臺(tái)前,需要修改的內(nèi)容,包名的命名一般是,與申請微信時(shí)所用的包名對(duì)應(yīng)。 vue-cordova vue2.0系列+Cordova 安裝vue-cli npm install -g vue-cli 安裝Cordova npm install -g c...
閱讀 3041·2021-09-22 14:59
閱讀 1874·2021-09-22 10:02
閱讀 2114·2021-09-04 16:48
閱讀 2264·2019-08-30 15:53
閱讀 2969·2019-08-30 11:27
閱讀 3406·2019-08-29 18:35
閱讀 965·2019-08-29 17:07
閱讀 2674·2019-08-29 13:27