微信公衆號中的H5頁面是怎樣煉成的

現在是自媒體時代，很多個人或者小團隊都希望能有一個微信公共號平臺用來宣傳自己。公共號開通其實很簡單，推廣的方式也已經模式化，這些無需多述，這裏我們從技術的角度來看看一個技術人員完成一個帶有H5頁面“會員中心”的公衆號的流程。

操作方法

（01）公衆號有的三個類別如果您的公衆號需要經常性的推送羣發圖文消息，那麼請註冊訂閱號，其他情況還是推薦註冊服務號。不過註冊服務號需要進行認證，這個需要有一個公司或者個體的資質。小程序是一個基於微信的小app，它在製作的時候需要綁定一個位置，方便用戶檢視周邊小程序能夠找到你，目前小程序在餐飲住宿零售等行業使用的不錯。

（02）我們主要來對比認證訂閱號和認證服務號的區別1、文章推送數量及展示訂閱號每日可以推送一次圖文消息或者圖文消息列表，用戶檢視推送的消息，需要開啟微信-訂閱號-你的訂閱號才能檢視消息。訂閱號有數量優勢。服務號每月可以推送四次圖文消息或者圖文消息列表，用戶檢視推送的消息，可以在聊天列表中直接開啟你的訂閱號檢視消息。服務號有更好的檢視率。2、系統接口由於訂閱號更適合媒體平臺，因此訂閱號沒有模板消息接口（發送業務通知-類似信用卡發送的賬單消息），不能獲取當前用戶的位置，不能使用微信支付接口，不能使用網頁授權獲取用戶openid/用戶基本資訊（不能在H5頁面中集成微信登陸），好的一點是訂閱號支援微信網頁JS-SDK（使用JS-SDK可以調用微信系統接口，如語音、視頻、圖片、分享、掃一掃等功能）。具體接口說明可以檢視微信官方接口文檔。服務號可以使用微信提供的所有接口，如網頁授權登陸、微信支付、微信網頁JS-SDK（使用JS-SDK可以調用微信系統接口，如語音、視頻、圖片、分享、掃一掃等功能）

（03）註冊公衆號過程很簡單，透過微信公衆平臺右上角立即註冊，選擇您要註冊的公衆號類型就可以進入填寫資訊介面

（04）根據要求填寫各種資訊就可以了，如果需要微信認證，我們就需要填寫對應的企業三證合一的證件資訊、開戶行資訊，並填寫一份認證公函簽字蓋章拍照上傳，三兩天就可以認證透過。認證透過後就該技術人員出手了，現在我們回到主題，客戶需要一個帶有會員中心的公衆號，技術人員會怎樣處理呢？首先客戶需要租一個雲服務器或者web託管，需要申請一個域名並且備案（備案時間一週到兩週時間就可以下來），有了服務器和域名，技術人員會先去域名解析平臺綁定解析到租好的服務器，然後再服務器的管理平臺或遠程至服務器進行域名綁定，並建立一個ftp目錄保證他可以隨時將網頁源檔案傳送到該目錄。

（05）服務器和域名做好以後，技術人員還需要在公衆號進行配置。每一項配置填寫以後都需要做測試配置是否成功，有時在配置這裏因爲找不到問題原因，折騰一天也是有可能的。

（06）前面說的只是做H5會員中心的配置階段，配置好以後才真正進入開發階段開發過程會涉及三個工種分別是美工設計、前端開發、後臺開發。美工設計主要是用來設計頁面佈局色調的人員。前端開發是承接美工和後臺人員的橋樑，並且是用戶使用程序的直接面對着。前端人員要透過CSS+HTML代碼將美工的介面實現成網頁形式。要透過JavaScript與後臺頁面進行通信，並將通信返回的數據使用JS動態的更新當前頁面，一個會員中心前端人員可能需要些十幾二十個接口與後臺進行通信，每個接口都會實現一個對應的功能，如獲取用戶資訊接口，用戶修改頭像接口，用戶短信認證接口等，每個接口都採用AJAX異步通信的方式與後臺進行交互，透過後臺返回的JSON格式數據，再對用戶中心中對應的內容進行更改。如果用戶中心涉及到用戶轉發文章統計功能，前端還需要使用微信JS-SDK開發，並對URL地址的哈希值處理，並且要做本地存儲與用戶驗證登陸跳轉時的邏輯關係處理。後臺開發人員主要是建立數據庫，透過PHP或者 JAVA等語言製作對數據庫操作的頁面，並預留POST接口接收前端發送過來的post資訊，透過post資訊對數據庫進行對應的操作，操作完成以後返回一個操作結果json串發送回前端，如果需要集成微信用戶登入就需要做微信的登陸認證，認證的過程比較複雜，基本原理就是用戶授權登陸以後，該公衆號的頁面得到用戶給予該公衆號的唯一艾迪和用戶的暱稱頭像資訊，然後將該資訊放入自己的用戶庫中，每次用戶登入的時候都要跟庫裏的人員進行判斷，這樣就不會每次提示用戶授權登陸該公衆號了。

（07）一個會員中心功能雖然看上去功能不多，但是麻雀雖小五臟俱全，他包含了用戶基礎微信登陸，微信JS-SDK開發，以及H5頁面製作開發，後臺開發等開發過程。在開發過程中前端會使用到微信的web開發者工具進行頁面測試，在這裏會測試iphone各個版本，安卓版本的多種測試，測試無誤以後會正式部署到服務器上，部署到服務器上還要再進行一輪測試，確保交付到用戶手中的功能有儘量少的BUG。微信公衆號中只要是需要用戶授權登陸的頁面基本都是按照這個流程做下來的，在我們使用這些功能的同時，也系統能夠爲我們的工程師們點個贊，感謝他們的付出。