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