使用Cordova + VUE開發(fā)電商App實錄(環(huán)境搭建和基礎(chǔ)介紹)

在調(diào)研了React Native,Weex,以及Cordova之后,由于前兩個都環(huán)境都沒有搭起來,碰巧cordova比較順利,就選擇了cordova這個工具,后來發(fā)現(xiàn)cordova的插件還是很豐富的,基本上需求都可以滿足了。


cordova應(yīng)用程序架構(gòu)

開發(fā)環(huán)境搭建

對于Android平臺windows開發(fā)環(huán)境搭建,需要用到JAVA,Android SDK,設(shè)備模擬器,構(gòu)建工具Gradle。具體的環(huán)境搭建文檔如下:

Android平臺Windows環(huán)境搭建指南

對于ios應(yīng)用的開發(fā),由于我也沒有ios的設(shè)備(我是窮逼),也沒有研究那個方向,后面有機會再繼續(xù)補充。環(huán)境搭建肯定會有問題,具體遇到問題也沒有一個文檔可以解決的,大家碰到問題再查閱相關(guān)資料就好,問題都不大。

安裝Cordova-CLI命令行工具

下載和安裝Node.js。安裝完成后你可以在命令行中使用node和npm。

$ sudo npm install -g cordova ? //安裝cordova 命令行工具

$ cordova create hello com.example.hello HelloWorld ?//初始化項目

$ cd hello

$ cordova platform add android --save ?//添加android平臺

$ cordova requirements //檢測是否滿足構(gòu)建平臺的要求

$ cordova build android //打包android應(yīng)用apk

上述步驟為初始化cordova應(yīng)用,添加平臺和代碼打包的命令,更詳細(xì)的命令可以參考Cordova create 命令參考文檔。通過命令行初始化的文件的根目錄包含了一個www目錄,用來放置前端程序(webApp),入口是index.html,后面我們將用我們自己的項目去替換這個目錄下的文件。

Cordova 插件安裝

如果你需要接觸到設(shè)備級別的特性,例如推送消息,讀?。鎯ξ募?,拍照,支付等功能,就需要安裝cordova的插件了。cordvova的插件還是很豐富的,基本上能夠滿足需求,如果真的不滿足需求,還可以自己開發(fā)插件,這個筆者也沒有實踐過,后期有機會可以補上。

下面是添加拍照功能插件的例子:

$ cordova plugin add cordova-plugin-camer? //添加插件

$ cordova plugin remove cordova-plugin-camer? //移除插件

插件的使用,后面再具體描述,下一篇主要記錄一下VUE的初始化和與cordova的集成。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,326評論 25 708
  • 導(dǎo)語 這篇文章主要介紹了如何在Android平臺上使用Cordova 的command-line interfac...
    jorstinchan閱讀 22,838評論 6 41
  • Plugin.xml plugin.xml文件定義了你的插件所需的結(jié)構(gòu)和設(shè)置。它有幾個元素來提供有關(guān)你的插件的詳細(xì)...
    葛高召閱讀 1,298評論 0 1
  • 正確的開導(dǎo)方式是幫助他人理清思路,而不是直接給出具體建議,否則對方會把責(zé)任歸到開導(dǎo)者身上。原本是一片好心,結(jié)果卻成...
    亮仔少爺閱讀 148評論 0 0
  • 1 “你確定要這么做嗎?”我再次問弘毅。 “對,沒錯。我決定的事不會更改的”弘毅堅定的說著,語速穩(wěn)定。并且...
    王久東閱讀 1,011評論 11 5

友情鏈接更多精彩內(nèi)容