使用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 相关文章推荐
用JavaScript隐藏控件的方法
Sep 21 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 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
AM/FM收音机的安装与调试
2021/03/02 无线电
探讨如何把session存入数据库
2013/06/07 PHP
php时间函数用法分析
2016/05/28 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
js特效,页面下雪的小例子
2013/06/17 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
Python使用Supervisor来管理进程的方法
2015/05/28 Python
python实现员工管理系统
2018/01/11 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
python 字典中取值的两种方法小结
2018/08/02 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
数控加工专业毕业生自荐信
2013/09/27 职场文书
校运会广播稿100字
2014/01/27 职场文书
研修第一天随笔感言
2014/02/15 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python