自己尝试看了下代码，如果一点点去看很费劲，但是可以看到一些端倪，比如可以看到 css 的定义如下：
".settings": {
flexDirection: "column"
},
".settings .wrapper": {
flexDirection: "column",
backgroundColor: "#ffffff",
paddingTop: "0px",
paddingRight: "30px",
paddingBottom: "0px",
paddingLeft: "30px",
borderBottomWidth: "16px",
borderBottomStyle: "solid",
borderBottomColor: "#F8F8F8",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "settings"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "wrapper"
}]
}
},
那么问题是有没有已经造好了的轮子、工具，可以方便一些把这些代码剥离出来，最终翻译为 css 和 html 代码呢？
完整代码如下：
(function () {
function e() {
return (() => {
var e = Object.getPrototypeOf(global) || global;
e.chunkFileMap = e.chunkFileMap || {
881: "node_modules/crypto-js/cipher-core.js",
5624: "node_modules/crypto-js/core.js",
8160: "node_modules/crypto-js/md5.js",
5613: "node_modules/crypto-js/aes.js",
2468: "node_modules/crypto-js/evpkdf.js",
136: "node_modules/crypto-js/enc-base64.js",
3139: "node_modules/crypto-js/hmac.js",
9092: "node_modules/crypto-js/sha1.js",
2120: "node_modules/crypto-js/pad-pkcs7.js",
345: "node_modules/crypto-js/enc-utf8.js",
8183: "node_modules/dayjs/dayjs.min.js",
5634: "node_modules/dayjs/plugin/isoWeek.js",
3716: "node_modules/ylh-quick-app-ad-sdk/utils/index.js",
1944: "node_modules/union-quick-app-ad/components/common.js",
6700: "manifest.js",
5100: "cmps/em-request/index.js",
3375: "cmps/em-request/device.js",
3314: "cmps/em-request/extend.js",
8006: "utils/object.js",
2172: "global.js",
2858: "utils/store.js",
8789: "utils/encipher.js",
1552: "cmps/em-spin/index.js",
4519: "services/taskConf.js",
942: "utils/delay.js",
1877: "services/adConfPlus.js",
7285: "services/adConf.js",
6494: "cmps/em-popup-window/index.js",
1198: "cmps/em-exit-btn/index.js",
2694: "services/balance.js",
7258: "utils/device.js",
267: "cmps/em-complain/index.js",
8182: "cmps/em-tabbar/index.js",
2850: "cmps/em-loading/index.js",
9160: "utils/re-date-fns.js",
8831: "cmps/em-withdraw/switch-list/switch.js",
7634: "cmps/em-withdraw/switch-list/index.js",
9318: "onents/icon/icons.js",
2714: "onents/icon/index.js",
8475: "services/reportAdInfo.js",
3979: "utils/network.js",
6425: "la.js"
};
var t;
var s = {
1863: e => {
e.exports = function (e, t, s) {
"use strict";
Object.defineProperty(t, "__esModule", {
value: true
});
t.default = undefined;
n(s("@app-module/system.prompt"));
var a = n(s("@app-module/system.webview"));
function n(e) {
if (e && e.__esModule) {
return e;
} else {
return {
default: e
};
}
}
const {
post: i
} = request;
t.default = {
data: () => ({
aboutConfig: []
}),
computed: {
versionName() {
const {
versionName: e,
template: t,
name: s
} = $manifest;
return e;
}
},
async onInit() {
const {
tabbar: e
} = $manifest;
let {
data: t
} = await request.get(`https://xxxxx?pkg=${$manifest.package}&brand=huawei&position=relate`);
this.aboutConfig = t.menus;
},
onSuspendClick() {
this.isPermanentlySuspendWindowShow = true;
},
onReady() {},
onClearCacheClick() {
this.isClearCacheWindowShow = true;
},
onAgreementTap() {
a.default.loadUrl({
url: this.$app.$def.agreementUrl
});
},
onPrivacyClick() {
a.default.loadUrl({
url: this.$app.$def.privacyUrl
});
},
gotoWeb(e) {
if (e) {
a.default.loadUrl({
url: e
});
}
},
onDestroy() {}
};
const o = t.default || e.exports;
const r = ["public", "protected", "private"];
if (o.data && r.some(function (e) {
return o[e];
})) {
throw new Error("页面 VM 对象中的属性 data 不可与\"" + r.join(",") + "\"同时存在，请使用 private 替换 data 名称");
}
if (!o.data) {
o.data = {};
o._descriptor = {};
r.forEach(function (e) {
const t = typeof o[e];
if (t === "object") {
o.data = Object.assign(o.data, o[e]);
for (const t in o[e]) {
o._descriptor[t] = {
access: e
};
}
}
});
}
};
},
6092: e => {
e.exports = {
".settings": {
flexDirection: "column"
},
".settings .wrapper": {
flexDirection: "column",
backgroundColor: "#ffffff",
paddingTop: "0px",
paddingRight: "30px",
paddingBottom: "0px",
paddingLeft: "30px",
borderBottomWidth: "16px",
borderBottomStyle: "solid",
borderBottomColor: "#F8F8F8",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "settings"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "wrapper"
}]
}
},
".settings .wrapper .list": {
width: "100%",
height: "120px",
alignItems: "center",
justifyContent: "space-between",
borderBottomWidth: "1px",
borderBottomStyle: "solid",
borderBottomColor: "rgba(0,0,0,0.06)",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "settings"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "wrapper"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "list"
}]
}
},
".settings .wrapper .list-l": {
fontSize: "30px",
color: "#333333",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "settings"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "wrapper"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "list-l"
}]
}
},
".settings .wrapper .list .clearstorge": {
width: "43px",
height: "43px",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "settings"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "wrapper"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "list"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "clearstorge"
}]
}
},
".settings .wrapper .list .more": {
width: "30px",
height: "30px",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "settings"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "wrapper"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "list"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "more"
}]
}
}
};
},
287: e => {
e.exports = {
type: "div",
attr: {},
classList: ["settings"],
children: [{
type: "div",
attr: {},
classList: ["wrapper"],
children: [{
type: "div",
attr: {},
classList: ["list"],
children: [{
type: "text",
attr: {
value: "当前版本"
},
classList: ["list-l"]
}, {
type: "text",
attr: {
value: function () {
return "V" + this.versionName;
}
}
}]
}, {
type: "div",
attr: {},
classList: ["list"],
events: {
click: "onAgreementTap"
},
children: [{
type: "text",
attr: {
value: "用户协议"
},
classList: ["list-l"]
}, {
type: "image",
attr: {
src: "https://xxxxx/qa/common/mine/tianjinchangdu/right.png"
}
}]
}, {
type: "div",
attr: {},
classList: ["list"],
events: {
click: "onPrivacyClick"
},
children: [{
type: "text",
attr: {
value: "隐私政策"
},
classList: ["list-l"]
}, {
type: "image",
attr: {
src: "https://xxxxx/qa/common/mine/tianjinchangdu/right.png"
}
}]
}, {
type: "div",
attr: {},
classList: ["list"],
events: {
click: function (e) {
return this.gotoWeb(this.ls.like, e);
}
},
repeat: {
exp: function () {
return this.aboutConfig;
},
value: "ls"
},
children: [{
type: "text",
attr: {
value: function () {
return this.ls.title;
}
},
classList: ["list-l"]
}, {
type: "image",
attr: {
src: "https://xxxx/qa/common/mine/tianjinchangdu/right.png"
},
shown: function () {
return this.ls.like;
}
}]
}]
}]
};
},
5317: (e, t, s, a, n, i, o) => {
s(6012);
s(8417);
s(2342);
var r = s(6092);
var l = s(1863);
a("@app-component/index", [], function (e, t, a) {
l(a, t, e);
if (t.__esModule && t.default) {
a.exports = t.default;
}
a.exports.template = s(287);
a.exports.style = r;
});
n("@app-component/index", {
packagerVersion: undefined
});
}
};
var a = {};
function n(e) {
var t = a[e];
if (t !== undefined) {
return t.exports;
}
var i = a[e] = {
exports: {}
};
s[e].call(i.exports, i, i.exports, n, $app_define$, $app_bootstrap$, $app_require$, $app_define_wrap$);
return i.exports;
}
n.m = s;
t = [];
n.O = (s, a, i, o) => {
if (!a) {
var r = Infinity;
for (d = 0; d = o) && Object.keys(n.O).every(e => n.O[e](a[p]))) {
a.splice(p--, 1);
} else {
l = false;
$app_evaluate$(`${e.chunkFileMap[a[p]]}`);
if (o 0 && t[d - 1][2] > o; d--) {
t[d] = t[d - 1];
}
t[d] = [a, i, o];
};
n.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t);
(() => {
var t = {
6638: 0
};
n.O.j = e => t[e] === 0;
var s = (e, s) => {
var a;
var i;
var [o, r, l] = s;
var p = 0;
if (o.some(e => t[e] !== 0)) {
for (a in r) {
if (n.o(r, a)) {
n.m[a] = r[a];
}
}
if (l) {
var c = l(n);
}
}
for (e && e(s); p n(5317));
i = n.O(i);
})();
}
if (typeof window == "undefined") {
return e();
}
window.createPageHandler = e;
})();
