升讯威微信营销系统开发实践：所见即所得的微官网（完整开源于Github）升讯威在线客服系统

1.微主页；2.分类信息展示（如产品展示、顾问/专家展示、楼层展示等等）；3.自定义页面（如企业介绍、联系方式等任意页面）；4.自定义表单（如在线报名、在线预约等）；5.其它模块（如各类活动页面等等）

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

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

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

面向有一定前端开发能力的用户，为他们提供开发接口，使这部分用户可以自己制作静态HTML内容，并可以与系统既有功能进行融合交互。此外我们希望两种模式能够互通，比如用户选择了钟意的模版后，除了上传自己的图片，还想更进一步的调整，怎么办呢？当然不能说让他再照着模版自己做一套，我们把两种模式打通，让用户可以把喜欢的模版一键导入自定义模式，然后再进行细节调整即可。

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

这里有两个方案进行模拟：

这需要我们的设计模版时，就制作好分层的效果图，然后在后台通过堆叠的方式进行展示，当用户上传自定义的图片时，将可变换的图层进行替换，来达到预览的效果。

后台页面与iFrame交互的方式很简单，用JavaScript调用即可。

假设我们有1.html

functionMyNext(){alert(1);}在1.htm中点击test按钮，可以使2.htm(iframe页面)中mybutton按钮失效．就这么简单，呵呵．如果要调用2.htm中的JS函数这样写：

self.frames['a'].funtionname(param)

架构设计：

后台画面：

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