2018正版葡京赌侠诗移步端web开发初探之Vuejs的简短实战

那段日子在做的事物,是北京邮政和邮电通讯大学人论坛APP的注册页。这些注册页是内嵌的网页,因为打算安卓和IOS平台同时使用。由此实际就是在做活动端的web开发了。
在那进度中遇见了众多有趣的东西。

DEMO的github地址在这里

内容提要:

  • meta标签
  • Vuejs的总结实战
  • CSS移动端全屏背景
  • CSS移动端动画初探

meta标签

那一点与在PC端写前端有着不小的区分,移动端的meta标签大致多。笔者就说说小编所用到的标签。

<!-- 1、如果支持Google Chrome Frame:GCF,则使用GCF渲染;2、如果系统安装ie8或以上版本,则使用最高版本ie渲染;3、否则,这个设定可以忽略。 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- 对视窗缩放等级进行限制,使其适应移动端屏幕大小 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 当把这个网页添加到主屏幕时的标题(仅限IOS) -->
<meta name="apple-mobile-web-app-title" content="北邮人论坛注册">
<!-- 添加到主屏幕后全屏显示 -->
<meta name="apple-touch-fullscreen" content="yes" />

更为是第一个meta标签,是移动端适配万分重大的一句话。

全部布局

完整的布局大约是四-五页横向布局。第一页是用来填写注册音讯的。前边的几页是用来选拔关怀的版面的。

挂号音信页

2018正版葡京赌侠诗 1

关注版面页

2018正版葡京赌侠诗 2

2018正版葡京赌侠诗 3

2018正版葡京赌侠诗 4

全体架构

前端选拔的架构大概是这么:

  • 滑动切换页面包车型大巴功力来自swiper.js
  • 页面内容的渲染采取Vue.js
  • 页面布局和样式采纳纯css,部分意义选拔css叁
  • ajax部分应用vue-resource

后端支撑的框架来自php的laravel,当然,那不是本文的重中之重,仅谈到一下。

是的此次的支付中,已经看不到jquery的身影了——那也是前者现在发展后的结果——稳步地退出jquery的信赖性。不过jquery给前端带来的变更和前进是无人能代表的。

swiper.js的应用

引入swiper.js来拓展页面包车型大巴切换效果纯粹是因为此次支付的周期供给相比短,要思索作用和包容性兼备的动静下,笔者就偷懒找了二个动画库。

而是那几个动画库的职能本人要么算相比满意的。而完好来说使用也一定有益。尤其是,swiper.js是能够不注重jquery的。

应用起来也正如便利。笔者大约说说用法。

首先须要在页面顶部的head标签里投入swiperjs的css文件:

<link rel="stylesheet" href="css/swiper.min.css')">

接下来在页面底部能够引入和写下相应的js:

<script src="{{ asset('js/swiper.min.js') }}"></script>
  <!-- Initialize Swiper -->
<script>
  var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationType: 'progress',
    noSwipingClass: 'swiper-no-swiping',
    allowSwipeToNext: true,
    allowSwipeToPrev: true,
  }); 
</script>

解释一下,创设3个swiper的靶子,然后那对象的器皿是class叫做swiper-container的1个html成分。对其的布局是:

  • pagination: ‘.swiper-pagination’, 展现页码
  • paginationType: ‘progress’,
    页码展现格式为进程条,能够瞻仰顶部蓝草绿的进度条
  • noSwipingClass: ‘swiper-no-swiping’,
    不容许举行触摸滑动的要素的class名称
  • allowSwipeToNext: true, 允许向后滑动
  • allowSwipeToPrev: true, 允许向前滑行

对应的HTML代码可以如下:

<!-- swiper生效的容器 -->
<div class="swiper-contanier">
  <div class="swiper-wrapper">
    <!-- 具体滑动的页面 -->
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
  </div>
</div>
<!-- 进度条 -->
<div class="swiper-pagination"></div>

稍稍页面是不能直接让用户通过触摸来前后滑动的,而必须透过点击按钮触发。比如第叁页注册页,那么些页面正是必须填写完新闻然后点击下一步实行求证后然后才足以滑动到末端的内容。所以只要将以此页面所在的class里拉长swiper-no-swiping这么些class就能够达成无法触摸滑动切换页面了。

下一场大家能够透过swiper.slideNext(bool,time)那个方式来开始展览手动控制向后翻页的动作以及控制动画的时间长度。那个内容会在vue里说起。

