標籤：本地 不能 檔案 tps 文章 bsp 顯示 好的 應用
嚴格來說，這並不是一篇關於前端開發的文章，因為涉及到的知識非常淺。這隻是一個向設計獅們分享的小經驗，只是其中用到了一些前端內容。
最近接了個私活，瞭解到一個初創公司正在高價懸賞Logo（主要用於APP表徵圖），我便投稿試了試，結果真的被選中了，得到了我認為遠超Logo本身價值的獎金（看來跟著拿到投資的初創公司混真的有肉吃啊）。閑話不表，設計完Logo之後我靈機一動，用iOS系統做了一個APP表徵圖真實效果預覽圖，一起發給了甲方。
我們假設剛做好的Logo是下面這樣的（這是範例表徵圖，用我開發的UWP應用《紙書科學計算機》的Logo代替，色調就妥妥地用知乎藍吧）：
本文的最終目標是把它煞有介事地放在iOS的主畫面上，效果如下：
如果你再拍一個實物圖出來，就可以充當這個表徵圖的了（手機拍得醜勿噴）：
總之這是一個讓你告別P圖和套Mockup的簡單方法。不用真的編譯出這個iOS應用，你需要做的，只是用電腦搭建一個本機伺服器，再做一張非常簡單的網頁即可。然後在iOS上用Safari開啟這張網頁，將網頁捷徑發送到主畫面，就達到這個效果啦。
一、搭建本地靜態伺服器
本文以Windows系統為例。Mac系統可以用Apache，詳情請百度，並不複雜的。所以Mac使用者可以跳過本節。Windows雖然也可以用Apache，但是用內建的IIS會更加方便。
我以前發過一篇關於搭建本地IIS伺服器的文章，也可以看這裡：Web前端頁面的瀏覽器安全色性測試心得（一）搭建測試用本地靜態伺服器。其實本文就是在介紹本地靜態伺服器的實際用途之一，看看都能有哪些不可思議的操作！
作為.NET全家桶成員，IIS經常和後端的ASP.NET結合起來建站，但在這裡我們不需要配置ASP.NET。只用幾個步驟，便可在電腦上開啟IIS服務。
以下步驟以我電腦上的Win10系統為例，和Win8、Win7上的操作都是差不多的：
1.開啟控制台，進入“程式與功能”：
5.在開始菜單的“Windows管理工具”目錄下，找到並開啟“Internet Information Services(IIS)管理器”（建議把該捷徑固定在開始菜單，以後開啟會更方便）。
6.在介面左側列表找到自己的主機那一項，右鍵，選擇“添加網站”：
7.這時會彈出“添加網站”的視窗，我們先不要管它。我們開啟命令提示字元（cmd），輸入“ipconfig”並斷行符號，即可查看自己本機在當前區域網路內的IP地址（注意是IPv4地址，而且以“192.168”開頭）。
8.回到“添加網站”視窗，如所示填寫網站名稱、設定伺服器根目錄所在路徑（根目錄選在哪裡看你喜好），並填入本機IP地址作為伺服器的訪問地址，點擊確定。
9.這時，我們發現網站已經建立並啟動了：
二、建立靜態頁面
有了本機伺服器，我們就可以放靜態網頁進去了。只要你的iOS裝置和電腦串連著同一個wifi，iOS裝置就可以訪問電腦上的伺服器。
1.在電腦上，我們進入剛剛設定好的伺服器根目錄下（我的是“C:\server-root”），在這裡添加一個首頁。建立一個文字文件，輸入以下代碼並儲存，把檔案名稱改為“index.html”。
<!DOCTYPE html><html lang="zh-cmn-Hans"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="apple-touch-icon" href="icon256.png" /> <title>應用程式名稱</title></head><body> <p>OK!</p></body></html>
（註：“應用程式名稱”處應改為你需要填寫的應用程式名稱）
2.然後再把設計好的Logo做一份尺寸為256px*256px的應用表徵圖，儲存為png格式（尺寸一定要對），放在和index.html同一個目錄下，改名為“icon256.png”：
3.在瀏覽器中輸入你原生IP地址，看看首頁是否成功顯示：
4.看來我們已經成功了！現在就可以在你的iOS裝置上開啟Safari，輸入該IP地址，在確認能正常訪問之後，點擊右上方的分享按鈕，再點擊“添加到主畫面”：
接下來按一下home鍵，就會發現大功告成了：
下面簡單介紹下原理，最關鍵的是HTML裡的這一句代碼：
<link rel="apple-touch-icon" href="icon256.png" />
這句聲明了如果Safari將網頁捷徑發送到主畫面，就以“icon256.png”作為表徵圖。但是，在APP如此豐富的現在，好像沒什麼人這樣做了。
還好，這句的功能可不止這個。有了這個link元素，如果你收藏該網頁，在個人收藏夾中還會顯示這個表徵圖，這個應用情境就常見多了：
可能本文對於設計獅來說還是有點極客，不知道接受度如何。不管怎樣，祝設計愉快，甲方爽快~
APP表徵圖設計小技巧：在iOS上快速獲得APP表徵圖的真實預覽圖
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
