前端框架light7的使用体验

最近在做一个前端项目，主要是服务于移动端的web项目。

由于之前写一个手机彩票项目使用过阿里的sui mobile，这次选择了同作者较新的light7框架。

两者的区别是light7可以使用jQuery了（sui使用zepto），可以使用一些jQuery插件了；API有部分改变；新增了部分拓展组件。

开发工具使用的是WebStorm 2017.3.1。

1、WebStorm新建Empty Project，将下载好的light7资源（css,js,img,fonts）复制进project中，目录结构如下：

2、开始使用

index.html

避免在移动端显示内容太小，<html><head>需加上

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>首页</title><link rel="stylesheet" href="css/light7.min.css"><link rel="stylesheet" href="css/light7-swiper.min.css"><link rel="stylesheet" href="css/index.css"></head>
<body>
<div class="page-group"><div class="page page-current" id="page-index"><!-- 你的html代码 --><header class="bar bar-nav"><a class="button button-link button-nav pull-left" href="#" data-transition='slide-out'><span class="icon icon-left"></span>会员中心</a><h1 class="title"></h1><a class="button button-link button-nav pull-right" href="#" data-transition="slide-in"><span class="icon icon-menu"></span></a></header><div class="content"><div class="content-inner" style="background-color: white;"><div id="register_card" class="card" style="display: block;background-color: #39A3E3;"><div valign="bottom" class="card-header color-white no-border"></div><div class="card-content text-center"><div class="card-content-inner text-center"><a href="html/register_form.html" class="button" style="color: #EDE425;border:1px solid #EDE425;width: 10rem;margin: 0 auto">立即登录/注册</a><p class="" style="color: white">完善资料即成为会员，最高尊享SVIP会员特权</p><a href="html/member_vip_rule.html"><p class="" style="color: white"><u id="rule">会员规则</u></p></a></div></div></div><div id="member_card" class="card" style="display: none;background-color: #39A3E3;"><div valign="bottom" class="card-header color-white no-border" style="color: white;padding: 0.5rem;"><div class="item-media" style="display: inline;width: 100%; height: 2rem;line-height: 2rem;position: relative;"><img class="pull-left" style="border-radius: 50%;width: 1.5rem;" src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt=""><span class="pull-left" style="margin-left: .5rem;">乔布斯</span><span class="pull-right" style="">VIP</span></div></div><div class="card-content text-center"><div class="card-content-inner text-center" style="padding: 2rem;"><a href="html/member_vip_rule.html" class="button" style="width: 10rem;margin: 0 auto"><u style="color: #EDE425;">如何提升等级？</u></a></div></div></div></div><div class="content-inner" style="background-color: white; margin: .5rem 0; padding: .5rem"><div style="margin: 0"><span>我的特权</span><a href="html/all_privilege.html" class="button button-link pull-right">全部特权<span class="icon icon-right"></span></a></div><div class="row" style="margin-top: .5rem"><a class="col-33 text-center" href="html/privilege_detail.html"><span class="icon icon-star"></span><br/><span class="" style="color: black">生活福利</span></a><a class="col-33 text-center" href="html/privilege_detail.html"><span class="icon icon-home"></span><br/><span class="" style="color: black">代金券</span></a><a class="col-33 text-center" href="html/privilege_detail.html"><span class="icon icon-settings"></span><br/><span class="" style="color: black">论坛专区</span></a></div></div><div class="content-inner" style="background-color: white; margin: .5rem 0; padding: .5rem"><div class="">会员商城</div><div class="swiper-container swiper-container-horizontal" data-space-between="10" style="height: 10rem"><div class="swiper-wrapper"><div class="swiper-slide"><a href="html/member_shop.html"><img style="width: 100%" class='card-cover' src="//gd1.alicdn.com/bao/uploaded/i1/TB1kzlgHVXXXXbtXpXXXXXXXXXX_!!0-item_pic.jpg_320x320.jpg" alt=""></a></div><div class="swiper-slide"><a href="html/member_shop.html"><img style="width: 100%" class='card-cover' src="//gd3.alicdn.com/imgextra/i3/238126515/TB21mEfcFXXXXc5XXXXXXXXXXXX_!!238126515.jpg_320x320.jpg" alt=""></a></div><div class="swiper-slide"><a href="html/member_shop.html"><img style="width: 100%" class='card-cover' src="//gd2.alicdn.com/imgextra/i2/238126515/TB2TpgmcFXXXXbwXXXXXXXXXXXX_!!238126515.jpg_320x320.jpg" alt=""></a></div></div><div class="swiper-pagination"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div></div></div><div class="buttons-tab" style="margin-top: .5rem"><a href="#tab1" class="tab-link active button">苹果攻略</a><a href="#tab2" class="tab-link button">使用问答</a></div><div class="content-inner"><div class="tabs"><div class="tab active" id="tab1"><div class="" style="font-size: .5rem; margin: 0; padding: .5rem 0 .5rem .5rem; background-color: #f4f4f4">精选专题</div><div class="page-index list-block cards-list" style="margin: 0"><ul><li class="card"><a href="html/strategy_detail.html"><div style="" valign="bottom" class="card-header color-white no-border">相册的正确使用姿势</div><div class="card-content"><div class="card-content-inner"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513830871323&di=81dc8dc022e86899e693b07a1debd4f3&imgtype=0&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Ff2%2F35%2Fd%2F52.jpg" alt="" width="360"></div></div><div class="card-footer"></div></a></li><li class="card"><a href="html/strategy_detail.html"><div style="" valign="bottom" class="card-header color-white no-border">巧用手机过滤无用信息</div><div class="card-content"><div class="card-content-inner"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513830871322&di=6b4a00fe559bf60163571cc79b0b9e05&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F5bafa40f4bfbfbedd96c754573f0f736afc31fd6.jpg" alt="" width="360"></div></div><div class="card-footer"></div></a></li></ul></div></div><div class="tab" id="tab2"><div class="" style="font-size: .5rem; margin: 0; padding: .5rem 0 .5rem .5rem; background-color: #f4f4f4">热门问答</div><div class="page-index list-block cards-list" style="margin: 0"><ul><li class="card"><a href="html/question_detail.html"><div style="" valign="bottom" class="card-header color-white no-border">[一周问答]第9期</div><div class="card-content"><div class="card-content-inner"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513831684888&di=164c351f208f5ae5485f9764c462aa01&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F01%2F12%2F82%2F23bOOOPIC74.jpg" alt="" width="360"></div></div><div class="card-footer"></div></a></li><li class="card"><a href="html/question_detail.html"><div style="" valign="bottom" class="card-header color-white no-border">[一周问答]第8期</div><div class="card-content"><div class="card-content-inner"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513831755741&di=c0c2db14d356d05ee77f4c959d57f6c8&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4bed2e738bd4b31cd0c210538dd6277f9f2ff858.jpg" alt="" width="360"></div></div><div class="card-footer"></div></a></li></ul></div></div></div></div></div></div>
</div><!--<script src="js/zepto.min.js"></script>-->
<!-- jquery -->
<script src="js/jquery.min.js"></script>
<script src="js/light7.min.js"></script>
<script src="js/light7-swiper.min.js"></script>
<script src="js/i18n/cn.min.js"></script>
<script src="js/app.js"></script>
<script>$(document).ready(function () {});</script></body>
</html>

