在移动应用中很多功能都是必不可少的，使用vue构建移动应用自然也就需要实现这些功能。之所以写这篇文章，是希望大家能更多的将注意力放在项目的核心业务上，而不是过多的关注通用功能。
基础设置
使用vue-cli搭建项目框架
在index.html文件中添加<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">，在移动端设置禁止缩放，以便显示合适大小的页面。
如果要将页面封装为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值的大小设置不同的跳转动画。如果应用到多种跳转动画，可以根据详情，具体情况具体应用。
登录跳转
PS:这里的动画效果引用自animate.scss;
二、底部导航
直接引用Tabbar组件即可，如果需要添加跳转动画可以在<router-view></router-view>外设置：
<template> <div> <!--<transition 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>
三、数据加载
加载数据与加载页面是存在先后顺序的，比较通用方法是先加载页面，显示数据加载效果，在数据加载完成之后显示完整的页面。数据加载效果作为组件添加到应用中，比较繁琐，所以使用自定义指令的方式实现数据加载效果的显示。
数据加载效果
四、接口文件
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() } })
六、常用第三方组件