light frame h5 parsing, start the process

1, ideas

We took over the overall framework of the new light control, quickly familiar with the corresponding configuration is conducive to rapid development

2, analysis catalog

H5 in order to load

project.json application configuration

//原生项目
{    "type": "vue",
    "plugins": [
        "jsnative"
    ],
    "env": {
        "product": {
            "appBaseUrl": "xxxx/appServer/" //默认地址
        }
    }
}

Network address configuration
appBaseUrl

H5 start

index.html entry point for running applications

<html>
    <head>
        <title>和信基金</title>
        <style/>
        <link rel="stylesheet" href="./css/web.css">
    </head>
    <body>
        <div class="wxmask"></div>
        <div id="main">
            <view id="index" /> //页面挂载
                       <view id="login" parent="index" async="true" />
                      <view id="home" home="true" parent="index" async="true"/>
                 </div>
                <script src="app.js"></script>
    </body>
<html>

Code analysis
1, needs to write a page in the main registration
page directory unloading view corresponding to
2, the global CSS CSS / web.css
. 3, the main entrance application app.js

app.js global universal application logic main entrance

import App from "light"
import service from '@/service/plugin';
App.Vue.use(service);

App.filter("start",function (next) {
    //启动拦截器
    App.log("app started...");
    // 加载配置文件
    service.load('./static/config.json').then(next)
}).filter("route",function (from, to, next) {
    //视图拦截器
    App.log(`view changed:${from.path}--${to.path}`);
    next();
}).start();

1, App before starting interception
start --- load (./static/config.json) arranged to load the data
route --- log (view changed: { from.path} - {to.path}); Print page Jump

plugin.load--> config.js/config --> config-generated.js

config configuration loading process

plugin.load(./static/config.json)

config.js Code

import configDynamic from './config-generated';
for (var key in configDynamic) {
  config[key] = configDynamic[key];
}
export default config;

plugin.js Code

import Light from "light"
import Config from '@/config';

  load (url, timeout = 1000) {
    return new Promise((resolve) => {
      Light.fetch({
        method: 'GET',
        url: url,
        type: 'json',
        timeout: timeout
      }, function (res) {
        let config = res.ok && res.data ? res.data : {};
        // 赋值到原配置文件，相同字段会被覆盖
        for (var key in config) {
          if (config[key]) {
            Config[key] = config[key];
          }
        }
        resolve(config);
        // 加载配置文件失败
      })
    })
  }

1, config.js file to load config-generated.js file with the extension parameters
2、json 赋值到原配置文件，相同字段会被覆盖最终以“./static/config.json”为准

Mounting java native code

GmuManager.getInstance().openGmu(SplashNetActivity.this, "gmu://main", null, null);
GmuManager.getInstance().openGmu(SplashNetActivity.this, "gmu://login", null, null);

view/index.vue

init($);

Go to the home page