前端框架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

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

    
    
    
    
    
    




    

        
        

            
                
                会员中心
            
            

            
                
            
        
        

            

                

                    

                    

                        

                            立即登录/注册
                            
完善资料即成为会员，最高尊享SVIP会员特权
                            
会员规则
                        
                    
                
                

                    

                        

                            
                            乔布斯
                            VIP
                        
                    
                    

                        

                            
                                如何提升等级？
                            
                        
                    
                
            
            

                

                    我的特权
                    
                        全部特权
                        
                    
                
                

                    
                        

                        生活福利
                    
                    
                        

                        代金券
                    
                    
                        

                        论坛专区
                    
                
            
            

                
会员商城
                

                    

                        

                            
                                
                            
                        
                        

                            
                                
                            
                        
                        

                            
                                
                            
                        
                    
                    

                        
                        
                        
                    
                 
            
            

                苹果攻略
                使用问答
            
            

                

                    

                        
精选专题
                        

                            

                                

                                    
                                        
相册的正确使用姿势
                                        

                                            

                                                
                                            
                                        
                                        

                                        
                                    
                                
                                

                                    
                                        
巧用手机过滤无用信息
                                        

                                            

                                                
                                            
                                        
                                        

                                        
                                    
                                
                            
                        

                    
                    

                        
热门问答
                        

                            

                                

                                    
                                        
[一周问答]第9期
                                        

                                            

                                                
                                            
                                        
                                        

                                        
                                    
                                
                                

                                    
                                        
[一周问答]第8期
                                        

                                            

                                                
                                            
                                        
                                        

                                        
                                    
                                
                            
                        

                    
                
            


        
    

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后加上版本： ；