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