3、WebStorm 将项目部署到Tomcat

webstorm本身也有浏览器加载预览的功能，但为了方便后期访问接口要用到ajax，所以需要先把项目部署到tomcat进行调试。

如图所示，在webstorm的settings选项中，找到deployment，点击“+”，添加tomcat，设置项目上传/下载地址，浏览器访问地址url；Mappings设置项目当前所在位置。

上传更新代码在菜单栏tools-deployment-upload to tomcat（这里我设置了一个快捷键，方便操作），下方也有一个automatic upload(always)可选，自动上传操作。

打开tomcat（配置了环境变量），在浏览器输入url地址

4、light7的使用

light7在官网的文档也比较详细，基础组件和拓展组件都有demo

这里着重提出light7使用路由的一些提示。

现在有一个全新的路由代替了以前的 push.js。这个路由支持在同一个html中内联多个页面，ajax加载新页面，前进和后退操作。

默认情况下，router 会自动拦截所有的链接点击事件，如果你希望一个链接通过浏览器原生跳转而不使用 router，你可以在连接上增加一个 class="external" 或者 external

你也可以通过 `$.config.router` 参数来全局关闭路由器，参见初始化。即使关闭了路由器，也强烈建议通过 `pageInit` 事件来初始化页面，因为这样可以保证你随时可以打开路由器而不用修改任何JS代码。

