1、思路
我們對(duì)新接手的light框架整體性掌握，快速熟悉對(duì)應(yīng)的配置有利于快速開發(fā)
2、目錄分析
H5按照順序加載
project.json 應(yīng)用配置
//原生項(xiàng)目
{ "type": "vue",
"plugins": [
"jsnative"
],
"env": {
"product": {
"appBaseUrl": "xxxx/appServer/" //默認(rèn)地址
}
}
}
網(wǎng)絡(luò)地址配置
appBaseUrl
H5啟動(dòng)
index.html 應(yīng)用運(yùn)行入口
<html>
<head>
<title>和信基金</title>
<style/>
<link rel="stylesheet" href="./css/web.css">
</head>
<body>
<div class="wxmask"></div>
<div id="main">
<view id="index" /> //頁(yè)面掛載
<view id="login" parent="index" async="true" />
<view id="home" home="true" parent="index" async="true"/>
</div>
<script src="app.js"></script>
</body>
<html>
代碼分析
1、編寫一個(gè)頁(yè)面需要在main下注冊(cè)
頁(yè)面卸載view對(duì)應(yīng)目錄下
2、全局css css/web.css
3、app.js 是應(yīng)用的主入口
app.js 應(yīng)用主入口全局通用邏輯
import App from "light"
import service from '@/service/plugin';
App.Vue.use(service);
App.filter("start",function (next) {
//啟動(dòng)攔截器
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啟動(dòng)前攔截操作
start --- load (./static/config.json) 加載數(shù)據(jù)配置
route --- log(view changed:{from.path}--{to.path}); 打印頁(yè)面跳轉(zhuǎn)
plugin.load--> config.js/config --> config-generated.js
config配置加載流程
plugin.load(./static/config.json)
config.js代碼
import configDynamic from './config-generated';
for (var key in configDynamic) {
config[key] = configDynamic[key];
}
export default config;
plugin.js代碼
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 : {};
// 賦值到原配置文件，相同字段會(huì)被覆蓋
for (var key in config) {
if (config[key]) {
Config[key] = config[key];
}
}
resolve(config);
// 加載配置文件失敗
})
})
}
1、config.js文件加載 config-generated.js文件，擴(kuò)展參數(shù)
2、json 賦值到原配置文件，相同字段會(huì)被覆蓋 最終以“./static/config.json”為準(zhǔn)
java原生代碼掛載
GmuManager.getInstance().openGmu(SplashNetActivity.this, "gmu://main", null, null);
GmuManager.getInstance().openGmu(SplashNetActivity.this, "gmu://login", null, null);
view/index.vue
init($);
跳轉(zhuǎn)至home頁(yè)面
main.gmu
"menus":[
{
"title":"首頁(yè)",
"action":"gmu://jsnative#home"
},
{
"title":"產(chǎn)品",
"action":"gmu://jsnative#fund-list"
},
{
"title":"資產(chǎn)",
"action":"gmu://jsnative#public-asset"
},
{
"title":"更多",
"action":"gmu://jsnative#setting"
}
]
