tsp-component/lib/framework/router.ts

提供多端和react版本的UI组件

import * as React from 'react';
import { hashHistory } from 'react-router';
import Container from './container';
import ajax from '../ajax';
import WebApi from '../ajax/webapi';
import { hexToString } from '../util/tools';
import Framework from './index';

declare const wx: any;
declare const process: {
  env: {
    NODE_ENV: string;
  }
};

let preLoadingIndex = 0;

/** 预加载页面JS */
function preLoading(i: number, files: string[], outputDir: string): any {
  if (preLoadingIndex < files.length) {
    ajax({
      url:  `${outputDir}/${files[i]}.js`,
      type: 'get',
      dataType: 'text',
      data: {},
      success(): void {
        preLoadingIndex++;
        return preLoading(preLoadingIndex, files, outputDir);
      }
    });
  }
  return;
}

/** 路由器初始化 */
export function init(options: TspFrameworkRouterOptions): object {
  const childRoutes = [];
  const preLoadingFiles = [];
  const length = options && options.childRoutes ? options.childRoutes.length : 0;
  const env = process.env.NODE_ENV;

  for (let i = 0; i < length; i++) {
    if (env === 'production') {
      preLoadingFiles.push(options.childRoutes[i].outputFileName);
    }

    childRoutes.push({
      path: options.childRoutes[i].path,
      onEnter: options.childRoutes[i].onEnter,
      getComponent: options.childRoutes[i].getComponent
    });
  }

  // 路由监听
  Framework.history.listen((listener) => {
    const path = listener.pathname;
    // 用于分享时获取当前路由
    Framework.global.routerPath = path;
    // 用于后退时是否做权限验证
    Framework.global.urlAction = listener.action;

    if (options && options.outputDir && process.env.NODE_ENV === 'production') {
      // 预加载数据
      preLoading(preLoadingIndex, preLoadingFiles, options.outputDir);
    }

    window.scrollTo(0, 0);

    // 创建路由历史
    if (listener.action === 'PUSH' || listener.action === 'REPLACE') {
      Framework.global.routerHistory.push(path);
    } else {
      Framework.global.routerHistory.pop();
      WebApi.abort();
    }

    // 微信初始化
    if (process.env.NODE_ENV === 'production' && Framework.wx) {
      Framework.wx.wxConfig();
      wx.ready(() => {
        if (Framework.wx.ready) {
          Framework.wx.ready();
        }
        Framework.wx.getNetworkType();
      });
      // wx.error(() => {
      //   getticketandappid();
      // });
    }
  });

  if (options) {
    return {
      component: options.component || Container,
      onEnter: options.onEnter || forwardURL,
      childRoutes
    };
  }

  return null;
}

/* 跳转URL */
export function forwardURL(nextState: any, replace: (route: string) => void): void {
  const path = nextState.location.pathname;
  Framework.global.routerHistory.push(path);
  if (window['forward'] !== '') {
    replace(hexToString(window['forward']));
    window['forward'] = '';
    return;
  }
}

/** 回到上一页或者首页 */
export function goBack(): void {
  const length = Framework.global.routerHistory.length;
  if (length <= 1) {
    Framework.history.push('/');
  } else {
    Framework.history.goBack();
  }
}

/** 权限认证，路由控制 */
export function authentication(nextState: any, replace: any): void {
  if (!Framework.global.isLogin && Framework.global.urlAction === 'POP') {
    const length = Framework.global.routerHistory.length;
    if (length <= 1) {
      replace('/');
    } else {
      replace(Framework.global.routerHistory[length - 2]);
    }
  } else if (!Framework.global.isLogin) {
    replace('/login');
  }
}