使用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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
微信小程序定位当前城市的方法
Jul 19 Javascript
vue 使用原生组件上传图片的实例
Sep 08 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
PHP数组交集的优化代码分析
2011/03/06 PHP
php 注释规范
2012/03/29 PHP
php返回json数据函数实例
2014/10/09 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
java解析json方法总结
2019/05/16 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
JS跨域问题详解
2014/11/25 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
奖学金自我鉴定范文
2013/10/03 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
教学实习自我评价
2014/01/28 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
提拔干部考察材料
2014/05/26 职场文书
基层党支部承诺书
2015/04/30 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
Promise静态四兄弟实现示例详解
2022/07/07 Javascript