Vue.js的简约实战

是因为本次的付出只是在原来的北京邮政和电信高校人开放平台的品类的基本功上加入3个十分的快注册的效率,所以Vue.js的引入并不是为着将全体项目重构,而只是为了尝试一下脱离jquery的情景下对于开发以来分裂的体验是哪些,能学到什么。

关于Vue.js的用法、天性什么的不是本文的显要,题外话就不说了。说说此番达成思路。因为本身的Vuejs实际上也只是算入门级别,只可以说会用可是还没到能掌握的水准。

首先整个页面包在class叫做swiper-contanier的要素中。因为那个成分包涵了滑动所需的具备东西,大家实际能够大约的把它当作是三个SPA(Single
Page
Application),用三个Vue的实例就能够接管整个页面了(这么说是不担当的,因为其实Vue是组件化的构思)。

先创设二当中坚的Vue的言传身教,并将其和swiper-container绑定起来:

var vm = new Vue({
  el: ".swiper-contanier", // 将这个实例与html元素绑定起来
  data: {}, // 所需要变动、关注的数据,也是vue的核心
  ready: function(){}, // vue提供的钩子,用于在vue渲染视图完成后立即触发
  methods: {} // 方法,用于操作、更新、改变数据而改变视图
})

注册页完成

地方所说,大家的页面是创设在叁个Vue的实例上的。由此区别档次的三种页面怎么用3个实例来接管呢?在此处自个儿的落到实处形式是用两类数据来分别表示。

笔者们分析一压宝册页:

2018正版葡京赌侠诗 5

实质上注册页的中等部分是重新的因素,他们都以input标签+展现文字标签(对,特别令人瞩目那里并不是用placeholder完毕的)。效果:

2018正版葡京赌侠诗 6

从而那中间的一部分其实能够用作是二个列表,能够用Vue的v-for来渲染。列表里所例外的只是显得的文字差别以及input框的门类差异(有text类型的,有password类型的),所以用数据绑定的不二秘诀大家能够将那几个页面包车型地铁数据格式陈设如下:

data: {
  main: [
    {"name":"username","info":"用户名(以英文开头+英文数字)","type":"text"},
    {"name":"passwd","info":"设置密码","type":"password"},
    {"name":"passwd_confirm","info":"在输入一遍密码","type":"password"},
    {"name":"gwno","info":"校园网账户(默认是学号)","type":"text"},
    {"name":"gwpwd","info":"校园网密码(默认是身份证后六位)","type":"password"},
  ],
}

再者大家创造一个方便和前端视图举办双向绑定的多少对象userInfo:

data: {
  main: [...],
  userInfo: {
    username: "",
    passwd: "",
    passwd_confirm: "",
    gwno: "",
    gwpwd: ""
  }
}

而在前端的话大家就能够用那么些数据来展开视图渲染:

<ul class="user-info">
  <li v-for="item in main" style="position: relative;">
    <!-- input输入框 -->
    <!-- 此处用了v-model将数据和视图进行了双向绑定 -->
    <input class="effect" type="{{item.type}}" v-model="userInfo[item.name]">
    <!-- 提示信息 -->
    <label>
      {{item.info}}
    </label>
    <!-- input框的底下的线条 -->

  </li> 
</ul>

<a href="#"><button>下一步</button></a>

于是3个输入的列表就很容易做出来了。然后既然是表单,就要求申明。而那里做的表明实际上有那般几点:

  • 用户名是不是合法/重复?
  • 四遍输入的密码是不是壹律?
  • 高校网账户的密码是不是正确?

里面唯有第一点一次密码输入是不是同样能够用前端直接判断,而首先、叁点都以亟需通过ajax的章程向后台发送验证请求的。为了能够显示和辨识错误与否,大家在main下的各个条例里进入了2个error属性,并显著如下二种境况:

  • true,代表有荒唐,提醒错误
  • false,代表正确,提醒正确
  • normal,代表暗许,展现默许值

于是大家能够在method下写一些办法来开始展览判定。

checkUserId: function(msg){
  if (msg !== ""){
    this.$http.post('url'+msg,function(data){
      if (data.success){
        this.main[0].error = false;
      } else{
        this.main[0].error = true;
      }
    })
  } else{
      this.main[0].error = "normal";
  }
},
checkUserPwd: function(){
    if (this.userInfo.passwd_confirm !== ""){
        this.userInfo.passwd == this.userInfo.passwd_confirm && this.userInfo.passwd_confirm != "" ? this.main[2].error = false : this.main[2].error = true;
    }
},

