流量营销平台 后台代码，升讯威微信营销系统开发实践： 4所见即所得的微官网 [源码]

4.自定义表单（如在线报名、在线预约等）；

5.其它模块（如各类活动页面等等）

本篇我们介绍在升讯威微信营销系统中，微主页功能的设计和实现方法。

在过去我们做定制化项目时，微主页一般只需要美工完成设计，前端工程师完成静态页面，后台开发人员完成相关编码即可。不同的项目只需设计制作不同的前端画面即可。

但是当我们想要开发一个服务于不同公众号的第三方平台时，微主页的设计变得复杂起来，微主页是一个企业的门户，担当着展示企业形象的重要作用，不能只是简单的提供固定式样，必须要能在平台中灵活配置，而且配置的过程不能复杂，毕竟用户不是专业人士，需要一种灵活、简单、所见即所得的方式让用户在无需专业知识的情况下，就能搭建微主页。

为了达到这个目标，我们需要两种纬度的设计：

1.基于模版

让用户在选择钟意的模版后，只需上传自己的图片即可。

2.完全自定义

面向有一定前端开发能力的用户，为他们提供开发接口，使这部分用户可以自己制作静态HTML内容，并可以与系统既有功能进行融合交互。

此外我们希望两种模式能够互通，比如用户选择了钟意的模版后，除了上传自己的图片，还想更进一步的调整，怎么办呢？当然不能说让他再照着模版自己做一套，我们把两种模式打通，让用户可以把喜欢的模版一键导入自定义模式，然后再进行细节调整即可。

一、基于模版

基于模版很容易理解，我们在系统中预置许多制作好的微主页，用户选择后，进行轻度的自定义，如上传自己的图片，然后发布即可。

后台画面：

自定义微主页的关键在于需要为用户提供数据和功能操作的接口，例如每日签到功能，用户在自己设计的微主页HTML代码中，怎么样调用系统的每日签到功能呢？

我们把这个功能抽象出来单独实现，通过 提供 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("签到成功！获得积分 " + result.signInPoint + " 点~"); break; case 1: layerAlert("今天已经签到过了哦~"); break; default: layerAlert("未知返回结果：" + result.reason); break; } }

从代码中可以看出，我们将用户信息封装成了 对象，通过这个对象向用户提供当前会员的信息，还为用户提供了

function signInCallback(result)

这样的每日签到回调，会员在签到后，系统自动调用这一回调方法，并传入每日签到的结果。

实现方法 [源码]：

实现的方法并不复杂，我们只需将一般微主页中的功能提取后，在模块引擎中实现好，同时我们将前台呈现逻辑独立出来，使之与后台代码完全分开。

此外我们将共通的 函数 和 CSS 样式也提取出来流量营销平台 后台代码，用户在设计自己的微主页时，引入这些 文件和 CSS 文件，进行设计，设计完成后，将 Body 段中的 HTML 代码保存到后台，微信端的呈现时，首先初始化模版引擎和基础数据，然后读取用户自定义 HTML 代码，进行渲染。

本文对实现思路进行了详细的说明，具体的实现方法这里不再赘述，直接贴出部分源代码（前端部分的实现）：

演示：

====

本章节结束。

欢迎加我QQ交流探讨，共同学习：，另外我在南京，有南京的朋友吗？