greentown-framework

小程序开发框架已安装  greentown-framework 依赖，可直接使用

结构说明:

• FrameWork:包含router的控制、入口的Vue文件和FrameWork的初始化工作。

路由的配置

• 基于vue-router进行的封装，你可以参考vue-router的官方文档进行学习(https://router.vuejs.org/zh-cn/)封装的功能。
• 对历史堆栈进行管理和记录:
  • 配合vuex，做了历史栈的界面缓存。
  • 如果在返回到该界面的时候需要刷新界面的数据，可以在Vue的生命周期activated() 中进行界面的刷新。

路由动画及各种型号手机的适配

在开发框架App.vue文件中:

1. 这里配置了导航切换的动画效果。实现说明:transition 标签实现动画 可参考 https://cn.vuejs.org/v2/guide/transitions.html集成之后就可以在路由切换的时候$router.push，$router.go()时使用界面的切换动画。
2. 在这里我们根据平台类型做了关于iOS和Android的样式适配。适配使用的class:mobile-ios(ios 的样式表示);mobile-android (android的样式class)

framework初始化

在main.js中的初始化方式。

import Vue from 'vue';
import VConsole from 'vconsole';
import GreentownUi from 'greentown-ui';
import Framework from 'greentown-framework';
import jssdk from 'gtjssdk';
import routerSettings from './routerSettings';
import storeSettings from './storeSettings';
import App from './App.vue';
import './common/request/gtaxios';
import './utils/rem';
import routerWrapper from './common/router';
import './common/css/base.css';

Vue.use(GreentownUi);

const framework = new Framework(
  routerSettings,
  storeSettings,
  jssdk,
  App,
);

async function start() {
  try {
    await jssdk.init();
    window.isWeb = false;
    if ($jssdk('app.debug')) {
      // eslint-disable-next-line no-new
      new VConsole();
    }
    $register('event.button.back', () => {
      Vue.prototype.$framework.router.go(-1);
    });
  } catch (e) {
    window.isWeb = true;
  }
  Vue.prototype.statusBarHeight = isWeb ? '20px' : `${$jssdk('padding.top')}px`;
  if (/iPad|iPhone|iPod/.test(navigator.userAgent) && Vue.prototype.statusBarHeight === '44px') {
    localStorage.setItem('iPhoneX-station', 'mobile-iPhone10');
  }
  await routerWrapper.init();
  framework.start();
}
start();

总结说明

FrameWork提供了一套完整的开发框架，具有较高的灵活度，并且能和绿城平台很好的对接。基于Vue并对Vue进行了补充，添加了历史堆栈的管理模式，界面的缓存，切换的动画，路由的守卫等。我们会在后续的开发中继续完善和丰满我们的框架，同时也建议平台的应用开发者尽量使用我们提供的框架进行项目的开发。