一秒钟生成自己的iOS客户端

原谅我这个标题党

想当年我也是亲自学过几天Objective-c的程序猿，我一眼就知道我是在骗人，但那有怎样呢！还不是满大街都是各种《十分钟让你明白Objective-C的语法》、《七天学会Swift》、《三个月成为牛B的iOS攻城狮》，CAO、不论你信不信，这些标题真的是存在的。那我今天就勉为其难地讲一讲如何真的一秒生成自己的iOS客户端吧！ ps:这样会不会没朋友...

一切从那家小饭店说起

前段时间，一直在开小饭馆的表姐可能由于美团、饿了么这些牛B的地推团队的轰炸，终于想明白了移动互联网时代开个小饭馆也要创新、有逼格，就问我能不能帮她家小饭馆做一个系统，就是让吃货们用手机就能点她们家的菜或者订外卖。听到这里我又快疯了，这不就是让我帮她做一个美团外卖么？尽管我自认为我有这能力搞定（哎，又吹牛了），但这完完全全是没必要的阿！！！然后我又问：现在订外卖的多么？加一个人送外卖还划算么？有没有上美团或饿了么的系统？等等一系列问题。我姐就回答说：订外卖的不多，大部分的客户还是到店吃饭；现在在用饿了么的系统，就是喜欢他们的那种菜单。到这里我就明白了，其实我姐最需要的就是一个让吃货们扫一扫就能点菜的菜单小网页罢了，再能打电话订餐就更好不过了。

说干就干，抄袭美团

我接下来就开始了寻找“完美菜单”的过程，因为互联网界一直在打仗的原因，我手机上有移动互联界主流的所有APP，我打开了美团外卖、百度外卖、饿了么，尼玛、界面长的一个样子，我就在怀疑是不是一个程序猿的代码了，这让我想起了当年杀毒界的故事。然后我Copy了美团外卖的前端源码，数据绑定用了Handlebars.js，数据存储直接用json文件就行，服务器必须是阿里云的免费滴！本来想用京东的，那几天京东的一直发布不成功，一脚踢开。然后就变成了下面这样：

好了好了，上干货

说了乱七八糟的半天，求不骂。自动生成APP说白了就是利用Safari浏览器的特性来玩，也就是iOS会自动帮你生成一个WebAPP，具体做法：

1、设置APP图标。在网站首页加入以下代码。图片就是APP的图标，apple-touch-icon和apple-touch-icon-precomposed区别在于前者图标有高光，这行代码主要是适配四种不同的屏幕。

<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">

2、添加启动页图片。官方文档说尺寸必须是320x480。ps:反正我没成功。

<link rel="apple-touch-startup-image" href="/startup.png">

3、设置状态栏，使之更逼真。第一行的yes为使用状态栏，第二行的balck为黑色状态栏，black-translucen就是传说中的“沉浸式”。

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">

打完收工！！！官方文档点击这里。我“抄袭”的网页在这里。效果如下：



感冒好了，蹲厕所能闻见shi味的生活真美好！