使用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插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
浅谈vue项目,访问路径#号的问题
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
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
javascript 验证日期的函数
2010/03/18 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
Vue函数式组件-你值得拥有
2019/05/09 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
pandas如何处理缺失值
2019/07/31 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
Python爬虫开发与项目实战
2020/12/16 Python
python的setattr函数实例用法
2020/12/16 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
高考励志标语
2014/06/05 职场文书
物理学专业自荐信
2014/06/11 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android