編者按繼2014年8月23日微信開發(fā)者大會北京站成功舉辦后，大會得到了業(yè)界人士的一致好評。盡管大會僅過去一月有余，CSDN卻收到了諸多開發(fā)者的建議，無不強(qiáng)烈要求再次舉辦一場純干貨的微信開發(fā)技術(shù)會議，聆聽標(biāo)桿企業(yè)的經(jīng)典案例，學(xué)習(xí)他們敢于吃螃蟹的經(jīng)驗(yàn)得失。為此，CSDN即將迎來微信開發(fā)者大會深圳站活動。本次將邀請更多重量級嘉賓，內(nèi)容設(shè)置更豐富。屆時(shí)，來自全國各地與會者將齊聚一堂，圍繞微信開發(fā)中的難點(diǎn)、熱點(diǎn)及行業(yè)解決方案、未來發(fā)展機(jī)遇展開深入討論與分享。了解更多微信開發(fā)，請?jiān)L問微信技術(shù)社區(qū)。

　　打開朋友圈，微信儼然成為了傳播信息的主流手段之一。對于許多女性而言，時(shí)常會關(guān)注一些護(hù)膚品信息，既想買到好的產(chǎn)品又不想花冤枉錢，又或者擔(dān)心在網(wǎng)上買到假貨。對此如何解決呢？也許大多數(shù)人會選擇參照互聯(lián)網(wǎng)信息，而妝媒體就是不錯(cuò)的選擇，其除了向?qū)I(yè)用戶提供全球化妝品資訊外，妝媒體也會面向大眾用戶推出化妝品的真假評測方法。

　　妝媒體Vide1.0自上線以來，發(fā)展至今，粉絲量已突破10萬。妝媒體微信公眾號是如何開發(fā)而來的？期間遇到了哪些痛點(diǎn)呢？在功能設(shè)計(jì)和產(chǎn)品用戶體驗(yàn)上又采取了哪些方法？一起來品讀妝媒體微信公眾號背后的酸甜苦辣。（注：本文是CSDN所做的微信開發(fā)系列案例之一，首發(fā)于2014年《程序員》雜志9月刊。）

　　中國的化妝品行業(yè)長期都處于閉塞狀態(tài)，落后國際市場3~5年。有實(shí)力的從業(yè)人員或者大公司，能穿洋過海去化妝品的產(chǎn)地國研究，創(chuàng)業(yè)公司就只能參加國內(nèi)的博覽會。兩者都無法快速全面了解國際化妝品趨勢—包材、配方、產(chǎn)品研究等。這一需求是妝媒體在化妝品領(lǐng)域摸爬滾打數(shù)十載，對國內(nèi)化妝品開發(fā)現(xiàn)狀非常了解的基礎(chǔ)上發(fā)現(xiàn)的。

　　所以當(dāng)微信這個(gè)天生的CRM平臺起來時(shí)，我們決定以微信為基礎(chǔ)，做一個(gè)付費(fèi)、有特色的化妝品資訊平臺，將90多個(gè)化妝品主要產(chǎn)地國的化妝品裝進(jìn)手機(jī)里，讓國內(nèi)化妝品從業(yè)人員通過微信隨時(shí)成為VIP并且查看最新和最特色的化妝品資料。

　　開發(fā)和調(diào)試之殤

　　微信公眾號的開發(fā)，說簡單也簡單，說麻煩也麻煩，麻煩的不是開發(fā)過程，而是搭建開發(fā)環(huán)境的過程。不過俗話說得好，磨刀不誤砍柴工，我們有必要花點(diǎn)時(shí)間來研究下如何攻破微信公眾號的開發(fā)環(huán)。說白了，公眾號的開發(fā)就是基于HTML/CSS/JS的移動端Web App的開發(fā)，但微信公眾號和普通的移動Web App開發(fā)還略有不同，因?yàn)楹芏嗲闆r下我們會調(diào)用公眾號的接口，而只要涉及微信接口的請求，都必須通過微信內(nèi)置的瀏覽器來訪問，如果我們想把請求放到PC桌面瀏覽器上運(yùn)行調(diào)試，就會跳轉(zhuǎn)到一個(gè)笑臉，提醒你出錯(cuò)了（圖1）。

　　圖1 微信應(yīng)用無法直接在PC瀏覽器中調(diào)試

