运动端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标签,是运动端适配非常主要之平等句子话。

整体布局

完的布局大致是4-5页横向布局。第一页是用来填写注册信息之。后面的几页是因此来挑选关注的版面的。

注册信息页

图片 1

关心版面页

图片 2

图片 3

图片 4

整体架构

前者采用的架构大致是这样:

  • 滑切换页面的力量来swiper.js
  • 页面内容的渲染采用Vue.js
  • 页面布局以及体制采用纯css,部分效应使css3
  • 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>

解释一下,创建一个swiper的对象,然后随即对象的器皿是class叫做swiper-container的一个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的大概实战

是因为此次的开只是在本来的战败邮人开放平台的档次之底蕴及加入一个快注册的功用,所以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的实例上的。因此不同类别的点滴种植页面怎么用一个实例来接管呢?在此处自己之兑现方式是故简单接近数据来分别表示。

俺们解析一下注册页:

图片 5

实质上注册页的中级有些凡再次的元素,他们都是input标签+显示文字标签(对,尤其令人瞩目这里并无是故placeholder实现之)。效果:

图片 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>

遂一个输入的列表就挺轻做出来了。然后既是表单,就得说明。而这边做的验证实际上有这样几碰:

  • 用户称是否合法/重复?
  • 零星次于输入的密码是否一律?
  • 校园网账户的密码是否正确?

里头只有亚接触零星糟密码输入是否相同可以据此前端直接判,而首先、三沾还是索要通过ajax的艺术朝着后台发送验证请求的。为了能够反映和辨识错误也,我们当main下的每个条例里在了一个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; 
  }     
}

这般经过一个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>

至今,整个注册页的布局与功能性的片段还已开了了。不过这单是一样片比较简单的一对,我们之所以到了vuejs的之v-for进行列表渲染,用到了v-model进行数量的双向绑定,用到了method进行部分数的处理,用到了v-show进行标准显得,一个核心的页面下我们已会品尝这样多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;
}

可这样的话在倒端会面世比较严重的结果,那即便是要页面元素的惊人超过一切页面后,滚动页面元素的上,背景啊会见随之而动。而且背景会让撑起来。这不是自所期望的。

这边用到一个有些技巧,用上: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端的性能足够,所以于描写一些功力的上往往没设想到性的题材。这次以开之时段便遇到了动画片效果实现上不略之题材。大家先来探就有限独卡通的于:上面一个动画以及下部一个动画片:

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

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

会发现立即简单只东西的效能相差大好。实际上,二者实现之尾声效果是相同的,都是于小球本平长达口型路线活动。但是为什么显示上吧,第一个如此流畅,而第二单有明显卡顿呢?

此地涉及到广大东西,不光光是重绘(repaint),还有软硬件性能方面的题目。感兴趣的话语可参考这些章:

  • Web动画性能指南
  • 高性能CSS3动画
  • CSS动画的习性优化

以移动端上之功力使没有优化的话,实际上大致就是是亚栽之力量——让人口看起有所卡顿。简单的话,在移动端,有些力量是出于浏览器来渲染的——那么这些功能使比较复杂,而运动端的浏览器性能又非顶足够的气象下,效果就算比较卡顿。有些力量好由GPU来渲染,那么这些意义渲染起来便相对来说比较流利。而我们还可以人呢触发GPU硬件渲染,通过
transform的translate3d属性就会落实硬件渲染从而俗称硬件加速。

选个大概例子。如果让一个因素于(0,0)->(100px,0),正常思路是left:
0->left:
100px,然后重新就此transition属性进行交接。不过这样的话在移动端上力量就算杀振奋人心,因为涉嫌到性问题。但是倘若我们因而另外一种方法:
transform:
translate3d(100px,0,0)的话,就得为这动画效果由GPU去渲染,那么这样的话,在运动端的功能也是了可领的通。

骨子里,能够触发GPU渲染之动作来opacity,transform,transition,animation等等。但是比如top,left,color,size等属性之扭转则非见面触发GPU渲染。

本文中描述的实例,是当问题集中到input框的时刻,文本及转换并都产生颜色变化。本来想实现之是文本大小还有变化。但是由于地方说之状,涉及到size变化的下,效果就是会大打折扣。无奈之下我不得不砍掉这作用了。而实现文件及转换实际上就是采取了transform的translate3d的艺术,将其为上运动,并配合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 4.0
许可商量。转载请注明来源 MARKSZのBlog!

图片 7

发表评论

电子邮件地址不会被公开。 必填项已用*标注