单页应用和多页应用

银商智能终端小程序使用Vue.js来进行前端应用开发。Vue.js最初是为Web平台设计的，小程序却是Android的原生应用，因此在应用开发模式上，银商小程序的开发与Vue传统的Web开发略有不同。在页面的跳转方面，主要体现的就在单页应用（SPA）和多页应用（MPA）上：

单页应用模式 - SPA（Single-Page Application）

在Web开发中，加载时一次把所有的页面内容都同时加载到浏览器；在智能终端上是把所有内容都在一个安卓Activity内呈现。通常，我们会使用Vue-Router来实现单面应用。

SPA的优势:

1.避免多个页面重复加载资源（所有资源第一次全部加载好，打成Bundle）

2.可方便的自定义转场效果

3.几乎没有页面之间的等待

4.SPA与全局数据、全局状态共享可以做到天衣无缝的结合

SPA的劣势：

1.由于资源一次加载完成，会加大首次打开页面的开销。如果内容过多，首次打开页面会感觉加载时间过长。因此，应用如果复杂，不要把所有的页面都打包进SPA内；

2.多个页面共享一个内存，逻辑复杂的情况下，需要关注内存管理问题；

3.所有页面必须基于相同的JS框架

多页应用模式 - MPA（Multi-Page Application）

银商小程序默认每个页面都是一个安卓Activity（MPA模式）,使用navigator的push方法打开。

MPA的优势：

1.多页架构意味着较弱的耦合，不同页面之间互不影响，可以独立开发、升级；

2.支持原生&开放规则的路由，支持原生的转场效果

MPA的劣势：

1.打开每一个页面或短或长都会有一加载页面动画——取决于页面JS Bundle的内容复杂度，在有些应用场景下，打开应用内所有页面都出现加载动画多少有些让人觉得奇怪

使用Vue-Router开发SPA示例

vue-router是vue.js提供的路由插件，这里主要是用来支持SPA页面跳转。使用Vue-router开发银商小程序SPA应用一般包含以下步骤:

1.创建路由：

  /* 导入需要在Vue-Router内路由的页面 */
  import homePage from './main.vue';
  import helpPage from './help.vue';
  import tucaoPage from './tucao.vue';
  import errorPage from './error.vue';
  const routes = [
      {path:'/',redirect: '/homePage'},
      {path:'/homePage',component:homePage},
      {path:'/helpPage',component:helpPage},
      {path:'/tucaoPage',component:tucaoPage},
      {path:'/errorPage',component:errorPage}
  ];

  /* 使用vue-router */
  import VueRouter from 'vue-router';
  Vue.use(VueRouter);

  /* 将需要路由的页面routes做为参数，新建VueRouter对象router */
  const router = new VueRouter({
      routes
  });
...
  export default{
    router,  //export router
...
  }

2.将路由插入Vue

<template>
  <div class="wrapper" @back='handleBack' @menu='handleMenu'>
      <!-- 使用router路由标签router-view -->
      <router-view class="view"></router-view>
  </div>
</template>

3.为页面添加导航

小程序内的vue-router只支持编程式导航，如下：

    <div class="row1" :style="{height:rowHeight}">
      <div class="item btn-help" :style="{height:rowHeight}" @click="jump('/helpPage')">
        <image class="img-style" src="image/c_service.png"></image>
        <text class="text-style">客户服务</text>
      </div>

      <div class="item btn-tucao" :style="{height:rowHeight}" @click="jump('/tucaoPage')">
        <image class="img-style" src="image/tucao.png"></image>
        <text class="text-style">我要吐槽</text>
      </div>
    </div>

export default {
  methods: {
    jump (to) {
      if (this.$router) {
        this.$router.push(to)
      }
    }
  }
}

4.返回键拦截

由于银商小程序默认是MPA模式，每个页面都是一个Activity，SPA下如果不重定义Back键，则按下系统Back会直接退出SPA的Activity，而不是回退到上一个页面。拦截Back，只要要在SPA的 根标签下添加一次@back，如下：

<template>
  <div class="wrapper" @back='backMethod'>
      <router-view class="view"></router-view>
  </div>
</template>

method内定义back的行为如下：

  backMethod() {
      if (this.$route.path==='/homePage'){
          this.umsApi.navigator.pop()
      }
      else {
          this.jump('/')
      }
  }

MPA的页面路由示例：

MPA的页面路由使用umsApi的navigator下的push和pop方法

1.导入umsApi：

import umsApi from 'ums-api'

2.页面跳转：

umsApi.navigator.push({url: 'tucao.js'})

3.关闭当前页，回退上一页面：

umsApi.navigator.pop()

开发建议

在开发中，到底使用SPA模式还是使用MPA模式应视具体场景而定。对于复杂的应用，我们推荐SPA与MPA混合使用。

# 单页应用和多页应用

# 单页应用模式 - SPA（Single-Page Application）

# SPA的优势:

# SPA的劣势：

# 多页应用模式 - MPA（Multi-Page Application）

# MPA的优势：

# MPA的劣势：

# 使用Vue-Router开发SPA示例

# MPA的页面路由示例：

# 开发建议