? ? ? ? 本文的公眾號(hào)包括了微信、支付寶兩家公眾號(hào)。適配包括Android和iOS。
? ? ? ? 首先是各自瀏覽器的內(nèi)核，稍不注意就是坑。可以用代碼檢測(cè)一下內(nèi)核以做適配。比如iOS系統(tǒng)支付寶和微信的瀏覽器內(nèi)核貌似都是Safair（過(guò)了很久不太確定了，可以百度一下代碼自己測(cè)一下內(nèi)核）；而Android系統(tǒng)支付寶的是UI瀏覽器，微信的是QQ瀏覽器。所以兩個(gè)系統(tǒng)的瀏覽器加載方式也不同：Android的是進(jìn)度條加載，所以有一些控制是可以體現(xiàn)出來(lái)的（諸如第二界面的網(wǎng)絡(luò)加載不通會(huì)在第一界面體現(xiàn)）；而iOS是跳轉(zhuǎn)沒(méi)有進(jìn)度條（或者說(shuō)進(jìn)度條很快），空白頁(yè)加載數(shù)據(jù)，所以出現(xiàn)一些問(wèn)題的時(shí)候用戶體驗(yàn)不是很好（網(wǎng)絡(luò)不通的時(shí)候就是空白頁(yè)）。這就需要代碼來(lái)控制，該關(guān)閉的關(guān)閉，該重新連接的要重連接。
? ? ? ? 把內(nèi)核放在最上面說(shuō)，是因?yàn)閷?xiě)代碼的時(shí)候要記得適配，測(cè)試兩個(gè)系統(tǒng)出現(xiàn)問(wèn)題也別慌，很正常的一件事。判斷下內(nèi)核系統(tǒng)if else分兩塊寫(xiě)就ok。
? ? ? ? 兩個(gè)公眾號(hào)都有自己的SDK，阿里的是AlipayJSBridge，騰訊的是WeixinJSBridge。我們的項(xiàng)目是要求在兩個(gè)公眾號(hào)上實(shí)現(xiàn)一模一樣的界面，類(lèi)似于同一個(gè)app的Android端和iOS端的開(kāi)發(fā)，所以我們的思路是兩個(gè)的非功能界面使用一個(gè)，復(fù)雜功能需要調(diào)用各自SDK的就建兩個(gè)界面。其實(shí)就是低耦合。。。
? ? ? ? 在同界面的部分，比如下面代碼的需求是按返回關(guān)閉瀏覽器，經(jīng)測(cè)試百度到的所有js代碼是沒(méi)有效果的（可能專(zhuān)業(yè)的前端開(kāi)發(fā)工程師有辦法吧），這里只能通過(guò)判斷平臺(tái)分別調(diào)用SDK關(guān)閉瀏覽器。這個(gè)控制后退也耗費(fèi)了我不少時(shí)間，這里記錄一下以便下次用。
? ? ? ? 我們是發(fā)布到云服務(wù)器遠(yuǎn)程過(guò)去直接用txt改的代碼，所以說(shuō)有的面試讓你手寫(xiě)代碼也是有場(chǎng)景的，因?yàn)槟泓c(diǎn)不出來(lái)啊>.<。什么，代碼沖突怎么辦？首先云服務(wù)器會(huì)開(kāi)多個(gè)賬戶登錄的，這個(gè)東西沒(méi)有鎖，別人改了之后可能會(huì)提示讓你更新一下（我們用notepad++），但是！有可能會(huì)出現(xiàn)兩個(gè)人都改了，系統(tǒng)兩邊都不會(huì)保存，恢復(fù)原來(lái)，而且這個(gè)恢復(fù)是兩個(gè)人都下線之后。所以最好是常備份一下你的代碼。什么，為什么要這么寫(xiě)代碼？?jī)蓚€(gè)周從開(kāi)發(fā)到測(cè)試到上線，我也想砍了我們老板，不懂技術(shù)還提出這么個(gè)要求。沒(méi)辦法呀，緊急你不做出來(lái)老板掙不到錢(qián)你也沒(méi)什么好果子吃，加班做的。編譯看效果的話直接進(jìn)微信和支付寶公眾號(hào)看就行了，項(xiàng)目發(fā)布到云上了，直接就可以看、改了。（不推薦這種方式，只適應(yīng)于開(kāi)發(fā)者極少的情況下）
? ? ? ? 代碼什么的和前端基本一樣，其實(shí)就是個(gè)網(wǎng)頁(yè)，只是一些涉及到手機(jī)功能的需要用到SDK罷了。諸如調(diào)用攝像頭、獲取經(jīng)緯度、網(wǎng)絡(luò)數(shù)據(jù)接收什么的。再按照兩家公眾號(hào)的UI方式設(shè)計(jì)一下圖片和顏色搭配，基本就沒(méi)什么問(wèn)題了。對(duì)移動(dòng)端開(kāi)發(fā)工程師來(lái)說(shuō)做小程序公眾號(hào)的邏輯控制沒(méi)什么問(wèn)題，就是語(yǔ)言。我們還沒(méi)怎么用框架純生寫(xiě)的，UI用了框架因?yàn)闆](méi)什么時(shí)間去寫(xiě)css了。
? ? ? ? 有個(gè)對(duì)我來(lái)說(shuō)是個(gè)坑的地方就是：location.href = hrefUrl;后面必須是https://標(biāo)準(zhǔn)開(kāi)頭的，否則會(huì)認(rèn)為是項(xiàng)目包下的地址。我們當(dāng)時(shí)用了轉(zhuǎn)義字符，如果把開(kāi)頭也轉(zhuǎn)義的話，是跳轉(zhuǎn)不過(guò)去的。（微信公眾號(hào)要求是https的鏈接，所以http的就不說(shuō)了）
? ? ? ? 我們的公眾號(hào)里面加了代扣部分，為了提高用戶的體驗(yàn)性，也都是參數(shù)協(xié)議之類(lèi)的，溝通配置的時(shí)候比較麻煩，搞出來(lái)的時(shí)候就是跳轉(zhuǎn)就好了。
? ? ? ? 總體來(lái)說(shuō)公眾號(hào)開(kāi)發(fā)真的不難，做好可能就是細(xì)節(jié)的問(wèn)題，產(chǎn)品細(xì)節(jié)、技術(shù)細(xì)節(jié)及外觀細(xì)節(jié)。
