微信開發系列教程，將以一個實際的微信平臺項目爲案例，深入淺出的講解微信開發、應用各環節的實現方案和技術細節。
本系列教程的最終目標是完成一個功能完善並達到高可用性能指標的微信管理軟件，所以除了與微信本身緊密相關的對接和應用技術，還會講到其它相關的所有知識點，從技術選型，架構設計，數據層的設計，API的設計，數據傳輸協議的設計，再到細節的前端的設計及技術應用，後臺開發中的各方面技術，都會涉及。同時，在架構設計中，會考慮到運維領域的諸多問題，會涉及到部署環節中負載均衡及CDN分發，服務器流量及帶寬控制等因素。有許多開發人員對運維領域的工作不熟悉造成項目運維階段成本高，難度大，希望本文能夠幫助到你。
本系列文章文會公開部分代碼，開源部分模塊，但是不會全部開源，請見諒，畢竟：Who can afford to do professional work for nothing? :) 不過我相信本系列文章會使你在開展相關工作時，輕車熟路，找到捷徑。
這個項目是一個實際上已完成並應用的項目，所以本系列文章中可能出現項目的相關信息，但是個別技術細節會隱去或簡化，請見諒，我會盡量保持每週一篇的速度更新，希望你有所收穫。
寫一篇文章，加上排版校對大約要用掉六小時左右的時間，你的支持是我最大的動力，對你有幫助的話請點擊右下角“推薦”，謝謝。 ：）
原創內容，轉載請註明出處。
------------------------
微官網是微信平臺上一個重要的功能，幾乎所有的微信公衆號都有這樣的需求。
微官網一般至少包括以下幾個部分：
1.微主頁；
2.分類信息展示（如產品展示、顧問/專家展示、樓層展示等等）；
3.自定義頁面（如企業介紹、聯繫方式等任意頁面）；
4.自定義表單（如在線報名、在線預約等）；
5.其它模塊（如各類活動頁面等等）
本篇我們介紹在升訊威微信營銷系統中，微主頁功能的設計和實現方法。
在過去我們做定製化項目時，微主頁一般只需要美工完成設計，前端工程師完成靜態頁面，後臺開發人員完成相關編碼即可。不同的項目只需設計製作不同的前端畫面即可。
但是當我們想要開發一個服務於不同公衆號的第三方平臺時，微主頁的設計變得複雜起來，微主頁是一個企業的門戶，擔當着展示企業形象的重要作用，不能只是簡單的提供固定式樣，必須要能在平臺中靈活配置，而且配置的過程不能複雜，畢竟用戶不是專業人士，需要一種靈活、簡單、所見即所得的方式讓用戶在無需專業知識的情況下，就能搭建微主頁。
爲了達到這個目標，我們需要兩種緯度的設計：
1.基於模版
讓用戶在選擇鐘意的模版後，只需上傳自己的圖片即可。
2.完全自定義
面向有一定前端開發能力的用戶，爲他們提供開發接口，使這部分用戶可以自己製作靜態HTML內容，並可以與系統既有功能進行融合交互。
此外我們希望兩種模式能夠互通，比如用戶選擇了鐘意的模版後，除了上傳自己的圖片，還想更進一步的調整，怎麼辦呢？當然不能說讓他再照着模版自己做一套，我們把兩種模式打通，讓用戶可以把喜歡的模版一鍵導入自定義模式，然後再進行細節調整即可。
一、基於模版
基於模版很容易理解，我們在系統中預置許多製作好的微主頁，用戶選擇後，進行輕度的自定義，如上傳自己的圖片，然後發佈即可。
這裏有一個細節需要留意的就是怎樣實現所見即所得的的功能，讓用戶能夠在後臺實時的看到最終效果，我們需要在電腦版後面上模擬微信端最終的呈現效果。
這裏有兩個方案進行模擬：
1）把最終效果圖分層拆開。
這需要我們的設計模版時，就製作好分層的效果圖，然後在後臺通過堆疊的方式進行展示，當用戶上傳自定義的圖片時，將可變換的圖層進行替換，來達到預覽的效果。
2）在iFrame容器中填充手機端代碼進行模擬。
這種方式實現起來會稍微複雜一些，我們在後臺畫面中，嵌入一個iFrame，作爲模擬的容器，當用戶選擇鐘意的模版時，我們把微主頁模版的代碼，渲染到這個iFrame中，在iFrame中模擬微信端的效果和行爲。
後臺頁面與 iFrame 交互的方式很簡單，用 JavaScript 調用即可。
假設我們有 1.html
<a href="#" onclick="window.frames['frame1'].MyNext()">aa</a>
<iframe id="frame1" src="2.html" ></iframe>
2.html
<script language="javascript" type="text/javascript">
function MyNext()
{
alert(1);
}
</script>
在1.htm中點擊test按鈕，可以使2.htm(iframe頁面)中mybutton按鈕失效．就這麼簡單，呵呵．如果要調用2.htm中的JS函數這樣寫：
self.frames['a'].funtionname(param)
目前各種微信第三方平臺，都提供了基於模版的微主頁功能，只是大多數做的比較粗糙，效果不太好，大部分是堆砌大量類似的模版來吸引用戶，實際上大多數模版只是背景圖片不同。
而在我們的平臺中，通過模版引擎，我們只需要設計好模版的框架，讓用戶自己上傳圖片即可達到許多個性化的效果。
二、完全自定義
對於要求更高的用戶，基於模版的功能並不能完全滿足他們的要求，也是目前其它第三方微信平臺的一個短板，或是主要盈利項目。
目前幾乎所有的微信第三方平臺都不提供完全自定義主頁的功能，如果模版不能滿足需求，只能尋求第三方平臺的定製化服務，通常價格不菲，大多數時候第三方平臺公司爲了引導用戶接受定製化開發服務，模版的製作水準和效果也並不會很高。
所以我們這裏設計實現了一個類似於CMS的微主頁引擎，把微主頁的呈現和功能徹底進行了拆分，我們把微主頁中所需要使用的功能實現好，然後通過 JavaScript 提供接口，並將微主頁中所需的基本 CSS 樣式和 JavaScript 函數進行了封裝，用戶在設計自己的靜態頁面時，可以直接引用這些 CSS 樣式，或直接調用系統預置的 JavaScript 函數。
用戶完成微主頁的設計後，只需把HTML代碼保存到後臺，系統在微信端呈現微主頁時，會使用模版引擎呈現用戶的HTML代碼，並初始化相關的功能。
基於這樣的模版引擎，如果用戶稍具前端開發的能力，即可在極短的時間內，可能1天，甚至是半天時間，就可以製作出個性化的微主頁，並無需支付任何所謂的定製化開發的費用。
架構設計：
後臺畫面：
自定義微主頁的關鍵在於需要爲用戶提供數據和功能操作的接口，例如每日簽到功能，用戶在自己設計的微主頁HTML代碼中，怎麼樣調用系統的每日簽到功能呢？
我們把這個功能抽象出來單獨實現，通過 JavaScript 提供 API 供用戶調用，並提供一個回調通知用戶每日簽到的結果，例如用戶在自己的 HTML 代碼中編寫以下腳本：
function documentReady() { if (_member.SignedIn) { $("#spanSignIn").html("已簽到"); } else { $("#spanSignIn").html("每日簽到"); } } function signInCallback(result) { switch (result.reason) { case 0: $("#spanPoint").html(_member.point); $("#spanSignIn").html("已簽到"); layerAlert("簽到成功！獲得積分 <b>" + result.signInPoint + "</b> 點~"); break; case 1: layerAlert("今天已經簽到過了哦~"); break; default: layerAlert("未知返回結果：" + result.reason); break; } }
從代碼中可以看出，我們將用戶信息封裝成了 _member 對象，通過這個對象向用戶提供當前會員的信息，還爲用戶提供了
function signInCallback(result)
這樣的每日簽到回調，會員在簽到後，系統自動調用這一回調方法，並傳入每日簽到的結果。
實現方法 [源碼]：
實現的方法並不複雜，我們只需將一般微主頁中的功能提取後，在模塊引擎中實現好，同時我們將前臺呈現邏輯獨立出來，使之與後臺代碼完全分開。
此外我們將共通的 JavaScript 函數 和 CSS 樣式也提取出來，用戶在設計自己的微主頁時，引入這些 JavaScript 文件和 CSS 文件，進行設計，設計完成後，將 Body 段中的 HTML 代碼保存到後臺，微信端的呈現時，首先初始化模版引擎和基礎數據，然後讀取用戶自定義 HTML 代碼，進行渲染。
本文對實現思路進行了詳細的說明，具體的實現方法這裏不再贅述，直接貼出部分源代碼（前端部分的實現）：
http://wx.shengxunwei.com/sourceCode.html
演示：
====
本章節結束。
歡迎加我QQ交流探討，共同學習：279060597，另外我在南京，有南京的朋友嗎？