全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

vue.js移动端app实战1:初始配置详解

本系列将会用vue.js2制作一个移动端的webapp单页面,页面不多,大概在7,8个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到。css方面也会有一些描述,像不同分辨率的适配,flex布局以及scss来编写mixin来处理2x,3x图等。

初始工作:

通过vue-cli安装webpack模板后,会自动生成一大堆文件,通常我们只关心src/目录下的东西。
 个人习惯在src下新建一个base目录,用来存放通用的css及js,比如样式重置css,一切js工具函数。

下载好文件后,npm run dev

启动服务你就会看到熟悉的hello vue。由于我们做的是移动端的页面,所以把chrome切换到手机模式(打开开发工具,ctrl+shift+m或者点左上角那个手机)

对于移动端如何适配不同的手机屏幕,估计每个人都有自己的做法,我用的是淘宝的flexible.js,根据不同类型来缩放以及调整html字体的大小,用rem来布局。使用的方法也很简单,只需要引入Js文件就可以了,github地址。

这里简单介绍一下如何计算rem:

假如设计稿为640,有一个div宽200px,则css应该为width:(200/640)*10=3.125rem

假如设计稿为750,有一个div宽200px,则css应该为width:(200/750)*10=2.666rem

可以发现如果每次量好一个DIV宽后都要用一个计算器算一遍,那这速度也太慢了。

假如你用的是scss,那么可以编写一个函数来处理(函数下面的75px来自设计稿大小,假如设计稿为750,则为75;)

@function torem($px) {
 @return $px / 75px * 1rem;
}

假如你用的sublime编辑器,可以到https://github.com/flashlizi/cssrem 下载一个插件,写起来更方便;

字体的处理:

字体方面我们仍然用px来写,不过需要针对不同的缩放比例写不用的大小,比如安卓下,字体大小为14px,那么iphone6下大小应为28,Iphone6s应为42px。flexible.js会根据屏幕缩放比给html添加data-dpr属性,因此可以通过scss编写mixin来处理字体

@mixin fz($font-size) {
 font-size: $font-size;
 [data-dpr="2"] & {
  font-size: $font-size * 2;
 }
 [data-dpr="3"] & {
  font-size: $font-size * 3;
 }
}

需要用到字体的地方,@include fz(16px);

图片的处理:

通常为了适应retain和非retain屏幕,我们会准备不同的图片大小,也就是2x和3x图,我的做法是[data-dpr="3"]下使用3x图,其他情况统一使用2X图。

在为了方便,编写一个mixin来处理:(假设放在2x文件夹和3x文件夹下)

@mixin dpr-img($url,$name,$type:".jpg"){
 background-image: url($url+"2x/"+ $name+"@2x"+$type);
 [data-dpr="3"] &{
  background-image: url($url+"3x/"+ $name+"@3x"+$type);
 }
}

第一个参数为2x,3x文件夹所在路径,第二个参数为文件名,第三个参数为文件类型,默认为.jpg结尾。

写CSS时有些代码块可能会经常用到,因此也可以写成mixin,比如单行文本溢出和多行文本溢出

@mixin t-overflow($line:1) {
 @if $line==1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 @else {
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
 }
}

比如左右垂直居中

@mixin table-center {
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}

@mixin flex-center {
 display: flex;
 justify-content: center;
 align-items: center;
}

字体图标的处理:

页面通常都会有很多小图标,为了减少请求以前可能会用雪碧图来合并,不过我现在基本不用了,用字体图标来代替。我用的是阿里的在线字体图标,上传svg到阿里字体库或者直接使用阿里的图标,选中图标后添加到项目,生成地址后,import到项目中就可已使用了。

在App.vue中:

@import url('//at.alicdn.com/t/font_nfzwlroyg2vuz0k9.css');

编写main组件:

页面上底部有4个tab,点击时会切换对应的组件,所以Main组件的结构是这样的

<template>
 <div>
  <router-view></router-view>  
  <foot-nav></foot-nav>
 </div>
</template>

foot-nav底部导航的布局如下:

<template>
 <div class="foot-nav-containner">
  <ul class="bottom-nav">
   <router-link tag="li" to='/index' class="bottom-nav__li iconfont icon-shouye bottom-nav__li--home"></router-link>
   <router-link tag="li" to='/search' class="bottom-nav__li iconfont icon-ss bottom-nav__li--search"></router-link>
   <router-link tag="li" to='/car' class="bottom-nav__li iconfont icon-shoppingcart bottom-nav__li--car"></router-link>
   <router-link tag="li" to='/vip' class="bottom-nav__li iconfont icon-gerenzhongxinxia bottom-nav__li--vip"></router-link>
  </ul>
  </div>
</template>

点击底部每个导航,导航上面的组件都会相应的替换。不过要注意点击购物车时,购物车页面底部需要有去结算按钮,所以购物车页面是没有导航的,也就是说购物车的路由配置时不会放在mian路由的children下面。

