使用vue构建移动应用实战代码


Posted in Javascript onAugust 02, 2017

在移动应用中很多功能都是必不可少的,使用vue构建移动应用自然也就需要实现这些功能。之所以写这篇文章,是希望大家能更多的将注意力放在项目的核心业务上,而不是过多的关注通用功能。

基础设置

  1. 使用vue-cli搭建项目框架
  2. 在index.html文件中添加<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">,在移动端设置禁止缩放,以便显示合适大小的页面。
  3. 如果要将页面封装为app,那么需要将config/index.js中build的assetsPublicPath设置为'./',build获得的页面可以直接打开,而不需要使用服务器。

通用功能

一、页面跳转

一般应用都会拥有多个页面,在vue中通过vue-router来管理页面。移动应用页面跳转时,都有转场效果,在vue中我们也可以实现。

在路由文件中设置meta为数字,meta表示其路由的深度,然后在App.vue中设置:

<template>
 <transition :name="transitionName">
  <router-view></router-view>
 </transition>
</template>

<script>
export default {
 name: 'app',
 data () {
  return {
   transitionName: 'fade'
  }
 },
 watch: {
  '$route' (to, from) {
   let toDepth = to.meta
   let fromDepth = from.meta
   if (fromDepth > toDepth) {
    this.transitionName = 'fade-left'
   } else if (fromDepth < toDepth) {
    this.transitionName = 'fade-right'
   } else {
    this.transitionName = 'fade'
   }
  }
 }
}
</script>

<style>
</style>

监听$route,根据to、from meta值的大小设置不同的跳转动画。如果应用到多种跳转动画,可以根据详情,具体情况具体应用。

使用vue构建移动应用实战代码

登录跳转

PS:这里的动画效果引用自animate.scss;

二、底部导航

直接引用Tabbar组件即可,如果需要添加跳转动画可以在<router-view></router-view>外设置:

<template>
 <div class="content">
  <!--<transition name="fade" mode="out-in">-->
   <router-view></router-view>
  <!--</transition>-->
  <Tabbar 
   :routers="[
    {path: '/index/home', icon: 'icon-home', name: '首页'},
    {path: '/index/loading', icon: 'icon-course', name: '加载'},
    {path: '/index/message', icon: 'icon-info', name: '信息'}
   ]"
  >
  </Tabbar>
 </div>
</template>

<script>
export default {
 name: 'Index',
 components: {Tabbar: require('components/Tabbar')},
 data () {
  return {

  }
 }
}
</script>

<style lang="scss" scoped> 
.content{
 background-color: #eee;
}
</style>

三、数据加载

加载数据与加载页面是存在先后顺序的,比较通用方法是先加载页面,显示数据加载效果,在数据加载完成之后显示完整的页面。数据加载效果作为组件添加到应用中,比较繁琐,所以使用自定义指令的方式实现数据加载效果的显示。

使用vue构建移动应用实战代码
数据加载效果

四、接口文件

import fetch from 'isomorphic-fetch'
import store from 'store'
import router from './router'
var env = process.env.NODE_ENV
var rootUrl
if (env === 'development') {
 rootUrl = ''
}
if (env === 'production') {
 rootUrl = ''
}
const post = function (url, params = {}) {
 return fetch(rootUrl + url, {
  method: 'post',
  headers: {
   'Content-type': 'application/json; charset=utf-8',
   'Authorization': store.get('token')
  },
  body: JSON.stringify(params)
 }).then(function (res) {
  if (res.status === 401) {
   // 没有权限
   api.logout()
  } else {
   return res.json()
  }
 })
}

const urls = [
 'classAtCurDate' // 普通接口列表
]

var api = {}

for (var url of urls) {
 (function (url) {
  api[url] = (params) => {
   console.log(url)
   return post('course/' + url, params)
  }
 })(url)
}
// 需要特殊处理的接口
api.logout = () => {
 store.clearAll()
 router.push('login')
}

api.login = (params) => {
 store.set('id', 1)
 store.set('token', 2)
 return Promise.resolve({params})
}
export default api

可以在全局设置,也可以在需要时导入

// 在main.js中导入api接口
import api from '../src/api'
Vue.$api = Vue.prototype.$api = api

五、登录权限设置

路由加载前,检查是否有登录权限(判断用户id是否存在),如果存在直接跳过登录页进入首页,如果不存在在跳转登录页。

router.beforeEach((to, from, next) => {
 if (cache.get('id') && to.path === '/login') {
  next('/index')
 } else if (!cache.get('id') && to.path !== '/login') {
  next('/login')
 } else {
  next()
 }
})

六、常用第三方组件

许多常用组件都已经有了很好的实现,在项目开发中重复造轮子是一件很不明智的事情。vue移动应用有很多合适的库可以选择,如mint-ui、vux,这里不一一列举,想了解更多的可以自行谷歌,或直接到GitHub上搜索,这里已mint-ui为例,讲一下比较常用的一些组件。

提示组件

提示组件即显示信息、提示用户的组件,toast、alert、 prompt皆为此类。

加载数据

如上拉加载数据、下拉加载(刷新)数据、滚动加载数据;这些在mint-ui中有较好的实现

日期选择

比较通用的功能,但自己实现起来还是相对麻烦的,借助第三方组件就可以很快的实现了。

使用第三方组件虽然能够快速完成项目,但是不建议过度使用,一些常用的组件如按钮、表单还是应该自己实现,一是因为这些组件实现不是很复杂,二是因为往往对这些组件每个应用都有自己的设计要求,使用第三方然后修改样式,不但比自编写更复杂而且增加冗余文件。

使用第三方组件库,一般有两种导入方式:一是全部导入,这样会引入很多不必要的文件;二是只导入使用的组件和样式。建议使用第二种方式,避免导入多余组件,mint-ui可以使用Use babel-plugin-component简化单独导入组件的写法。

GitHub地址:https://github.com/x007xyz/vue-mobile

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

Javascript 相关文章推荐
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
序列化模块json代码实例详解
Mar 03 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
React Native之ListView实现九宫格效果的示例
Aug 02 #Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 #jQuery
ReactNative列表ListView的用法
Aug 02 #Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 #Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 #Javascript
easyui-datagrid开发实践(总结)
Aug 02 #Javascript
js如何编写简单的ajax方法库
Aug 02 #Javascript
You might like
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
FLASH 广告之外的链接
2008/12/16 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
下载给定网页上图片的方法
2014/02/18 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
python实现自动化上线脚本的示例
2019/07/01 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
mac使用python识别图形验证码功能
2020/01/10 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
《猴子种树》教学反思
2014/02/14 职场文书
离婚协议书范本2014
2014/10/27 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
北京故宫导游词
2015/01/31 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
护士自我推荐信范文
2015/03/24 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android