　　這樣的安全機(jī)制和門檻是可以理解的，因?yàn)槲⑿艦g覽器在Webkit內(nèi)核的基礎(chǔ)上擴(kuò)展了很多方法，也包裝了很多接口。此路是微信開，此樹是微信栽，要想開發(fā)公眾號，你就必須從此路過。這就意味著我們沒法直接在PC瀏覽器里開發(fā)調(diào)試公眾號的頁面。那妝媒體的開發(fā)者們是怎么解決這個(gè)問題的呢？首先，我們要達(dá)成一個(gè)共識，在一個(gè)小小的手機(jī)上開發(fā)調(diào)試，實(shí)在施展不開，如果我們能在PC上進(jìn)行開發(fā)，有Chrome的審查元素或Firefox的Firebug這樣的利器，何愁拿不下公眾號的開發(fā)？所以我們的目標(biāo)是，在PC瀏覽器中進(jìn)行公眾號的開發(fā)和調(diào)試，在手機(jī)微信上測試結(jié)果。我們只需要兩個(gè)步驟就可以實(shí)現(xiàn)這樣的效果。

　　第一，用代理訪問服務(wù)器

　　不要被“代理服務(wù)器”這個(gè)名詞嚇到了，其實(shí)我們只要有一臺筆記本，或者插有無線網(wǎng)卡的臺式機(jī)就足以搭一個(gè)代理。這一步對于開發(fā)過移動端Web應(yīng)用的開發(fā)者來說，并不陌生，可能你也猜到了，這至關(guān)重要的第一步在微信的公眾號開發(fā)中同樣適用，下面我就簡單敘述一下。這里主要為Windows提供方法，Mac/Linux的方法類似，點(diǎn)到為止，就不著重介紹了。

　　把電腦設(shè)置成代理服務(wù)器

　　下載并安裝Fiddler2（如果是Windows 8，請下載Fiddler4；Mac/Linux用戶可以使用Charles/Nproxy等代理工具）。安裝后配置Fiddler：Fiddler菜單ToolsFiddler OptionsConnections，如圖2配置。

　　圖2 Fiddler配置過程

　　綁定hosts

　　進(jìn)入windows/stystem32/driver/etc/目錄。（Mac/Linux用戶的hosts目錄在/etc/下。）備份hosts文件，并用記事本修改hosts文件，在最后追加hosts，如：203.195.198.53 app.。這里的203.195.198.53是線上環(huán)境的服務(wù)器IP，app.是公眾號所請求的域。

　　設(shè)置手機(jī)代理服務(wù)器

　　開始菜單運(yùn)行cmd，打開命令行窗口，輸入ipcong，找到自己的IP地址，如：192.168.2.102。以iPhone為例，進(jìn)入設(shè)置無線局域網(wǎng)選中自己的網(wǎng)絡(luò)，設(shè)置代理服務(wù)器和端口，如圖3中的配置。 Android手機(jī)也有類似配置功能，不詳細(xì)說明了。

　　圖3 手動設(shè)置HTTP代理

　　原理及注意事項(xiàng)

　　自己的電腦一定要和手機(jī)在同一個(gè)網(wǎng)絡(luò)內(nèi)，否則手機(jī)無法連接到代理服務(wù)器。當(dāng)手機(jī)訪問app.域的時(shí)候，會訪問代理服務(wù)器，而這個(gè)代理的hosts被設(shè)置成了我們指定的IP，所以訪問開發(fā)環(huán)境就如同在微信里訪問公眾號一樣。

　　第二，開發(fā)設(shè)計(jì)Debug模式

　　如果說以上的第一點(diǎn)是一匹好馬，那這第二點(diǎn)就是一個(gè)好鞍。沒錯(cuò)，好馬配上好鞍才能日行千里。

　　要想在PC瀏覽器里訪問請求微信公眾號接口的URL，這是不可能實(shí)現(xiàn)的，但是我們可以通過Debug模式繞過微信的接口，繼續(xù)執(zhí)行接口以后的邏輯。方法有很多，需要開發(fā)者們發(fā)揮想象，各顯神通。這里是妝媒體的開發(fā)者們提供的正在使用的一種方法，以供參考。

　　我們是通過URL后拼接參數(shù)來調(diào)起Debug模式，如：http://app./main.html?debug。

　　然后在代碼中判斷Debug并模擬微信接口返回的數(shù)據(jù)，以此繞過微信公眾號的接口請求，這樣就可以順利地在PC瀏覽器里開發(fā)和調(diào)試了。如：

　　i f ( wi n d o w . l o c a t i o n . h r e f .indexOf(?debug) > 0)

　　// 模擬微信公眾號接口返回的數(shù)據(jù) else

