使用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 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
小程序实现选择题选择效果
Nov 04 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
详解React中共享组件逻辑的三种方式
Feb 02 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
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
Python脚本实现网卡流量监控
2015/02/14 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
Python制作爬虫采集小说
2015/10/25 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
如何用Python 加密文件
2020/09/10 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
2014新课程改革心得体会
2014/03/10 职场文书
爱心活动计划书
2014/04/26 职场文书
期末评语大全
2014/05/04 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
化妆品促销活动总结
2015/05/07 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers