想當年我也是親自學過幾天Objective-c的程序猿,我一眼就知道我是在騙人,但那有怎樣呢!還不是滿大街都是各類《十分鐘讓你明白Objective-C的語法》、《七天學會Swift》、《三個月成爲牛B的iOS攻城獅》,CAO、不論你信不信,這些標題真的是存在的。那我今天就勉爲其難地講一講如何真的一秒生成本身的iOS客戶端吧! ps:這樣會不會沒朋友...html
前段時間,一直在開小飯館的表姐可能因爲美團、餓了麼這些牛B的地推團隊的轟炸,終於想明白了移動互聯網時代開個小飯館也要創新、有逼格,就問我能不能幫她家小飯館作一個系統,就是讓吃貨們用手機就能點她們家的菜或者訂外賣。聽到這裏我又快瘋了,這不就是讓我幫她作一個美團外賣麼?儘管我自認爲我有這能力搞定(哎,又吹牛了),但這完徹底全是不必的阿!!!而後我又問:如今訂外賣的多麼?加一我的送外賣還划算麼?有沒有上美團或餓了麼的系統?等等一系列問題。我姐就回答說:訂外賣的很少,大部分的客戶仍是到店吃飯;如今在用餓了麼的系統,就是喜歡他們的那種菜單。到這裏我就明白了,其實我姐最須要的就是一個讓吃貨們掃一掃就能點菜的菜單小網頁罷了,再能打電話訂餐就更好不過了。前端
我接下來就開始了尋找「完美菜單」的過程,由於互聯網界一直在打仗的緣由,我手機上有移動互聯界主流的全部APP,我打開了美團外賣、百度外賣、餓了麼,尼瑪、界面長的一個樣子,我就在懷疑是否是一個程序猿的代碼了,這讓我想起了當年殺毒界的故事。而後我Copy了美團外賣的前端源碼,數據綁定用了Handlebars.js,數據存儲直接用json文件就行,服務器必須是阿里雲的免費滴!原本想用京東的,那幾天京東的一直髮布不成功,一腳踢開。而後就變成了下面這樣:
ios
說了亂七八糟的半天,求不罵。自動生成APP說白了就是利用Safari瀏覽器的特性來玩,也就是iOS會自動幫你生成一個WebAPP,具體作法:
一、設置APP圖標。在網站首頁加入如下代碼。圖片就是APP的圖標,apple-touch-icon
和apple-touch-icon-precomposed
區別在於前者圖標有高光,這行代碼主要是適配四種不一樣的屏幕。web
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
二、添加啓動頁圖片。官方文檔說尺寸必須是320x480。ps:反正我沒成功。json
<link rel="apple-touch-startup-image" href="/startup.png">
三、設置狀態欄,使之更逼真。第一行的yes
爲使用狀態欄,第二行的balck
爲黑色狀態欄,black-translucen
就是傳說中的「沉浸式」。瀏覽器
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black">