(二)cordova+framework7入門——笑笑APP


【前言】

framework7確實做的很贊,但是一直各種原因沒有做什么app,

這個感覺就像大廚遇到百年難見的好材料,不炒個菜憋的慌,

機緣巧合周一周二兩個晚上做了一個簡單app,先看下效果:

11.jpg

12.jpg

13.jpg

14.jpg

 

ios截圖稍候奉上,

 

感覺還不錯吧。

 

【原理】

app其中一類就是基於內容和基於數據的,恰好有個平台提供數據源:https://www.juhe.cn/

上去看了一眼,笑話的數據接口可以做一個簡單的app,於是就開動了。

 

數據源:用三方平台提供的api。

 

framework7,http://framework7.io/kitchen-sink-material/

上去瞅了瞅,發現幾個模塊不錯:left-panel,floating-action-button,cards,navbar等等,

 

ui層:framework7中的幾個組件

 

這個app目前沒有太多的和native交互的地方,只有一處,設置statusbar的色值,

所以需要用到cordova的一個plugin:statusbar,這個對比hbuilder中的nativejs,稍有不同

 

native層:statusbar插件

 

【開發過程】

首先需要下載framework7,地址:https://github.com/nolimits4web/framework7/

1.png

其中dist中為核心js css代碼,

kitchen-sink-ios為ios實現代碼,kitchen-sink-material為android實現代碼,

由於ios和android在實現上有寫差別,包括html不同,css不同,js不同,為了達到更好的效果所以需要兩套代碼,

但是總體思路是相同的,只是細微之處有些不同。

開發的時候可以看http://framework7.io/kitchen-sink-material/實現的效果,

對比kitchen-sink-material中具體頁面的代碼,

然后轉變為自己需要的代碼。

 

【枯燥的代碼講解】

1.開源和項目結構

github:https://github.com/uikoo9/_hpp_01_xiaoxiao

2.png

分為android和ios兩套代碼,所以對應兩個文件夾,文件夾下目錄結構相同,

外層config.xml:備份文件

android-platforms:android平台代碼,暫時忽略

android-plugins:html和native交互的插件,類似hbuilder中的nativejs,暫時忽略

android-res:資源文件

android-www:項目代碼,這部分才是具體開發的代碼

config.xml:打包的配置文件

2.www文件夾結構

3.png

www文件夾下是具體的開發代碼,可以參照上圖,

看過上節文章的同學應該知道,framework7是單頁面應用spa,也就是說只有一個入口html,

也就是入口index.html,對應的index.js和index.css,app對應所有頁面的js css都應該寫到這里。

3.重點是打包

代碼暫且不講了,自己看源碼,應該可以懂,f7的組件之后有需要在單開一節講吧。

本節重點是可以自己寫完代碼,用cordova運行,調試,打包發布。

 

【phonegap之坑】

按上節的內容,一直是使用的phonegap作為打包工具,

phonegap和cordova的區別,可以去百度看看,

簡單的來說,cordova是kernel,phonegap相當與ide,

類似android sdk 和android studio的關系,

但是使用過程中發現這個ide不好用,然后就直接轉向cordova了,

上節內容已經講到phonegap的簡單使用,運行,調試了。

這里說下phonegap的打包,

說下在線打包,這個功能和hbuilder有點類似,只不過hbuilder是集成在ide內了,phonegap是web形式,

https://build.phonegap.com/apps/

登錄這個地址,如下圖:

4.png

1.用adobe帳號登錄,創建app

2.將代碼打成zip然后上傳

3.上傳后會自動build,也可以自己手動build

4.ios需要上傳key文件

 

1.周一晚上android打包還正常,安裝后也正常使用,周二晚上安裝后就一直停留在device is ready界面

2.android debug發現一直報錯

5.png

百度,谷歌也沒發現具體的解決辦法,

 

而且雲端打包的弊端就是不可控,報錯的時候不知道怎么處理,思考再三覺得還是本地打包靠譜。

 

【cordova】

決定不使用phonegap的雲端打包后就開始轉向cordova,http://cordova.apache.org/

介紹之類的自行去百度,我只能說apache好牛,apache上的項目想要看完感覺得好多年,

程序員就是一條賊船,學不完的新技術,看不完的書,唉。

 

1.config.xml

7.png

desc:app名稱的信息

index:入口頁面

prefer:插件設置

plugin:插件引用

android:android平台相關設置,這里只設置了icon,沒有設置啟動頁,啟動頁也可以在這里設置

access:白名單,剛開始的時候沒有引入whitelist插件,倒是app訪問http無法正常進行,后來添加插件添加權限即可

 

2.www和res

參照上面文件結構圖,

www:代碼

res:config.xml中配置的文件存放目錄,這個也可以自己調整,只要能找到即可

 

3.cordova intro

6.png

官網的getstarted,比較簡單明了,貌似也沒有什么問題

 

4.cordova create

以后可以不需要命令創建,以本項目為模版,保留www和res文件夾,以及config.xml即可

 

5.cordova platform add android

這個需要本地有android和ios的環境,android sdk即可,安裝請百度,ios稍候補充。

 

6.cordova run android

run,就是將app發送到手機並運行,需要數據線連接手機,並開啟usb調試

 

7.cordova serve

和上一節phonegap serve相同,在本地啟動一個serve,方便初期在瀏覽器調試

 

8.cordova build

瀏覽器調試完畢,真機調試完畢后就是打包了,build有幾個命令,可以使用cordova help build查看

 

【debug】

debug是必不可少的環節

1.瀏覽器調試

剛開始功能開發的時候,可以使用cordova serve命令,本地開啟serve然后瀏覽器調試,很方便

2.真機調試

當功能開發完畢后,需要真機校驗和調試,這個時候可以用cordova run,將app安裝到真機中,

但是調試就發愁了,具體可以參考這篇文章:http://rensanning.iteye.com/blog/2018417

結論是,gapdebug比較好用,具體使用詳見官網。

 

【梳理流程】

www下代碼開發

cordova serve瀏覽器調試

config.xml中引用res,引用plugin

cordova platform add android生成平台和plugin

cordova run android真機調試,配合gapdebug

 

【end】

至此,應該可以在我代碼基礎上,自己將流程跑一遍了。

也算是cordova+framework7入門了。

源碼:https://github.com/uikoo9/_hpp_01_xiaoxiao

 

轉載:http://uikoo9.com/book/chapterDetail/109


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM