轻应用是以第三方服务接入易班提供的一套基础框架和接入服务，接入方以网页应用的形式开发。 根据展示场景、方式不同，轻应用分为三种：
【1】、易班客户端内通过 Webview 展示，在易班app应用广场推广（H5页面）。
【2】、同时兼容易班客户端Webview、PC/手机浏览器展示，在易班双端应用广场推广（终端自适应UI）。
【3】、轻应用快搭，一种由易班提供各种模板套件组装的轻应用搭建方式。
2 轻应用快搭平台
2.1 简介
轻应用快搭平台是易班提供的快捷搭建轻应用的平台，在这个平台上，你基本不用到代码或其他知识，每个快搭轻应用都是由快搭平台的组件搭建组合而成，易班也为我们提供了组件后台数据的管理。利用易班轻应用快搭平台，我们可以很快地搭建我们的轻应用，做好后提交审核通过即可让大家使用。
2.2 快搭平台的进入
电脑登陆易班网，登陆自己的易班账号，点击轻应用快搭，点击创建轻应用，然后选择我还没有轻应用，点击进去，然后选择模版随便一个，选择手机样式，然后使用该模版。填写相关信息即可。
2.3 基本功能
2.3.1 模块管理界面
模块管理下面的一个一个模块对应着左边的一个一个模块，将鼠标放在模块管理上面，会有一支笔和一个类似眼睛的图案出现（前两个模块是没有眼睛的）点击那支笔可以修改每个模块的名字，点击那个眼睛可以显示隐藏模块。
2.3.2 通用组件界面
1、Banner：其可以作为轻应用模块里的横幅图片，将其拖到左边位置后，点击编辑可以修改它的标题，这样，标题就会在图片上显示了。Banner 主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。（一个轻应用只能加一个）
2、富文本：其的功能相对于其它组件，我认为其可用性最高，几乎每个易班轻应用快搭都会用到富文本，将其拖到左边指定位置后，点击编辑，在编辑里，你可以添加文字，图片，表格（表格可以设置边界线可见与不可见及其他一些常用功能），链接等，你可以通过设计富文本让轻应用更美观及可用性。（一个轻应用可以有无数个）
3、评论：其的功能就如其名用来评论的，在后台，你可以看到评论数据。评论组件可以用来抽奖，但要注册开放平台才能有这功能。
4、签名墙：其的功能是只要点击那栏有签名墙，那点击的人就会在签名墙留下足迹，后台可以查到数据。（一个轻应用只能有一个）
5、相关活动：你可以在编辑里面链接活动的地址，当点击时，就会跳转到相关页面（如果有想法，你也可以链接功能性网页）。（一个轻应用只能有一个）
6、照片墙：你可以在上面放照片，这个照片是可以滚动的。（一个轻应用只能有一个）
2.3.3 功能组件界面
1、投票规则 投票选项：投票规则是和投票选项绑定在一起的，先定好投票规则后再去设置投票选项。要在投票选项中使用投票规则，所有的投票数据在后台均可以看到。（一个轻应用只能有一个）
2、报名：按照所需去设置报名表，报名表的选项只有5个，后台同样能看到报名信息。（一个轻应用可以有无数个报名表）
3、抢票：按照所需去设置抢票，后台同样能看到抢票信息。（一个轻应用可以有无数个抢票）
4、贺卡：按所需去设置贺卡，其会在轻应用打开时显示。（一个轻应用只能有一个）
5、大屏幕：其可以生成弹幕墙，即类似评论的组件，但可以让大家看到滚动的弹幕在投影上，可以用于演讲或其他活动，其也可以进行弹幕抽奖。但只有注册了开放平台才有的（一个轻应用只能有一个）
6、一键入群：这个组件可以让点击者一点击就进入你所创建的公共群，这个功能是结合公共号一起使用的。公共号你要去申请才能建群，一键入群这个功能也是只有注册了开放平台才有的。（一个轻应用可以有无数个）
2.3.4 使用秀米等推文工具加强轻应用版面设计
即可以在秀米上把你要在富文本展示的信息编好，再复制过去就行了。
2.3.5 利用外部链接让轻应用快搭功能更完善
1、富文本是可以加入外部链接的，这给轻应用提供了更多的可能，更多设计的灵感，我们可以在秀米中先编排好图片当作菜单复制过去，再在每张图片上加链接，这样，每张图片就变成了有功能的按键。
2、外部链接可以链接表单（像麦客表单等），H5,推文链接，易班上发布文章的链接等。
3、在秀米中用视频组件加上视频的通用码是可以直接复制在富文本上然后直接在那栏直接播放的，不需要跳转链接。目前好像只支持腾讯的视频。
4、基本涉及前端代码的修改，都可以以富文本为基础去修改代码，修改了是可以显示让人家看到的。
2.3.6 轻应用快搭的发布与维护
轻应用做好后，可以点击预览，查看效果，如果觉得可以了，就点击发布提交，校方审核过后就可以使用了。当校方审核过后，你再修改快搭轻应用是不用去点击提交的，直接点击暂不提交即可，快搭轻应用就修改了。有些组件如报名等一旦开始就不可修改了，应该注意。
2.3.7 快搭轻应用的后台
登录易班网，点击轻应用快搭，点击我的轻应用，点击你做的轻应用那里的统计按钮，即可进入，查看后台你制作的快搭轻应用的使用数据。
2.3.8 快搭轻应用其他
1、进入轻应用制作界面后，可以看到左边栏的右上角有个加号，如图，点击进去。
2、选颜色保存后即可看到效果。
1、在快搭轻应用管理界面，将鼠标放在轻应用上，可以看到保存为模版，如下图，点击。
2、写完标题保存即可，如下图。
3、在快搭轻应用管理界面左边即可看到我的模版，点击进去后即可使用你保存的模版。
1、在快搭轻应用管理界面，将鼠标放在快搭轻应用上，点击统计按钮，如下图。
2、在最上面有个删除按钮，按下就可以删除快搭轻应用了。
1、易班快搭轻应用的大屏幕组件即一种可以让你的评论像弹幕一样被人在一个网页上看到，在这个网页上，还可以进行弹幕的实时更新和进行弹幕抽奖。（大屏幕组件只有注册开放平台或成为公共号才有）
2、在快搭轻应用的编辑页面拖一个大屏幕组件到编辑区如图，点击编辑。
3、点击进去可以看到编辑大屏幕的一些设置：
4、按照你所想要它呈现的效果设计完后，就可以发布让大家使用了。
5、在大家的使用过程中，我们可以打开快搭轻应用的后台，即在快搭轻应用管理界面，将鼠标放在快搭轻应用上，点击统计按钮，就入如下页面。（事先写了几条评论）
6、点击大屏幕链接，即可进入如下页面：
7、在动态墙审核中把评论审核通过，你也可以在最初的设置中设置评论不用通过审核直接在墙中显示，即评论会如下图般显示出来。
8、在大屏幕抽奖那里可以进行弹幕抽奖，中奖者可以通过后台获奖名单及抽奖时就可以知道了。
3 快搭平台富文本插入视频
3.1 简介
易班快搭平台是可以借助富文本来插入视频的，但如果借助秀米，只能插入腾讯视频，其他视频就没法插入了，所以我们通过借助浏览器开发者工具Elements面板来修改富文本的代码插入其他网站的视频
3.2 浏览器开发者工具
1、打开浏览器后，按F12就可以打开了。以360浏览器为例，右键审查元素也可以打开。
2、Elements面板：查找网页源代码 HTML 中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
3、浏览器的开发者工具如下：
3.3 插入代码的位置
1、新建快搭轻应用后，加入一个富文本组件，打开组件，如图：
2、在富文本设置旁边的空白处右击审查元素，如下图：
3、打开编辑框：
【1】、下面的“富文本设置”即对应上面的富文本设置。
【2】、然后一直按那个三角符号下来，找到body，右键Edit as HTML，如下图：
【3】、点击后就可以看到下图，到时候把代码复制进来即可。
3.4 使用iframe插入视频
1、PC和MOBILE通用的标签是：<iframe>嵌入窗体，video标签，mobile应该也支持，但是video标签支持的格式有限。（这里我们使用iframe）
2、iframe属性：
【1】、allowtransparency iframe所载加页的背景颜色设置为transparent(透明)时iframe将透明化。
【2】、allowfullscreen 启用 iframe 的内容以在全屏模式下显示。如果缺少，则仅 iframe（而非框架内的内容）可以进入全屏模式。
【3】、frameborder 是否显示 iframe 周围的边框。
3、一般视频播放窗口下方会有分享代码：视频地址、html代码、通用代码 等。我们这里用通用代码就能得到iFrame的地址。
3.5 iFrame的地址
1、腾讯视频
【1】、登录网页版腾讯视频。
【2】、找到你的视频，复制通用码，如下图：
【3】、得到iframe的地址，下面的即为地址：
<iframe frameborder="0" width="640" height="498" src="https://v.qq.com/iframe/player.html?vid=i00251jmiar&tiny=0&auto=0" allowfullscreen></iframe>
3.6 插入富文本的代码
<iframe width="100%" height="100%" frameborder="0" src="加入你找到的地址（腾讯为上面标红色的地址）" allowfullscreen=""></iframe>
3.7 将代码插入富文本
1、在p标记后面插入即可，插入后退出即可，如下图：
2、然后按富文本那里的完成既可以了。
3.8 注意
1、可以通过url来匹配出iframe的src也仅有腾讯，优酷，其他基本不行。
2、对于其他视频网站的，如果不行的话，还是插入个链接，跳转查看吧。
4 快搭轻应用评论组件中图片的保存
4.1 简介
易班快搭轻应用评论组件，有时候我们会发现在快搭轻应用中的评论组件无法保存里面评论的图片下来，那么，我们的办法只能是截屏吗？答案是否定的，下面，将讲解一下易班快搭轻应用评论组价中的图片该如何保存下来。
4.2 具体操作
1、快搭轻应用在电脑网页端打开，在评论组件中选择你要保存的图片在那里直接审查元素（没有这选项的打开浏览器的开发者工具，按F12），如下图：
2、然后直接点击开发者工具左上角的箭头在网页上选择你要保存的图片，如下图：
3、如图操作：
4、然后选中如下链接，在新的网页中打开：
5、最后保存即可，如下图：
注：查看审查元素后，里面的代码如下：
<span class="img commentImg"
style="background-image: url(此链接为在评论组件中显示的图片，经过缩放);"
data-yimg="选中里面的链接，在新的网页中打开即可">
</span>
4.3 涉及知识
1、background-image 属性为元素设置背景图像。（因为是背景图片，所以无法直接保存下来，有些浏览器有查看背景图片并可以保存下来的选项的（像IE，火狐等），但查看到的背景图像是上面第一个链接的图像，不是原图，所以有时候就达不到我们的要求）。
2、HTML 5增加了一项新功能是自定义数据属性，也就是 data-*自定义属性（上面的data-yimg就是这种类型）。在HTML5中我们可以使用以data-为前缀来设置我们需要的自定义属性，来进行一些数据的存放，使用data-*可以解决自定义属性混乱无管理的现状。
3、图片懒加载：
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。
4、图片懒加载思路：
将页面里所有img属性src属性用data-xx代替，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。
5 一个关于失物招领轻应用快搭的制作
1、你可以在第一栏简单介绍这个轻应用的用法。
2、你可以把第二栏作为一个发布消息的功能栏，即添加一个富文本即可，在富文本中，你可以设置2个按钮（分别为：发布失物招领，发布寻物启事），按钮链接两个麦客表单即可，在麦客表单中，设置返回轻应用的按钮，用秀米去进行轻应用中按钮的版面设计即可。
3、你可以把第三栏作为一个查看的功能栏，你可以加入两个富文本，一个富文本一个表格（这个富文本有提供，可以像Word的表格一样）用于发布消息，这一栏每天有人根据收集到的信息定点去更新消息就行了。
4、你可以在第四栏加入一个评论组件，到时候根据建议修改轻应用，也可以在这栏中链接公众号推文等，用于把一些发布失物招领的平台都联合起来。
这就做成了一个简单又实用的失物招领轻应用。
6 快搭轻应用的一些想法
关于易班的轻应用快搭平台，它的组件基本能满足我们一般活动的需求。但在开发功能性轻应用时，它显得有些无力。虽说它可以链接外部链接以及秀米等一些工具可以提供辅助，但有时候，你找的外部链接是不允许你更改它的页面的，那怎么返回或跳转链接，就很困难了。这样，在跳转过那个网页后，你可以只能点左上角它提供的返回，后退一步。这样，我觉得在使用上很不友好。我觉得，我们在设计轻应用时，除了要考虑页面的美观度和功能的完善度，也要考虑一下各功能配合跳转之间的契合度。
在设计快搭轻应用之时，合理地利用组件，发挥脑洞，或许，快搭轻应用真的有无限的可能给你。
易班轻应用是可以在微信，浏览器上使用的，不局限于APP，只需要登录一下账号。所以，当你的轻应用开发出来了，可以在推文中链接上你的轻应用或其他方式去推广。
扫一扫
1210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
