成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue和cordova項目整合打包,并實現(xiàn)vue調(diào)用android的相機的demo

zhonghanwen / 2363人閱讀

摘要:經(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)目錄

cordova項目創(chuàng)建

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

相關(guān)文章

  • vuecordova項目整合打包,實現(xiàn)vue調(diào)用android相機demo

    摘要:經(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...

    QiuyueZhong 評論0 收藏0
  • cordova+vue打包ios調(diào)用相機閃退解決

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

    Labradors 評論0 收藏0
  • cordova+vue打包ios調(diào)用相機閃退解決

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

    RancherLabs 評論0 收藏0
  • vue+Cordova

    摘要:系列安裝安裝搭建工程注自定義命名工程加入注自定義命名注意事項修改目錄下的執(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...

    劉厚水 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<