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

時間 2019-11-10

原文原文鏈接

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

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

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

微官網是微信平臺上一個重要的功能，幾乎全部的微信公衆號都有這樣的需求。html

微官網通常至少包括如下幾個部分：前端

1.微主頁；
2.分類信息展現（如產品展現、顧問/專家展現、樓層展現等等）；
3.自定義頁面（如企業介紹、聯繫方式等任意頁面）；
4.自定義表單（如在線報名、在線預定等）；
5.其它模塊（如各種活動頁面等等）java

本篇咱們介紹在升訊威微信營銷系統中，微主頁功能的設計和實現方法。git

在過去咱們作定製化項目時，微主頁通常只須要美工完成設計，前端工程師完成靜態頁面，後臺開發人員完成相關編碼便可。不一樣的項目只需設計製做不一樣的前端畫面便可。github

可是當咱們想要開發一個服務於不一樣公衆號的第三方平臺時，微主頁的設計變得複雜起來，微主頁是一個企業的門戶，擔當着展現企業形象的重要做用，不能只是簡單的提供固定式樣，必需要能在平臺中靈活配置，並且配置的過程不能複雜，畢竟用戶不是專業人士，須要一種靈活、簡單、所見即所得的方式讓用戶在無需專業知識的狀況下，就能搭建微主頁。小程序

爲了達到這個目標，咱們須要兩種緯度的設計：服務器

1.基於模版

讓用戶在選擇鐘意的模版後，只需上傳本身的圖片便可。微信

2.徹底自定義

面向有必定前端開發能力的用戶，爲他們提供開發接口，使這部分用戶能夠本身製做靜態HTML內容，並能夠與系統既有功能進行融合交互。
此外咱們但願兩種模式可以互通，好比用戶選擇了鐘意的模版後，除了上傳本身的圖片，還想更進一步的調整，怎麼辦呢？固然不能說讓他再照着模版本身作一套，咱們把兩種模式打通，讓用戶能夠把喜歡的模版一鍵導入自定義模式，而後再進行細節調整便可。前端工程師

1、基於模版

基於模版很容易理解，咱們在系統中預置許多製做好的微主頁，用戶選擇後，進行輕度的自定義，如上傳本身的圖片，而後發佈便可。

這裏有一個細節須要留意的就是怎樣實現所見即所得的的功能，讓用戶可以在後臺實時的看到最終效果，咱們須要在電腦版後面上模擬微信端最終的呈現效果。

這裏有兩個方案進行模擬：

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)

目前各類微信第三方平臺，都提供了基於模版的微主頁功能，只是大多數作的比較粗糙，效果不太好，大部分是堆砌大量相似的模版來吸引用戶，實際上大多數模版只是背景圖片不一樣。
而在咱們的平臺中，經過模版引擎，咱們只須要設計好模版的框架，讓用戶本身上傳圖片便可達到許多個性化的效果。

2、徹底自定義

對於要求更高的用戶，基於模版的功能並不能徹底知足他們的要求，也是目前其它第三方微信平臺的一個短板，或是主要盈利項目。

目前幾乎全部的微信第三方平臺都不提供徹底自定義主頁的功能，若是模版不能知足需求，只能尋求第三方平臺的定製化服務，一般價格不菲，大多數時候第三方平臺公司爲了引導用戶接受定製化開發服務，模版的製做水準和效果也並不會很高。

因此咱們這裏設計實現了一個相似於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，另外我在南京，有南京的朋友嗎？