　　// 訪問微信公眾號接口

　　特點(diǎn)？弱點(diǎn)？亮點(diǎn)！

　　除研發(fā)技術(shù)上的多處突破外，妝媒體在功能設(shè)計(jì)、產(chǎn)品用戶體驗(yàn)上也實(shí)現(xiàn)了諸多創(chuàng)新之處。創(chuàng)新地圖模式妝媒體將位置服務(wù)與媒體相結(jié)合，這一創(chuàng)舉得到業(yè)內(nèi)的廣泛好評和認(rèn)可。但從開發(fā)角度來看，這并不是一氣呵成的，我們從中經(jīng)歷了多個(gè)版本的迭代才有了現(xiàn)在你所看到的效果。

　　眾所周知，位置服務(wù)的接口提供商屈指可數(shù)，因?yàn)閵y媒體的產(chǎn)品覆蓋范圍是全球，像國內(nèi)比較穩(wěn)定且知名的百度地圖和搜狗地圖API僅提供了國內(nèi)陸圖的API，所以遺憾放棄。

　　在妝媒體開發(fā)的第一個(gè)版本中，我們嘗試使用了Google地圖API。如我們所期望的，甚至超出我們預(yù)期的結(jié)果，使用地圖服務(wù)來直觀地顯示化妝品出產(chǎn)地，這一功能獲得了用戶的肯定，同時(shí)也獲得了很多反饋，大多數(shù)用戶表示地圖加載太慢。確實(shí)，在移動端的加載速度本來就捉襟見肘，再加上Google遭遇的某些“不可抗力”因素導(dǎo)致加載速度更加慢。

　　妝媒體的開發(fā)者們本著工匠精神，誓將提升用戶體驗(yàn)進(jìn)行到底。終于，在妝媒體最近的一個(gè)開發(fā)版本中，我們將Google地圖遷移至了高德地圖API（圖4），同樣覆蓋全球范圍，而且速度杠杠的！

　　圖4 妝媒體利用地圖服務(wù)展示化妝品出產(chǎn)地

　　微信對話框改造成搜索入口

　　默認(rèn)情況下，用戶輸入的任何關(guān)鍵字都會先走一遍產(chǎn)品庫的搜索，如果產(chǎn)品庫檢索不到，那么這條消息就會推送到客服消息。

　　普通用戶的閱讀權(quán)限和VIP入口

　　利用微信的CRM屬性，普通用戶只能使用10次閱讀權(quán)限，并且在這個(gè)基礎(chǔ)上引入VIP的入口。

　　VIP系統(tǒng)

　　和微信完美融合，獲取用戶頭像、昵稱。

　　VIP支付

　　微支付的接入極大地方便用戶進(jìn)行VIP的購買（圖5）。

　　圖5 妝媒體接入VIP支付

　　結(jié)語

　　自2014年5月7日妝媒體Vide1.0上線以來，發(fā)展至今，粉絲量已突破10萬。除了向?qū)I(yè)用戶提供全球化妝品資訊外，妝媒體也會面向大眾用戶推出化妝品的真假評測方法。

　　公眾號的發(fā)展依賴于微信的成長，妝媒體的未來和微信緊緊地捆綁在一起。我們期望微信在公眾號的生態(tài)圈里可以更加開放，提供給開發(fā)者們更多接口，比如一鍵關(guān)注、消息模板、更智能的點(diǎn)對點(diǎn)推送，這樣微信和公眾號才能更好地結(jié)合在一起，也能玩得更出彩。會開發(fā)和交互UI的“偽全能”產(chǎn)品經(jīng)理。

　　作者簡介：

　　大白菜，會開發(fā)和交互UI的“偽全能”產(chǎn)品經(jīng)理。萬戈，前端開發(fā)工程師，專注于網(wǎng)站重構(gòu)、前端技術(shù)以及PHP開發(fā)。

　　更多微信開發(fā)案例分享交流，請參見微信開發(fā)者大會深圳站。

　　CSDN特別開設(shè)了微信開發(fā)者社區(qū)供企業(yè)共同探討、借鑒其他行業(yè)優(yōu)秀的應(yīng)用開發(fā)案例，為開發(fā)者帶來一線“吃螃蟹”的經(jīng)驗(yàn)得失。另外，企業(yè)/用戶還可以借助微信項(xiàng)目對接平臺，發(fā)布微信開發(fā)需求、尋找微信開發(fā)項(xiàng)目。

　　作者：大白菜萬戈