微信开发系列教程,将以一个实际的微信平台项目为案例,深入浅出的讲解微信开发、应用各环节的实现方案和技术细节。
本系列教程的最终目标是完成一个功能完善并达到高可用性能指标的微信管理软件,所以除了与微信本身紧密相关的对接和应用技术,还会讲到其它相关的所有知识点,从技术选型,架构设计,数据层的设计,API 的设计,数据传输协议的设计,再到细节的前端的设计及技术应用,后台开发中的各方面技术,都会涉及。同时,在架构设计中,会考虑到运维领域的诸多问题,会涉及到部署环节中负载均衡及 CDN 分发,服务器流量及带宽控制等因素。有许多开发人员对运维领域的工作不熟悉造成项目运维阶段成本高,难度大,希望本文能够帮助到你。
本系列文章文会公开部分代码,开源部分模块,但是不会全部开源,请见谅,毕竟::) 不过我相信本系列文章会使你在开展相关工作时,轻车熟路,找到捷径。
这个项目是一个实际上已完成并应用的项目,所以本系列文章中可能出现项目的相关信息,但是个别技术细节会隐去或简化,请见谅,我会尽量保持每周一篇的速度更新,希望你有所收获。
写一篇文章,加上排版校对大约要用掉六小时左右的时间,你的支持是我最大的动力,对你有帮助的话请点击右下角 "推荐",谢谢。 :)
------------------------
微官网是微信平台上一个重要的功能,几乎所有的微信公众号都有这样的需求。
微官网一般至少包括以下几个部分:
1. 微主页;
2. 分类信息展示(如产品展示、顾问 / 专家展示、楼层展示等等);
3. 自定义页面(如企业介绍、联系方式等任意页面);
4. 自定义表单(如在线报名、在线预约等);
5. 其它模块(如各类活动页面等等)
本篇我们介绍在中,微主页功能的设计和实现方法。
在过去我们做定制化项目时,微主页一般只需要美工完成设计,前端工程师完成静态页面,后台开发人员完成相关编码即可。不同的项目只需设计制作不同的前端画面即可。
但是当我们想要开发一个服务于不同公众号的第三方平台时,微主页的设计变得复杂起来,微主页是一个企业的门户,担当着展示企业形象的重要作用,不能只是简单的提供固定式样,必须要能在平台中灵活配置,而且配置的过程不能复杂,毕竟用户不是专业人士,需要一种灵活、简单、所见即所得的方式让用户在无需专业知识的情况下,就能搭建微主页。
为了达到这个目标,我们需要两种纬度的设计:
让用户在选择钟意的模版后,只需上传自己的图片即可。
面向有一定前端开发能力的用户,为他们提供开发接口,使这部分用户可以自己制作静态 html 内容,并可以与系统既有功能进行融合交互。
此外我们希望两种模式能够互通,比如用户选择了钟意的模版后,除了上传自己的图片,还想更进一步的调整,怎么办呢?当然不能说让他再照着模版自己做一套,我们把两种模式打通,让用户可以把喜欢的模版一键导入自定义模式,然后再进行细节调整即可。
基于模版很容易理解,我们在系统中预置许多制作好的微主页,用户选择后,进行轻度的自定义,如上传自己的图片,然后发布即可。
这里有一个细节需要留意的就是怎样实现所见即所得的的功能,让用户能够在后台实时的看到最终效果,我们需要在电脑版后面上模拟微信端最终的呈现效果。
这里有两个方案进行模拟:
这需要我们的设计模版时,就制作好分层的效果图,然后在后台通过堆叠的方式进行展示,当用户上传自定义的图片时,将可变换的图层进行替换,来达到预览的效果。
这种方式实现起来会稍微复杂一些,我们在后台画面中,嵌入一个 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
- function MyNext() {
- alert(1);
- }
在 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("签到成功!获得积分 " + result.signInPoint + " 点~");
- break;
- case 1:
- layerAlert("今天已经签到过了哦~");
- break;
- default:
- layerAlert("未知返回结果:" + result.reason);
- break;
- }
- }
从代码中可以看出,我们将用户信息封装成了 _member 对象,通过这个对象向用户提供当前会员的信息,还为用户提供了
- function signInCallback(result)
这样的每日签到回调,会员在签到后,系统自动调用这一回调方法,并传入每日签到的结果。
实现方法 [源码]:
实现的方法并不复杂,我们只需将一般微主页中的功能提取后,在模块引擎中实现好,同时我们将前台呈现逻辑独立出来,使之与后台代码完全分开。
此外我们将共通的 JavaScript 函数 和 CSS 样式也提取出来,用户在设计自己的微主页时,引入这些 JavaScript 文件和 CSS 文件,进行设计,设计完成后,将 Body 段中的 HTML 代码保存到后台,微信端的呈现时,首先初始化模版引擎和基础数据,然后读取用户自定义 HTML 代码,进行渲染。
本文对实现思路进行了详细的说明,具体的实现方法这里不再赘述,直接贴出部分源代码(前端部分的实现):
====
本章节结束。
写一篇文章,加上排版校对大约要用掉六小时左右的时间,你的支持是我最大的动力,对你有帮助的话请点击右下角 "推荐",谢谢。 :)
欢迎加我 QQ 交流探讨,共同学习:279060597,另外我在南京,有南京的朋友吗?
来源: http://www.cnblogs.com/sheng_chao/p/5866825.html