4.自定义表单（如在线报名、在线预约等）；
5.其它模块（如各类活动页面等等）
本篇我们介绍在升讯威微信营销系统中，微主页功能的设计和实现方法。
在过去我们做定制化项目时，微主页一般只需要美工完成设计，前端工程师完成静态页面，后台开发人员完成相关编码即可。不同的项目只需设计制作不同的前端画面即可。
但是当我们想要开发一个服务于不同公众号的第三方平台时，微主页的设计变得复杂起来，微主页是一个企业的门户，担当着展示企业形象的重要作用，不能只是简单的提供固定式样，必须要能在平台中灵活配置，而且配置的过程不能复杂，毕竟用户不是专业人士，需要一种灵活、简单、所见即所得的方式让用户在无需专业知识的情况下，就能搭建微主页。
为了达到这个目标，我们需要两种纬度的设计：
1.基于模版
让用户在选择钟意的模版后，只需上传自己的图片即可。
2.完全自定义
面向有一定前端开发能力的用户，为他们提供开发接口，使这部分用户可以自己制作静态HTML内容，并可以与系统既有功能进行融合交互。
此外我们希望两种模式能够互通，比如用户选择了钟意的模版后，除了上传自己的图片，还想更进一步的调整，怎么办呢？当然不能说让他再照着模版自己做一套，我们把两种模式打通，让用户可以把喜欢的模版一键导入自定义模式，然后再进行细节调整即可。
一、基于模版
基于模版很容易理解，我们在系统中预置许多制作好的微主页，用户选择后，进行轻度的自定义，如上传自己的图片，然后发布即可。
这里有一个细节需要留意的就是怎样实现所见即所得的的功能，让用户能够在后台实时的看到最终效果，我们需要在电脑版后面上模拟微信端最终的呈现效果。
这里有两个方案进行模拟：
1）把最终效果图分层拆开。
这需要我们的设计模版时，就制作好分层的效果图，然后在后台通过堆叠的方式进行展示，当用户上传自定义的图片时，将可变换的图层进行替换，来达到预览的效果。
2）在容器中填充手机端代码进行模拟。
这种方式实现起来会稍微复杂一些，我们在后台画面中，嵌入一个，作为模拟的容器，当用户选择钟意的模版时，我们把微主页模版的代码，渲染到这个中，在中模拟微信端的效果和行为。
后台页面与 交互的方式很简单，用 调用即可。
假设我们有 1.html
<a href="#" onclick="window.frames['frame1'].MyNext()">aa</a><iframe id="frame1" src="2.html" ></iframe>
2.html
function MyNext() { alert(1); }
在1.htm中点击test按钮，可以使2.htm(页面)中按钮失效．就这么简单，呵呵．如果要调用2.htm中的JS函数这样写：
self.frames['a'].funtionname(param)
目前各种微信第三方平台，都提供了基于模版的微主页功能，只是大多数做的比较粗糙，效果不太好，大部分是堆砌大量类似的模版来吸引用户，实际上大多数模版只是背景图片不同。
而在我们的平台中，通过模版引擎，我们只需要设计好模版的框架，让用户自己上传图片即可达到许多个性化的效果。
二、完全自定义
对于要求更高的用户，基于模版的功能并不能完全满足他们的要求，也是目前其它第三方微信平台的一个短板，或是主要盈利项目。
目前几乎所有的微信第三方平台都不提供完全自定义主页的功能流量营销平台 后台代码，如果模版不能满足需求，只能寻求第三方平台的定制化服务，通常价格不菲，大多数时候第三方平台公司为了引导用户接受定制化开发服务，模版的制作水准和效果也并不会很高。
所以我们这里设计实现了一个类似于CMS的微主页引擎，把微主页的呈现和功能彻底进行了拆分，我们把微主页中所需要使用的功能实现好，然后通过 提供接口，并将微主页中所需的基本 CSS 样式和 函数进行了封装，用户在设计自己的静态页面时，可以直接引用这些 CSS 样式，或直接调用系统预置的 函数。
用户完成微主页的设计后，只需把HTML代码保存到后台，系统在微信端呈现微主页时，会使用模版引擎呈现用户的HTML代码，并初始化相关的功能。
基于这样的模版引擎，如果用户稍具前端开发的能力，即可在极短的时间内，可能1天，甚至是半天时间，就可以制作出个性化的微主页，并无需支付任何所谓的定制化开发的费用。
架构设计：
后台画面：
自定义微主页的关键在于需要为用户提供数据和功能操作的接口，例如每日签到功能，用户在自己设计的微主页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交流探讨，共同学习：，另外我在南京，有南京的朋友吗？
本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请添加站长微信举报，一经查实，本站将立刻删除。
如若转载，请注明出处：http://www.ibjoo.com/7555.html