理所当然那个只是八个引入的效力,我们再聚合一下:

check: function(msg,i){
  var index = i;
  this.userInfo[msg] != "" ? this.main[index].effect = true : this.main[index].effect = false;
  switch (msg){
    case "username":
      this.checkUserId(this.userInfo[msg]);                                      
      break;
    case "passwd":                                                                 
      this.userInfo.passwd !== "" ? this.main[1].error = false : this.main[1].error = "normal";       
      this.checkUserPwd();                                                       
      break;                                                                     
    case "passwd_confirm":
      this.checkUserPwd();                                                       
      break;
    case "gwno":
      this.userInfo.gwno !== "" ? this.main[3].error = false : this.main[3].error = "normal";     
      break;
    case "gwpwd":
      this.userInfo.gwno !== "" ? this.main[4].error = false : this.main[4].error = "normal";     
      break; 
  }     
}

如此那般经过3个check的method大家就可以将壹切表单的求证的措施兼收并蓄进来了。(此处对于高校网账号的验证会放到提交表单的函数中)。为了能在视图中反映科学、错误、符合规律的例外形态,我们必要对前者的有的布局进行部分改动。大家必要给main下的各样条例到场错误音讯,也即errorInfo。

从而到现在整个main的结构是那样:

main: [
  {"name":"","info":"","type":"","error":"","errorInfo":""},
  ...
]

接下来我们须要进入提交认证的局地:

submitReg: function(){
  var flag = 0;
  // 用于判断表单是否都是正确的
  this.main.map(function(obj){
    obj.error == false ? flag += 1 : flag +=0;
  })
  if (flag == 5){
    this.$http.post('url',this.userInfo)
    .then(function(res){
      if (res.success){
        swiper.slideNext(false,300); // 验证正确就可以进入下一页
      } else{
        this.main[4].error = true;
      }
    })
  }
},

将视图部分修改如下:

<ul class="user-info">
  <li v-for="item in main" style="position: relative;">
    <!-- 绑定blur事件 -->
    <input @blur="check(item.name,$index)" class="effect" type="{{item.type}}" v-model="userInfo[item.name]">
    <!-- 根据error类型切换不同的标签显示 -->
    <label>
      <!-- 此处用到了v-show的方法 -->
      {{item.info}}
      {{item.errorInfo}}
      {{item.info}}√
    </label>

  </li>
</ul>
<!-- 点击下一步的同时提交表单信息 -->
<a href="#"><button @click="submitReg">下一步</button></a>

由来,整个注册页的布局和效用性的1部分都曾经做完了。然而那只是一块相比简单的壹对,我们用到了vuejs的的v-for进行列表渲染,用到了v-model进行数量的双向绑定,用到了method举香港行政局地数指标处理,用到了v-show进行标准化显得,3个骨干的页面下大家早就能尝尝那样多vue的特色了。而比较于jquery的dom操作,小编认为vue在此地最棒的地方在于,表单的付出很有利。由于双向绑定了多少,只要求后台把多少格式规定好给本身,小编依据后端的数据结构整理一下自家前端的数据结构然后就足以一向提交给后端了。而且节省了许多dom操作的地点。

只是除了vue的部分,笔者还想的话说两个东西,跟css有关:

  • 全屏背景
  • 输入框文字提高效用,并波及到移动端动画作用的拍卖

全屏背景
不仅是归纳的background-size:
cover那么简单了,还索要开展小小的处理。先说说自家愿意落成的功效啊。作者愿意的功用是一切背景能够填充整个页面,并且在页面成分上下滚动的情事下,背景固定而不随着成分滚动。

放置往常我说不定会如此写:

body,html{
  height: 100%;
}

body{
  background: url(bg.png) center 0 no-repeat;
  background-size: cover;
}

但是那样的话在移动端会师世比较严重的后果,那正是假诺页面成分的万丈超越1切页面后,滚动页面元素的时候,背景也会随之而动。而且背景会被撑开。那不是本人所企望的。

此间用到二个小技巧,用上:before的点子。

body:before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(bg.png) center 0 no-repeat;
  background-size: cover;
}

以此用上before的伪成分的章程是三个很有奇效的小技巧。大家无妨能够试行。那样的话在运动端也能完美兑现背景固定而且呈现全屏。

