使用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 18 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
JavaScript实现复选框全选功能
Apr 11 Javascript
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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
使用PHP静态变量当缓存的方法
2013/11/13 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
PHP7 弃用功能
2021/03/09 PHP
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
js查错流程归纳
2012/05/04 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
python中元组的用法整理
2020/06/15 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
项目经理岗位职责
2013/11/11 职场文书
科研课题实施方案
2014/03/18 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
校长一岗双责责任书
2015/05/09 职场文书
亲情作文之母爱
2019/09/25 职场文书
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js
zabbix配置nginx监控的实现
2022/05/25 Servers