升訊威微信營銷系統開發實踐：所見即所得的微官網（ 完整開源於 Github）

GitHub：https://github.com/iccb1013/Sheng.WeixinConstruction
因為個人精力時間有限，不會再對現有代碼進行更新維護，不過微信接口比較穩定，經測試至今沒有變化，功能依然全部可用，你可以在此基礎上，二次開發，完成你的業務功能，也可以抽取本平台中的代碼復用在你的項目中，請遵循 MIT 開源協議保留我的版權聲明和網站鏈接即可。

GitHub：https://github.com/iccb1013/Sheng.WeixinConstruction.WeixinContract
微信協議包裝的項目還有一個單獨的工程，這個工程的版本稍新，我會進行一定的更新維護，如最近增加了幾個小程序開發需要使用到的接口。但是注意因為代碼結構經過優化調整，直接引用到升訊威微信平台中，需要修改一些類的引用和名稱。

升訊威微信營銷系統開發實踐系列
升訊威微信營銷系統開發實踐：（1）功能概要與架構設計
升訊威微信營銷系統開發實踐：（2）中控服務器的詳細設計
升訊威微信營銷系統開發實踐：（3）功能介紹與此項目推廣過程的一些體會
升訊威微信營銷系統開發實踐：（4）源代碼結構說明 與 安裝部署說明

 

---

 

 

微官網是微信平台上一個重要的功能，幾乎所有的微信公眾號都有這樣的需求。

微官網一般至少包括以下幾個部分：

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 代碼，進行渲染。

 

====

本章節結束。

寫一篇文章，加上排版校對大約要用掉六小時左右的時間，你的支持是我最大的動力，對你有幫助的話請點擊右下角“推薦”，謝謝。  ：）

 

歡迎加我QQ交流探討，共同學習：279060597，另外我在南京，有南京的朋友嗎？