运动端动画简单初探
在做PC端的web的动画片效果的时候,由于PC端的质量丰裕,所以在写1些成效的时候屡次未有设想到品质的题材。本次在支付的时候就遇到了动画片效果达成上非常的大的标题。我们先来看望那三个卡通的可比:下面一个动画片和上面三个动画片:

第一个:
https://codepen.io/molunerfinn/pen/zBGrxx

第二个:
https://codepen.io/molunerfinn/pen/oLXjKz

会意识那三个东西的作用相差甚大。实际上,2者实现的末梢效果是同样的,都以让小球按一条口型路线活动。不过为啥展现上来说,第贰个那样流畅,而第二个有拨云见日卡顿呢?

这边涉及到无数事物,不光光是重绘(repaint),还有软硬件品质方面包车型地铁题材。感兴趣的话能够参照那么些小说:

在活动端上的职能假若未有优化的话,实际上海大学致正是第两种的作用——令人看起来有所卡顿。不难的话,在移动端,有些效益是由浏览器来渲染的——那么那一个成效假使相比较复杂,而移动端的浏览器质量又不太丰硕的图景下,效果就相比卡顿。有些效果能够由GPU来渲染,那么这几个成效渲染起来就相对来说相比流利。而作者辈还是能人为触发GPU硬件渲染,通过
transform的translate3d属性就能兑现硬件渲染从而俗称硬件增加速度。

举个简易例子。固然让一个元素从(0,0)->(十0px,0),平常思路是left:
0->left:
拾0px,然后再用transition属性进行过渡。不过尔尔的话在活动端上效益就很振奋人心,因为涉嫌到品质难点。但是假使我们用别的1种情势:
transform:
translate3d(100px,0,0)的话,就能够让那一个动画效果由GPU去渲染,那么那样的话,在运动端的效果也是完全还行的余音绕梁。

实际,能够触发GPU渲染的动作有opacity,transform,transition,animation等等。可是像top,left,color,size等品质的变型则不会触发GPU渲染。

正文中描述的实例,是当难点集中到input框的时候,文本上移并且有颜色变化。本来想达成的是文件大小还有变化。不过出于地点说的场地,涉及到size变化的时候,效果就会大降价扣。无奈之下作者只能砍掉那么些效果了。而达成文件上移实际上就是行使了transform的translate三d的措施,将其往上移步,并同盟transition实行了一晃连接处理而已。

现实的CSS达成大概如下:

input:focus ~ label,.trans {                                                                 
  color: #fff;                                                                                 
  transition: 0.3s;                                                                            
  -webkit-transform: translate3d(0, -20px, 0);                                                 
  -moz-transform: translate3d(0, -20px, 0);                                                    
  -ms-transform: translate3d(0, -20px, 0);                                                     
  transform: translate3d(0, -20px, 0);                                                         
}

实在也不难不是么?

关切版面页的达成

实则从注册页的贯彻中曾经得以望见关切版面页完毕的法子了。实际上关怀版面页但是也是列表的渲染,在多少里定义好相应的质量就行了。然后用一个picked的质量来探视是否被入选即可。最后形成登记的时候,将具备入选的列表组装成对应的数组提交到后台就行了。因为登记页里那么些方法已经说过了,所以就不再赘言了。

总结

不难易行计算一下,本次活动端的开发中读书到的东西。

  • Vuejs的简约利用,从DOM操作->数据绑定
  • 全屏背景的实现
  • 顺理成章动画效果的贯彻

实则,包容性方面还有很多的东西须要诉说,可是限制于篇幅以及本文的要紧内容并不是在纠结移动端的包容性的所以并未在包容性方面开展记录。

在排版上本身要么未有用上比较盛行的flex,对于Vue还并未有动用组件化开发的思绪。那几个都以亟需勘误的一些。可是本次的开销进程中通过美术工作的指引,将自个儿事先写页面包车型客车时候注意不到的众多细节部分,比如线条尺寸,成分间隔,颜色搭配等东西给指了出去,这个事物都不是简简单单就达成的。由此可知,有时光以来,我想小编得以将安顿方面包车型客车学识融入到自个儿的前端开发中,想必能让笔者的著述更是地契合审美和用户的体会呢~

DEMO的github地址在这里

作品笔者: Molunerfinn
小说链接: https://molunerfinn.com/vuejs-1/
版权注脚: 本博客全部作品除尤其注明外,均运用 CC BY-NC-SA 四.0
许可协商。转发请注明来源 MA奇骏KSZのBlog!

2018正版葡京赌侠诗 7

相关文章