默认情况下，加载新的页面会从右向左滑动，后退会从左向右滑动。如果你想关掉加载动画，只需要在链接上加上 class="no-transition" 即可

当通过ajax加载新页面的时候，路由器会自动忽略新页面的JS和CSS脚本。所以请把全部页面的脚本都打包到入口页面。在demo中我们每个页面都引用了相同的脚本，是为了在子页面刷新的时候也可以用。

你可以通过调用 $.router.loadPage(url) 来加载一个页面，参数url既可以是一个ajax页面的地址，也可以是一个内联页面的id.

补充：

Q：js更新上传tomcat后，在浏览器刷新不起作用？

A：浏览器有之前js和css等的缓存，解决方案：

（1）清除浏览器缓存；

（2）在更新的js后加上版本： <script src="../js/app.js?app_version=version_201712261630"></script>；

前端框架light7的使用体验相关推荐

MUI（最接近原生APP体验的高性能前端框架）
MUI-最接近原生APP体验的高性能前端框架MUI: 最接近原生APP体验的高性能前端框架https://dev.dcloud.net.cn/mui/ 最接近原生APP体验的高性能前端框架,追求性能体 ...
最接近原生APP体验的高性能前端框架——MUI
前言 MUI有三大特点: 轻量追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征: MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 原生UI ...
最接近原生APP体验的高性能前端框架 Mui的入门教程
因为之前我用vue和uni-app 都开发过h5移动端但总觉得有点不太流畅最后还是选择了使用Mui进行app的开发上手很快 js语法类似jquery的使用 css样式类似于bootstrap ...
参考框架系统基准_带有基准的前端框架的真实比较（2018更新）
参考框架系统基准 by Jacek Schae 由Jacek Schae 带有基准的前端框架的真实比较(2018更新) (A Real-World Comparison of Front-End ...
程序员Web面试之前端框架等知识
基于前面2篇博客: 程序员Web面试之jQuery 程序员Web面试之JSON 您已经可以顺利进入Web开发的大门. 但是要动手干,还需要了解一些已有的前端框架.UI套件,即要站在巨人肩膀上而不是从轮 ...
如何挑选适合的前端框架(去哪儿网前端架构师司徒正美)
前端框架不断推新,众多IT企业都面临着"如何选择框架","是否需要再造轮子"的抉择.去哪儿网前端架构师司徒正美分析了各主流行框架优劣点.适用场景,并针对不同规模 ...
2017前端框架何去何从
>这篇文章将从 AngularJS ReactJS Polymer 这几个流行的框架入手,分析前端框架在这几年发展中的关键技术点,作为2015前端技术选型的参考.摘要: - 初体验 - 技术特点 ...
ssm框架app管理平台_后端程序员跨平台应用的前端框架uni-app初探
公司经常会接到各种前端h5,安卓,IOS,小程序开发的工作,开发的同事前端这块相对较弱,如果全部学习一遍的话成本也太高,也不太现实,因此,需要一个开发一遍能满足在各大平台都能使用的技术显得尤为重要.u ...
前端html5的框架有哪些,10大html5前端框架
10大html5前端框架 Bootstrap 首先说Bootstrap,估计你也猜到会先说,或者一定会有这个了,这是说明它的强大之处. 拥有框架一壁江山的势气. 自己刚入道的时候,本着代码任何一个字母 ...

前端框架light7的使用体验

前端框架light7的使用体验相关推荐

最新文章

热门文章