升讯威微信营销系统开发实践：所见即所得的微官网（ 完整开源于 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，另外我在南京，有南京的朋友吗？