使用vue构建移动应用

在移动应用中很多功能都是必不可少的，使用vue构建移动应用自然也就需要实现这些功能。之所以写这篇文章，是希望大家能更多的将注意力放在项目的核心业务上，而不是过多的关注通用功能。

基础设置

• 使用vue-cli搭建项目框架
• 在index.html文件中添加<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">，在移动端设置禁止缩放，以便显示合适大小的页面。
• 如果要将页面封装为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值的大小设置不同的跳转动画。如果应用到多种跳转动画，可以根据详情，具体情况具体应用。

import Navigation from 'vue-navigation'
Vue.use(Navigation, {router}) // router为路由文件

在App.vue中设置：

this.$navigation.on('forward', (to, from) => {
    this.transitionName = 'fade-right'
 })
 this.$navigation.on('back', (to, from) => {
    this.transitionName = 'fade-left'
 })
 this.$navigation.on('replace', (to, from) => {
    this.transitionName = 'fade'
 })

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>

三、数据加载

加载数据与加载页面是存在先后顺序的，比较通用方法是先加载页面，显示数据加载效果，在数据加载完成之后显示完整的页面。数据加载效果作为组件添加到应用中，比较繁琐，所以使用自定义指令的方式实现数据加载效果的显示。

四、接口文件

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()
  }
})

六、常用第三方组件

提示组件

提示组件即显示信息、提示用户的组件，toast、alert、 prompt皆为此类。

加载数据

如上拉加载数据、下拉加载（刷新）数据、滚动加载数据；这些在mint-ui中有较好的实现

日期选择

比较通用的功能，但自己实现起来还是相对麻烦的，借助第三方组件就可以很快的实现了。

使用第三方组件虽然能够快速完成项目，但是不建议过度使用，一些常用的组件如按钮、表单还是应该自己实现，一是因为这些组件实现不是很复杂，二是因为往往对这些组件每个应用都有自己的设计要求，使用第三方然后修改样式，不但比自编写更复杂而且增加冗余文件。