编写路由:

 

 {
  path:'/',
  redirect:"/home"
 }, 
 {
  path:'/home',
  component:Main,
  children:[
   {
    path:'/',
    redirect:"/index"
   },
   {
    path:'/index',
    component:Index
   },
   {
    path:'/search',
    component:Search
   },   
   {
    path:'/vip',
    component:Vip
   }
  ]
 },
 {
  path:'/car',
  component:Car
 }

我们把home路由设置为默认路由,当路由为空时,就会重定向到home路由,home路由下又把index路由设置为默认路由。我们把car设为单独的路由而不是home下,因此点击导航的购物车时就会从home路由切换到car路由,而由于底部的路由是放置在home路由下,所以到了购物车页面导航也就不存在了,这样基本的配置就差不多完成了。

本节先把基本的结构搭建起来,后续才开始进入每个页面内容的编写。

目前已经写好几个页面,项目已上传到github,地址https://github.com/linrunzheng/vueApp

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


# vue.js移动端配置  # vue.js配置  # Vue-router结合transition实现app前进后退动画切换效果的实例  # vue.js移动端app之上拉加载以及下拉刷新实战  # vue中appear的用法  # 详解基于vue的移动web app页面缓存解决方案  # vue-router实现webApp切换页面动画效果代码  # vue实现app页面切换动画效果实例  # 巧用Vue.js+Vuex制作专门收藏微信公众号的app  # vue2手机APP项目添加开屏广告或者闪屏广告  # 的是  # 购物车  # 放在  # 不多  # 我用  # 用了  # 会用  # 你用  # 设置为  # 雪碧  # 切换到  # 有一个  # 自己的  # 加载  # 几个  # 就会  # 麻雀虽小  # 也会  # 第一个  # 也就 


相关文章: 建站主机功能解析:服务器选择与快速搭建指南  昆明网站制作哪家好,昆明公租房申请网上登录入口?  如何选择适合PHP云建站的开源框架?  头像制作网站在线观看,除了站酷,还有哪些比较好的设计网站?  香港服务器建站指南:外贸独立站搭建与跨境电商配置流程  保定网站制作方案定制,保定招聘的渠道有哪些?找工作的人一般都去哪里看招聘信息?  如何打造高效商业网站?建站目的决定转化率  Swift中switch语句区间和元组模式匹配  网站制作费用多少钱,一个网站的运营,需要哪些费用?  如何处理“XML格式不正确”错误 常见XML well-formed问题解决方法  Thinkphp 中 distinct 的用法解析  活动邀请函制作网站有哪些,活动邀请函文案?  建站之星如何防范黑客攻击与数据泄露?  如何高效完成独享虚拟主机建站?  矢量图网站制作软件,用千图网的一张矢量图做公司app首页,该网站并未说明版权等问题,这样做算不算侵权?应该如何解决?  如何快速打造个性化非模板自助建站?  专业制作网站的公司哪家好,建立一个公司网站的费用.有哪些部分,分别要多少钱?  如何挑选优质建站一级代理提升网站排名?  电商网站制作公司有哪些,1688网是什么意思?  武清网站制作公司,天津武清个人营业执照注销查询系统网站?  如何通过网站建站时间优化SEO与用户体验?  如何选择适配移动端的WAP自助建站平台?  清单制作人网站有哪些,近日“兴风作浪的姑奶奶”引起很多人的关注这是什么事情?  建站中国官网:模板定制+SEO优化+建站流程一站式指南  如何快速搭建虚拟主机网站?新手必看指南  公司网站的制作公司,企业网站制作基本流程有哪些?  建站之星如何修改网站生成路径?  如何通过商城自助建站源码实现零基础高效建站?  在线教育网站制作平台,山西立德教育官网?  如何获取开源自助建站系统免费下载链接?  如何制作算命网站,怎么注册算命网站?  常州自助建站费用包含哪些项目?  如何在云主机快速搭建网站站点?  建站之星后台管理系统如何操作?  如何通过PHP快速构建高效问答网站功能?  如何在建站宝盒中设置产品搜索功能?  海南网站制作公司有哪些,海口网是哪家的?  陕西网站制作公司有哪些,陕西凌云电器有限公司官网?  如何快速辨别茅台真假?关键步骤解析  *服务器网站为何频现安全漏洞?  常州自助建站工具推荐:低成本搭建与模板选择技巧  韩国代理服务器如何选?解析IP设置技巧与跨境访问优化指南  如何快速生成凡客建站的专业级图册?  建站一年半SEO优化实战指南:核心词挖掘与长尾流量提升策略  企业宣传片制作网站有哪些,传媒公司怎么找企业宣传片项目?  深圳网站制作的公司有哪些,dido官方网站?  Python lxml的etree和ElementTree有什么区别  建站VPS配置与SEO优化指南:关键词排名提升策略  成都网站制作价格表,现在成都广电的单独网络宽带有多少的,资费是什么情况呢?  网站网页制作电话怎么打,怎样安装和使用钉钉软件免费打电话? 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。