🎨 优化代码结构, 删除无用代码, 替换无效链接

This commit is contained in:
xujiang 2021-06-03 01:29:53 +08:00
parent 7c406d175e
commit fb53ef9e27
84 changed files with 10 additions and 24424 deletions

View File

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/19.67f92c26.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/13.96be485c.js"><link rel="prefetch" href="/doc/assets/js/14.c3ed6dd7.js"><link rel="prefetch" href="/doc/assets/js/15.751a6d56.js"><link rel="prefetch" href="/doc/assets/js/16.b025618a.js"><link rel="prefetch" href="/doc/assets/js/17.bf2e8f73.js"><link rel="prefetch" href="/doc/assets/js/18.81ac15ea.js"><link rel="prefetch" href="/doc/assets/js/2.a5de04a4.js"><link rel="prefetch" href="/doc/assets/js/20.3e91412b.js"><link rel="prefetch" href="/doc/assets/js/21.ab262167.js"><link rel="prefetch" href="/doc/assets/js/22.a7421118.js"><link rel="prefetch" href="/doc/assets/js/23.b2f0953d.js"><link rel="prefetch" href="/doc/assets/js/24.945f07e2.js"><link rel="prefetch" href="/doc/assets/js/25.55896e11.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/27.3c7e8c9e.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/29.27514922.js"><link rel="prefetch" href="/doc/assets/js/3.ececc857.js"><link rel="prefetch" href="/doc/assets/js/30.e6444117.js"><link rel="prefetch" href="/doc/assets/js/31.7251d101.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/7.4f98f3a5.js"><link rel="prefetch" href="/doc/assets/js/8.63e7a89b.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>There's nothing here.</blockquote> <a href="/doc/" class="router-link-active">
Take me home.
</a></div></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/19.67f92c26.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 662 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 404 KiB

View File

@ -1,12 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="127px" height="33px" viewBox="0 0 127 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
<title>编组</title>
<desc>Created with Sketch.</desc>
<g id="边框" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组" transform="translate(0.009182, 0.748513)" fill="#3853E2" fill-rule="nonzero">
<path d="M0.759305724,31.6772731 C0.560064722,31.6791092 0.367709307,31.6061338 0.221958202,31.4734152 C0.0807810747,31.3450126 0.000414795184,31.1651784 -2.30926389e-14,30.9767432 L-2.30926389e-14,4.66178783 C-2.2260807e-14,4.20168336 0.313948736,3.80095696 0.760683289,3.69084627 L15.4972786,0.0585848951 C16.569751,-0.205757045 17.6534532,0.449362159 17.9177952,1.52183459 C17.956398,1.67845168 17.975912,1.83916368 17.975912,2.00046801 L17.975912,3.87833873 L17.975912,3.87833873 L27.0430653,3.87846423 C27.2419461,3.87723595 27.4337439,3.95052464 27.5789901,4.08324879 C27.7196967,4.21170247 27.7996992,4.3913234 27.8,4.57945755 L27.8,30.9767432 C27.8,31.1650148 27.7203066,31.3449022 27.5794643,31.4734152 C27.434038,31.6063966 27.2417784,31.679566 27.0425911,31.678048 L0.759305724,31.6772731 Z M24.9795181,29.6919749 C25.1663537,29.6894167 25.3444569,29.6142874 25.4744747,29.4831871 C25.6044925,29.3520868 25.6757225,29.1758071 25.672426,28.9932981 L25.672426,6.51935108 C25.6804276,6.33969476 25.6117238,6.16485583 25.4827182,6.03657845 C25.349632,5.90403192 25.1694627,5.82656221 24.9795181,5.82021104 L17.975912,5.82021104 L17.975912,24.1756722 C17.975912,25.0841 17.3636733,25.8784229 16.4851908,26.1097444 L2.89162207,29.689195 L2.89162207,29.689195 L24.9795181,29.6919749 Z M13.6575103,14.6209346 C13.6199132,15.0037592 13.8157916,15.3724999 14.1578648,15.5628509 C14.5081326,15.762864 14.9415758,15.762864 15.2918435,15.5628509 C15.6339168,15.3724999 15.8297952,15.0037592 15.792198,14.6209346 L15.792198,12.6337831 C15.8297952,12.2509584 15.6339168,11.8822177 15.2918435,11.6918668 C14.9415758,11.4918536 14.5081326,11.4918536 14.1578648,11.6918668 C13.8157916,11.8822177 13.6199132,12.2509584 13.6575103,12.6337831 L13.6575103,14.6209346 Z" id="形状"></path>
<path d="M118.704003,11.8989407 C120.346683,11.8989407 121.247406,12.5401528 122.081954,13.3765164 L122.081954,13.3765164 L122.072308,12.0662134 L126.395149,12.0662134 L126.398273,25.9777286 C126.409992,29.8250013 124.222274,32.0831831 120.101165,32.0831831 C117.738012,32.0831831 115.980857,31.5256074 114.288465,30.0201528 L114.288465,30.0201528 L116.862878,27.3995467 C117.283114,27.761971 117.962321,28.4031831 119.34563,28.4031831 C121.305318,28.4031831 121.923965,27.0650013 121.925566,25.9498498 L121.925566,25.9498498 L121.932892,24.862577 C121.372683,25.6431831 119.972036,26.1762439 118.704003,26.1762439 C116.686677,26.1762439 114.699337,24.862577 114.132686,22.102577 C113.983868,21.3777286 113.956651,20.262577 113.929634,19.0080316 C113.887847,15.9971225 114.265016,14.4080316 115.119538,13.3765164 C116.043345,12.2613649 117.320694,11.8989407 118.704003,11.8989407 Z M41.331845,7.21530432 C45.1071263,7.21530432 47.9688464,9.22257705 48.7129341,12.8468195 C48.8789229,13.6553043 48.9122644,14.5195467 48.9315984,17.1401528 C48.9417209,22.102577 48.7670055,23.3571225 47.3812941,25.0298498 C46.272725,26.3680316 44.4561307,27.0650013 41.9488828,27.0650013 L41.9488828,27.0650013 L34.3983202,27.0650013 L34.444118,7.21530432 Z M87.6281496,11.8989407 C89.0979157,11.8989407 90.1405207,12.3450013 91.1766013,13.3207589 L91.1766013,13.3207589 L87.9497992,16.6940922 C87.7080003,16.4989407 87.2017078,15.8577286 86.3371396,15.8577286 C85.2996577,15.8577286 84.3993456,16.6662134 84.4030675,18.0880316 L84.4030675,18.0880316 L84.4017032,27.0650013 L79.9059483,27.0650013 L79.9101969,12.0662134 L84.2330381,12.0662134 L84.2369602,13.3486377 C84.8607305,12.4565164 86.1583836,11.8989407 87.6281496,11.8989407 Z M96.630106,12.651668 L96.6209343,27.0650013 L92.1251795,27.0650013 L92.1343511,12.651668 L96.630106,12.651668 Z M107.109754,11.8989407 C108.637158,11.8989407 111.119909,12.902577 111.76097,16.0250013 C111.886892,16.6383346 111.926358,17.251668 111.91411,17.7534861 L111.91411,17.7534861 L111.894973,27.0650013 L107.399218,27.0650013 L107.412231,18.0043952 C107.418355,17.7534861 107.389936,17.4746983 107.344146,17.251668 C107.138091,16.2480316 106.331761,15.8298498 105.755382,15.8298498 C104.7179,15.8298498 103.812265,16.331668 103.809863,18.0043952 L103.809863,18.0043952 L103.796851,27.0650013 L99.3010959,27.0650013 L99.3053445,12.0662134 L103.599367,12.0662134 L103.609013,13.3765164 C104.394249,12.4286377 105.755264,11.8989407 107.109754,11.8989407 Z M71.9783717,12.1033851 C76.3679444,12.2847164 78.6430278,14.7931317 78.8036219,19.6286313 C78.6430278,24.3432433 76.3411787,26.791215 71.8980746,26.9725462 C67.5085019,26.6703275 65.2066527,24.2223558 64.9925272,19.6286313 C65.2066527,14.7931317 67.5352675,12.2847164 71.9783717,12.1033851 Z M57.0903516,12.1033851 C61.4799244,12.2847164 63.7550078,14.7931317 63.9156019,19.6286313 C63.7550078,24.3432433 61.4531587,26.791215 57.0100546,26.9725462 C52.6204819,26.6703275 50.3186327,24.2223558 50.1045072,19.6286313 C50.3186327,14.7931317 52.6472475,12.2847164 57.0903516,12.1033851 Z M71.8177775,15.4580129 C69.9441794,15.4580129 69.3649805,16.848219 69.3649805,19.6286313 C69.4185119,22.288156 69.9977108,23.6481403 71.8177775,23.708584 C73.7984384,23.708584 74.5326587,22.3485998 74.5326587,19.6286313 C74.4791273,16.9086628 73.744907,15.5184567 71.8177775,15.4580129 Z M56.9297575,15.4580129 C55.0561594,15.4580129 54.4769605,16.848219 54.4769605,19.6286313 C54.5304919,22.288156 55.1096908,23.6481403 56.9297575,23.708584 C58.9104184,23.708584 59.6446387,22.3485998 59.6446387,19.6286313 C59.5911073,16.9086628 58.856887,15.5184567 56.9297575,15.4580129 Z M41.3605823,11.2856074 L39.2279806,11.2856074 L39.211165,22.9946983 L41.3149478,22.9946983 C42.3812486,22.9946983 43.0618561,22.6601528 43.5237599,22.102577 C44.0087589,21.5171225 44.1712259,20.7643952 44.1476118,17.1401528 C44.1393673,14.8540922 44.0602357,13.7668195 43.9629319,13.2928801 C43.6538494,11.7874255 42.5133399,11.2856074 41.3605823,11.2856074 L41.3605823,11.2856074 Z M120.164853,15.8298498 C118.868001,15.8298498 118.428992,16.4989407 118.431097,19.0359104 C118.441359,19.9280316 118.50392,20.5134861 118.561157,20.792274 C118.727146,21.6007589 119.221991,22.1862134 120.173016,22.1862134 C121.469868,22.1862134 121.908877,21.5171225 121.906764,18.9801528 C121.89651,18.0880316 121.83395,17.502577 121.776712,17.2237892 C121.610723,16.4153043 121.115878,15.8298498 120.164853,15.8298498 Z M94.3303699,6.73976317 C95.5800954,6.73976317 96.5931982,7.7528659 96.5931982,9.00259145 C96.5931982,10.252317 95.5800954,11.2654197 94.3303699,11.2654197 C93.0806443,11.2654197 92.0675416,10.252317 92.0675416,9.00259145 C92.0675416,7.7528659 93.0806443,6.73976317 94.3303699,6.73976317 Z" id="形状结合"></path>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 296 KiB

View File

@ -1 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>

Before

Width:  |  Height:  |  Size: 216 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 155 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 259 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 57 KiB

View File

@ -1,72 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[10],
{
359: function(t, r, a) {
t.exports = a.p + 'assets/img/dynamic.15a5303a.png';
},
387: function(t, r, a) {
'use strict';
a.r(r);
var n = a(42),
i = Object(n.a)(
{},
function() {
var t = this,
r = t.$createElement,
n = t._self._c || r;
return n('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [
n('h1', { attrs: { id: '组件动态加载' } }, [
n('a', { staticClass: 'header-anchor', attrs: { href: '#组件动态加载' } }, [
t._v('#'),
]),
t._v(' 组件动态加载'),
]),
t._v(' '),
n('p', [
t._v(
'目前H5-Dooring的组件都是通过动态加载的方式引入好处是我们在页面中只会加载我们需要的组件不需要的组件不会被加载这样可以提高页面加载的速度这样做也会出现一些问题比如一个长页面配置了很多组件那么一个页面加载过程可以会触发多次请求目前还没有遇到性能问题但后续会逐渐优化这个问题。',
),
]),
t._v(' '),
n('h2', { attrs: { id: 'umi3提供的dynamic' } }, [
n('a', { staticClass: 'header-anchor', attrs: { href: '#umi3提供的dynamic' } }, [
t._v('#'),
]),
t._v(' umi3提供的dynamic'),
]),
t._v(' '),
n('p', [
t._v(
'目前组件的动态加载我们采用的umi的dynamic方案基于它我们上层封装了一个组件动态加载器原理如下',
),
]),
t._v(' '),
n('img', { attrs: { src: a(359), alt: 'foo' } }),
t._v(' '),
n('p', [
t._v('具体代码可以参考Dooring的Github地址'),
n(
'a',
{
attrs: {
href: 'https://github.com/MrXujiang/h5-Dooring',
target: '_blank',
rel: 'noopener noreferrer',
},
},
[t._v('https://github.com/MrXujiang/h5-Dooring'), n('OutboundLink')],
1,
),
]),
]);
},
[],
!1,
null,
null,
null,
);
r.default = i.exports;
},
},
]);

View File

@ -1,179 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[11],
{
361: function(t, _, v) {
t.exports = v.p + 'assets/img/deploy.d1b1d698.png';
},
394: function(t, _, v) {
'use strict';
v.r(_);
var a = v(42),
e = Object(a.a)(
{},
function() {
var t = this,
_ = t.$createElement,
a = t._self._c || _;
return a('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [
a('p', [t._v('私有化部署需要获取4个核心项目包, 包括')]),
t._v(' '),
a('ul', [
a('li', [t._v('H5编辑器(h5_plus)')]),
t._v(' '),
a('li', [t._v('H5基座(h5)')]),
t._v(' '),
a('li', [t._v('Dooring管理后台(Dooring-Admin)')]),
t._v(' '),
a('li', [t._v('服务端项目(Server)')]),
]),
t._v(' '),
a('p', [
t._v('获取以上四个核心源码工程需要满足商业授权协议, 具体可参考'),
a(
'a',
{
attrs: {
href: 'http://h5.dooring.cn/h5_plus/price',
target: '_blank',
rel: 'noopener noreferrer',
},
},
[t._v('商业授权方案'), a('OutboundLink')],
1,
),
]),
t._v(' '),
a('h3', { attrs: { id: '部署架构图' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#部署架构图' } }, [
t._v('#'),
]),
t._v(' 部署架构图'),
]),
t._v(' '),
a('img', { attrs: { src: v(361), alt: 'H5-dooring部署' } }),
t._v(' '),
a('p', [t._v('部署流程如下:')]),
t._v(' '),
a('ol', [
a('li', [t._v('下载4个源码工程, 安装依赖(npm install 或 yarn)')]),
t._v(' '),
a('li', [
t._v('打包3个前端工程至'),
a('code', [t._v('server')]),
t._v('的static目录下'),
]),
t._v(' '),
a('li', [
t._v('在'),
a('code', [t._v('server')]),
t._v('下本地运行 '),
a('code', [t._v('yarn start')]),
t._v(' 或 '),
a('code', [t._v('npm start')]),
t._v(' 启动服务端进行本地测试'),
]),
t._v(' '),
a('li', [
t._v('打包服务端代码, '),
a('code', [t._v('yarn build')]),
t._v(' 生成 '),
a('code', [t._v('dist')]),
t._v(' 目录, 建议使用 '),
a('code', [t._v('pm2')]),
t._v(' 做'),
a('code', [t._v('nodejs')]),
t._v('服务的负载均衡, 运行 '),
a('code', [t._v('pm2 start dist/index.js')]),
t._v('启动生产环境代码'),
]),
]),
t._v(' '),
a('p', [
t._v('也可以将以上步骤集成到gitlab等CI, CD服务中, 进行自动化打包发布, 或者采用'),
a('code', [t._v('docker')]),
t._v('进行容器化部署.'),
]),
t._v(' '),
a('h3', { attrs: { id: '步骤3-4详细流程' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#步骤3-4详细流程' } }, [
t._v('#'),
]),
t._v(' 步骤3.4详细流程'),
]),
t._v(' '),
a('h4', { attrs: { id: '_1-安装项目环境' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#_1-安装项目环境' } }, [
t._v('#'),
]),
t._v(' 1. 安装项目环境'),
]),
t._v(' '),
a('p', [
t._v(
'服务器需提前安装node和pm2, 将本项目上传至服务器指定的目录(如/www/activity), 进入项目目录, 执行:',
),
]),
t._v(' '),
a('div', { staticClass: 'language- extra-class' }, [
a('pre', { pre: !0, attrs: { class: 'language-text' } }, [
a('code', [t._v('npm install\n')]),
]),
]),
a('h4', { attrs: { id: '_2-修改项目域名' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#_2-修改项目域名' } }, [
t._v('#'),
]),
t._v(' 2. 修改项目域名'),
]),
t._v(' '),
a('p', [
t._v('进入'),
a('code', [t._v('./src/config/index.js')]),
t._v(', 修改'),
a('code', [t._v('staticPath')]),
t._v('变量为当前服务器域名/ip, 如'),
a('code', [t._v('http://xxx.com')]),
t._v('或'),
a('code', [t._v('http://xxx.com:8080')]),
t._v('(如非80端口)'),
]),
t._v(' '),
a('h4', { attrs: { id: '_3-编译项目' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#_3-编译项目' } }, [
t._v('#'),
]),
t._v(' 3. 编译项目'),
]),
t._v(' '),
a('p', [
t._v('执行'),
a('code', [t._v('npm run build')]),
t._v('编译项目, 生成'),
a('code', [t._v('dist')]),
t._v('目录'),
]),
t._v(' '),
a('h4', { attrs: { id: '_4-运行项目' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#_4-运行项目' } }, [
t._v('#'),
]),
t._v(' 4. 运行项目'),
]),
t._v(' '),
a('p', [
t._v('在项目根目录执行 '),
a('code', [t._v('pm2 start dist/index.js')]),
t._v('启动项目'),
]),
]);
},
[],
!1,
null,
null,
null,
);
_.default = e.exports;
},
},
]);

View File

@ -1,177 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[12],
{
360: function(t, v, _) {
t.exports = _.p + 'assets/img/v6.deploy.43cbe0de.png';
},
388: function(t, v, _) {
'use strict';
_.r(v);
var e = _(42),
a = Object(e.a)(
{},
function() {
var t = this,
v = t.$createElement,
e = t._self._c || v;
return e('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [
e('p', [t._v('私有化部署需要获取3个核心项目包, 包括')]),
t._v(' '),
e('ul', [
e('li', [t._v('可视化大屏编辑器(v6.dooring/)')]),
t._v(' '),
e('li', [t._v('v6管理后台(v6.dooring/manage)')]),
t._v(' '),
e('li', [t._v('服务端项目(v6.dooring/server)')]),
]),
t._v(' '),
e('p', [
t._v('获取以上三个核心源码工程需要满足商业授权协议, 具体可参考'),
e(
'a',
{
attrs: {
href: 'http://h5.dooring.cn/h5_plus/price',
target: '_blank',
rel: 'noopener noreferrer',
},
},
[t._v('商业授权方案'), e('OutboundLink')],
1,
),
]),
t._v(' '),
e('h3', { attrs: { id: '部署架构图' } }, [
e('a', { staticClass: 'header-anchor', attrs: { href: '#部署架构图' } }, [
t._v('#'),
]),
t._v(' 部署架构图'),
]),
t._v(' '),
e('img', { attrs: { src: _(360), alt: 'H5-dooring部署' } }),
t._v(' '),
e('p', [t._v('部署流程如下:')]),
t._v(' '),
e('ol', [
e('li', [t._v('下载3个源码工程, 安装依赖(npm install 或 yarn)')]),
t._v(' '),
e('li', [
t._v('打包2个前端工程至'),
e('code', [t._v('server')]),
t._v('的static目录下'),
]),
t._v(' '),
e('li', [
t._v('在'),
e('code', [t._v('server')]),
t._v('下本地运行 '),
e('code', [t._v('yarn start')]),
t._v(' 或 '),
e('code', [t._v('npm start')]),
t._v(' 启动服务端进行本地测试'),
]),
t._v(' '),
e('li', [
t._v('打包服务端代码, '),
e('code', [t._v('yarn build')]),
t._v(' 生成 '),
e('code', [t._v('dist')]),
t._v(' 目录, 建议使用 '),
e('code', [t._v('pm2')]),
t._v(' 做'),
e('code', [t._v('nodejs')]),
t._v('服务的负载均衡, 运行 '),
e('code', [t._v('pm2 start dist/index.js')]),
t._v('启动生产环境代码'),
]),
]),
t._v(' '),
e('p', [
t._v('也可以将以上步骤集成到gitlab等CI, CD服务中, 进行自动化打包发布, 或者采用'),
e('code', [t._v('docker')]),
t._v('进行容器化部署.'),
]),
t._v(' '),
e('h3', { attrs: { id: '步骤3-4详细流程' } }, [
e('a', { staticClass: 'header-anchor', attrs: { href: '#步骤3-4详细流程' } }, [
t._v('#'),
]),
t._v(' 步骤3.4详细流程'),
]),
t._v(' '),
e('h4', { attrs: { id: '_1-安装项目环境' } }, [
e('a', { staticClass: 'header-anchor', attrs: { href: '#_1-安装项目环境' } }, [
t._v('#'),
]),
t._v(' 1. 安装项目环境'),
]),
t._v(' '),
e('p', [
t._v(
'服务器需提前安装node和pm2, 将本项目上传至服务器指定的目录(如/www/activity), 进入项目目录, 执行:',
),
]),
t._v(' '),
e('div', { staticClass: 'language- extra-class' }, [
e('pre', { pre: !0, attrs: { class: 'language-text' } }, [
e('code', [t._v('npm install\n')]),
]),
]),
e('h4', { attrs: { id: '_2-修改项目域名' } }, [
e('a', { staticClass: 'header-anchor', attrs: { href: '#_2-修改项目域名' } }, [
t._v('#'),
]),
t._v(' 2. 修改项目域名'),
]),
t._v(' '),
e('p', [
t._v('进入'),
e('code', [t._v('./src/config/index.js')]),
t._v(', 修改'),
e('code', [t._v('staticPath')]),
t._v('变量为当前服务器域名/ip, 如'),
e('code', [t._v('http://xxx.com')]),
t._v('或'),
e('code', [t._v('http://xxx.com:8080')]),
t._v('(如非80端口)'),
]),
t._v(' '),
e('h4', { attrs: { id: '_3-编译项目' } }, [
e('a', { staticClass: 'header-anchor', attrs: { href: '#_3-编译项目' } }, [
t._v('#'),
]),
t._v(' 3. 编译项目'),
]),
t._v(' '),
e('p', [
t._v('执行'),
e('code', [t._v('npm run build')]),
t._v('编译项目, 生成'),
e('code', [t._v('dist')]),
t._v('目录'),
]),
t._v(' '),
e('h4', { attrs: { id: '_4-运行项目' } }, [
e('a', { staticClass: 'header-anchor', attrs: { href: '#_4-运行项目' } }, [
t._v('#'),
]),
t._v(' 4. 运行项目'),
]),
t._v(' '),
e('p', [
t._v('在项目根目录执行 '),
e('code', [t._v('pm2 start dist/index.js')]),
t._v('启动项目'),
]),
]);
},
[],
!1,
null,
null,
null,
);
v.default = a.exports;
},
},
]);

View File

@ -1,96 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[13],
{
362: function(s, a, t) {
s.exports = t.p + 'assets/img/down.75812dab.png';
},
395: function(s, a, t) {
'use strict';
t.r(a);
var n = t(42),
e = Object(n.a)(
{},
function() {
var s = this,
a = s.$createElement,
n = s._self._c || a;
return n('ContentSlotsDistributor', { attrs: { 'slot-key': s.$parent.slotKey } }, [
n('h2', { attrs: { id: '下载源码' } }, [
n('a', { staticClass: 'header-anchor', attrs: { href: '#下载源码' } }, [s._v('#')]),
s._v(' 下载源码'),
]),
s._v(' '),
n('p', [
s._v(
'目前Dooring已支持下载源码功能, 我们可以使用编辑器页面头部的下载按钮来实现下载用户搭建的H5源码.\n',
),
n('img', { attrs: { src: t(362), alt: 'foo' } }),
]),
s._v(' '),
n('p', [
s._v(
'源码下载之后是完整的React项目源代码, 开发人员可以直接根据自己的业务需求来二次编写代码来满足不同的业务需求.',
),
]),
s._v(' '),
n('p', [
s._v('在拿到源码之后, 我们需要进入项目, 使用npm或者yarn安装项目依赖, 如下:'),
]),
s._v(' '),
n('div', { staticClass: 'language-bash extra-class' }, [
n('pre', { pre: !0, attrs: { class: 'language-bash' } }, [
n('code', [
n('span', { pre: !0, attrs: { class: 'token function' } }, [s._v('npm')]),
s._v(' '),
n('span', { pre: !0, attrs: { class: 'token function' } }, [s._v('install')]),
s._v('\n// 或者\n'),
n('span', { pre: !0, attrs: { class: 'token function' } }, [s._v('yarn')]),
s._v('\n'),
]),
]),
]),
n('p', [s._v('之后我们就可以本地运行项目了:')]),
s._v(' '),
n('div', { staticClass: 'language-bash extra-class' }, [
n('pre', { pre: !0, attrs: { class: 'language-bash' } }, [
n('code', [
n('span', { pre: !0, attrs: { class: 'token function' } }, [s._v('npm')]),
s._v(' start\n// 或者\n'),
n('span', { pre: !0, attrs: { class: 'token function' } }, [s._v('yarn')]),
s._v(' start\n'),
]),
]),
]),
n('p', [
s._v('因为源码工程采用'),
n('code', [s._v('umi3.0')]),
s._v('搭建, 所以代码配置可以参考'),
n('code', [s._v('umi3.0')]),
s._v('规范, 比如路由配置, '),
n('code', [s._v('history')]),
s._v('模式, 打包路径等, 二次开发完成之后, 我们可以执行:'),
]),
s._v(' '),
n('div', { staticClass: 'language-bash extra-class' }, [
n('pre', { pre: !0, attrs: { class: 'language-bash' } }, [
n('code', [
n('span', { pre: !0, attrs: { class: 'token function' } }, [s._v('npm')]),
s._v(' run build\n// 或者\n'),
n('span', { pre: !0, attrs: { class: 'token function' } }, [s._v('yarn')]),
s._v(' build\n'),
]),
]),
]),
n('p', [s._v('将项目打包成html, 以便部署到任何服务器中.')]),
]);
},
[],
!1,
null,
null,
null,
);
a.default = e.exports;
},
},
]);

View File

@ -1,39 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[14],
{
365: function(t, e, s) {
t.exports = s.p + 'assets/img/preview-machine.895a0711.png';
},
401: function(t, e, s) {
'use strict';
s.r(e);
var a = s(42),
n = Object(a.a)(
{},
function() {
var t = this,
e = t.$createElement,
a = t._self._c || e;
return a('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [
a('h1', { attrs: { id: '真机预览' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#真机预览' } }, [t._v('#')]),
t._v(' 真机预览'),
]),
t._v(' '),
a('p', [t._v('真机预览和网页预览的流程类似,工作流程如下:')]),
t._v(' '),
a('img', { attrs: { src: s(365), alt: 'foo' } }),
t._v(' '),
a('p', [t._v('由于不同机型预览的效果有些许不同,最终效果以实际看到的为主。')]),
]);
},
[],
!1,
null,
null,
null,
);
e.default = n.exports;
},
},
]);

View File

@ -1,42 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[15],
{
368: function(t, s, e) {
t.exports = e.p + 'assets/img/screenshot.daeecedd.png';
},
405: function(t, s, e) {
'use strict';
e.r(s);
var a = e(42),
i = Object(a.a)(
{},
function() {
var t = this.$createElement,
s = this._self._c || t;
return s('ContentSlotsDistributor', { attrs: { 'slot-key': this.$parent.slotKey } }, [
s('h1', { attrs: { id: '截图功能' } }, [
s('a', { staticClass: 'header-anchor', attrs: { href: '#截图功能' } }, [
this._v('#'),
]),
this._v(' 截图功能'),
]),
this._v(' '),
s('p', [
this._v(
'截图功能这里我们主要使用了dom-to-image这个库来将html转化为图片并进行分享。',
),
]),
this._v(' '),
s('img', { attrs: { src: e(368), alt: 'foo' } }),
]);
},
[],
!1,
null,
null,
null,
);
s.default = i.exports;
},
},
]);

View File

@ -1,31 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[16],
{
370: function(t, s, e) {
t.exports = e.p + 'assets/img/framework.1c9c696b.png';
},
407: function(t, s, e) {
'use strict';
e.r(s);
var n = e(42),
o = Object(n.a)(
{},
function() {
var t = this.$createElement,
s = this._self._c || t;
return s('ContentSlotsDistributor', { attrs: { 'slot-key': this.$parent.slotKey } }, [
s('img', { attrs: { src: e(370), alt: 'foo' } }),
this._v(' '),
s('p', [this._v('注:灰色部分还未实现,正在更新中...')]),
]);
},
[],
!1,
null,
null,
null,
);
s.default = o.exports;
},
},
]);

View File

@ -1,115 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[17],
{
369: function(t, a, r) {
t.exports = r.p + 'assets/img/home.f76105db.png';
},
406: function(t, a, r) {
'use strict';
r.r(a);
var e = r(42),
s = Object(e.a)(
{},
function() {
var t = this,
a = t.$createElement,
e = t._self._c || a;
return e('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [
e('h1', { attrs: { id: '快速上手' } }, [
e('a', { staticClass: 'header-anchor', attrs: { href: '#快速上手' } }, [t._v('#')]),
t._v(' 快速上手'),
]),
t._v(' '),
e('h2', { attrs: { id: '从零搭建一个h5表单页面' } }, [
e(
'a',
{ staticClass: 'header-anchor', attrs: { href: '#从零搭建一个h5表单页面' } },
[t._v('#')],
),
t._v(' 从零搭建一个H5表单页面'),
]),
t._v(' '),
e('iframe', {
staticStyle: { width: '100%', height: '420px', 'margin-top': '20px' },
attrs: {
src:
'//player.bilibili.com/player.html?aid=715343955&bvid=BV1QQ4y1Z725&cid=332145157&page=1',
scrolling: 'no',
border: '0',
frameborder: 'no',
framespacing: '0',
allowfullscreen: 'true',
},
}),
t._v(' '),
e('h2', { attrs: { id: '环境准备' } }, [
e('a', { staticClass: 'header-anchor', attrs: { href: '#环境准备' } }, [t._v('#')]),
t._v(' 环境准备'),
]),
t._v(' '),
e('p', [
t._v('首先得有 node并确保 node 版本是 '),
e('code', [t._v('10.13')]),
t._v(' 或以上mac/win 下推荐使用 n 来管理 node 版本)'),
]),
t._v(' '),
e('div', { staticClass: 'language- extra-class' }, [
e('pre', { pre: !0, attrs: { class: 'language-text' } }, [
e('code', [t._v('$ node-v\nv10.13.0\n')]),
]),
]),
e('p', [t._v('注:推荐使用 yarn 管理 npm 依赖')]),
t._v(' '),
e('h2', { attrs: { id: '源码工程' } }, [
e('a', { staticClass: 'header-anchor', attrs: { href: '#源码工程' } }, [t._v('#')]),
t._v(' 源码工程'),
]),
t._v(' '),
e('table', [
e('thead', [
e('tr', [
e('th', [t._v('h5_plus(编辑器项目)')]),
t._v(' '),
e('th', [t._v('admin(管理后台)')]),
t._v(' '),
e('th', [t._v('Server(服务端项目)')]),
]),
]),
t._v(' '),
e('tbody'),
]),
t._v(' '),
e('p', [
t._v(
'本地拿到源码工程之后先安装对应依赖,在对应工程目录里执行 yarn 命令,等待依赖安装完成。',
),
]),
t._v(' '),
e('h2', { attrs: { id: '本地运行' } }, [
e('a', { staticClass: 'header-anchor', attrs: { href: '#本地运行' } }, [t._v('#')]),
t._v(' 本地运行'),
]),
t._v(' '),
e('p', [
t._v(
'1.首先本地启动 server在 src 目录的 index.js 中修改跨域白名单,改为本地的 ip+端口如http://192.167.0.3:8000',
),
]),
t._v(' '),
e('p', [
t._v('2.其次本地启动 h5_plus,启动完毕在浏览器打开对应的启动地址即可查看,如下:'),
]),
t._v(' '),
e('img', { attrs: { src: r(369), alt: 'foo' } }),
]);
},
[],
!1,
null,
null,
null,
);
a.default = s.exports;
},
},
]);

View File

@ -1,161 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[18],
{
380: function(t, e, a) {
'use strict';
a.r(e);
var o = a(376),
n = a(377),
i = a(378),
s = a(308),
r = {
name: 'Layout',
components: { Page: n.a, Sidebar: i.a, Navbar: o.a },
data: function() {
return { isSidebarOpen: !1 };
},
computed: {
shouldShowNavbar: function() {
var t = this.$site.themeConfig;
return (
!1 !== this.$page.frontmatter.navbar &&
!1 !== t.navbar &&
(this.$title || t.logo || t.repo || t.nav || this.$themeLocaleConfig.nav)
);
},
shouldShowSidebar: function() {
var t = this.$page.frontmatter;
return !t.home && !1 !== t.sidebar && this.sidebarItems.length;
},
sidebarItems: function() {
return Object(s.l)(this.$page, this.$page.regularPath, this.$site, this.$localePath);
},
pageClasses: function() {
var t = this.$page.frontmatter.pageClass;
return [
{
'no-navbar': !this.shouldShowNavbar,
'sidebar-open': this.isSidebarOpen,
'no-sidebar': !this.shouldShowSidebar,
},
t,
];
},
},
mounted: function() {
var t = this;
this.$router.afterEach(function() {
t.isSidebarOpen = !1;
});
},
methods: {
toggleSidebar: function(t) {
(this.isSidebarOpen = 'boolean' == typeof t ? t : !this.isSidebarOpen),
this.$emit('toggle-sidebar', this.isSidebarOpen);
},
onTouchStart: function(t) {
this.touchStart = { x: t.changedTouches[0].clientX, y: t.changedTouches[0].clientY };
},
onTouchEnd: function(t) {
var e = t.changedTouches[0].clientX - this.touchStart.x,
a = t.changedTouches[0].clientY - this.touchStart.y;
Math.abs(e) > Math.abs(a) &&
Math.abs(e) > 40 &&
(e > 0 && this.touchStart.x <= 80
? this.toggleSidebar(!0)
: this.toggleSidebar(!1));
},
},
},
h = a(42),
u = Object(h.a)(
r,
function() {
var t = this,
e = t.$createElement,
a = t._self._c || e;
return a(
'div',
{
staticClass: 'theme-container',
class: t.pageClasses,
on: { touchstart: t.onTouchStart, touchend: t.onTouchEnd },
},
[
t.shouldShowNavbar
? a('Navbar', { on: { 'toggle-sidebar': t.toggleSidebar } })
: t._e(),
t._v(' '),
a('div', {
staticClass: 'sidebar-mask',
on: {
click: function(e) {
return t.toggleSidebar(!1);
},
},
}),
t._v(' '),
a('Sidebar', {
attrs: { items: t.sidebarItems },
on: { 'toggle-sidebar': t.toggleSidebar },
scopedSlots: t._u(
[
{
key: 'top',
fn: function() {
return [t._t('sidebar-top')];
},
proxy: !0,
},
{
key: 'bottom',
fn: function() {
return [t._t('sidebar-bottom')];
},
proxy: !0,
},
],
null,
!0,
),
}),
t._v(' '),
t.$page.frontmatter.home
? a('Home')
: a('Page', {
attrs: { 'sidebar-items': t.sidebarItems },
scopedSlots: t._u(
[
{
key: 'top',
fn: function() {
return [t._t('page-top')];
},
proxy: !0,
},
{
key: 'bottom',
fn: function() {
return [t._t('page-bottom')];
},
proxy: !0,
},
],
null,
!0,
),
}),
],
1,
);
},
[],
!1,
null,
null,
null,
);
e.default = u.exports;
},
},
]);

View File

@ -1,50 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[19],
{
379: function(t, e, s) {
'use strict';
s.r(e);
var n = [
"There's nothing here.",
'How did we get here?',
"That's a Four-Oh-Four.",
"Looks like we've got some broken links.",
],
o = {
methods: {
getMsg: function() {
return n[Math.floor(Math.random() * n.length)];
},
},
},
i = s(42),
h = Object(i.a)(
o,
function() {
var t = this.$createElement,
e = this._self._c || t;
return e('div', { staticClass: 'theme-container' }, [
e(
'div',
{ staticClass: 'theme-default-content' },
[
e('h1', [this._v('404')]),
this._v(' '),
e('blockquote', [this._v(this._s(this.getMsg()))]),
this._v(' '),
e('RouterLink', { attrs: { to: '/' } }, [this._v('\n Take me home.\n ')]),
],
1,
),
]);
},
[],
!1,
null,
null,
null,
);
e.default = h.exports;
},
},
]);

File diff suppressed because it is too large Load Diff

View File

@ -1,25 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[20],
{
390: function(t, e, n) {
'use strict';
n.r(e);
var s = n(42),
l = Object(s.a)(
{},
function() {
var t = this.$createElement;
return (this._self._c || t)('ContentSlotsDistributor', {
attrs: { 'slot-key': this.$parent.slotKey },
});
},
[],
!1,
null,
null,
null,
);
e.default = l.exports;
},
},
]);

View File

@ -1,26 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[21],
{
385: function(t, e, n) {
'use strict';
n.r(e);
var s = n(42),
l = Object(s.a)(
{},
function() {
var t = this.$createElement,
e = this._self._c || t;
return e('ContentSlotsDistributor', { attrs: { 'slot-key': this.$parent.slotKey } }, [
e('p', [this._v('正在建设中...')]),
]);
},
[],
!1,
null,
null,
null,
);
e.default = l.exports;
},
},
]);

View File

@ -1,311 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[22],
{
384: function(t, s, a) {
'use strict';
a.r(s);
var n = a(42),
r = Object(n.a)(
{},
function() {
var t = this,
s = t.$createElement,
a = t._self._c || s;
return a('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [
a('h1', { attrs: { id: 'dsl设计' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#dsl设计' } }, [t._v('#')]),
t._v(' DSL设计'),
]),
t._v(' '),
a('p', [
t._v(
'DSL层主要约定了Dooring组件的数据协议包括组件的可编辑属性、编辑类型、初始值等之所以定义一致的协议层主要是方便后期的组件扩展配置后移有助于不同后端语言开发和数据存储接下来我们看看header组件的schema。',
),
]),
t._v(' '),
a('p', [t._v('1.editData 可编辑的属性类型DSL')]),
t._v(' '),
a('p', [t._v('2.config 可编辑组件的默认属性')]),
t._v(' '),
a('div', { staticClass: 'language-js extra-class' }, [
a('pre', { pre: !0, attrs: { class: 'language-js' } }, [
a('code', [
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' Header'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' IHeaderSchema '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n editData'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('[')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'bgColor'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'背景色'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Color'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'height'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'高度'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Number'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'logo'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'logo'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Upload'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n isCrop'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token boolean' } }, [t._v('true')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n cropRate'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('1000')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('/')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('618')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'logoText'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'logo文字'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Text'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'color'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'文字颜色'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Color'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'fontSize'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'文字大小'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Number'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(']')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n config'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n bgColor'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'rgba(245,245,245,1)'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n logo'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('[')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n uid'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'001'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'image.png'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n status'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'done'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n url'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token template-string' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token template-punctuation string' } },
[t._v('`')],
),
a('span', { pre: !0, attrs: { class: 'token interpolation' } }, [
a(
'span',
{
pre: !0,
attrs: { class: 'token interpolation-punctuation punctuation' },
},
[t._v('${')],
),
t._v('serverUrl'),
a(
'span',
{
pre: !0,
attrs: { class: 'token interpolation-punctuation punctuation' },
},
[t._v('}')],
),
]),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v('/uploads/3_1740be8a482.png'),
]),
a(
'span',
{ pre: !0, attrs: { class: 'token template-punctuation string' } },
[t._v('`')],
),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(']')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n logoText'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'页头Header'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n fontSize'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('20')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n color'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'rgba(47,84,235,1)'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n height'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('50')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
]),
]),
]),
a('p', [
t._v(
'由以上代码可知我们可以在editData属性中给组件添加可编辑的属性比如背景图然后再component中接受属性从而设置样式。',
),
]),
t._v(' '),
a('p', [
t._v(
'在config属性中我们可以设置组件默认属性值和editData中每一项的key一一对应。',
),
]),
]);
},
[],
!1,
null,
null,
null,
);
s.default = r.exports;
},
},
]);

View File

@ -1,824 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[23],
{
391: function(t, s, a) {
'use strict';
a.r(s);
var n = a(42),
e = Object(n.a)(
{},
function() {
var t = this,
s = t.$createElement,
a = t._self._c || s;
return a('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [
a('h1', { attrs: { id: '组件结构' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#组件结构' } }, [t._v('#')]),
t._v(' 组件结构'),
]),
t._v(' '),
a('p', [t._v('dooring的组件设计包含以下3个部分组件')]),
t._v(' '),
a('p', [t._v('1、component 组件主体')]),
t._v(' '),
a('p', [t._v('2、schema 组件的DSL结构协议层')]),
t._v(' '),
a('p', [t._v('3、template 定义了组件的类型、外观、从属关系后期考虑纳入schema')]),
t._v(' '),
a('p', [
t._v(
'接下来我会介绍一个基本的组件主体设计以为template设计在下一章会具体介绍schema部分。',
),
]),
t._v(' '),
a('h2', { attrs: { id: '组件设计' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#组件设计' } }, [t._v('#')]),
t._v(' 组件设计'),
]),
t._v(' '),
a('p', [t._v('我们这里拿基本的header组件来举例如下是header组件的代码')]),
t._v(' '),
a('div', { staticClass: 'language-jsx extra-class' }, [
a('pre', { pre: !0, attrs: { class: 'language-jsx' } }, [
a('code', [
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('interface')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token class-name' } }, [
t._v('HeaderPropTypes'),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('extends')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token class-name' } }, [
t._v('IHeaderConfig'),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n isTpl'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' boolean'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v('\n\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' Header '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('memo')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token parameter' } }, [
t._v('props'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' HeaderPropTypes'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=>')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v(' bgColor'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' logo'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' logoText'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' fontSize'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' color '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' props'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('return')]),
t._v(' props'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('isTpl '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('?')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('<')]),
t._v('div'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [
t._v('\n < img style='),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('width'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'100%'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [t._v(' src=')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('logos'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [
t._v(' alt="" />\n '),
]),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('</')]),
t._v('div'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('<')]),
t._v('header'),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('className'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('styles'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('header'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [t._v('style')]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v(' backgroundColor'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' bgColor '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [
t._v('\n '),
]),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('<')]),
t._v('div'),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('className'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('styles'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('logo'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [
t._v('\n < img src='),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('logo '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('&&')]),
t._v(' logo'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('[')]),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('0')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(']')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('url'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [t._v(' alt=')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('logoText'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [
t._v(' />\n '),
]),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('</')]),
t._v('div'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [
t._v('\n '),
]),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('<')]),
t._v('div'),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('className'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('styles'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('title'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [t._v('style')]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v(' fontSize'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' color '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [
t._v('\n '),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('logoText'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [
t._v('\n '),
]),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('</')]),
t._v('div'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [t._v('\n ')]),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('</')]),
t._v('header'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
]),
]),
]),
a('p', [
t._v(
'我们只需要按照上面的方式编写组件即可props是DSL定义的数据层用来控制组件的shape也就是组件的表现。我们看看header对应的template。',
),
]),
t._v(' '),
a('h2', { attrs: { id: 'template设计' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#template设计' } }, [
t._v('#'),
]),
t._v(' template设计'),
]),
t._v(' '),
a('div', { staticClass: 'language-js extra-class' }, [
a('pre', { pre: !0, attrs: { class: 'language-js' } }, [
a('code', [
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' template '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Header'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n h'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('28')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n displayName'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'页头组件'")]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('export')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('default')]),
t._v(' template'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
]),
]),
]),
a('p', [
t._v(
'以上就是我们template的结构type用来定义组件的类型方便渲染器动态查找h代表组件的初始化高度我们可以自由设置。displayName是组件的中文名用来在左侧组件面板中展示方便用户理解我们可以在template中自定义更多辅助信息方便使用者更高效的使用我们的编辑器。',
),
]),
t._v(' '),
a('h2', { attrs: { id: 'schema设计' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#schema设计' } }, [
t._v('#'),
]),
t._v(' schema设计'),
]),
t._v(' '),
a('p', [
t._v('开发一个自定义组件需要包含3部分, '),
a('code', [t._v('Component')]),
t._v(', '),
a('code', [t._v('Schema')]),
t._v(' 和 '),
a('code', [t._v('Template')]),
t._v('. 接下来我们看一下 '),
a('code', [t._v('Header')]),
t._v(' 组件的 '),
a('code', [t._v('Schema')]),
t._v('.'),
]),
t._v(' '),
a('div', { staticClass: 'language-js extra-class' }, [
a('pre', { pre: !0, attrs: { class: 'language-js' } }, [
a('code', [
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('import')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n IColorConfigType'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n INumberConfigType'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n ITextConfigType'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n IUploadConfigType'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n TColorDefaultType'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n TNumberDefaultType'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n TTextDefaultType'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n TUploadDefaultType'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('from')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'@/components/FormComponents/types'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('import')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v(' baseConfig'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' baseDefault'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' ICommonBaseType '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('from')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'../../common'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('export')]),
t._v(' type THeaderEditData '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' Array'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('<')]),
t._v('\n IColorConfigType '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('|')]),
t._v(' INumberConfigType '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('|')]),
t._v(' IUploadConfigType '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('|')]),
t._v(' ITextConfigType\n'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('>')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('export')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('interface')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token class-name' } }, [
t._v('IHeaderConfig'),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('extends')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token class-name' } }, [
t._v('ICommonBaseType'),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n bgColor'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' TColorDefaultType'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n logo'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' TUploadDefaultType'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n logoText'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' TTextDefaultType'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n fontSize'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' TNumberDefaultType'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n color'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' TColorDefaultType'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n height'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' TNumberDefaultType'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v('\n\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('export')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('interface')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token class-name' } }, [
t._v('IHeaderSchema'),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n editData'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' THeaderEditData'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n config'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' IHeaderConfig'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v('\n\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' Header'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' IHeaderSchema '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n editData'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('[')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('...')]),
t._v('baseConfig'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'bgColor'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'背景色'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Color'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'height'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'高度'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Number'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'logo'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'logo'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Upload'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n isCrop'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token boolean' } }, [t._v('true')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n cropRate'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('1000')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('/')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('618')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'logoText'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'logo文字'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Text'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'color'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'文字颜色'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Color'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'fontSize'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'文字大小'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Number'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(']')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n config'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n bgColor'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'rgba(0,0,0,1)'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n logo'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('[')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n uid'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'001'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'image.png'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n status'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'done'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n url'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'http://49.234.61.19/uploads/3_1740be8a482.png'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(']')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n logoText'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'页头Header'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n fontSize'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('20')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n color'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'rgba(255,255,255,1)'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n height'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('50')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('...')]),
t._v('baseDefault'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('export')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('default')]),
t._v(' Header'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
]),
]),
]),
a('p', [
a('code', [t._v('editData')]),
t._v('表示组件的可编辑属性, 我们可以自定义哪些组件可编辑. '),
a('code', [t._v('config')]),
t._v('为组件接收的属性, 和'),
a('code', [t._v('editData')]),
t._v('数组项中的'),
a('code', [t._v('key')]),
t._v('一一对应.'),
]),
t._v(' '),
a('h3', { attrs: { id: '组件编辑区属性类型' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#组件编辑区属性类型' } }, [
t._v('#'),
]),
t._v(' 组件编辑区属性类型'),
]),
t._v(' '),
a('p', [a('code', [t._v('Dooring')]), t._v('组件编辑面板有如下对应编辑类型:')]),
t._v(' '),
a('ul', [
a('li', [t._v('Upload 上传组件')]),
t._v(' '),
a('li', [t._v('Text 文本框')]),
t._v(' '),
a('li', [t._v('RichText 富文本')]),
t._v(' '),
a('li', [t._v('TextArea 多行文本')]),
t._v(' '),
a('li', [t._v('Number 数字输入框')]),
t._v(' '),
a('li', [t._v('DataList 列表编辑器')]),
t._v(' '),
a('li', [t._v('FileList 文件列表编辑器')]),
t._v(' '),
a('li', [t._v('InteractionData 交互设置')]),
t._v(' '),
a('li', [t._v('Color 颜色面板')]),
t._v(' '),
a('li', [t._v('MutiText 多文本')]),
t._v(' '),
a('li', [t._v('Select 选择下拉框')]),
t._v(' '),
a('li', [t._v('Radio 单选框')]),
t._v(' '),
a('li', [t._v('Switch 开关切换')]),
t._v(' '),
a('li', [t._v('CardPicker 卡片面板')]),
t._v(' '),
a('li', [t._v('Table 表格编辑器')]),
t._v(' '),
a('li', [t._v('Pos 坐标编辑器')]),
t._v(' '),
a('li', [t._v('FormItems 表单设计器')]),
]),
]);
},
[],
!1,
null,
null,
null,
);
s.default = e.exports;
},
},
]);

File diff suppressed because it is too large Load Diff

View File

@ -1,69 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[25],
{
392: function(v, _, l) {
'use strict';
l.r(_);
var i = l(42),
n = Object(i.a)(
{},
function() {
var v = this,
_ = v.$createElement,
l = v._self._c || _;
return l('ContentSlotsDistributor', { attrs: { 'slot-key': v.$parent.slotKey } }, [
l('p', [
v._v('服务端主要是我们的'),
l('code', [v._v('server')]),
v._v('工程, 数据主要存放在'),
l('code', [v._v('server/public')]),
v._v('下, 具体数据指代含义我们接下来会详细介绍.'),
]),
v._v(' '),
l('ul', [
l('li', [
v._v(
'bed 存放图片库中的分类图片, 私有化部署的用户可以直接在此处扩充图片(更好的建议是直接存到第三方图床)',
),
]),
v._v(' '),
l('li', [v._v('h5 用户保存的h5数据文件, 一个页面对应一个json文件')]),
v._v(' '),
l('li', [
v._v('h5_tpl 平台保存的模版数据文件夹\n'),
l('ul', [
l('li', [v._v('xxx.json 模版页面文件')]),
v._v(' '),
l('li', [v._v('tpls.json 模版库中的模版列表数据, 可以手动清空')]),
]),
]),
v._v(' '),
l('li', [
v._v('h5_vip 会员数据目录\n'),
l('ul', [
l('li', [v._v('form 会员制作的含表单页面的表单收集数据')]),
v._v(' '),
l('li', [v._v('view.json 用户浏览量数据')]),
v._v(' '),
l('li', [v._v('vip.json 会员列表数据')]),
v._v(' '),
l('li', [v._v('vipCard.json 会员订单数据(暂时无用, 可删除)')]),
]),
]),
v._v(' '),
l('li', [v._v('image.json 图片库, 主要用来渲染页面的图片库数据')]),
v._v(' '),
l('li', [v._v('city.json 省市3级联动数据, 为表单组件提供数据支持')]),
]),
]);
},
[],
!1,
null,
null,
null,
);
_.default = n.exports;
},
},
]);

View File

@ -1,364 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[26],
{
393: function(t, s, a) {
'use strict';
a.r(s);
var n = a(42),
p = Object(n.a)(
{},
function() {
var t = this,
s = t.$createElement,
a = t._self._c || s;
return a('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [
a('h3', { attrs: { id: '获取form组件的值数据' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#获取form组件的值数据' } }, [
t._v('#'),
]),
t._v(' 获取Form组件的值数据'),
]),
t._v(' '),
a('p', [
t._v('Form表单组件在'),
a('code', [t._v('editor')]),
t._v('目录下'),
a('code', [t._v('src/components/BasicShop/BasicComponents')]),
t._v('位置.'),
]),
t._v(' '),
a('p', [
t._v('Form组件是'),
a('code', [t._v('Dooring')]),
t._v(
'的核心组件之一, 内部的值通过Form组件内部收集, 当然我们也可以暴露出来让其他交互或者组件消费(需要一定的二次开发), 关键代码如下:',
),
]),
t._v(' '),
a('div', { staticClass: 'language-js extra-class' }, [
a('pre', { pre: !0, attrs: { class: 'language-js' } }, [
a('code', [
t._v('req'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('post')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token template-string' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token template-punctuation string' } },
[t._v('`')],
),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v('/vip/h5/form/post'),
]),
a('span', { pre: !0, attrs: { class: 'token interpolation' } }, [
a(
'span',
{
pre: !0,
attrs: { class: 'token interpolation-punctuation punctuation' },
},
[t._v('${')],
),
t._v('location'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('search'),
a(
'span',
{
pre: !0,
attrs: { class: 'token interpolation-punctuation punctuation' },
},
[t._v('}')],
),
]),
a(
'span',
{ pre: !0, attrs: { class: 'token template-punctuation string' } },
[t._v('`')],
),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('...')]),
t._v('fields'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('...')]),
t._v('formData'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('then')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token parameter' } }, [t._v('res')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=>')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('if')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('type '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('===')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'link'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v('// 解析参数'),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('let')]),
t._v(' isPre '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' content'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('indexOf')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'?'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('<')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('0')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('let')]),
t._v(' query '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('dr'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' Date'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('now')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('from')]),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' urlParmas'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('tid'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('try')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n query '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' params '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('?')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('...')]),
a('span', { pre: !0, attrs: { class: 'token constant' } }, [t._v('JSON')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('parse')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('params'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('...')]),
t._v('query'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' query'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('catch')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('err'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n console'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('log')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('err'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v('\n\n '),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [t._v('// 跳转')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('if')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('content'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('indexOf')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'http'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('>')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('-')]),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('1')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n window'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('location'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('href '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' content '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('+')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('urlencode')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('query'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' isPre'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('return')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v('\n\n history'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('push')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token template-string' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token template-punctuation string' } },
[t._v('`')],
),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v('/m?tid=')]),
a('span', { pre: !0, attrs: { class: 'token interpolation' } }, [
a(
'span',
{
pre: !0,
attrs: { class: 'token interpolation-punctuation punctuation' },
},
[t._v('${')],
),
t._v('content'),
a(
'span',
{
pre: !0,
attrs: { class: 'token interpolation-punctuation punctuation' },
},
[t._v('}')],
),
]),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v('&')]),
a('span', { pre: !0, attrs: { class: 'token interpolation' } }, [
a(
'span',
{
pre: !0,
attrs: { class: 'token interpolation-punctuation punctuation' },
},
[t._v('${')],
),
a('span', { pre: !0, attrs: { class: 'token function' } }, [
t._v('urlencode'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('query'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a(
'span',
{
pre: !0,
attrs: { class: 'token interpolation-punctuation punctuation' },
},
[t._v('}')],
),
]),
a(
'span',
{ pre: !0, attrs: { class: 'token template-punctuation string' } },
[t._v('`')],
),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('else')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('if')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('type '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('===')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'modal'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token function' } }, [
t._v('setVisible'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token boolean' } }, [t._v('true')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('else')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('if')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('type '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('===')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'code'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('eval')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('content'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v('\n'),
]),
]),
]),
a('p', [
t._v('数据收集提交的核心代码在Form组件的第56-149行, 也就是'),
a('code', [t._v('submit')]),
t._v('方法. 表单组件收集到的数据统一存放在代码中的'),
a('code', [t._v('formData')]),
t._v('字段, 所以要想在其他地方获取用户表单填写的值, 我们只需要手动将'),
a('code', [t._v('formData')]),
t._v('传递出去, 或者挂载到全局(如window对象, localStorage, indexedDB等).'),
]),
]);
},
[],
!1,
null,
null,
null,
);
s.default = p.exports;
},
},
]);

View File

@ -1,354 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[27],
{
398: function(t, s, a) {
'use strict';
a.r(s);
var n = a(42),
e = Object(n.a)(
{},
function() {
var t = this,
s = t.$createElement,
a = t._self._c || s;
return a('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [
a('p', [
t._v('目前'),
a('strong', [t._v('H5-Dooring')]),
t._v('全面支持https部署, 具体方式方案如下.'),
]),
t._v(' '),
a('h3', { attrs: { id: '前端工程' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#前端工程' } }, [t._v('#')]),
t._v(' 前端工程'),
]),
t._v(' '),
a('p', [
t._v('我们需要在前端工程中的'),
a('code', [t._v('src/pages/document.ejs')]),
t._v('中的'),
a('code', [t._v('head')]),
t._v('中添加如下代码:'),
]),
t._v(' '),
a('div', { staticClass: 'language-html extra-class' }, [
a('pre', { pre: !0, attrs: { class: 'language-html' } }, [
a('code', [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('<')]),
t._v('meta'),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('http-equiv'),
]),
a('span', { pre: !0, attrs: { class: 'token attr-value' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation attr-equals' } }, [
t._v('='),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]),
t._v('Content-Security-Policy'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('content'),
]),
a('span', { pre: !0, attrs: { class: 'token attr-value' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation attr-equals' } }, [
t._v('='),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]),
t._v('upgrade-insecure-requests'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
t._v('\n'),
]),
]),
]),
a('p', [t._v('目的是强制将页面中HTTP请求转换为HTTPS.')]),
t._v(' '),
a('h3', { attrs: { id: '服务器工程' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#服务器工程' } }, [
t._v('#'),
]),
t._v(' 服务器工程'),
]),
t._v(' '),
a('h4', { attrs: { id: '_1-申请ssl证书' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#_1-申请ssl证书' } }, [
t._v('#'),
]),
t._v(' 1. 申请SSL证书'),
]),
t._v(' '),
a('h4', { attrs: { id: '_2-生成-server-csr-server-key' } }, [
a(
'a',
{
staticClass: 'header-anchor',
attrs: { href: '#_2-生成-server-csr-server-key' },
},
[t._v('#')],
),
t._v(' 2. 生成 server.csr+server.key'),
]),
t._v(' '),
a('h4', { attrs: { id: '_3-通过证书链生成-pem文件' } }, [
a(
'a',
{ staticClass: 'header-anchor', attrs: { href: '#_3-通过证书链生成-pem文件' } },
[t._v('#')],
),
t._v(' 3. 通过证书链生成.pem文件'),
]),
t._v(' '),
a('h4', { attrs: { id: '在server中的src-index-js按如下方式修改' } }, [
a(
'a',
{
staticClass: 'header-anchor',
attrs: { href: '#在server中的src-index-js按如下方式修改' },
},
[t._v('#')],
),
t._v(' 在'),
a('code', [t._v('server')]),
t._v('中的'),
a('code', [t._v('src/index.js')]),
t._v('按如下方式修改'),
]),
t._v(' '),
a('div', { staticClass: 'language-js extra-class' }, [
a('pre', { pre: !0, attrs: { class: 'language-js' } }, [
a('code', [
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v('// 忽略部分无影响代码'),
]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('import')]),
t._v(' https '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('from')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'https'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n\n'),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v('// 你的ssl存放路径, 建议直接放在server目录下'),
]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' filePath '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' path'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('join')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('__dirname'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'../ssl'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v('\n\n'),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v('// 启动逻辑'),
]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('async')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('function')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('start')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v('// https配置'),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' httpsOptions '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' fs'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [
t._v('readFileSync'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('path'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('join')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('filePath'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'3536084__doctopia.com.cn.key'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v('//ssl文件路径'),
]),
t._v('\n cert'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' fs'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [
t._v('readFileSync'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('path'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('join')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('filePath'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'3536084__doctopia.com.cn.pem'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v('//ssl文件路径'),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n\t\n\t'),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v('// https服务'),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' server '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' https'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [
t._v('createServer'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('httpsOptions'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' app'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('callback')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' io '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('require')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'socket.io'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('server'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n\t\n\t'),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v('// 忽略其他无影响代码'),
]),
t._v('\n\t\n\t'),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v('// https默认443, 这里我们可以走公共配置'),
]),
t._v('\n\tserver'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('listen')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('443')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=>')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n\t console'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('log')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token template-string' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token template-punctuation string' } },
[t._v('`')],
),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v('服务器地址:'),
]),
a('span', { pre: !0, attrs: { class: 'token interpolation' } }, [
a(
'span',
{
pre: !0,
attrs: { class: 'token interpolation-punctuation punctuation' },
},
[t._v('${')],
),
t._v('config'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('staticPath'),
a(
'span',
{
pre: !0,
attrs: { class: 'token interpolation-punctuation punctuation' },
},
[t._v('}')],
),
]),
a(
'span',
{ pre: !0, attrs: { class: 'token template-punctuation string' } },
[t._v('`')],
),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v('\n\t'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v('\n\n'),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('start')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v('\n'),
]),
]),
]),
]);
},
[],
!1,
null,
null,
null,
);
s.default = e.exports;
},
},
]);

View File

@ -1,146 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[28],
{
400: function(_, v, i) {
'use strict';
i.r(v);
var t = i(42),
l = Object(t.a)(
{},
function() {
var _ = this,
v = _.$createElement,
i = _._self._c || v;
return i('ContentSlotsDistributor', { attrs: { 'slot-key': _.$parent.slotKey } }, [
i('h3', { attrs: { id: '更新日志' } }, [
i('a', { staticClass: 'header-anchor', attrs: { href: '#更新日志' } }, [_._v('#')]),
_._v(' 更新日志'),
]),
_._v(' '),
i('h4', { attrs: { id: '_1-98' } }, [
i('a', { staticClass: 'header-anchor', attrs: { href: '#_1-98' } }, [_._v('#')]),
_._v(' 1.98'),
]),
_._v(' '),
i('ol', [
i('li', [_._v('编辑器功能区添加更多折叠下拉框, 优化头部界面')]),
_._v(' '),
i('li', [_._v('添加数据源入口和界面')]),
_._v(' '),
i('li', [_._v('模版库优化, 剔除无用模版, 累计60+模版')]),
_._v(' '),
i('li', [_._v('入口页添加赞助墙')]),
_._v(' '),
i('li', [_._v('升级视频组件, 支持弹幕, 截屏, 模式设置等功能')]),
_._v(' '),
i('li', [_._v('文件上传路径兼容window服务器本地化部署')]),
]),
_._v(' '),
i('h4', { attrs: { id: '_1-96' } }, [
i('a', { staticClass: 'header-anchor', attrs: { href: '#_1-96' } }, [_._v('#')]),
_._v(' 1.96'),
]),
_._v(' '),
i('ol', [
i('li', [_._v('修复首页推荐项目外链地址和站内文案')]),
_._v(' '),
i('li', [_._v('替换Dooring网站logo')]),
_._v(' '),
i('li', [_._v('优化ios8以下访问H5时可能出现的页面卡顿问题')]),
_._v(' '),
i('li', [_._v('图片上传组件添加svg, gif图片格式支持')]),
_._v(' '),
i('li', [_._v('后台管理系统添加一键跳编辑器按钮')]),
_._v(' '),
i('li', [_._v('服务端编辑侧路由加固')]),
_._v(' '),
i('li', [
_._v(
'文件上传组件添加自定义上传文档支持七牛云腾讯云阿里oss等第三方图床方式',
),
]),
]),
_._v(' '),
i('h4', { attrs: { id: '_1-95' } }, [
i('a', { staticClass: 'header-anchor', attrs: { href: '#_1-95' } }, [_._v('#')]),
_._v(' 1.95'),
]),
_._v(' '),
i('ol', [
i('li', [_._v('dooring文档添加更新日志模块')]),
_._v(' '),
i('li', [_._v('dooring增报错监控函数, 提供一键清空缓存按钮和自动重载功能')]),
_._v(' '),
i('li', [_._v('新增电商商品H5模版')]),
_._v(' '),
i('li', [_._v('页面配置增加背景模式和背景重复')]),
_._v(' '),
i('li', [_._v('表单添加字段名配置项')]),
]),
_._v(' '),
i('h4', { attrs: { id: '_1-94' } }, [
i('a', { staticClass: 'header-anchor', attrs: { href: '#_1-94' } }, [_._v('#')]),
_._v(' 1.94'),
]),
_._v(' '),
i('ol', [
i('li', [_._v('转盘组件支持转盘交互功能(跳转链接/打开弹窗/自定义代码)')]),
_._v(' '),
i('li', [_._v('添加网站拦截, 防止页面误关导致页面无法保存')]),
_._v(' '),
i('li', [_._v('优化页面控制条组件样式')]),
_._v(' '),
i('li', [_._v('按钮组件添加组件动画')]),
_._v(' '),
i('li', [_._v('图片组件添加组件动画')]),
_._v(' '),
i('li', [_._v('媒体组件icon优化')]),
_._v(' '),
i('li', [_._v('全局错误监控组件添加一键清除缓存功能')]),
]),
_._v(' '),
i('h4', { attrs: { id: '_1-93' } }, [
i('a', { staticClass: 'header-anchor', attrs: { href: '#_1-93' } }, [_._v('#')]),
_._v(' 1.93'),
]),
_._v(' '),
i('ol', [
i('li', [_._v('上线源码下载功能')]),
_._v(' '),
i('li', [_._v('服务端支持下载源码服务和下载次数限制')]),
_._v(' '),
i('li', [_._v('界面部分文案优化')]),
_._v(' '),
i('li', [_._v('出码基座优化')]),
_._v(' '),
i('li', [_._v('抽奖组件支持抽奖后自定义交互(弹窗/链接/自定义代码)')]),
]),
_._v(' '),
i('h4', { attrs: { id: '_1-92' } }, [
i('a', { staticClass: 'header-anchor', attrs: { href: '#_1-92' } }, [_._v('#')]),
_._v(' 1.92'),
]),
_._v(' '),
i('ol', [
i('li', [_._v('修复背景图预览适配问题')]),
_._v(' '),
i('li', [_._v('转盘组件支持中奖后自定义交互/弹窗/自定义代码')]),
_._v(' '),
i('li', [_._v('界面局部调整')]),
_._v(' '),
i('li', [_._v('后台管理表单数据支持多键查询')]),
_._v(' '),
i('li', [_._v('可视化大屏柱状图组件支持实时数据请求')]),
]),
]);
},
[],
!1,
null,
null,
null,
);
v.default = l.exports;
},
},
]);

View File

@ -1,996 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[29],
{
396: function(t, s, a) {
'use strict';
a.r(s);
var n = a(42),
p = Object(n.a)(
{},
function() {
var t = this,
s = t.$createElement,
a = t._self._c || s;
return a('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [
a('p', [
a('strong', [t._v('H5-Dooring')]),
t._v('全面支持第三方对象存储服务, 我们以七牛云对象存储为例.'),
]),
t._v(' '),
a('h3', { attrs: { id: '前端上传文件到oss' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#前端上传文件到oss' } }, [
t._v('#'),
]),
t._v(' 前端上传文件到oss'),
]),
t._v(' '),
a('p', [
t._v(
'首先我们需要在第三方对象储存服务中配置对应的服务和域名. 其次安装对应的sdk, 如七牛云sdk:',
),
]),
t._v(' '),
a('div', { staticClass: 'language-js extra-class' }, [
a('pre', { pre: !0, attrs: { class: 'language-js' } }, [
a('code', [
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('import')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('*')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('as')]),
t._v(' qiniu '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('from')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'qiniu-js'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
]),
]),
]),
a('p', [
t._v('其次我们修改'),
a('code', [t._v('h5_plus')]),
t._v('工程的'),
a('code', [t._v('Upload')]),
t._v('组件, 详细地址为'),
a('code', [t._v('src/core/FormComponents/Upload')]),
t._v('.'),
]),
t._v(' '),
a('p', [t._v('修改内容如下:')]),
t._v(' '),
a('div', { staticClass: 'language-js extra-class' }, [
a('pre', { pre: !0, attrs: { class: 'language-js' } }, [
a('code', [
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' fileName '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' file'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('name\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' suffix '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'自定义文件后缀'"),
]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' putExtra '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n fname'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' fileName'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n params'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' uid '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('+')]),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('new')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token class-name' } }, [t._v('Date')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('+')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('uuid')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('16')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('8')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('+')]),
t._v(' suffix\n'),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v(
'// 使用七牛云上传api, 前提是提前在前端拿到对应的ticket, 可以通过请求的方式获取',
),
]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' observe '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' qiniu'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('upload')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('file'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' uid'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('state'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('qnToken'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('ticket'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' putExtra'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v('\nobserve'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('subscribe')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=>')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('null')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token parameter' } }, [t._v('res')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=>')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v('// 拼接路径'),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' url '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token template-string' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token template-punctuation string' } },
[t._v('`')],
),
a('span', { pre: !0, attrs: { class: 'token interpolation' } }, [
a(
'span',
{
pre: !0,
attrs: { class: 'token interpolation-punctuation punctuation' },
},
[t._v('${')],
),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('state'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('qnToken'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('domain'),
a(
'span',
{
pre: !0,
attrs: { class: 'token interpolation-punctuation punctuation' },
},
[t._v('}')],
),
]),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v('/')]),
a('span', { pre: !0, attrs: { class: 'token interpolation' } }, [
a(
'span',
{
pre: !0,
attrs: { class: 'token interpolation-punctuation punctuation' },
},
[t._v('${')],
),
t._v('res'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('key'),
a(
'span',
{
pre: !0,
attrs: { class: 'token interpolation-punctuation punctuation' },
},
[t._v('}')],
),
]),
a(
'span',
{ pre: !0, attrs: { class: 'token template-punctuation string' } },
[t._v('`')],
),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [t._v('// 存库')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' fileList '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('[')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v(' uid'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' fileName'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' status'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'done'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' url '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(']')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('setState')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n curImgUrl'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' url'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n fileList\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('props'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('onChange '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('&&')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('props'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('onChange')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('fileList'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v('\n'),
]),
]),
]),
a('p', [
t._v('其他oss服务类似, 如果不清楚如何配置, 可以在'),
a(
'a',
{
attrs: {
href: 'http://h5.dooring.cn/',
target: '_blank',
rel: 'noopener noreferrer',
},
},
[t._v('H5-Dooring官网'), a('OutboundLink')],
1,
),
t._v('中找到我们.'),
]),
t._v(' '),
a('h3', { attrs: { id: '如何接入任何第三方上传服务' } }, [
a(
'a',
{ staticClass: 'header-anchor', attrs: { href: '#如何接入任何第三方上传服务' } },
[t._v('#')],
),
t._v(' 如何接入任何第三方上传服务'),
]),
t._v(' '),
a('p', [
t._v('首先我们的上传组件'),
a('code', [t._v('Upload')]),
t._v('使用内部的服务接口来实现上传功能, 所以需要给组件的'),
a('code', [t._v('action')]),
t._v('赋值, 如下:'),
]),
t._v(' '),
a('div', { staticClass: 'language-jsx extra-class' }, [
a('pre', { pre: !0, attrs: { class: 'language-jsx' } }, [
a('code', [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('<')]),
a('span', { pre: !0, attrs: { class: 'token class-name' } }, [
t._v('Upload'),
]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('fileList'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('fileList'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('onPreview'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('handlePreview'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('onChange'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('handleChange'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('onRemove'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('handleRemove'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [t._v('name')]),
a('span', { pre: !0, attrs: { class: 'token attr-value' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation attr-equals' } }, [
t._v('='),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]),
t._v('file'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('listType'),
]),
a('span', { pre: !0, attrs: { class: 'token attr-value' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation attr-equals' } }, [
t._v('='),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]),
t._v('picture-card'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('className'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('styles'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('avatarUploader'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [t._v('action')]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('sdk_upload_api '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('||')]),
t._v(' action'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('withCredentials'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('withCredentials'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('headers'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'x-requested-with'"),
]),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' localStorage'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [
t._v('getItem'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'user'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('||')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("''")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'authorization'"),
]),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' localStorage'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [
t._v('getItem'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'token'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('||')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("''")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('...')]),
t._v('headers\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('beforeUpload'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('handleBeforeUpload'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [t._v('\n ')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('fileList'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('length '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('>=')]),
t._v(' maxLen '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('?')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('null')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' uploadButton'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [t._v('\n')]),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('</')]),
a('span', { pre: !0, attrs: { class: 'token class-name' } }, [
t._v('Upload'),
]),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
t._v('\n'),
]),
]),
]),
a('p', [
t._v('如果需要集成第三方oss, 如七牛云, 阿里oss等, 我们需要将'),
a('code', [t._v('Upload')]),
t._v('组件的'),
a('code', [t._v('action')]),
t._v('属性设置为空字符串, 其次删除'),
a('code', [t._v('onChange')]),
t._v('属性, 上传操作统一在'),
a('code', [t._v('beforeUpload')]),
t._v('中进行. 案例如下:'),
]),
t._v(' '),
a('div', { staticClass: 'language-jsx extra-class' }, [
a('pre', { pre: !0, attrs: { class: 'language-jsx' } }, [
a('code', [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('<')]),
a('span', { pre: !0, attrs: { class: 'token class-name' } }, [
t._v('Upload'),
]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('fileList'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('fileList'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [t._v('action')]),
a('span', { pre: !0, attrs: { class: 'token attr-value' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation attr-equals' } }, [
t._v('='),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('onPreview'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('handlePreview'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('onRemove'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('onRemove'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [t._v('name')]),
a('span', { pre: !0, attrs: { class: 'token attr-value' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation attr-equals' } }, [
t._v('='),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]),
t._v('file'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('listType'),
]),
a('span', { pre: !0, attrs: { class: 'token attr-value' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation attr-equals' } }, [
t._v('='),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]),
t._v('picture-card'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('className'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('styles'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('avatarUploader'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('headers'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('...')]),
t._v('headers'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('beforeUpload'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('handleBeforeUpload'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [t._v('\n ')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('fileList'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('length '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('>=')]),
t._v(' maxLen '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('?')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('null')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' uploadButton'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [t._v('\n')]),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('</')]),
a('span', { pre: !0, attrs: { class: 'token class-name' } }, [
t._v('Upload'),
]),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
t._v('\n'),
]),
]),
]),
a('p', [
t._v('自定义上传的核心逻辑放在了'),
a('code', [t._v('beforeUpload')]),
t._v('上. 我们具体看看'),
a('code', [t._v('beforeUpload')]),
t._v('这个方法如何实现.'),
]),
t._v(' '),
a('div', { staticClass: 'language-js extra-class' }, [
a('pre', { pre: !0, attrs: { class: 'language-js' } }, [
a('code', [
a('span', { pre: !0, attrs: { class: 'token function-variable function' } }, [
t._v('handleBeforeUpload'),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token parameter' } }, [
t._v('file'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v('RcFile'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=>')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v('// 1. 限制图片类型'),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' isJpgOrPng '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' file'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('type '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('===')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'image/jpeg'"),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('||')]),
t._v(' file'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('type '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('===')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'image/png'")]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('||')]),
t._v(' file'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('type '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('===')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'image/jpg'")]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('||')]),
t._v(' file'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('type '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('===')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'image/gif'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('if')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('!')]),
t._v('isJpgOrPng'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n message'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('error')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'只能上传格式为jpeg/png/gif的图片'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v('// 限制上传文件大小'),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' isLt3M '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' file'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('size '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('/')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('1024')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('/')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('1024')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('<')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('3')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('if')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('!')]),
t._v('isLt3M'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n message'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('error')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'图片必须小于3MB!'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('if')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('isJpgOrPng '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('&&')]),
t._v(' isLt3M'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v('// 3. 正常上传逻辑'),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' fileName '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' file'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('name\n '),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v('// 3.1 调用oss接口, 将图片上传oss'),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v('// 3.2 将接口返回的url信息, 组装成fileList数据结构, 并更新state'),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' fileList '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('[')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v(' uid'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' fileName'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' status'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'done'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' url '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(']')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('setState')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n curImgUrl'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' url'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n fileList'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token comment' } }, [
t._v('// 3.3 将数据传给上层保存'),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('props'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('onChange '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('&&')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('props'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('onChange')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('fileList'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('return')]),
t._v(' isJpgOrPng '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('&&')]),
t._v(' isLt3M'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v('\n'),
]),
]),
]),
]);
},
[],
!1,
null,
null,
null,
);
s.default = p.exports;
},
},
]);

View File

@ -1,557 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[3],
{
308: function(t, n, e) {
'use strict';
e.d(n, 'd', function() {
return r;
}),
e.d(n, 'a', function() {
return a;
}),
e.d(n, 'i', function() {
return u;
}),
e.d(n, 'f', function() {
return l;
}),
e.d(n, 'g', function() {
return o;
}),
e.d(n, 'h', function() {
return c;
}),
e.d(n, 'b', function() {
return f;
}),
e.d(n, 'e', function() {
return h;
}),
e.d(n, 'k', function() {
return d;
}),
e.d(n, 'l', function() {
return p;
}),
e.d(n, 'c', function() {
return g;
}),
e.d(n, 'j', function() {
return m;
});
e(23), e(93), e(170), e(96), e(172), e(65), e(43), e(309), e(66), e(310), e(95);
var r = /#.*$/,
i = /\.(md|html)$/,
a = /\/$/,
u = /^[a-z]+:/i;
function s(t) {
return decodeURI(t)
.replace(r, '')
.replace(i, '');
}
function l(t) {
return u.test(t);
}
function o(t) {
return /^mailto:/.test(t);
}
function c(t) {
return /^tel:/.test(t);
}
function f(t) {
if (l(t)) return t;
var n = t.match(r),
e = n ? n[0] : '',
i = s(t);
return a.test(i) ? t : i + '.html' + e;
}
function h(t, n) {
var e = decodeURIComponent(t.hash),
i = (function(t) {
var n = t.match(r);
if (n) return n[0];
})(n);
return (!i || e === i) && s(t.path) === s(n);
}
function d(t, n, e) {
if (l(n)) return { type: 'external', path: n };
e &&
(n = (function(t, n, e) {
var r = t.charAt(0);
if ('/' === r) return t;
if ('?' === r || '#' === r) return n + t;
var i = n.split('/');
(e && i[i.length - 1]) || i.pop();
for (var a = t.replace(/^\//, '').split('/'), u = 0; u < a.length; u++) {
var s = a[u];
'..' === s ? i.pop() : '.' !== s && i.push(s);
}
'' !== i[0] && i.unshift('');
return i.join('/');
})(n, e));
for (var r = s(n), i = 0; i < t.length; i++)
if (s(t[i].regularPath) === r)
return Object.assign({}, t[i], { type: 'page', path: f(t[i].path) });
return (
console.error('[vuepress] No matching page found for sidebar item "'.concat(n, '"')), {}
);
}
function p(t, n, e, r) {
var i = e.pages,
a = e.themeConfig,
u = (r && a.locales && a.locales[r]) || a;
if ('auto' === (t.frontmatter.sidebar || u.sidebar || a.sidebar)) return v(t);
var s = u.sidebar || a.sidebar;
if (s) {
var l = (function(t, n) {
if (Array.isArray(n)) return { base: '/', config: n };
for (var e in n)
if (0 === ((r = t), /(\.html|\/)$/.test(r) ? r : r + '/').indexOf(encodeURI(e)))
return { base: e, config: n[e] };
var r;
return {};
})(n, s),
o = l.base,
c = l.config;
return 'auto' === c
? v(t)
: c
? c.map(function(t) {
return (function t(n, e, r) {
var i = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 1;
if ('string' == typeof n) return d(e, n, r);
if (Array.isArray(n)) return Object.assign(d(e, n[0], r), { title: n[1] });
var a = n.children || [];
return 0 === a.length && n.path
? Object.assign(d(e, n.path, r), { title: n.title })
: {
type: 'group',
path: n.path,
title: n.title,
sidebarDepth: n.sidebarDepth,
initialOpenGroupIndex: n.initialOpenGroupIndex,
children: a.map(function(n) {
return t(n, e, r, i + 1);
}),
collapsable: !1 !== n.collapsable,
};
})(t, i, o);
})
: [];
}
return [];
}
function v(t) {
var n = g(t.headers || []);
return [
{
type: 'group',
collapsable: !1,
title: t.title,
path: null,
children: n.map(function(n) {
return {
type: 'auto',
title: n.title,
basePath: t.path,
path: t.path + '#' + n.slug,
children: n.children || [],
};
}),
},
];
}
function g(t) {
var n;
return (
(t = t.map(function(t) {
return Object.assign({}, t);
})).forEach(function(t) {
2 === t.level ? (n = t) : n && (n.children || (n.children = [])).push(t);
}),
t.filter(function(t) {
return 2 === t.level;
})
);
}
function m(t) {
return Object.assign(t, { type: t.items && t.items.length ? 'links' : 'link' });
}
},
309: function(t, n, e) {
'use strict';
var r = e(167),
i = e(5),
a = e(13),
u = e(22),
s = e(168),
l = e(169);
r('match', 1, function(t, n, e) {
return [
function(n) {
var e = u(this),
r = null == n ? void 0 : n[t];
return void 0 !== r ? r.call(n, e) : new RegExp(n)[t](String(e));
},
function(t) {
var r = e(n, t, this);
if (r.done) return r.value;
var u = i(t),
o = String(this);
if (!u.global) return l(u, o);
var c = u.unicode;
u.lastIndex = 0;
for (var f, h = [], d = 0; null !== (f = l(u, o)); ) {
var p = String(f[0]);
(h[d] = p), '' === p && (u.lastIndex = s(o, a(u.lastIndex), c)), d++;
}
return 0 === d ? null : h;
},
];
});
},
310: function(t, n, e) {
'use strict';
var r = e(167),
i = e(171),
a = e(5),
u = e(22),
s = e(97),
l = e(168),
o = e(13),
c = e(169),
f = e(67),
h = e(1),
d = [].push,
p = Math.min,
v = !h(function() {
return !RegExp(4294967295, 'y');
});
r(
'split',
2,
function(t, n, e) {
var r;
return (
(r =
'c' == 'abbc'.split(/(b)*/)[1] ||
4 != 'test'.split(/(?:)/, -1).length ||
2 != 'ab'.split(/(?:ab)*/).length ||
4 != '.'.split(/(.?)(.?)/).length ||
'.'.split(/()()/).length > 1 ||
''.split(/.?/).length
? function(t, e) {
var r = String(u(this)),
a = void 0 === e ? 4294967295 : e >>> 0;
if (0 === a) return [];
if (void 0 === t) return [r];
if (!i(t)) return n.call(r, t, a);
for (
var s,
l,
o,
c = [],
h =
(t.ignoreCase ? 'i' : '') +
(t.multiline ? 'm' : '') +
(t.unicode ? 'u' : '') +
(t.sticky ? 'y' : ''),
p = 0,
v = new RegExp(t.source, h + 'g');
(s = f.call(v, r)) &&
!(
(l = v.lastIndex) > p &&
(c.push(r.slice(p, s.index)),
s.length > 1 && s.index < r.length && d.apply(c, s.slice(1)),
(o = s[0].length),
(p = l),
c.length >= a)
);
)
v.lastIndex === s.index && v.lastIndex++;
return (
p === r.length ? (!o && v.test('')) || c.push('') : c.push(r.slice(p)),
c.length > a ? c.slice(0, a) : c
);
}
: '0'.split(void 0, 0).length
? function(t, e) {
return void 0 === t && 0 === e ? [] : n.call(this, t, e);
}
: n),
[
function(n, e) {
var i = u(this),
a = null == n ? void 0 : n[t];
return void 0 !== a ? a.call(n, i, e) : r.call(String(i), n, e);
},
function(t, i) {
var u = e(r, t, this, i, r !== n);
if (u.done) return u.value;
var f = a(t),
h = String(this),
d = s(f, RegExp),
g = f.unicode,
m =
(f.ignoreCase ? 'i' : '') +
(f.multiline ? 'm' : '') +
(f.unicode ? 'u' : '') +
(v ? 'y' : 'g'),
b = new d(v ? f : '^(?:' + f.source + ')', m),
k = void 0 === i ? 4294967295 : i >>> 0;
if (0 === k) return [];
if (0 === h.length) return null === c(b, h) ? [h] : [];
for (var x = 0, _ = 0, y = []; _ < h.length; ) {
b.lastIndex = v ? _ : 0;
var C,
I = c(b, v ? h : h.slice(_));
if (null === I || (C = p(o(b.lastIndex + (v ? 0 : _)), h.length)) === x)
_ = l(h, _, g);
else {
if ((y.push(h.slice(x, _)), y.length === k)) return y;
for (var O = 1; O <= I.length - 1; O++)
if ((y.push(I[O]), y.length === k)) return y;
_ = x = C;
}
}
return y.push(h.slice(x)), y;
},
]
);
},
!v,
);
},
311: function(t, n, e) {
'use strict';
e(166), e(94), e(313);
var r = e(308),
i = {
name: 'NavLink',
props: { item: { required: !0 } },
computed: {
link: function() {
return Object(r.b)(this.item.link);
},
exact: function() {
var t = this;
return this.$site.locales
? Object.keys(this.$site.locales).some(function(n) {
return n === t.link;
})
: '/' === this.link;
},
isNonHttpURI: function() {
return Object(r.g)(this.link) || Object(r.h)(this.link);
},
isBlankTarget: function() {
return '_blank' === this.target;
},
isInternal: function() {
return !Object(r.f)(this.link) && !this.isBlankTarget;
},
target: function() {
return this.isNonHttpURI
? null
: this.item.target
? this.item.target
: Object(r.f)(this.link)
? '_blank'
: '';
},
rel: function() {
return this.isNonHttpURI || !1 === this.item.rel
? null
: this.item.rel
? this.item.rel
: this.isBlankTarget
? 'noopener noreferrer'
: null;
},
},
methods: {
focusoutAction: function() {
this.$emit('focusout');
},
},
},
a = e(42),
u = Object(a.a)(
i,
function() {
var t = this,
n = t.$createElement,
e = t._self._c || n;
return t.isInternal
? e(
'RouterLink',
{
staticClass: 'nav-link',
attrs: { to: t.link, exact: t.exact },
nativeOn: {
focusout: function(n) {
return t.focusoutAction(n);
},
},
},
[t._v('\n ' + t._s(t.item.text) + '\n')],
)
: e(
'a',
{
staticClass: 'nav-link external',
attrs: { href: t.link, target: t.target, rel: t.rel },
on: { focusout: t.focusoutAction },
},
[
t._v('\n ' + t._s(t.item.text) + '\n '),
t.isBlankTarget ? e('OutboundLink') : t._e(),
],
1,
);
},
[],
!1,
null,
null,
null,
);
n.a = u.exports;
},
313: function(t, n, e) {
'use strict';
var r = e(0),
i = e(314);
r(
{ target: 'String', proto: !0, forced: e(315)('link') },
{
link: function(t) {
return i(this, 'a', 'href', t);
},
},
);
},
314: function(t, n, e) {
var r = e(22),
i = /"/g;
t.exports = function(t, n, e, a) {
var u = String(r(t)),
s = '<' + n;
return (
'' !== e && (s += ' ' + e + '="' + String(a).replace(i, '&quot;') + '"'),
s + '>' + u + '</' + n + '>'
);
};
},
315: function(t, n, e) {
var r = e(1);
t.exports = function(t) {
return r(function() {
var n = ''[t]('"');
return n !== n.toLowerCase() || n.split('"').length > 3;
});
};
},
332: function(t, n, e) {},
371: function(t, n, e) {
t.exports = e.p + 'assets/img/logo.001d04e6.svg';
},
372: function(t, n, e) {
'use strict';
e(332);
},
381: function(t, n, e) {
'use strict';
e.r(n);
var r = {
name: 'Home',
components: { NavLink: e(311).a },
computed: {
data: function() {
return this.$page.frontmatter;
},
actionLink: function() {
return { link: this.data.actionLink, text: this.data.actionText };
},
},
},
i = (e(372), e(42)),
a = Object(i.a)(
r,
function() {
var t = this,
n = t.$createElement,
r = t._self._c || n;
return r(
'main',
{
staticClass: 'home',
attrs: { 'aria-labelledby': null !== t.data.heroText ? 'main-title' : null },
},
[
r('header', { staticClass: 'hero' }, [
null !== t.data.heroText
? r('h1', { attrs: { id: 'main-title' } }, [
r('img', { attrs: { src: e(371), alt: t.data.heroAlt || 'hero' } }),
r('span', [t._v(t._s(t.data.heroText || t.$title || 'Hello'))]),
])
: t._e(),
]),
t._v(' '),
t.data.features && t.data.features.length
? r('div', { staticClass: 'features' }, [
r(
'div',
{ staticClass: 'container' },
t._l(t.data.features, function(n, e) {
return r('div', { key: e, staticClass: 'feature' }, [
r('div', { staticClass: 'feature-index' }, [t._v(t._s(e + 1))]),
t._v(' '),
r('h2', [t._v(t._s(n.title))]),
t._v(' '),
r('p', [t._v(t._s(n.details))]),
]);
}),
0,
),
])
: t._e(),
t._v(' '),
r('Content', { staticClass: 'theme-default-content custom' }),
t._v(' '),
r('div', { staticClass: 'hero' }, [
t.data.actionText && t.data.actionLink
? r(
'p',
{ staticClass: 'action' },
[
r('NavLink', {
staticClass: 'action-button',
attrs: { item: t.actionLink },
}),
],
1,
)
: t._e(),
]),
t._v(' '),
t.data.footer
? r('div', { staticClass: 'footer' }, [
t._v('\n ' + t._s(t.data.footer) + '\n '),
])
: t._e(),
],
1,
);
},
[],
!1,
null,
null,
null,
);
n.default = a.exports;
},
},
]);

File diff suppressed because one or more lines are too long

View File

@ -1,262 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[31],
{
402: function(t, s, a) {
'use strict';
a.r(s);
var n = a(42),
r = Object(n.a)(
{},
function() {
var t = this,
s = t.$createElement,
a = t._self._c || s;
return a('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [
a('h1', { attrs: { id: '撤销-重做' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#撤销-重做' } }, [
t._v('#'),
]),
t._v(' 撤销/重做'),
]),
t._v(' '),
a('p', [
t._v(
'撤销重做我们主要使用了redux-undo这个库配合Dva使用具体使用方法参考如下操作',
),
]),
t._v(' '),
a('div', { staticClass: 'language-js extra-class' }, [
a('pre', { pre: !0, attrs: { class: 'language-js' } }, [
a('code', [
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('import')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v(' createLogger '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('from')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'redux-logger'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('import')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v(' message '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('from')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'antd'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('import')]),
t._v(' undoable'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v(' StateWithHistory '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('from')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'redux-undo'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('import')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v(' Reducer'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' AnyAction '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('from')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'redux'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('export')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' dva '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n config'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n onAction'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token function' } }, [
t._v('createLogger'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('onError')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token parameter' } }, [
t._v('e'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' Error'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n message'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('error')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('e'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('message'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('3')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token function-variable function' } }, [
t._v('onReducer'),
]),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token parameter' } }, [
t._v('reducer'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' Reducer'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('<')]),
t._v('any'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' AnyAction'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('>')]),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=>')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('let')]),
t._v(' undoReducer '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('undoable')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('reducer'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('return')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('function')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token parameter' } }, [
t._v('state'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' StateWithHistory'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('<')]),
t._v('any'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('>')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' action'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' AnyAction'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('let')]),
t._v(' newState '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token function' } }, [
t._v('undoReducer'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('state'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' action'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('let')]),
t._v(' router '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' newState'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('present'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('router '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('?')]),
t._v(' newState'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('present'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('router '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' newState'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('present'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('routing'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('return')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('...')]),
t._v('newState'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' router'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' router '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
]),
]),
]),
a('p', [
t._v(
'以上我们就实现了全局配置redux-undo在撤销重做按钮中我们就可以触发对应的方法来实现撤销重做的功能其次我们还使用了redux-logger来实现redux的日志输出。',
),
]),
]);
},
[],
!1,
null,
null,
null,
);
s.default = r.exports;
},
},
]);

View File

@ -1,55 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[32],
{
404: function(t, n, e) {
'use strict';
e.r(n);
var o = e(42),
r = Object(o.a)(
{},
function() {
var t = this,
n = t.$createElement,
e = t._self._c || n;
return e('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [
e('h1', { attrs: { id: '保存json' } }, [
e('a', { staticClass: 'header-anchor', attrs: { href: '#保存json' } }, [t._v('#')]),
t._v(' 保存json'),
]),
t._v(' '),
e('p', [
t._v(
'我们配置好H5页面之后如果希望其他人观看我们可以保存页面并发送链接。但是如果有多人协作的需求比如一个H5页面可能由多个人完成这个时候该怎么实现呢基于已有的方案我们可以采用socket实现多人协同编辑但是成本比较大所有这里我们提供了保存json的功能。',
),
]),
t._v(' '),
e('p', [
t._v(
'我们可以将配置好的页面导出为json发送给另一个人这样另一个人通过导入该json文件可以实时看到当前的页面这里还是依靠我们的页面渲染引擎viewEngine。实现思路也很简单可以在github[',
),
e(
'a',
{
attrs: {
href: 'https://github.com/MrXujiang/h5-Dooring',
target: '_blank',
rel: 'noopener noreferrer',
},
},
[t._v('https://github.com/MrXujiang/h5-Dooring'), e('OutboundLink')],
1,
),
t._v(']上参考体验。'),
]),
]);
},
[],
!1,
null,
null,
null,
);
n.default = r.exports;
},
},
]);

View File

@ -1,34 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[4],
{
333: function(t, e, n) {},
373: function(t, e, n) {
'use strict';
n(333);
},
408: function(t, e, n) {
'use strict';
n.r(e);
var i = {
functional: !0,
props: {
type: { type: String, default: 'tip' },
text: String,
vertical: { type: String, default: 'top' },
},
render: function(t, e) {
var n = e.props,
i = e.slots;
return t(
'span',
{ class: ['badge', n.type], style: { verticalAlign: n.vertical } },
n.text || i().default,
);
},
},
r = (n(373), n(42)),
p = Object(r.a)(i, void 0, void 0, !1, null, '15b7b770', null);
e.default = p.exports;
},
},
]);

View File

@ -1,40 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[5],
{
335: function(e, t, c) {},
375: function(e, t, c) {
'use strict';
c(335);
},
383: function(e, t, c) {
'use strict';
c.r(t);
var i = {
name: 'CodeBlock',
props: { title: { type: String, required: !0 }, active: { type: Boolean, default: !1 } },
},
n = (c(375), c(42)),
s = Object(n.a)(
i,
function() {
var e = this.$createElement;
return (this._self._c || e)(
'div',
{
staticClass: 'theme-code-block',
class: { 'theme-code-block__active': this.active },
},
[this._t('default')],
2,
);
},
[],
!1,
null,
'6d04095e',
null,
);
t.default = s.exports;
},
},
]);

View File

@ -1,106 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[6],
{
334: function(e, t, o) {},
374: function(e, t, o) {
'use strict';
o(334);
},
382: function(e, t, o) {
'use strict';
o.r(t);
o(23), o(93), o(65), o(95);
var a = {
name: 'CodeGroup',
data: function() {
return { codeTabs: [], activeCodeTabIndex: -1 };
},
watch: {
activeCodeTabIndex: function(e) {
this.codeTabs.forEach(function(e) {
e.elm.classList.remove('theme-code-block__active');
}),
this.codeTabs[e].elm.classList.add('theme-code-block__active');
},
},
mounted: function() {
var e = this;
(this.codeTabs = (this.$slots.default || [])
.filter(function(e) {
return Boolean(e.componentOptions);
})
.map(function(t, o) {
return (
'' === t.componentOptions.propsData.active && (e.activeCodeTabIndex = o),
{ title: t.componentOptions.propsData.title, elm: t.elm }
);
})),
-1 === this.activeCodeTabIndex &&
this.codeTabs.length > 0 &&
(this.activeCodeTabIndex = 0);
},
methods: {
changeCodeTab: function(e) {
this.activeCodeTabIndex = e;
},
},
},
c = (o(374), o(42)),
n = Object(c.a)(
a,
function() {
var e = this,
t = e.$createElement,
o = e._self._c || t;
return o(
'div',
{ staticClass: 'theme-code-group' },
[
o('div', { staticClass: 'theme-code-group__nav' }, [
o(
'ul',
{ staticClass: 'theme-code-group__ul' },
e._l(e.codeTabs, function(t, a) {
return o('li', { key: t.title, staticClass: 'theme-code-group__li' }, [
o(
'button',
{
staticClass: 'theme-code-group__nav-tab',
class: {
'theme-code-group__nav-tab-active': a === e.activeCodeTabIndex,
},
on: {
click: function(t) {
return e.changeCodeTab(a);
},
},
},
[e._v('\n ' + e._s(t.title) + '\n ')],
),
]);
}),
0,
),
]),
e._v(' '),
e._t('default'),
e._v(' '),
e.codeTabs.length < 1
? o('pre', { staticClass: 'pre-blank' }, [
e._v('// Make sure to add code blocks to your code group'),
])
: e._e(),
],
2,
);
},
[],
!1,
null,
'32c2d7ed',
null,
);
t.default = n.exports;
},
},
]);

View File

@ -1,44 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[7],
{
363: function(t, s, e) {
t.exports = e.p + 'assets/img/preview-flow.b37c7798.png';
},
364: function(t, s, e) {
t.exports = e.p + 'assets/img/preview-page.3ec86df5.png';
},
399: function(t, s, e) {
'use strict';
e.r(s);
var r = e(42),
a = Object(r.a)(
{},
function() {
var t = this,
s = t.$createElement,
r = t._self._c || s;
return r('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [
r('h1', { attrs: { id: '网页预览' } }, [
r('a', { staticClass: 'header-anchor', attrs: { href: '#网页预览' } }, [t._v('#')]),
t._v(' 网页预览'),
]),
t._v(' '),
r('p', [t._v('我们看看网页预览的工作流程:')]),
t._v(' '),
r('img', { attrs: { src: e(363), alt: 'foo' } }),
t._v(' '),
r('p', [t._v('前端预览界面:')]),
t._v(' '),
r('img', { attrs: { src: e(364), alt: 'foo' } }),
]);
},
[],
!1,
null,
null,
null,
);
s.default = a.exports;
},
},
]);

View File

@ -1,62 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[8],
{
366: function(t, s, a) {
t.exports = a.p + 'assets/img/template-ft.4f6e0d14.png';
},
367: function(t, s, a) {
t.exports = a.p + 'assets/img/template-bg.244b9ac7.png';
},
403: function(t, s, a) {
'use strict';
a.r(s);
var e = a(42),
r = Object(e.a)(
{},
function() {
var t = this,
s = t.$createElement,
e = t._self._c || s;
return e('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [
e('h2', { attrs: { id: '模板库实现思路' } }, [
e('a', { staticClass: 'header-anchor', attrs: { href: '#模板库实现思路' } }, [
t._v('#'),
]),
t._v(' 模板库实现思路'),
]),
t._v(' '),
e('p', [
t._v(
'我们目前开放了模板库功能一方面我们会定期配置行业模板另一个方面Dooring还支持用户自己配置模板可以一键保存到云端供用户使用。我们也可以将模板变成自己的页面共享给其他人。实现方式本质上是保存用户的配置信息上传到服务器中做存储在后台提供了管理模板的模块可以修改删除模板。如下图所示',
),
]),
t._v(' '),
e('h3', { attrs: { id: '模板前台展示' } }, [
e('a', { staticClass: 'header-anchor', attrs: { href: '#模板前台展示' } }, [
t._v('#'),
]),
t._v(' 模板前台展示:'),
]),
t._v(' '),
e('img', { attrs: { src: a(366), alt: 'foo' } }),
t._v(' '),
e('h3', { attrs: { id: '模板后台展示' } }, [
e('a', { staticClass: 'header-anchor', attrs: { href: '#模板后台展示' } }, [
t._v('#'),
]),
t._v(' 模板后台展示:'),
]),
t._v(' '),
e('img', { attrs: { src: a(367), alt: 'foo' } }),
]);
},
[],
!1,
null,
null,
null,
);
s.default = r.exports;
},
},
]);

View File

@ -1,92 +0,0 @@
(window.webpackJsonp = window.webpackJsonp || []).push([
[9],
{
358: function(t, o, r) {
t.exports = r.p + 'assets/img/logo.001d04e6.svg';
},
386: function(t, o, r) {
'use strict';
r.r(o);
var s = r(42),
v = Object(s.a)(
{},
function() {
var t = this,
o = t.$createElement,
s = t._self._c || o;
return s('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [
s('img', { attrs: { src: r(358), alt: 'foo' } }),
t._v(' '),
s('p', [
t._v(
'H5-Dooring 是一款功能强大,高可扩展的 H5 可视化页面配置解决方案,致力于提供一套简单方便、专业可靠、无限可能的 H5 落地页最佳实践。',
),
]),
t._v(' '),
s('h2', { attrs: { id: '功能特点' } }, [
s('a', { staticClass: 'header-anchor', attrs: { href: '#功能特点' } }, [t._v('#')]),
t._v(' 功能特点'),
]),
t._v(' '),
s('p', [
t._v('🎉 '),
s('strong', [t._v('可扩展,')]),
t._v(
' Dooring 实现了较为完整的业务闭环,并使其模块化,编辑器内部功能接口也全部可以对接不同服务端语言,实现了标准化接口。此外还支持自定义组件,二次开发,设计模板等能力,以满足功能和跨领域的分层需求。',
),
]),
t._v(' '),
s('p', [
t._v('📦 '),
s('strong', [t._v('开箱即用,')]),
t._v(' Dooring 内置了'),
s('strong', [t._v('表单渲染器、页面渲染器、动态加载内核')]),
t._v(
'等,仅需一套源码即可上手开发。并且还提供针对 React 的定制插件,内涵丰富的功能,可满足日常 80%的页面制作需求。',
),
]),
t._v(' '),
s('p', [
t._v('🚀 '),
s('strong', [t._v('大量自研,')]),
t._v(
' 包含整个编辑器架构、组件设计、文档、请求库封装,后台管理系统等,满足日常项目的周边需求。',
),
]),
t._v(' '),
s('p', [
t._v('🚄 '),
s('strong', [t._v('与时俱进,')]),
t._v(' 在满足需求的同时,我们也不会停止对新技术的探索。比如更多'),
s('strong', [
t._v('营销组件、业务功能后台管理可视化PC 页面编辑器,数据大屏定制'),
]),
t._v('等等。'),
]),
t._v(' '),
s('h2', { attrs: { id: '为什么选择-dooring' } }, [
s('a', { staticClass: 'header-anchor', attrs: { href: '#为什么选择-dooring' } }, [
t._v('#'),
]),
t._v(' 为什么选择 Dooring'),
]),
t._v(' '),
s('p', [
t._v('目前'),
s('strong', [t._v('github')]),
t._v(
'已超过 3000+star上线 2 个月累计 500+用户使用,解决完善了 100+问题,后续会持续迭代,更新,自研优秀,先进的 lowcode/nocode 解决方案。',
),
]),
]);
},
[],
!1,
null,
null,
null,
);
o.default = v.exports;
},
},
]);

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.7 KiB

View File

@ -1,38 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/18.81ac15ea.js" as="script"><link rel="preload" href="/doc/assets/js/2.a5de04a4.js" as="script"><link rel="preload" href="/doc/assets/js/3.ececc857.js" as="script"><link rel="preload" href="/doc/assets/js/20.3e91412b.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/13.96be485c.js"><link rel="prefetch" href="/doc/assets/js/14.c3ed6dd7.js"><link rel="prefetch" href="/doc/assets/js/15.751a6d56.js"><link rel="prefetch" href="/doc/assets/js/16.b025618a.js"><link rel="prefetch" href="/doc/assets/js/17.bf2e8f73.js"><link rel="prefetch" href="/doc/assets/js/19.67f92c26.js"><link rel="prefetch" href="/doc/assets/js/21.ab262167.js"><link rel="prefetch" href="/doc/assets/js/22.a7421118.js"><link rel="prefetch" href="/doc/assets/js/23.b2f0953d.js"><link rel="prefetch" href="/doc/assets/js/24.945f07e2.js"><link rel="prefetch" href="/doc/assets/js/25.55896e11.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/27.3c7e8c9e.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/29.27514922.js"><link rel="prefetch" href="/doc/assets/js/30.e6444117.js"><link rel="prefetch" href="/doc/assets/js/31.7251d101.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/7.4f98f3a5.js"><link rel="prefetch" href="/doc/assets/js/8.63e7a89b.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/doc/" aria-current="page" class="home-link router-link-exact-active router-link-active"><!----> <span class="site-name">h5-dooring</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/doc/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/doc/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/doc/zh/guide/" class="sidebar-link">基本介绍</a></li><li><a href="/doc/zh/guide/introduced.html" class="sidebar-link">doring如何工作</a></li><li><a href="/doc/zh/guide/startedQuickly.html" class="sidebar-link">快速上手</a></li><li><a href="/doc/zh/guide/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组件开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/componentDev/componentStructure.html" class="sidebar-link">组件结构</a></li><li><a href="/doc/zh/guide/componentDev/DSLAnalysis.html" class="sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="sidebar-link">动态加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>功能实现</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/functionRealization/templateLibrary.html" class="sidebar-link">模板库</a></li><li><a href="/doc/zh/guide/functionRealization/saveJson.html" class="sidebar-link">保存json</a></li><li><a href="/doc/zh/guide/functionRealization/download.html" class="sidebar-link">下载源码</a></li><li><a href="/doc/zh/guide/functionRealization/pagePreview.html" class="sidebar-link">网页预览</a></li><li><a href="/doc/zh/guide/functionRealization/machinePreview.html" class="sidebar-link">真机预览</a></li><li><a href="/doc/zh/guide/functionRealization/revocation.html" class="sidebar-link">撤销/重做</a></li><li><a href="/doc/zh/guide/functionRealization/screenshot.html" class="sidebar-link">截图功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>私有化部署和二次开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/deployDev/deploy.html" class="sidebar-link">私有化部署</a></li><li><a href="/doc/zh/guide/deployDev/deploy_v6.html" class="sidebar-link">v6.dooring私有化部署(临时)</a></li><li><a href="/doc/zh/guide/deployDev/dir.html" class="sidebar-link">服务端数据说明</a></li><li><a href="/doc/zh/guide/deployDev/https.html" class="sidebar-link">支持https</a></li><li><a href="/doc/zh/guide/deployDev/oss.html" class="sidebar-link">接入第三方oss</a></li><li><a href="/doc/zh/guide/deployDev/form.html" class="sidebar-link">获取Form组件的值数据</a></li><li><a href="/doc/zh/guide/deployDev/api.html" class="sidebar-link">API接口文档</a></li><li><a href="/doc/zh/guide/deployDev/log.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main aria-labelledby="main-title" class="home"><header class="hero"><h1 id="main-title"><img src="/doc/assets/img/logo.001d04e6.svg" alt="hero"><span>一款所见即所得的H5编辑器</span></h1></header> <div class="features"><div class="container"><div class="feature"><div class="feature-index">1</div> <h2>简洁方便</h2> <p>任何人只需傻瓜式拖拽或进行简单编辑即可生成精美的H5页面</p></div><div class="feature"><div class="feature-index">2</div> <h2>插拔式体验</h2> <p>产品以GPL协议开源, 授权后可植入任何系统,并支持二次开发</p></div><div class="feature"><div class="feature-index">3</div> <h2>持续迭代,无限可能</h2> <p>目前正在持续迭代中,后续可根据需求开发功能更强大的可视化系统</p></div></div></div> <div class="theme-default-content custom content__default"></div> <div class="hero"><p class="action"><a href="/doc/zh/guide/" class="nav-link action-button">
快速上手 →
</a></p></div> <div class="footer">
GPL Licensed | Copyright © 2020-present H5-Dooring
</div></main></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/18.81ac15ea.js" defer></script><script src="/doc/assets/js/2.a5de04a4.js" defer></script><script src="/doc/assets/js/3.ececc857.js" defer></script><script src="/doc/assets/js/20.3e91412b.js" defer></script>
</body>
</html>

View File

@ -1,34 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/18.81ac15ea.js" as="script"><link rel="preload" href="/doc/assets/js/2.a5de04a4.js" as="script"><link rel="preload" href="/doc/assets/js/21.ab262167.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/13.96be485c.js"><link rel="prefetch" href="/doc/assets/js/14.c3ed6dd7.js"><link rel="prefetch" href="/doc/assets/js/15.751a6d56.js"><link rel="prefetch" href="/doc/assets/js/16.b025618a.js"><link rel="prefetch" href="/doc/assets/js/17.bf2e8f73.js"><link rel="prefetch" href="/doc/assets/js/19.67f92c26.js"><link rel="prefetch" href="/doc/assets/js/20.3e91412b.js"><link rel="prefetch" href="/doc/assets/js/22.a7421118.js"><link rel="prefetch" href="/doc/assets/js/23.b2f0953d.js"><link rel="prefetch" href="/doc/assets/js/24.945f07e2.js"><link rel="prefetch" href="/doc/assets/js/25.55896e11.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/27.3c7e8c9e.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/29.27514922.js"><link rel="prefetch" href="/doc/assets/js/3.ececc857.js"><link rel="prefetch" href="/doc/assets/js/30.e6444117.js"><link rel="prefetch" href="/doc/assets/js/31.7251d101.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/7.4f98f3a5.js"><link rel="prefetch" href="/doc/assets/js/8.63e7a89b.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/doc/" class="home-link router-link-active"><!----> <span class="site-name">h5-dooring</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/doc/zh/guide/" aria-current="page" class="sidebar-link">基本介绍</a></li><li><a href="/doc/zh/guide/introduced.html" class="sidebar-link">doring如何工作</a></li><li><a href="/doc/zh/guide/startedQuickly.html" class="sidebar-link">快速上手</a></li><li><a href="/doc/zh/guide/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组件开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/componentDev/componentStructure.html" class="sidebar-link">组件结构</a></li><li><a href="/doc/zh/guide/componentDev/DSLAnalysis.html" class="sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="sidebar-link">动态加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>功能实现</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/functionRealization/templateLibrary.html" class="sidebar-link">模板库</a></li><li><a href="/doc/zh/guide/functionRealization/saveJson.html" class="sidebar-link">保存json</a></li><li><a href="/doc/zh/guide/functionRealization/download.html" class="sidebar-link">下载源码</a></li><li><a href="/doc/zh/guide/functionRealization/pagePreview.html" class="sidebar-link">网页预览</a></li><li><a href="/doc/zh/guide/functionRealization/machinePreview.html" class="sidebar-link">真机预览</a></li><li><a href="/doc/zh/guide/functionRealization/revocation.html" class="sidebar-link">撤销/重做</a></li><li><a href="/doc/zh/guide/functionRealization/screenshot.html" class="sidebar-link">截图功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>私有化部署和二次开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/deployDev/deploy.html" class="sidebar-link">私有化部署</a></li><li><a href="/doc/zh/guide/deployDev/deploy_v6.html" class="sidebar-link">v6.dooring私有化部署(临时)</a></li><li><a href="/doc/zh/guide/deployDev/dir.html" class="sidebar-link">服务端数据说明</a></li><li><a href="/doc/zh/guide/deployDev/https.html" class="sidebar-link">支持https</a></li><li><a href="/doc/zh/guide/deployDev/oss.html" class="sidebar-link">接入第三方oss</a></li><li><a href="/doc/zh/guide/deployDev/form.html" class="sidebar-link">获取Form组件的值数据</a></li><li><a href="/doc/zh/guide/deployDev/api.html" class="sidebar-link">API接口文档</a></li><li><a href="/doc/zh/guide/deployDev/log.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>正在建设中...</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/17/2021, 11:22:04 PM</span></div></footer> <!----> </main></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/18.81ac15ea.js" defer></script><script src="/doc/assets/js/2.a5de04a4.js" defer></script><script src="/doc/assets/js/21.ab262167.js" defer></script>
</body>
</html>

View File

@ -1,93 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DSL设计 | h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/18.81ac15ea.js" as="script"><link rel="preload" href="/doc/assets/js/2.a5de04a4.js" as="script"><link rel="preload" href="/doc/assets/js/22.a7421118.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/13.96be485c.js"><link rel="prefetch" href="/doc/assets/js/14.c3ed6dd7.js"><link rel="prefetch" href="/doc/assets/js/15.751a6d56.js"><link rel="prefetch" href="/doc/assets/js/16.b025618a.js"><link rel="prefetch" href="/doc/assets/js/17.bf2e8f73.js"><link rel="prefetch" href="/doc/assets/js/19.67f92c26.js"><link rel="prefetch" href="/doc/assets/js/20.3e91412b.js"><link rel="prefetch" href="/doc/assets/js/21.ab262167.js"><link rel="prefetch" href="/doc/assets/js/23.b2f0953d.js"><link rel="prefetch" href="/doc/assets/js/24.945f07e2.js"><link rel="prefetch" href="/doc/assets/js/25.55896e11.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/27.3c7e8c9e.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/29.27514922.js"><link rel="prefetch" href="/doc/assets/js/3.ececc857.js"><link rel="prefetch" href="/doc/assets/js/30.e6444117.js"><link rel="prefetch" href="/doc/assets/js/31.7251d101.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/7.4f98f3a5.js"><link rel="prefetch" href="/doc/assets/js/8.63e7a89b.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/doc/" class="home-link router-link-active"><!----> <span class="site-name">h5-dooring</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/doc/zh/guide/" aria-current="page" class="sidebar-link">基本介绍</a></li><li><a href="/doc/zh/guide/introduced.html" class="sidebar-link">doring如何工作</a></li><li><a href="/doc/zh/guide/startedQuickly.html" class="sidebar-link">快速上手</a></li><li><a href="/doc/zh/guide/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>组件开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/componentDev/componentStructure.html" class="sidebar-link">组件结构</a></li><li><a href="/doc/zh/guide/componentDev/DSLAnalysis.html" aria-current="page" class="active sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="sidebar-link">动态加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>功能实现</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/functionRealization/templateLibrary.html" class="sidebar-link">模板库</a></li><li><a href="/doc/zh/guide/functionRealization/saveJson.html" class="sidebar-link">保存json</a></li><li><a href="/doc/zh/guide/functionRealization/download.html" class="sidebar-link">下载源码</a></li><li><a href="/doc/zh/guide/functionRealization/pagePreview.html" class="sidebar-link">网页预览</a></li><li><a href="/doc/zh/guide/functionRealization/machinePreview.html" class="sidebar-link">真机预览</a></li><li><a href="/doc/zh/guide/functionRealization/revocation.html" class="sidebar-link">撤销/重做</a></li><li><a href="/doc/zh/guide/functionRealization/screenshot.html" class="sidebar-link">截图功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>私有化部署和二次开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/deployDev/deploy.html" class="sidebar-link">私有化部署</a></li><li><a href="/doc/zh/guide/deployDev/deploy_v6.html" class="sidebar-link">v6.dooring私有化部署(临时)</a></li><li><a href="/doc/zh/guide/deployDev/dir.html" class="sidebar-link">服务端数据说明</a></li><li><a href="/doc/zh/guide/deployDev/https.html" class="sidebar-link">支持https</a></li><li><a href="/doc/zh/guide/deployDev/oss.html" class="sidebar-link">接入第三方oss</a></li><li><a href="/doc/zh/guide/deployDev/form.html" class="sidebar-link">获取Form组件的值数据</a></li><li><a href="/doc/zh/guide/deployDev/api.html" class="sidebar-link">API接口文档</a></li><li><a href="/doc/zh/guide/deployDev/log.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="dsl设计"><a href="#dsl设计" class="header-anchor">#</a> DSL设计</h1> <p>DSL层主要约定了Dooring组件的数据协议包括组件的可编辑属性、编辑类型、初始值等之所以定义一致的协议层主要是方便后期的组件扩展配置后移有助于不同后端语言开发和数据存储接下来我们看看header组件的schema。</p> <p>1.editData 可编辑的属性类型DSL</p> <p>2.config 可编辑组件的默认属性</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> Header<span class="token operator">:</span> IHeaderSchema <span class="token operator">=</span> <span class="token punctuation">{</span>
editData<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
key<span class="token operator">:</span> <span class="token string">'bgColor'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'背景色'</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">'Color'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
key<span class="token operator">:</span> <span class="token string">'height'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'高度'</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">'Number'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
key<span class="token operator">:</span> <span class="token string">'logo'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'logo'</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">'Upload'</span><span class="token punctuation">,</span>
isCrop<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
cropRate<span class="token operator">:</span> <span class="token number">1000</span> <span class="token operator">/</span> <span class="token number">618</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
key<span class="token operator">:</span> <span class="token string">'logoText'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'logo文字'</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">'Text'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
key<span class="token operator">:</span> <span class="token string">'color'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'文字颜色'</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">'Color'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
key<span class="token operator">:</span> <span class="token string">'fontSize'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'文字大小'</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">'Number'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
config<span class="token operator">:</span> <span class="token punctuation">{</span>
bgColor<span class="token operator">:</span> <span class="token string">'rgba(245,245,245,1)'</span><span class="token punctuation">,</span>
logo<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
uid<span class="token operator">:</span> <span class="token string">'001'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'image.png'</span><span class="token punctuation">,</span>
status<span class="token operator">:</span> <span class="token string">'done'</span><span class="token punctuation">,</span>
url<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>serverUrl<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/uploads/3_1740be8a482.png</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
logoText<span class="token operator">:</span> <span class="token string">'页头Header'</span><span class="token punctuation">,</span>
fontSize<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
color<span class="token operator">:</span> <span class="token string">'rgba(47,84,235,1)'</span><span class="token punctuation">,</span>
height<span class="token operator">:</span> <span class="token number">50</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p>由以上代码可知我们可以在editData属性中给组件添加可编辑的属性比如背景图然后再component中接受属性从而设置样式。</p> <p>在config属性中我们可以设置组件默认属性值和editData中每一项的key一一对应。</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/17/2021, 9:57:34 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/doc/zh/guide/componentDev/componentStructure.html" class="prev">
组件结构
</a></span> <span class="next"><a href="/doc/zh/guide/componentDev/dynamicLoading.html">
动态加载
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/18.81ac15ea.js" defer></script><script src="/doc/assets/js/2.a5de04a4.js" defer></script><script src="/doc/assets/js/22.a7421118.js" defer></script>
</body>
</html>

View File

@ -1,153 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/18.81ac15ea.js" as="script"><link rel="preload" href="/doc/assets/js/2.a5de04a4.js" as="script"><link rel="preload" href="/doc/assets/js/23.b2f0953d.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/13.96be485c.js"><link rel="prefetch" href="/doc/assets/js/14.c3ed6dd7.js"><link rel="prefetch" href="/doc/assets/js/15.751a6d56.js"><link rel="prefetch" href="/doc/assets/js/16.b025618a.js"><link rel="prefetch" href="/doc/assets/js/17.bf2e8f73.js"><link rel="prefetch" href="/doc/assets/js/19.67f92c26.js"><link rel="prefetch" href="/doc/assets/js/20.3e91412b.js"><link rel="prefetch" href="/doc/assets/js/21.ab262167.js"><link rel="prefetch" href="/doc/assets/js/22.a7421118.js"><link rel="prefetch" href="/doc/assets/js/24.945f07e2.js"><link rel="prefetch" href="/doc/assets/js/25.55896e11.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/27.3c7e8c9e.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/29.27514922.js"><link rel="prefetch" href="/doc/assets/js/3.ececc857.js"><link rel="prefetch" href="/doc/assets/js/30.e6444117.js"><link rel="prefetch" href="/doc/assets/js/31.7251d101.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/7.4f98f3a5.js"><link rel="prefetch" href="/doc/assets/js/8.63e7a89b.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/doc/" class="home-link router-link-active"><!----> <span class="site-name">h5-dooring</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/doc/zh/guide/" aria-current="page" class="sidebar-link">基本介绍</a></li><li><a href="/doc/zh/guide/introduced.html" class="sidebar-link">doring如何工作</a></li><li><a href="/doc/zh/guide/startedQuickly.html" class="sidebar-link">快速上手</a></li><li><a href="/doc/zh/guide/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>组件开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/componentDev/componentStructure.html" aria-current="page" class="active sidebar-link">组件结构</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/doc/zh/guide/componentDev/componentStructure.html#组件设计" class="sidebar-link">组件设计</a></li><li class="sidebar-sub-header"><a href="/doc/zh/guide/componentDev/componentStructure.html#template设计" class="sidebar-link">template设计</a></li><li class="sidebar-sub-header"><a href="/doc/zh/guide/componentDev/componentStructure.html#schema设计" class="sidebar-link">schema设计</a></li></ul></li><li><a href="/doc/zh/guide/componentDev/DSLAnalysis.html" class="sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="sidebar-link">动态加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>功能实现</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/functionRealization/templateLibrary.html" class="sidebar-link">模板库</a></li><li><a href="/doc/zh/guide/functionRealization/saveJson.html" class="sidebar-link">保存json</a></li><li><a href="/doc/zh/guide/functionRealization/download.html" class="sidebar-link">下载源码</a></li><li><a href="/doc/zh/guide/functionRealization/pagePreview.html" class="sidebar-link">网页预览</a></li><li><a href="/doc/zh/guide/functionRealization/machinePreview.html" class="sidebar-link">真机预览</a></li><li><a href="/doc/zh/guide/functionRealization/revocation.html" class="sidebar-link">撤销/重做</a></li><li><a href="/doc/zh/guide/functionRealization/screenshot.html" class="sidebar-link">截图功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>私有化部署和二次开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/deployDev/deploy.html" class="sidebar-link">私有化部署</a></li><li><a href="/doc/zh/guide/deployDev/deploy_v6.html" class="sidebar-link">v6.dooring私有化部署(临时)</a></li><li><a href="/doc/zh/guide/deployDev/dir.html" class="sidebar-link">服务端数据说明</a></li><li><a href="/doc/zh/guide/deployDev/https.html" class="sidebar-link">支持https</a></li><li><a href="/doc/zh/guide/deployDev/oss.html" class="sidebar-link">接入第三方oss</a></li><li><a href="/doc/zh/guide/deployDev/form.html" class="sidebar-link">获取Form组件的值数据</a></li><li><a href="/doc/zh/guide/deployDev/api.html" class="sidebar-link">API接口文档</a></li><li><a href="/doc/zh/guide/deployDev/log.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="组件结构"><a href="#组件结构" class="header-anchor">#</a> 组件结构</h1> <p>dooring的组件设计包含以下3个部分组件</p> <p>1、component 组件主体</p> <p>2、schema 组件的DSL结构协议层</p> <p>3、template 定义了组件的类型、外观、从属关系后期考虑纳入schema</p> <p>接下来我会介绍一个基本的组件主体设计以为template设计在下一章会具体介绍schema部分。</p> <h2 id="组件设计"><a href="#组件设计" class="header-anchor">#</a> 组件设计</h2> <p>我们这里拿基本的header组件来举例如下是header组件的代码</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">interface</span> <span class="token class-name">HeaderPropTypes</span> <span class="token keyword">extends</span> <span class="token class-name">IHeaderConfig</span> <span class="token punctuation">{</span>
isTpl<span class="token operator">:</span> boolean<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> Header <span class="token operator">=</span> <span class="token function">memo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token operator">:</span> HeaderPropTypes</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> bgColor<span class="token punctuation">,</span> logo<span class="token punctuation">,</span> logoText<span class="token punctuation">,</span> fontSize<span class="token punctuation">,</span> color <span class="token punctuation">}</span> <span class="token operator">=</span> props<span class="token punctuation">;</span>
<span class="token keyword">return</span> props<span class="token punctuation">.</span>isTpl <span class="token operator">?</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
&lt; img style=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token plain-text"> src=</span><span class="token punctuation">{</span>logos<span class="token punctuation">}</span><span class="token plain-text"> alt=&quot;&quot; /&gt;
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>header<span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> bgColor <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>logo<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
&lt; img src=</span><span class="token punctuation">{</span>logo <span class="token operator">&amp;&amp;</span> logo<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>url<span class="token punctuation">}</span><span class="token plain-text"> alt=</span><span class="token punctuation">{</span>logoText<span class="token punctuation">}</span><span class="token plain-text"> /&gt;
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> fontSize<span class="token punctuation">,</span> color <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token punctuation">{</span>logoText<span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>header</span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>我们只需要按照上面的方式编写组件即可props是DSL定义的数据层用来控制组件的shape也就是组件的表现。我们看看header对应的template。</p> <h2 id="template设计"><a href="#template设计" class="header-anchor">#</a> template设计</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> template <span class="token operator">=</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> <span class="token string">'Header'</span><span class="token punctuation">,</span>
h<span class="token operator">:</span> <span class="token number">28</span><span class="token punctuation">,</span>
displayName<span class="token operator">:</span> <span class="token string">'页头组件'</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> template<span class="token punctuation">;</span>
</code></pre></div><p>以上就是我们template的结构type用来定义组件的类型方便渲染器动态查找h代表组件的初始化高度我们可以自由设置。displayName是组件的中文名用来在左侧组件面板中展示方便用户理解我们可以在template中自定义更多辅助信息方便使用者更高效的使用我们的编辑器。</p> <h2 id="schema设计"><a href="#schema设计" class="header-anchor">#</a> schema设计</h2> <p>开发一个自定义组件需要包含3部分, <code>Component</code>, <code>Schema</code><code>Template</code>. 接下来我们看一下 <code>Header</code> 组件的 <code>Schema</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>
IColorConfigType<span class="token punctuation">,</span>
INumberConfigType<span class="token punctuation">,</span>
ITextConfigType<span class="token punctuation">,</span>
IUploadConfigType<span class="token punctuation">,</span>
TColorDefaultType<span class="token punctuation">,</span>
TNumberDefaultType<span class="token punctuation">,</span>
TTextDefaultType<span class="token punctuation">,</span>
TUploadDefaultType<span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components/FormComponents/types'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> baseConfig<span class="token punctuation">,</span> baseDefault<span class="token punctuation">,</span> ICommonBaseType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../../common'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> type THeaderEditData <span class="token operator">=</span> Array<span class="token operator">&lt;</span>
IColorConfigType <span class="token operator">|</span> INumberConfigType <span class="token operator">|</span> IUploadConfigType <span class="token operator">|</span> ITextConfigType
<span class="token operator">&gt;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">IHeaderConfig</span> <span class="token keyword">extends</span> <span class="token class-name">ICommonBaseType</span> <span class="token punctuation">{</span>
bgColor<span class="token operator">:</span> TColorDefaultType<span class="token punctuation">;</span>
logo<span class="token operator">:</span> TUploadDefaultType<span class="token punctuation">;</span>
logoText<span class="token operator">:</span> TTextDefaultType<span class="token punctuation">;</span>
fontSize<span class="token operator">:</span> TNumberDefaultType<span class="token punctuation">;</span>
color<span class="token operator">:</span> TColorDefaultType<span class="token punctuation">;</span>
height<span class="token operator">:</span> TNumberDefaultType<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">IHeaderSchema</span> <span class="token punctuation">{</span>
editData<span class="token operator">:</span> THeaderEditData<span class="token punctuation">;</span>
config<span class="token operator">:</span> IHeaderConfig<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> Header<span class="token operator">:</span> IHeaderSchema <span class="token operator">=</span> <span class="token punctuation">{</span>
editData<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token operator">...</span>baseConfig<span class="token punctuation">,</span>
<span class="token punctuation">{</span>
key<span class="token operator">:</span> <span class="token string">'bgColor'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'背景色'</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">'Color'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
key<span class="token operator">:</span> <span class="token string">'height'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'高度'</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">'Number'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
key<span class="token operator">:</span> <span class="token string">'logo'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'logo'</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">'Upload'</span><span class="token punctuation">,</span>
isCrop<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
cropRate<span class="token operator">:</span> <span class="token number">1000</span> <span class="token operator">/</span> <span class="token number">618</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
key<span class="token operator">:</span> <span class="token string">'logoText'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'logo文字'</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">'Text'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
key<span class="token operator">:</span> <span class="token string">'color'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'文字颜色'</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">'Color'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
key<span class="token operator">:</span> <span class="token string">'fontSize'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'文字大小'</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">'Number'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
config<span class="token operator">:</span> <span class="token punctuation">{</span>
bgColor<span class="token operator">:</span> <span class="token string">'rgba(0,0,0,1)'</span><span class="token punctuation">,</span>
logo<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
uid<span class="token operator">:</span> <span class="token string">'001'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'image.png'</span><span class="token punctuation">,</span>
status<span class="token operator">:</span> <span class="token string">'done'</span><span class="token punctuation">,</span>
url<span class="token operator">:</span> <span class="token string">'http://49.234.61.19/uploads/3_1740be8a482.png'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
logoText<span class="token operator">:</span> <span class="token string">'页头Header'</span><span class="token punctuation">,</span>
fontSize<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
color<span class="token operator">:</span> <span class="token string">'rgba(255,255,255,1)'</span><span class="token punctuation">,</span>
height<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
<span class="token operator">...</span>baseDefault<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> Header<span class="token punctuation">;</span>
</code></pre></div><p><code>editData</code>表示组件的可编辑属性, 我们可以自定义哪些组件可编辑. <code>config</code>为组件接收的属性, 和<code>editData</code>数组项中的<code>key</code>一一对应.</p> <h3 id="组件编辑区属性类型"><a href="#组件编辑区属性类型" class="header-anchor">#</a> 组件编辑区属性类型</h3> <p><code>Dooring</code>组件编辑面板有如下对应编辑类型:</p> <ul><li>Upload 上传组件</li> <li>Text 文本框</li> <li>RichText 富文本</li> <li>TextArea 多行文本</li> <li>Number 数字输入框</li> <li>DataList 列表编辑器</li> <li>FileList 文件列表编辑器</li> <li>InteractionData 交互设置</li> <li>Color 颜色面板</li> <li>MutiText 多文本</li> <li>Select 选择下拉框</li> <li>Radio 单选框</li> <li>Switch 开关切换</li> <li>CardPicker 卡片面板</li> <li>Table 表格编辑器</li> <li>Pos 坐标编辑器</li> <li>FormItems 表单设计器</li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">4/27/2021, 1:17:02 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/doc/zh/guide/directoryStructure.html" class="prev">
目录结构
</a></span> <span class="next"><a href="/doc/zh/guide/componentDev/DSLAnalysis.html">
DSL设计
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/18.81ac15ea.js" defer></script><script src="/doc/assets/js/2.a5de04a4.js" defer></script><script src="/doc/assets/js/23.b2f0953d.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -1,323 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/18.81ac15ea.js" as="script"><link rel="preload" href="/doc/assets/js/2.a5de04a4.js" as="script"><link rel="preload" href="/doc/assets/js/24.945f07e2.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/13.96be485c.js"><link rel="prefetch" href="/doc/assets/js/14.c3ed6dd7.js"><link rel="prefetch" href="/doc/assets/js/15.751a6d56.js"><link rel="prefetch" href="/doc/assets/js/16.b025618a.js"><link rel="prefetch" href="/doc/assets/js/17.bf2e8f73.js"><link rel="prefetch" href="/doc/assets/js/19.67f92c26.js"><link rel="prefetch" href="/doc/assets/js/20.3e91412b.js"><link rel="prefetch" href="/doc/assets/js/21.ab262167.js"><link rel="prefetch" href="/doc/assets/js/22.a7421118.js"><link rel="prefetch" href="/doc/assets/js/23.b2f0953d.js"><link rel="prefetch" href="/doc/assets/js/25.55896e11.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/27.3c7e8c9e.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/29.27514922.js"><link rel="prefetch" href="/doc/assets/js/3.ececc857.js"><link rel="prefetch" href="/doc/assets/js/30.e6444117.js"><link rel="prefetch" href="/doc/assets/js/31.7251d101.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/7.4f98f3a5.js"><link rel="prefetch" href="/doc/assets/js/8.63e7a89b.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/doc/" class="home-link router-link-active"><!----> <span class="site-name">h5-dooring</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/doc/zh/guide/" aria-current="page" class="sidebar-link">基本介绍</a></li><li><a href="/doc/zh/guide/introduced.html" class="sidebar-link">doring如何工作</a></li><li><a href="/doc/zh/guide/startedQuickly.html" class="sidebar-link">快速上手</a></li><li><a href="/doc/zh/guide/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组件开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/componentDev/componentStructure.html" class="sidebar-link">组件结构</a></li><li><a href="/doc/zh/guide/componentDev/DSLAnalysis.html" class="sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="sidebar-link">动态加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>功能实现</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/functionRealization/templateLibrary.html" class="sidebar-link">模板库</a></li><li><a href="/doc/zh/guide/functionRealization/saveJson.html" class="sidebar-link">保存json</a></li><li><a href="/doc/zh/guide/functionRealization/download.html" class="sidebar-link">下载源码</a></li><li><a href="/doc/zh/guide/functionRealization/pagePreview.html" class="sidebar-link">网页预览</a></li><li><a href="/doc/zh/guide/functionRealization/machinePreview.html" class="sidebar-link">真机预览</a></li><li><a href="/doc/zh/guide/functionRealization/revocation.html" class="sidebar-link">撤销/重做</a></li><li><a href="/doc/zh/guide/functionRealization/screenshot.html" class="sidebar-link">截图功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>私有化部署和二次开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/deployDev/deploy.html" class="sidebar-link">私有化部署</a></li><li><a href="/doc/zh/guide/deployDev/deploy_v6.html" class="sidebar-link">v6.dooring私有化部署(临时)</a></li><li><a href="/doc/zh/guide/deployDev/dir.html" class="sidebar-link">服务端数据说明</a></li><li><a href="/doc/zh/guide/deployDev/https.html" class="sidebar-link">支持https</a></li><li><a href="/doc/zh/guide/deployDev/oss.html" class="sidebar-link">接入第三方oss</a></li><li><a href="/doc/zh/guide/deployDev/form.html" class="sidebar-link">获取Form组件的值数据</a></li><li><a href="/doc/zh/guide/deployDev/api.html" aria-current="page" class="active sidebar-link">API接口文档</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/doc/zh/guide/deployDev/api.html#用户相关" class="sidebar-link">用户相关</a></li><li class="sidebar-sub-header"><a href="/doc/zh/guide/deployDev/api.html#h5页面管理" class="sidebar-link">H5页面管理</a></li><li class="sidebar-sub-header"><a href="/doc/zh/guide/deployDev/api.html#h5表单数据管理" class="sidebar-link">H5表单数据管理</a></li><li class="sidebar-sub-header"><a href="/doc/zh/guide/deployDev/api.html#模版管理" class="sidebar-link">模版管理</a></li><li class="sidebar-sub-header"><a href="/doc/zh/guide/deployDev/api.html#文件上传" class="sidebar-link">文件上传</a></li><li class="sidebar-sub-header"><a href="/doc/zh/guide/deployDev/api.html#数据统计" class="sidebar-link">数据统计</a></li></ul></li><li><a href="/doc/zh/guide/deployDev/log.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p><strong>H5-Dooring</strong>后端部分主要使用 <code>Nodejs</code> 开发, 为了满足更多定制化需求和服务的可移植性, 特意编写了API接口文档,
方便大家使用不同的后端语言实现服务接入.</p> <ul><li>注意: 接口统一前缀为<code>/api/v0</code></li></ul> <h2 id="用户相关"><a href="#用户相关" class="header-anchor">#</a> 用户相关</h2> <h3 id="用户登录"><a href="#用户登录" class="header-anchor">#</a> 用户登录</h3> <p>用户登录接口</p> <ul><li><code>POST</code> /vip/check</li></ul> <table><thead><tr><th>参数名</th> <th style="text-align:center;">是否必选</th> <th style="text-align:center;">类型</th> <th style="text-align:right;">说明</th></tr></thead> <tbody><tr><td>n</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">用户名</td></tr> <tr><td>co</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">密码</td></tr></tbody></table> <p>返回示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;result&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">&quot;n&quot;</span><span class="token operator">:</span> <span class="token string">&quot;test&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;od&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">&quot;h5&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;t&quot;</span><span class="token operator">:</span> <span class="token string">&quot;23242ED&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;n&quot;</span><span class="token operator">:</span> <span class="token string">&quot;测试页面&quot;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">&quot;rp&quot;</span><span class="token operator">:</span> <span class="token string">&quot;AAAAA&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;maxage&quot;</span><span class="token operator">:</span> <span class="token number">300000</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="注销登录"><a href="#注销登录" class="header-anchor">#</a> 注销登录</h3> <p>注销接口</p> <ul><li><code>POST</code> /vip/checkout</li></ul> <p>返回示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;result&quot;</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span>
<span class="token property">&quot;msg&quot;</span><span class="token operator">:</span> <span class="token string">&quot;退出成功&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="权限控制"><a href="#权限控制" class="header-anchor">#</a> 权限控制</h3> <p>不同用户级别所访问的页面权限不同, 这块可结合服务端已有代码设计属于自己的权限字段, 地址为<code>server/src/router</code></p> <h3 id="用户列表"><a href="#用户列表" class="header-anchor">#</a> 用户列表</h3> <p>获取用户列表接口</p> <ul><li><code>GET</code> /vip/all</li></ul> <p>获取用户列表需要账号满足以下条件:</p> <ul><li>已登录</li> <li>为超级管理员</li></ul> <p>返回示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;id&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;n&quot;</span><span class="token operator">:</span> <span class="token string">&quot;test&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;co&quot;</span><span class="token operator">:</span> <span class="token string">&quot;123456&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;od&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">&quot;h5&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;t&quot;</span><span class="token operator">:</span> <span class="token string">&quot;23242ED&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;n&quot;</span><span class="token operator">:</span> <span class="token string">&quot;测试页面&quot;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">&quot;wx&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Mr_xuxiaoxi&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;rp&quot;</span><span class="token operator">:</span> <span class="token string">&quot;AAAAA&quot;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</code></pre></div><h3 id="添加用户"><a href="#添加用户" class="header-anchor">#</a> 添加用户</h3> <p>添加用户接口</p> <ul><li><code>POST</code> /vip/add</li></ul> <p>先决条件:</p> <ul><li>用户已登陆</li> <li>为超级管理员</li></ul> <table><thead><tr><th>参数名</th> <th style="text-align:center;">是否必选</th> <th style="text-align:center;">类型</th> <th style="text-align:right;">说明</th></tr></thead> <tbody><tr><td>nickname</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">用户名</td></tr> <tr><td>wx</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">微信号</td></tr> <tr><td>co</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">密码</td></tr></tbody></table> <p>注: co是由笔者写的<code>加密算法</code>实现, 不需要手动填写, 详情见<code>dooirng</code>后台管理/用户管理页面.</p> <p>返回示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;id&quot;</span><span class="token operator">:</span> <span class="token string">&quot;3422EF&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;n&quot;</span><span class="token operator">:</span> <span class="token string">&quot;test&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;wx&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Mr_xuxiaoxi&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;co&quot;</span><span class="token operator">:</span> <span class="token string">&quot;123456&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;od&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">&quot;h5&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">&quot;tpl&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">&quot;rp&quot;</span><span class="token operator">:</span> <span class="token string">&quot;AAAAA&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;h5Num&quot;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
<span class="token property">&quot;tplNum&quot;</span><span class="token operator">:</span> <span class="token number">3</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="生成登录码"><a href="#生成登录码" class="header-anchor">#</a> 生成登录码</h3> <p>生成登录码接口</p> <ul><li><code>GET</code> /vip/gcode</li></ul> <p>先决条件:</p> <ul><li>用户已登陆</li> <li>为超级管理员</li></ul> <p>注: 生成登录码是由笔者写的<code>加密算法</code>实现, 不需要手动实现, 如果有自定义需求, 可以自行二次开发实现.</p> <p>返回示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;co&quot;</span><span class="token operator">:</span> <span class="token string">&quot;1x2fgggteee3456_zdd4&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><p><code>说明:</code> 为了保护用户信息安全, 返回的登录码是加密后的密文, 会调用笔者写的<code>xib.xip</code>方法进行加密, 如果想看到原始密码, 需要调用<code>xib.uxip</code>进行解密.</p> <h3 id="获取用户真实密码"><a href="#获取用户真实密码" class="header-anchor">#</a> 获取用户真实密码</h3> <p>获取用户真实密码接口</p> <ul><li><code>GET</code> /vip/gcode/get</li></ul> <p>先决条件:</p> <ul><li>用户已登陆</li> <li>为超级管理员</li></ul> <table><thead><tr><th>参数名</th> <th style="text-align:center;">是否必选</th> <th style="text-align:center;">类型</th> <th style="text-align:right;">说明</th></tr></thead> <tbody><tr><td>co</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">加密后的密码</td></tr></tbody></table> <p>返回示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;co&quot;</span><span class="token operator">:</span> <span class="token string">&quot;12345678&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="修改用户信息"><a href="#修改用户信息" class="header-anchor">#</a> 修改用户信息</h3> <p>修改用户接口</p> <ul><li><code>POST</code> /vip/edit</li></ul> <p>先决条件:</p> <ul><li>用户已登陆</li> <li>为超级管理员</li></ul> <table><thead><tr><th>参数名</th> <th style="text-align:center;">是否必选</th> <th style="text-align:center;">类型</th> <th style="text-align:right;">说明</th></tr></thead> <tbody><tr><td>id</td> <td style="text-align:center;">false</td> <td style="text-align:center;">string</td> <td style="text-align:right;">用户ID</td></tr> <tr><td>nickname</td> <td style="text-align:center;">false</td> <td style="text-align:center;">string</td> <td style="text-align:right;">用户名</td></tr> <tr><td>co</td> <td style="text-align:center;">false</td> <td style="text-align:center;">string</td> <td style="text-align:right;">登录码</td></tr> <tr><td>wx</td> <td style="text-align:center;">false</td> <td style="text-align:center;">string</td> <td style="text-align:right;">微信号</td></tr></tbody></table> <p>返回示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;state&quot;</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
<span class="token property">&quot;result&quot;</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span>
<span class="token property">&quot;msg&quot;</span><span class="token operator">:</span> <span class="token string">&quot;修改成功&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="删除用户"><a href="#删除用户" class="header-anchor">#</a> 删除用户</h3> <p>删除用户接口</p> <ul><li><code>DELETE</code> /vip/del</li></ul> <p>先决条件:</p> <ul><li>用户已登陆</li> <li>为超级管理员</li></ul> <table><thead><tr><th>参数名</th> <th style="text-align:center;">是否必选</th> <th style="text-align:center;">类型</th> <th style="text-align:right;">说明</th></tr></thead> <tbody><tr><td>id</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">用户ID</td></tr> <tr><td>wx</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">微信号</td></tr> <tr><td>n</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">用户名</td></tr></tbody></table> <p>返回示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;state&quot;</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
<span class="token property">&quot;result&quot;</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span>
<span class="token property">&quot;msg&quot;</span><span class="token operator">:</span> <span class="token string">&quot;删除成功&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="h5页面管理"><a href="#h5页面管理" class="header-anchor">#</a> H5页面管理</h2> <h3 id="获取h5数据"><a href="#获取h5数据" class="header-anchor">#</a> 获取H5数据</h3> <ul><li><code>GET</code> /visible/h5/get</li></ul> <p>先决条件:</p> <ul><li>用户已登陆</li></ul> <table><thead><tr><th>参数名</th> <th style="text-align:center;">是否必选</th> <th style="text-align:center;">类型</th> <th style="text-align:right;">说明</th></tr></thead> <tbody><tr><td>tid</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">H5唯一id</td></tr></tbody></table> <p>返回示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;pageConfig&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">&quot;tpl&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;id&quot;</span><span class="token operator">:</span> <span class="token string">&quot;879742&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;item&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Carousel&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;config&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">&quot;direction&quot;</span><span class="token operator">:</span> <span class="token string">&quot;left&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;swipeable&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token property">&quot;autoPlay&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token property">&quot;imgList&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;id&quot;</span><span class="token operator">:</span> <span class="token string">&quot;1&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;趣谈小课1&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;desc&quot;</span><span class="token operator">:</span> <span class="token string">&quot;致力于打造优质小课程&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;link&quot;</span><span class="token operator">:</span> <span class="token string">&quot;xxxxx&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;imgUrl&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;uid&quot;</span><span class="token operator">:</span> <span class="token string">&quot;001&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;image.png&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;status&quot;</span><span class="token operator">:</span> <span class="token string">&quot;done&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;url&quot;</span><span class="token operator">:</span> <span class="token string">&quot;http://io.nainor.com/uploads/1_1740bd7c3dc.png&quot;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;id&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;趣谈小课1&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;desc&quot;</span><span class="token operator">:</span> <span class="token string">&quot;致力于打造优质小课程&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;link&quot;</span><span class="token operator">:</span> <span class="token string">&quot;xxxxx&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;imgUrl&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;uid&quot;</span><span class="token operator">:</span> <span class="token string">&quot;001&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;image.png&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;status&quot;</span><span class="token operator">:</span> <span class="token string">&quot;done&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;url&quot;</span><span class="token operator">:</span> <span class="token string">&quot;http://io.nainor.com/uploads/2_1740bd8d525.png&quot;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">&quot;tplImg&quot;</span><span class="token operator">:</span> <span class="token string">&quot;http://io.nainor.com/uploads/carousal_17442e1420f.png&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">&quot;h&quot;</span><span class="token operator">:</span> <span class="token number">82</span><span class="token punctuation">,</span>
<span class="token property">&quot;editableEl&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;direction&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;方向&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Radio&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;range&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;down&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;从上到下&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;left&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;从左到右&quot;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;swipeable&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;是否可拖拽&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Switch&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;autoPlay&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;是否自动播放&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Switch&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;imgList&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;图片列表&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;DataList&quot;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">&quot;category&quot;</span><span class="token operator">:</span> <span class="token string">&quot;base&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">&quot;point&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">&quot;i&quot;</span><span class="token operator">:</span> <span class="token string">&quot;x-0&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;x&quot;</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token property">&quot;y&quot;</span><span class="token operator">:</span> <span class="token number">13</span><span class="token punctuation">,</span>
<span class="token property">&quot;w&quot;</span><span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
<span class="token property">&quot;h&quot;</span><span class="token operator">:</span> <span class="token number">82</span><span class="token punctuation">,</span>
<span class="token property">&quot;isBounded&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">&quot;status&quot;</span><span class="token operator">:</span> <span class="token string">&quot;inToCanvas&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;id&quot;</span><span class="token operator">:</span> <span class="token string">&quot;481194&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;item&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Form&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;config&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;表单定制组件&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;fontSize&quot;</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
<span class="token property">&quot;titColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;rgba(60,60,60,1)&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;titWeight&quot;</span><span class="token operator">:</span> <span class="token string">&quot;400&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;bgColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;rgba(255,255,255,1)&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;btnColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;rgba(20,54,226,100)&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;btnTextColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;rgba(255,255,255,1)&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;api&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;formControls&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;id&quot;</span><span class="token operator">:</span> <span class="token string">&quot;1&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Text&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;label&quot;</span><span class="token operator">:</span> <span class="token string">&quot;姓名&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;placeholder&quot;</span><span class="token operator">:</span> <span class="token string">&quot;请输入姓名&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;id&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Number&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;label&quot;</span><span class="token operator">:</span> <span class="token string">&quot;年龄&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;placeholder&quot;</span><span class="token operator">:</span> <span class="token string">&quot; 请输入年龄&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;id&quot;</span><span class="token operator">:</span> <span class="token string">&quot;4&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;MySelect&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;label&quot;</span><span class="token operator">:</span> <span class="token string">&quot;爱好&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;options&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;label&quot;</span><span class="token operator">:</span> <span class="token string">&quot;选项一&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;value&quot;</span><span class="token operator">:</span> <span class="token string">&quot;1&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;label&quot;</span><span class="token operator">:</span> <span class="token string">&quot;选项二&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;value&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;label&quot;</span><span class="token operator">:</span> <span class="token string">&quot;选项三&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;value&quot;</span><span class="token operator">:</span> <span class="token string">&quot;3&quot;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">&quot;h&quot;</span><span class="token operator">:</span> <span class="token number">172</span><span class="token punctuation">,</span>
<span class="token property">&quot;category&quot;</span><span class="token operator">:</span> <span class="token string">&quot;base&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">&quot;point&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">&quot;i&quot;</span><span class="token operator">:</span> <span class="token string">&quot;x-1&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;x&quot;</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token property">&quot;y&quot;</span><span class="token operator">:</span> <span class="token number">98</span><span class="token punctuation">,</span>
<span class="token property">&quot;w&quot;</span><span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
<span class="token property">&quot;h&quot;</span><span class="token operator">:</span> <span class="token number">172</span><span class="token punctuation">,</span>
<span class="token property">&quot;isBounded&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">&quot;status&quot;</span><span class="token operator">:</span> <span class="token string">&quot;inToCanvas&quot;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="保存h5数据"><a href="#保存h5数据" class="header-anchor">#</a> 保存H5数据</h3> <ul><li><code>POST</code> /visible/h5/save</li></ul> <p>先决条件:</p> <ul><li>用户已登陆</li></ul> <table><thead><tr><th>参数名</th> <th style="text-align:center;">是否必选</th> <th style="text-align:center;">类型</th> <th style="text-align:right;">说明</th></tr></thead> <tbody><tr><td>pageConfig</td> <td style="text-align:center;">false</td> <td style="text-align:center;">object</td> <td style="text-align:right;">H5页面配置数据</td></tr> <tr><td>tpl</td> <td style="text-align:center;">true</td> <td style="text-align:center;">object</td> <td style="text-align:right;">H5页面组件配置数据</td></tr> <tr><td>tid</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">H5页面唯一id</td></tr></tbody></table> <p>参数示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;pageConfig&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">&quot;bgColor&quot;</span><span class="token operator">:</span><span class="token string">&quot;rgba(151,25,25,1)&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;title&quot;</span><span class="token operator">:</span><span class="token string">&quot;医院宣传页&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">&quot;tpl&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">&quot;tid&quot;</span><span class="token operator">:</span> <span class="token string">&quot;EF123D3&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>返回示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;state&quot;</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
<span class="token property">&quot;result&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">&quot;tid&quot;</span><span class="token operator">:</span> <span class="token string">&quot;EF123D3&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">&quot;msg&quot;</span><span class="token operator">:</span> <span class="token string">&quot;保存成功&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="删除h5数据"><a href="#删除h5数据" class="header-anchor">#</a> 删除H5数据</h3> <ul><li><code>DELETE</code> /visible/h5/del</li></ul> <p>先决条件:</p> <ul><li>用户已登陆</li></ul> <table><thead><tr><th>参数名</th> <th style="text-align:center;">是否必选</th> <th style="text-align:center;">类型</th> <th style="text-align:right;">说明</th></tr></thead> <tbody><tr><td>tid</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">H5页面唯一id</td></tr></tbody></table> <p>返回示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;state&quot;</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
<span class="token property">&quot;result&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;tid&quot;</span><span class="token operator">:</span> <span class="token string">&quot;EF123D3&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;test页面&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;tid&quot;</span><span class="token operator">:</span> <span class="token string">&quot;EF123D6&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;test2页面&quot;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">&quot;msg&quot;</span><span class="token operator">:</span> <span class="token string">&quot;删除成功&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="h5表单数据管理"><a href="#h5表单数据管理" class="header-anchor">#</a> H5表单数据管理</h2> <h3 id="保存表单数据"><a href="#保存表单数据" class="header-anchor">#</a> 保存表单数据</h3> <ul><li><code>POST</code> /vip/h5/form/post</li></ul> <table><thead><tr><th>参数名</th> <th style="text-align:center;">是否必选</th> <th style="text-align:center;">类型</th> <th style="text-align:right;">说明</th></tr></thead> <tbody><tr><td>tid(query)</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">H5页面唯一id</td></tr> <tr><td>formData(body)</td> <td style="text-align:center;">true</td> <td style="text-align:center;">array</td> <td style="text-align:right;">H5页面表单数据</td></tr></tbody></table> <p>返回示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;state&quot;</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
<span class="token property">&quot;result&quot;</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span>
<span class="token property">&quot;msg&quot;</span><span class="token operator">:</span> <span class="token string">&quot;表单提交成功&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="批量导入表单数据"><a href="#批量导入表单数据" class="header-anchor">#</a> 批量导入表单数据</h3> <ul><li><code>POST</code> /vip/h5/form/import</li></ul> <table><thead><tr><th>参数名</th> <th style="text-align:center;">是否必选</th> <th style="text-align:center;">类型</th> <th style="text-align:right;">说明</th></tr></thead> <tbody><tr><td>tid(query)</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">H5页面唯一id</td></tr> <tr><td>formData(body)</td> <td style="text-align:center;">true</td> <td style="text-align:center;">array</td> <td style="text-align:right;">H5页面表单数据集合</td></tr></tbody></table> <p>返回示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;state&quot;</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
<span class="token property">&quot;result&quot;</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span>
<span class="token property">&quot;msg&quot;</span><span class="token operator">:</span> <span class="token string">&quot;批量导入成功&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="删除表单数据"><a href="#删除表单数据" class="header-anchor">#</a> 删除表单数据</h3> <ul><li><code>DELETE</code> /vip/h5/form/del</li></ul> <table><thead><tr><th>参数名</th> <th style="text-align:center;">是否必选</th> <th style="text-align:center;">类型</th> <th style="text-align:right;">说明</th></tr></thead> <tbody><tr><td>tid</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">H5页面唯一id</td></tr> <tr><td>ID</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">表单专属id</td></tr></tbody></table> <p>返回示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;state&quot;</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
<span class="token property">&quot;result&quot;</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span>
<span class="token property">&quot;msg&quot;</span><span class="token operator">:</span> <span class="token string">&quot;删除成功&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="模版管理"><a href="#模版管理" class="header-anchor">#</a> 模版管理</h2> <h3 id="获取模版库"><a href="#获取模版库" class="header-anchor">#</a> 获取模版库</h3> <ul><li><code>GET</code> /visible/tpls/free</li></ul> <p>返回示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;state&quot;</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
<span class="token property">&quot;result&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token property">&quot;img&quot;</span><span class="token operator">:</span> <span class="token string">&quot;http://xxx/uploads/tpl_175adabd8dd.jpg&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;合作模版&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;tid&quot;</span><span class="token operator">:</span> <span class="token string">&quot;B73349B6&quot;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="保存模版"><a href="#保存模版" class="header-anchor">#</a> 保存模版</h3> <ul><li><code>POST</code> /visible/tpl/save</li></ul> <p>先决条件:</p> <ul><li>用户已登陆</li></ul> <table><thead><tr><th>参数名</th> <th style="text-align:center;">是否必选</th> <th style="text-align:center;">类型</th> <th style="text-align:right;">说明</th></tr></thead> <tbody><tr><td>name</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">H5模版名称</td></tr> <tr><td>cate</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">H5模版分类</td></tr> <tr><td>img</td> <td style="text-align:center;">false</td> <td style="text-align:center;">string</td> <td style="text-align:right;">H5模版封面图</td></tr> <tr><td>tpl</td> <td style="text-align:center;">true</td> <td style="text-align:center;">array</td> <td style="text-align:right;">H5模版数据</td></tr> <tr><td>pageConfig</td> <td style="text-align:center;">false</td> <td style="text-align:center;">object</td> <td style="text-align:right;">H5模版全局配置</td></tr></tbody></table> <p>返回示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;state&quot;</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
<span class="token property">&quot;result&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">&quot;tid&quot;</span><span class="token operator">:</span> <span class="token string">&quot;B73349B6&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">&quot;msg&quot;</span><span class="token operator">:</span> <span class="token string">&quot;保存成功&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="删除模版"><a href="#删除模版" class="header-anchor">#</a> 删除模版</h3> <ul><li><code>DELETE</code> /visible/tpl/del</li></ul> <p>先决条件:</p> <ul><li>用户已登陆</li></ul> <table><thead><tr><th>参数名</th> <th style="text-align:center;">是否必选</th> <th style="text-align:center;">类型</th> <th style="text-align:right;">说明</th></tr></thead> <tbody><tr><td>tid</td> <td style="text-align:center;">true</td> <td style="text-align:center;">string</td> <td style="text-align:right;">H5模版id</td></tr></tbody></table> <p>返回示例</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;state&quot;</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
<span class="token property">&quot;result&quot;</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span>
<span class="token property">&quot;msg&quot;</span><span class="token operator">:</span> <span class="token string">&quot;删除成功&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="文件上传"><a href="#文件上传" class="header-anchor">#</a> 文件上传</h2> <h2 id="数据统计"><a href="#数据统计" class="header-anchor">#</a> 数据统计</h2> <h3 id="数据大盘接口"><a href="#数据大盘接口" class="header-anchor">#</a> 数据大盘接口</h3> <h3 id="页面埋点"><a href="#页面埋点" class="header-anchor">#</a> 页面埋点</h3></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">5/21/2021, 12:53:47 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/doc/zh/guide/deployDev/form.html" class="prev">
获取Form组件的值数据
</a></span> <span class="next"><a href="/doc/zh/guide/deployDev/log.html">
更新日志
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/18.81ac15ea.js" defer></script><script src="/doc/assets/js/2.a5de04a4.js" defer></script><script src="/doc/assets/js/24.945f07e2.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,44 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/18.81ac15ea.js" as="script"><link rel="preload" href="/doc/assets/js/2.a5de04a4.js" as="script"><link rel="preload" href="/doc/assets/js/25.55896e11.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/13.96be485c.js"><link rel="prefetch" href="/doc/assets/js/14.c3ed6dd7.js"><link rel="prefetch" href="/doc/assets/js/15.751a6d56.js"><link rel="prefetch" href="/doc/assets/js/16.b025618a.js"><link rel="prefetch" href="/doc/assets/js/17.bf2e8f73.js"><link rel="prefetch" href="/doc/assets/js/19.67f92c26.js"><link rel="prefetch" href="/doc/assets/js/20.3e91412b.js"><link rel="prefetch" href="/doc/assets/js/21.ab262167.js"><link rel="prefetch" href="/doc/assets/js/22.a7421118.js"><link rel="prefetch" href="/doc/assets/js/23.b2f0953d.js"><link rel="prefetch" href="/doc/assets/js/24.945f07e2.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/27.3c7e8c9e.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/29.27514922.js"><link rel="prefetch" href="/doc/assets/js/3.ececc857.js"><link rel="prefetch" href="/doc/assets/js/30.e6444117.js"><link rel="prefetch" href="/doc/assets/js/31.7251d101.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/7.4f98f3a5.js"><link rel="prefetch" href="/doc/assets/js/8.63e7a89b.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/doc/" class="home-link router-link-active"><!----> <span class="site-name">h5-dooring</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/doc/zh/guide/" aria-current="page" class="sidebar-link">基本介绍</a></li><li><a href="/doc/zh/guide/introduced.html" class="sidebar-link">doring如何工作</a></li><li><a href="/doc/zh/guide/startedQuickly.html" class="sidebar-link">快速上手</a></li><li><a href="/doc/zh/guide/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组件开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/componentDev/componentStructure.html" class="sidebar-link">组件结构</a></li><li><a href="/doc/zh/guide/componentDev/DSLAnalysis.html" class="sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="sidebar-link">动态加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>功能实现</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/functionRealization/templateLibrary.html" class="sidebar-link">模板库</a></li><li><a href="/doc/zh/guide/functionRealization/saveJson.html" class="sidebar-link">保存json</a></li><li><a href="/doc/zh/guide/functionRealization/download.html" class="sidebar-link">下载源码</a></li><li><a href="/doc/zh/guide/functionRealization/pagePreview.html" class="sidebar-link">网页预览</a></li><li><a href="/doc/zh/guide/functionRealization/machinePreview.html" class="sidebar-link">真机预览</a></li><li><a href="/doc/zh/guide/functionRealization/revocation.html" class="sidebar-link">撤销/重做</a></li><li><a href="/doc/zh/guide/functionRealization/screenshot.html" class="sidebar-link">截图功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>私有化部署和二次开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/deployDev/deploy.html" class="sidebar-link">私有化部署</a></li><li><a href="/doc/zh/guide/deployDev/deploy_v6.html" class="sidebar-link">v6.dooring私有化部署(临时)</a></li><li><a href="/doc/zh/guide/deployDev/dir.html" aria-current="page" class="active sidebar-link">服务端数据说明</a></li><li><a href="/doc/zh/guide/deployDev/https.html" class="sidebar-link">支持https</a></li><li><a href="/doc/zh/guide/deployDev/oss.html" class="sidebar-link">接入第三方oss</a></li><li><a href="/doc/zh/guide/deployDev/form.html" class="sidebar-link">获取Form组件的值数据</a></li><li><a href="/doc/zh/guide/deployDev/api.html" class="sidebar-link">API接口文档</a></li><li><a href="/doc/zh/guide/deployDev/log.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>服务端主要是我们的<code>server</code>工程, 数据主要存放在<code>server/public</code>下, 具体数据指代含义我们接下来会详细介绍.</p> <ul><li>bed 存放图片库中的分类图片, 私有化部署的用户可以直接在此处扩充图片(更好的建议是直接存到第三方图床)</li> <li>h5 用户保存的h5数据文件, 一个页面对应一个json文件</li> <li>h5_tpl 平台保存的模版数据文件夹
<ul><li>xxx.json 模版页面文件</li> <li>tpls.json 模版库中的模版列表数据, 可以手动清空</li></ul></li> <li>h5_vip 会员数据目录
<ul><li>form 会员制作的含表单页面的表单收集数据</li> <li>view.json 用户浏览量数据</li> <li>vip.json 会员列表数据</li> <li>vipCard.json 会员订单数据(暂时无用, 可删除)</li></ul></li> <li>image.json 图片库, 主要用来渲染页面的图片库数据</li> <li>city.json 省市3级联动数据, 为表单组件提供数据支持</li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">5/13/2021, 9:56:54 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/doc/zh/guide/deployDev/deploy_v6.html" class="prev">
v6.dooring私有化部署(临时)
</a></span> <span class="next"><a href="/doc/zh/guide/deployDev/https.html">
支持https
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/18.81ac15ea.js" defer></script><script src="/doc/assets/js/2.a5de04a4.js" defer></script><script src="/doc/assets/js/25.55896e11.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -1,71 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/18.81ac15ea.js" as="script"><link rel="preload" href="/doc/assets/js/2.a5de04a4.js" as="script"><link rel="preload" href="/doc/assets/js/27.3c7e8c9e.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/13.96be485c.js"><link rel="prefetch" href="/doc/assets/js/14.c3ed6dd7.js"><link rel="prefetch" href="/doc/assets/js/15.751a6d56.js"><link rel="prefetch" href="/doc/assets/js/16.b025618a.js"><link rel="prefetch" href="/doc/assets/js/17.bf2e8f73.js"><link rel="prefetch" href="/doc/assets/js/19.67f92c26.js"><link rel="prefetch" href="/doc/assets/js/20.3e91412b.js"><link rel="prefetch" href="/doc/assets/js/21.ab262167.js"><link rel="prefetch" href="/doc/assets/js/22.a7421118.js"><link rel="prefetch" href="/doc/assets/js/23.b2f0953d.js"><link rel="prefetch" href="/doc/assets/js/24.945f07e2.js"><link rel="prefetch" href="/doc/assets/js/25.55896e11.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/29.27514922.js"><link rel="prefetch" href="/doc/assets/js/3.ececc857.js"><link rel="prefetch" href="/doc/assets/js/30.e6444117.js"><link rel="prefetch" href="/doc/assets/js/31.7251d101.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/7.4f98f3a5.js"><link rel="prefetch" href="/doc/assets/js/8.63e7a89b.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/doc/" class="home-link router-link-active"><!----> <span class="site-name">h5-dooring</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/doc/zh/guide/" aria-current="page" class="sidebar-link">基本介绍</a></li><li><a href="/doc/zh/guide/introduced.html" class="sidebar-link">doring如何工作</a></li><li><a href="/doc/zh/guide/startedQuickly.html" class="sidebar-link">快速上手</a></li><li><a href="/doc/zh/guide/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组件开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/componentDev/componentStructure.html" class="sidebar-link">组件结构</a></li><li><a href="/doc/zh/guide/componentDev/DSLAnalysis.html" class="sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="sidebar-link">动态加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>功能实现</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/functionRealization/templateLibrary.html" class="sidebar-link">模板库</a></li><li><a href="/doc/zh/guide/functionRealization/saveJson.html" class="sidebar-link">保存json</a></li><li><a href="/doc/zh/guide/functionRealization/download.html" class="sidebar-link">下载源码</a></li><li><a href="/doc/zh/guide/functionRealization/pagePreview.html" class="sidebar-link">网页预览</a></li><li><a href="/doc/zh/guide/functionRealization/machinePreview.html" class="sidebar-link">真机预览</a></li><li><a href="/doc/zh/guide/functionRealization/revocation.html" class="sidebar-link">撤销/重做</a></li><li><a href="/doc/zh/guide/functionRealization/screenshot.html" class="sidebar-link">截图功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>私有化部署和二次开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/deployDev/deploy.html" class="sidebar-link">私有化部署</a></li><li><a href="/doc/zh/guide/deployDev/deploy_v6.html" class="sidebar-link">v6.dooring私有化部署(临时)</a></li><li><a href="/doc/zh/guide/deployDev/dir.html" class="sidebar-link">服务端数据说明</a></li><li><a href="/doc/zh/guide/deployDev/https.html" aria-current="page" class="active sidebar-link">支持https</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/doc/zh/guide/deployDev/oss.html" class="sidebar-link">接入第三方oss</a></li><li><a href="/doc/zh/guide/deployDev/form.html" class="sidebar-link">获取Form组件的值数据</a></li><li><a href="/doc/zh/guide/deployDev/api.html" class="sidebar-link">API接口文档</a></li><li><a href="/doc/zh/guide/deployDev/log.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>目前<strong>H5-Dooring</strong>全面支持https部署, 具体方式方案如下.</p> <h3 id="前端工程"><a href="#前端工程" class="header-anchor">#</a> 前端工程</h3> <p>我们需要在前端工程中的<code>src/pages/document.ejs</code>中的<code>head</code>中添加如下代码:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Content-Security-Policy<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>upgrade-insecure-requests<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>目的是强制将页面中HTTP请求转换为HTTPS.</p> <h3 id="服务器工程"><a href="#服务器工程" class="header-anchor">#</a> 服务器工程</h3> <h4 id="_1-申请ssl证书"><a href="#_1-申请ssl证书" class="header-anchor">#</a> 1. 申请SSL证书</h4> <h4 id="_2-生成-server-csr-server-key"><a href="#_2-生成-server-csr-server-key" class="header-anchor">#</a> 2. 生成 server.csr+server.key</h4> <h4 id="_3-通过证书链生成-pem文件"><a href="#_3-通过证书链生成-pem文件" class="header-anchor">#</a> 3. 通过证书链生成.pem文件</h4> <h4 id="在server中的src-index-js按如下方式修改"><a href="#在server中的src-index-js按如下方式修改" class="header-anchor">#</a><code>server</code>中的<code>src/index.js</code>按如下方式修改</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 忽略部分无影响代码</span>
<span class="token keyword">import</span> https <span class="token keyword">from</span> <span class="token string">'https'</span><span class="token punctuation">;</span>
<span class="token comment">// 你的ssl存放路径, 建议直接放在server目录下</span>
<span class="token keyword">const</span> filePath <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'../ssl'</span><span class="token punctuation">)</span>
<span class="token comment">// 启动逻辑</span>
<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// https配置</span>
<span class="token keyword">const</span> httpsOptions <span class="token operator">=</span> <span class="token punctuation">{</span>
key<span class="token operator">:</span> fs<span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>filePath<span class="token punctuation">,</span> <span class="token string">'3536084__doctopia.com.cn.key'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">//ssl文件路径</span>
cert<span class="token operator">:</span> fs<span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>filePath<span class="token punctuation">,</span> <span class="token string">'3536084__doctopia.com.cn.pem'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//ssl文件路径</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// https服务</span>
<span class="token keyword">const</span> server <span class="token operator">=</span> https<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span>httpsOptions<span class="token punctuation">,</span> app<span class="token punctuation">.</span><span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> io <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'socket.io'</span><span class="token punctuation">)</span><span class="token punctuation">(</span>server<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 忽略其他无影响代码</span>
<span class="token comment">// https默认443, 这里我们可以走公共配置</span>
server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">443</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">服务器地址:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>config<span class="token punctuation">.</span>staticPath<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/31/2021, 1:25:02 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/doc/zh/guide/deployDev/dir.html" class="prev">
服务端数据说明
</a></span> <span class="next"><a href="/doc/zh/guide/deployDev/oss.html">
接入第三方oss
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/18.81ac15ea.js" defer></script><script src="/doc/assets/js/2.a5de04a4.js" defer></script><script src="/doc/assets/js/27.3c7e8c9e.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -1,121 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/18.81ac15ea.js" as="script"><link rel="preload" href="/doc/assets/js/2.a5de04a4.js" as="script"><link rel="preload" href="/doc/assets/js/29.27514922.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/13.96be485c.js"><link rel="prefetch" href="/doc/assets/js/14.c3ed6dd7.js"><link rel="prefetch" href="/doc/assets/js/15.751a6d56.js"><link rel="prefetch" href="/doc/assets/js/16.b025618a.js"><link rel="prefetch" href="/doc/assets/js/17.bf2e8f73.js"><link rel="prefetch" href="/doc/assets/js/19.67f92c26.js"><link rel="prefetch" href="/doc/assets/js/20.3e91412b.js"><link rel="prefetch" href="/doc/assets/js/21.ab262167.js"><link rel="prefetch" href="/doc/assets/js/22.a7421118.js"><link rel="prefetch" href="/doc/assets/js/23.b2f0953d.js"><link rel="prefetch" href="/doc/assets/js/24.945f07e2.js"><link rel="prefetch" href="/doc/assets/js/25.55896e11.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/27.3c7e8c9e.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/3.ececc857.js"><link rel="prefetch" href="/doc/assets/js/30.e6444117.js"><link rel="prefetch" href="/doc/assets/js/31.7251d101.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/7.4f98f3a5.js"><link rel="prefetch" href="/doc/assets/js/8.63e7a89b.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/doc/" class="home-link router-link-active"><!----> <span class="site-name">h5-dooring</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/doc/zh/guide/" aria-current="page" class="sidebar-link">基本介绍</a></li><li><a href="/doc/zh/guide/introduced.html" class="sidebar-link">doring如何工作</a></li><li><a href="/doc/zh/guide/startedQuickly.html" class="sidebar-link">快速上手</a></li><li><a href="/doc/zh/guide/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组件开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/componentDev/componentStructure.html" class="sidebar-link">组件结构</a></li><li><a href="/doc/zh/guide/componentDev/DSLAnalysis.html" class="sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="sidebar-link">动态加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>功能实现</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/functionRealization/templateLibrary.html" class="sidebar-link">模板库</a></li><li><a href="/doc/zh/guide/functionRealization/saveJson.html" class="sidebar-link">保存json</a></li><li><a href="/doc/zh/guide/functionRealization/download.html" class="sidebar-link">下载源码</a></li><li><a href="/doc/zh/guide/functionRealization/pagePreview.html" class="sidebar-link">网页预览</a></li><li><a href="/doc/zh/guide/functionRealization/machinePreview.html" class="sidebar-link">真机预览</a></li><li><a href="/doc/zh/guide/functionRealization/revocation.html" class="sidebar-link">撤销/重做</a></li><li><a href="/doc/zh/guide/functionRealization/screenshot.html" class="sidebar-link">截图功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>私有化部署和二次开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/deployDev/deploy.html" class="sidebar-link">私有化部署</a></li><li><a href="/doc/zh/guide/deployDev/deploy_v6.html" class="sidebar-link">v6.dooring私有化部署(临时)</a></li><li><a href="/doc/zh/guide/deployDev/dir.html" class="sidebar-link">服务端数据说明</a></li><li><a href="/doc/zh/guide/deployDev/https.html" class="sidebar-link">支持https</a></li><li><a href="/doc/zh/guide/deployDev/oss.html" aria-current="page" class="active sidebar-link">接入第三方oss</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/doc/zh/guide/deployDev/form.html" class="sidebar-link">获取Form组件的值数据</a></li><li><a href="/doc/zh/guide/deployDev/api.html" class="sidebar-link">API接口文档</a></li><li><a href="/doc/zh/guide/deployDev/log.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p><strong>H5-Dooring</strong>全面支持第三方对象存储服务, 我们以七牛云对象存储为例.</p> <h3 id="前端上传文件到oss"><a href="#前端上传文件到oss" class="header-anchor">#</a> 前端上传文件到oss</h3> <p>首先我们需要在第三方对象储存服务中配置对应的服务和域名. 其次安装对应的sdk, 如七牛云sdk:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> qiniu <span class="token keyword">from</span> <span class="token string">'qiniu-js'</span><span class="token punctuation">;</span>
</code></pre></div><p>其次我们修改<code>h5_plus</code>工程的<code>Upload</code>组件, 详细地址为<code>src/core/FormComponents/Upload</code>.</p> <p>修改内容如下:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> fileName <span class="token operator">=</span> file<span class="token punctuation">.</span>name
<span class="token keyword">const</span> suffix <span class="token operator">=</span> <span class="token string">'自定义文件后缀'</span>
<span class="token keyword">const</span> putExtra <span class="token operator">=</span> <span class="token punctuation">{</span>
fname<span class="token operator">:</span> fileName<span class="token punctuation">,</span>
params<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> uid <span class="token operator">=</span> <span class="token operator">+</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">uuid</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">)</span> <span class="token operator">+</span> suffix
<span class="token comment">// 使用七牛云上传api, 前提是提前在前端拿到对应的ticket, 可以通过请求的方式获取</span>
<span class="token keyword">const</span> observe <span class="token operator">=</span> qiniu<span class="token punctuation">.</span><span class="token function">upload</span><span class="token punctuation">(</span>file<span class="token punctuation">,</span> uid<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>qnToken<span class="token punctuation">.</span>ticket<span class="token punctuation">,</span> putExtra<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
observe<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment">// 拼接路径</span>
<span class="token keyword">const</span> url <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>qnToken<span class="token punctuation">.</span>domain<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>res<span class="token punctuation">.</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token comment">// 存库</span>
<span class="token keyword">const</span> fileList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> uid<span class="token punctuation">,</span> name<span class="token operator">:</span> fileName<span class="token punctuation">,</span> status<span class="token operator">:</span> <span class="token string">'done'</span><span class="token punctuation">,</span> url <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
curImgUrl<span class="token operator">:</span> url<span class="token punctuation">,</span>
fileList
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onChange <span class="token operator">&amp;&amp;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onChange</span><span class="token punctuation">(</span>fileList<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>其他oss服务类似, 如果不清楚如何配置, 可以在<a href="http://h5.dooring.cn/" target="_blank" rel="noopener noreferrer">H5-Dooring官网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>中找到我们.</p> <h3 id="如何接入任何第三方上传服务"><a href="#如何接入任何第三方上传服务" class="header-anchor">#</a> 如何接入任何第三方上传服务</h3> <p>首先我们的上传组件<code>Upload</code>使用内部的服务接口来实现上传功能, 所以需要给组件的<code>action</code>赋值, 如下:</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Upload</span></span>
<span class="token attr-name">fileList</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>fileList<span class="token punctuation">}</span></span>
<span class="token attr-name">onPreview</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handlePreview<span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span>
<span class="token attr-name">onRemove</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleRemove<span class="token punctuation">}</span></span>
<span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">listType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picture-card<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>avatarUploader<span class="token punctuation">}</span></span>
<span class="token attr-name">action</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>sdk_upload_api <span class="token operator">||</span> action<span class="token punctuation">}</span></span>
<span class="token attr-name">withCredentials</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>withCredentials<span class="token punctuation">}</span></span>
<span class="token attr-name">headers</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
<span class="token string">'x-requested-with'</span><span class="token operator">:</span> localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'user'</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">,</span>
<span class="token string">'authorization'</span><span class="token operator">:</span> localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'token'</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">,</span>
<span class="token operator">...</span>headers
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">beforeUpload</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleBeforeUpload<span class="token punctuation">}</span></span>
<span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token punctuation">{</span>fileList<span class="token punctuation">.</span>length <span class="token operator">&gt;=</span> maxLen <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token operator">:</span> uploadButton<span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Upload</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>如果需要集成第三方oss, 如七牛云, 阿里oss等, 我们需要将<code>Upload</code>组件的<code>action</code>属性设置为空字符串, 其次删除<code>onChange</code>属性, 上传操作统一在<code>beforeUpload</code>中进行. 案例如下:</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Upload</span></span>
<span class="token attr-name">fileList</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>fileList<span class="token punctuation">}</span></span>
<span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span>
<span class="token attr-name">onPreview</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handlePreview<span class="token punctuation">}</span></span>
<span class="token attr-name">onRemove</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onRemove<span class="token punctuation">}</span></span>
<span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">listType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picture-card<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>avatarUploader<span class="token punctuation">}</span></span>
<span class="token attr-name">headers</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token operator">...</span>headers<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">beforeUpload</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleBeforeUpload<span class="token punctuation">}</span></span>
<span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token punctuation">{</span>fileList<span class="token punctuation">.</span>length <span class="token operator">&gt;=</span> maxLen <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token operator">:</span> uploadButton<span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Upload</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>自定义上传的核心逻辑放在了<code>beforeUpload</code>上. 我们具体看看<code>beforeUpload</code>这个方法如何实现.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function-variable function">handleBeforeUpload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">file<span class="token operator">:</span>RcFile</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment">// 1. 限制图片类型</span>
<span class="token keyword">const</span> isJpgOrPng <span class="token operator">=</span> file<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'image/jpeg'</span> <span class="token operator">||</span> file<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'image/png'</span> <span class="token operator">||</span> file<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'image/jpg'</span> <span class="token operator">||</span> file<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'image/gif'</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isJpgOrPng<span class="token punctuation">)</span> <span class="token punctuation">{</span>
message<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'只能上传格式为jpeg/png/gif的图片'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 限制上传文件大小</span>
<span class="token keyword">const</span> isLt3M <span class="token operator">=</span> file<span class="token punctuation">.</span>size <span class="token operator">/</span> <span class="token number">1024</span> <span class="token operator">/</span> <span class="token number">1024</span> <span class="token operator">&lt;</span> <span class="token number">3</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isLt3M<span class="token punctuation">)</span> <span class="token punctuation">{</span>
message<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'图片必须小于3MB!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>isJpgOrPng <span class="token operator">&amp;&amp;</span> isLt3M<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 3. 正常上传逻辑</span>
<span class="token keyword">const</span> fileName <span class="token operator">=</span> file<span class="token punctuation">.</span>name
<span class="token comment">// 3.1 调用oss接口, 将图片上传oss</span>
<span class="token comment">// 3.2 将接口返回的url信息, 组装成fileList数据结构, 并更新state</span>
<span class="token keyword">const</span> fileList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> uid<span class="token punctuation">,</span> name<span class="token operator">:</span> fileName<span class="token punctuation">,</span> status<span class="token operator">:</span> <span class="token string">'done'</span><span class="token punctuation">,</span> url <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
curImgUrl<span class="token operator">:</span> url<span class="token punctuation">,</span>
fileList<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 3.3 将数据传给上层保存</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onChange <span class="token operator">&amp;&amp;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onChange</span><span class="token punctuation">(</span>fileList<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> isJpgOrPng <span class="token operator">&amp;&amp;</span> isLt3M<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/31/2021, 1:25:02 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/doc/zh/guide/deployDev/https.html" class="prev">
支持https
</a></span> <span class="next"><a href="/doc/zh/guide/deployDev/form.html">
获取Form组件的值数据
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/18.81ac15ea.js" defer></script><script src="/doc/assets/js/2.a5de04a4.js" defer></script><script src="/doc/assets/js/29.27514922.js" defer></script>
</body>
</html>

View File

@ -1,327 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/18.81ac15ea.js" as="script"><link rel="preload" href="/doc/assets/js/2.a5de04a4.js" as="script"><link rel="preload" href="/doc/assets/js/30.e6444117.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/13.96be485c.js"><link rel="prefetch" href="/doc/assets/js/14.c3ed6dd7.js"><link rel="prefetch" href="/doc/assets/js/15.751a6d56.js"><link rel="prefetch" href="/doc/assets/js/16.b025618a.js"><link rel="prefetch" href="/doc/assets/js/17.bf2e8f73.js"><link rel="prefetch" href="/doc/assets/js/19.67f92c26.js"><link rel="prefetch" href="/doc/assets/js/20.3e91412b.js"><link rel="prefetch" href="/doc/assets/js/21.ab262167.js"><link rel="prefetch" href="/doc/assets/js/22.a7421118.js"><link rel="prefetch" href="/doc/assets/js/23.b2f0953d.js"><link rel="prefetch" href="/doc/assets/js/24.945f07e2.js"><link rel="prefetch" href="/doc/assets/js/25.55896e11.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/27.3c7e8c9e.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/29.27514922.js"><link rel="prefetch" href="/doc/assets/js/3.ececc857.js"><link rel="prefetch" href="/doc/assets/js/31.7251d101.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/7.4f98f3a5.js"><link rel="prefetch" href="/doc/assets/js/8.63e7a89b.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/doc/" class="home-link router-link-active"><!----> <span class="site-name">h5-dooring</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/doc/zh/guide/" aria-current="page" class="sidebar-link">基本介绍</a></li><li><a href="/doc/zh/guide/introduced.html" class="sidebar-link">doring如何工作</a></li><li><a href="/doc/zh/guide/startedQuickly.html" class="sidebar-link">快速上手</a></li><li><a href="/doc/zh/guide/directoryStructure.html" aria-current="page" class="active sidebar-link">目录结构</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组件开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/componentDev/componentStructure.html" class="sidebar-link">组件结构</a></li><li><a href="/doc/zh/guide/componentDev/DSLAnalysis.html" class="sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="sidebar-link">动态加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>功能实现</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/functionRealization/templateLibrary.html" class="sidebar-link">模板库</a></li><li><a href="/doc/zh/guide/functionRealization/saveJson.html" class="sidebar-link">保存json</a></li><li><a href="/doc/zh/guide/functionRealization/download.html" class="sidebar-link">下载源码</a></li><li><a href="/doc/zh/guide/functionRealization/pagePreview.html" class="sidebar-link">网页预览</a></li><li><a href="/doc/zh/guide/functionRealization/machinePreview.html" class="sidebar-link">真机预览</a></li><li><a href="/doc/zh/guide/functionRealization/revocation.html" class="sidebar-link">撤销/重做</a></li><li><a href="/doc/zh/guide/functionRealization/screenshot.html" class="sidebar-link">截图功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>私有化部署和二次开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/deployDev/deploy.html" class="sidebar-link">私有化部署</a></li><li><a href="/doc/zh/guide/deployDev/deploy_v6.html" class="sidebar-link">v6.dooring私有化部署(临时)</a></li><li><a href="/doc/zh/guide/deployDev/dir.html" class="sidebar-link">服务端数据说明</a></li><li><a href="/doc/zh/guide/deployDev/https.html" class="sidebar-link">支持https</a></li><li><a href="/doc/zh/guide/deployDev/oss.html" class="sidebar-link">接入第三方oss</a></li><li><a href="/doc/zh/guide/deployDev/form.html" class="sidebar-link">获取Form组件的值数据</a></li><li><a href="/doc/zh/guide/deployDev/api.html" class="sidebar-link">API接口文档</a></li><li><a href="/doc/zh/guide/deployDev/log.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><div class="language- extra-class"><pre class="language-text"><code>src
├─ assets
│ ├─ header.png
│ ├─ form.png
│ ├─ footer.png
│ ├─ icon.png
│ ├─ picture.png
├─ components
│ ├─ BackTop
│ │ └─ index.js
│ ├─ BasicShop
│ │ ├─ BasicComponents
│ │ │ ├─ Card
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Carousel
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Footer
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Form
│ │ │ │ ├─ BaseForm.tsx
│ │ │ │ ├─ BasePopoverForm.tsx
│ │ │ │ ├─ baseForm.less
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Header
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Icon
│ │ │ │ ├─ icon.ts
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Image
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ LongText
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Nav
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Notice
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Qrcode
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ RichText
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Text
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ WhiteTpl
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ XButton
│ │ │ │ ├─ Modal.tsx
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ schema.ts
│ │ │ └─ template.ts
│ │ ├─ MediaComponents
│ │ │ ├─ Audio
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Calendar
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Map
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Video
│ │ │ │ ├─ index.css
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ schema.ts
│ │ │ └─ template.ts
│ │ ├─ ShopComponents
│ │ │ ├─ CardLabel
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Coupons
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ List
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Tab
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ ZhuanLan
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ schema.ts
│ │ │ └─ template.ts
│ │ ├─ VisualComponents
│ │ │ ├─ Area
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Chart
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Funnel
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Line
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Pie
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ Radar
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ WordCloud
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ XProgress
│ │ │ │ ├─ index.less
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ schema.ts
│ │ │ │ └─ template.ts
│ │ │ ├─ schema.ts
│ │ │ └─ template.ts
│ │ ├─ common.ts
│ │ └─ schema.ts
│ ├─ Calibration
│ │ ├─ index.less
│ │ └─ index.tsx
│ ├─ ErrorBundaries
│ │ └─ index.tsx
│ ├─ LoadingCp
│ │ └─ index.tsx
│ ├─ ModalTpl
│ │ ├─ cate.js
│ │ ├─ index.js
│ │ └─ index.less
│ └─ Zan
│ ├─ index.less
│ └─ index.tsx
├─ core
│ ├─ FormComponents
│ │ ├─ CardPicker
│ │ │ ├─ index.less
│ │ │ └─ index.tsx
│ │ ├─ Color
│ │ │ ├─ index.less
│ │ │ └─ index.tsx
│ │ ├─ DataList
│ │ │ ├─ editorModal.tsx
│ │ │ ├─ index.less
│ │ │ └─ index.tsx
│ │ ├─ FormItems
│ │ │ ├─ EditorModal.tsx
│ │ │ ├─ FormItems.tsx
│ │ │ ├─ formItems.less
│ │ │ └─ index.tsx
│ │ ├─ InteractionData
│ │ │ ├─ index.less
│ │ │ └─ index.tsx
│ │ ├─ MutiText
│ │ │ ├─ index.less
│ │ │ └─ index.tsx
│ │ ├─ Pos
│ │ │ ├─ index.less
│ │ │ └─ index.tsx
│ │ ├─ Table
│ │ │ ├─ index.less
│ │ │ └─ index.tsx
│ │ ├─ Upload
│ │ │ ├─ index.less
│ │ │ └─ index.tsx
│ │ ├─ XEditor
│ │ │ ├─ index.less
│ │ │ └─ index.tsx
│ │ └─ types.ts
│ ├─ DynamicEngine.tsx
│ ├─ FormRender.tsx
│ ├─ ViewRender.tsx
│ └─ viewRender.less
├─ layouts
│ ├─ __tests__
│ │ └─ index.test.js
│ ├─ index.less
│ └─ index.tsx
├─ pages
│ ├─ __tests__
│ │ └─ index.test.js
│ ├─ editor
│ │ ├─ components
│ │ │ ├─ AvatorGroup
│ │ │ │ └─ index.tsx
│ │ │ ├─ CanvasControl
│ │ │ │ ├─ index.less
│ │ │ │ └─ index.tsx
│ │ │ └─ Header
│ │ │ ├─ index.js
│ │ │ └─ index.less
│ │ ├─ models
│ │ │ └─ editorModal.js
│ │ ├─ services
│ │ │ └─ editorService.js
│ │ ├─ Container.js
│ │ ├─ SourceBox.tsx
│ │ ├─ TargetBox.js
│ │ ├─ index.js
│ │ ├─ index.less
│ │ └─ preview.tsx
│ ├─ help
│ │ ├─ index.less
│ │ └─ index.tsx
│ ├─ home
│ │ ├─ index.less
│ │ └─ index.tsx
│ ├─ ide
│ │ ├─ _draft.tsx
│ │ ├─ index.less
│ │ └─ index.tsx
│ ├─ login
│ │ ├─ index.less
│ │ └─ index.tsx
│ ├─ document.ejs
│ └─ mobileTip.js
├─ utils
│ ├─ req.ts
│ └─ tool.ts
├─ app.tsx
└─ global.css
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/17/2021, 7:12:02 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/doc/zh/guide/startedQuickly.html" class="prev">
快速上手
</a></span> <span class="next"><a href="/doc/zh/guide/componentDev/componentStructure.html">
组件结构
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/18.81ac15ea.js" defer></script><script src="/doc/assets/js/2.a5de04a4.js" defer></script><script src="/doc/assets/js/30.e6444117.js" defer></script>
</body>
</html>

View File

@ -1,52 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/18.81ac15ea.js" as="script"><link rel="preload" href="/doc/assets/js/2.a5de04a4.js" as="script"><link rel="preload" href="/doc/assets/js/13.96be485c.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/14.c3ed6dd7.js"><link rel="prefetch" href="/doc/assets/js/15.751a6d56.js"><link rel="prefetch" href="/doc/assets/js/16.b025618a.js"><link rel="prefetch" href="/doc/assets/js/17.bf2e8f73.js"><link rel="prefetch" href="/doc/assets/js/19.67f92c26.js"><link rel="prefetch" href="/doc/assets/js/20.3e91412b.js"><link rel="prefetch" href="/doc/assets/js/21.ab262167.js"><link rel="prefetch" href="/doc/assets/js/22.a7421118.js"><link rel="prefetch" href="/doc/assets/js/23.b2f0953d.js"><link rel="prefetch" href="/doc/assets/js/24.945f07e2.js"><link rel="prefetch" href="/doc/assets/js/25.55896e11.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/27.3c7e8c9e.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/29.27514922.js"><link rel="prefetch" href="/doc/assets/js/3.ececc857.js"><link rel="prefetch" href="/doc/assets/js/30.e6444117.js"><link rel="prefetch" href="/doc/assets/js/31.7251d101.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/7.4f98f3a5.js"><link rel="prefetch" href="/doc/assets/js/8.63e7a89b.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/doc/" class="home-link router-link-active"><!----> <span class="site-name">h5-dooring</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/doc/zh/guide/" aria-current="page" class="sidebar-link">基本介绍</a></li><li><a href="/doc/zh/guide/introduced.html" class="sidebar-link">doring如何工作</a></li><li><a href="/doc/zh/guide/startedQuickly.html" class="sidebar-link">快速上手</a></li><li><a href="/doc/zh/guide/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组件开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/componentDev/componentStructure.html" class="sidebar-link">组件结构</a></li><li><a href="/doc/zh/guide/componentDev/DSLAnalysis.html" class="sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="sidebar-link">动态加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>功能实现</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/functionRealization/templateLibrary.html" class="sidebar-link">模板库</a></li><li><a href="/doc/zh/guide/functionRealization/saveJson.html" class="sidebar-link">保存json</a></li><li><a href="/doc/zh/guide/functionRealization/download.html" aria-current="page" class="active sidebar-link">下载源码</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/doc/zh/guide/functionRealization/download.html#下载源码" class="sidebar-link">下载源码</a></li></ul></li><li><a href="/doc/zh/guide/functionRealization/pagePreview.html" class="sidebar-link">网页预览</a></li><li><a href="/doc/zh/guide/functionRealization/machinePreview.html" class="sidebar-link">真机预览</a></li><li><a href="/doc/zh/guide/functionRealization/revocation.html" class="sidebar-link">撤销/重做</a></li><li><a href="/doc/zh/guide/functionRealization/screenshot.html" class="sidebar-link">截图功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>私有化部署和二次开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/deployDev/deploy.html" class="sidebar-link">私有化部署</a></li><li><a href="/doc/zh/guide/deployDev/deploy_v6.html" class="sidebar-link">v6.dooring私有化部署(临时)</a></li><li><a href="/doc/zh/guide/deployDev/dir.html" class="sidebar-link">服务端数据说明</a></li><li><a href="/doc/zh/guide/deployDev/https.html" class="sidebar-link">支持https</a></li><li><a href="/doc/zh/guide/deployDev/oss.html" class="sidebar-link">接入第三方oss</a></li><li><a href="/doc/zh/guide/deployDev/form.html" class="sidebar-link">获取Form组件的值数据</a></li><li><a href="/doc/zh/guide/deployDev/api.html" class="sidebar-link">API接口文档</a></li><li><a href="/doc/zh/guide/deployDev/log.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="下载源码"><a href="#下载源码" class="header-anchor">#</a> 下载源码</h2> <p>目前Dooring已支持下载源码功能, 我们可以使用编辑器页面头部的下载按钮来实现下载用户搭建的H5源码.
<img src="/doc/assets/img/down.75812dab.png" alt="foo"></p> <p>源码下载之后是完整的React项目源代码, 开发人员可以直接根据自己的业务需求来二次编写代码来满足不同的业务需求.</p> <p>在拿到源码之后, 我们需要进入项目, 使用npm或者yarn安装项目依赖, 如下:</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span>
// 或者
<span class="token function">yarn</span>
</code></pre></div><p>之后我们就可以本地运行项目了:</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> start
// 或者
<span class="token function">yarn</span> start
</code></pre></div><p>因为源码工程采用<code>umi3.0</code>搭建, 所以代码配置可以参考<code>umi3.0</code>规范, 比如路由配置, <code>history</code>模式, 打包路径等, 二次开发完成之后, 我们可以执行:</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> run build
// 或者
<span class="token function">yarn</span> build
</code></pre></div><p>将项目打包成html, 以便部署到任何服务器中.</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">5/18/2021, 9:49:30 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/doc/zh/guide/functionRealization/saveJson.html" class="prev">
保存json
</a></span> <span class="next"><a href="/doc/zh/guide/functionRealization/pagePreview.html">
网页预览
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/18.81ac15ea.js" defer></script><script src="/doc/assets/js/2.a5de04a4.js" defer></script><script src="/doc/assets/js/13.96be485c.js" defer></script>
</body>
</html>

View File

@ -1,42 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/18.81ac15ea.js" as="script"><link rel="preload" href="/doc/assets/js/2.a5de04a4.js" as="script"><link rel="preload" href="/doc/assets/js/14.c3ed6dd7.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/13.96be485c.js"><link rel="prefetch" href="/doc/assets/js/15.751a6d56.js"><link rel="prefetch" href="/doc/assets/js/16.b025618a.js"><link rel="prefetch" href="/doc/assets/js/17.bf2e8f73.js"><link rel="prefetch" href="/doc/assets/js/19.67f92c26.js"><link rel="prefetch" href="/doc/assets/js/20.3e91412b.js"><link rel="prefetch" href="/doc/assets/js/21.ab262167.js"><link rel="prefetch" href="/doc/assets/js/22.a7421118.js"><link rel="prefetch" href="/doc/assets/js/23.b2f0953d.js"><link rel="prefetch" href="/doc/assets/js/24.945f07e2.js"><link rel="prefetch" href="/doc/assets/js/25.55896e11.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/27.3c7e8c9e.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/29.27514922.js"><link rel="prefetch" href="/doc/assets/js/3.ececc857.js"><link rel="prefetch" href="/doc/assets/js/30.e6444117.js"><link rel="prefetch" href="/doc/assets/js/31.7251d101.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/7.4f98f3a5.js"><link rel="prefetch" href="/doc/assets/js/8.63e7a89b.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/doc/" class="home-link router-link-active"><!----> <span class="site-name">h5-dooring</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/doc/zh/guide/" aria-current="page" class="sidebar-link">基本介绍</a></li><li><a href="/doc/zh/guide/introduced.html" class="sidebar-link">doring如何工作</a></li><li><a href="/doc/zh/guide/startedQuickly.html" class="sidebar-link">快速上手</a></li><li><a href="/doc/zh/guide/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组件开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/componentDev/componentStructure.html" class="sidebar-link">组件结构</a></li><li><a href="/doc/zh/guide/componentDev/DSLAnalysis.html" class="sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="sidebar-link">动态加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>功能实现</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/functionRealization/templateLibrary.html" class="sidebar-link">模板库</a></li><li><a href="/doc/zh/guide/functionRealization/saveJson.html" class="sidebar-link">保存json</a></li><li><a href="/doc/zh/guide/functionRealization/download.html" class="sidebar-link">下载源码</a></li><li><a href="/doc/zh/guide/functionRealization/pagePreview.html" class="sidebar-link">网页预览</a></li><li><a href="/doc/zh/guide/functionRealization/machinePreview.html" aria-current="page" class="active sidebar-link">真机预览</a></li><li><a href="/doc/zh/guide/functionRealization/revocation.html" class="sidebar-link">撤销/重做</a></li><li><a href="/doc/zh/guide/functionRealization/screenshot.html" class="sidebar-link">截图功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>私有化部署和二次开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/deployDev/deploy.html" class="sidebar-link">私有化部署</a></li><li><a href="/doc/zh/guide/deployDev/deploy_v6.html" class="sidebar-link">v6.dooring私有化部署(临时)</a></li><li><a href="/doc/zh/guide/deployDev/dir.html" class="sidebar-link">服务端数据说明</a></li><li><a href="/doc/zh/guide/deployDev/https.html" class="sidebar-link">支持https</a></li><li><a href="/doc/zh/guide/deployDev/oss.html" class="sidebar-link">接入第三方oss</a></li><li><a href="/doc/zh/guide/deployDev/form.html" class="sidebar-link">获取Form组件的值数据</a></li><li><a href="/doc/zh/guide/deployDev/api.html" class="sidebar-link">API接口文档</a></li><li><a href="/doc/zh/guide/deployDev/log.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="真机预览"><a href="#真机预览" class="header-anchor">#</a> 真机预览</h1> <p>真机预览和网页预览的流程类似,工作流程如下:</p> <img src="/doc/assets/img/preview-machine.895a0711.png" alt="foo"> <p>由于不同机型预览的效果有些许不同,最终效果以实际看到的为主。</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/17/2021, 9:57:34 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/doc/zh/guide/functionRealization/pagePreview.html" class="prev">
网页预览
</a></span> <span class="next"><a href="/doc/zh/guide/functionRealization/revocation.html">
撤销/重做
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/18.81ac15ea.js" defer></script><script src="/doc/assets/js/2.a5de04a4.js" defer></script><script src="/doc/assets/js/14.c3ed6dd7.js" defer></script>
</body>
</html>

View File

@ -1,42 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/18.81ac15ea.js" as="script"><link rel="preload" href="/doc/assets/js/2.a5de04a4.js" as="script"><link rel="preload" href="/doc/assets/js/7.4f98f3a5.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/13.96be485c.js"><link rel="prefetch" href="/doc/assets/js/14.c3ed6dd7.js"><link rel="prefetch" href="/doc/assets/js/15.751a6d56.js"><link rel="prefetch" href="/doc/assets/js/16.b025618a.js"><link rel="prefetch" href="/doc/assets/js/17.bf2e8f73.js"><link rel="prefetch" href="/doc/assets/js/19.67f92c26.js"><link rel="prefetch" href="/doc/assets/js/20.3e91412b.js"><link rel="prefetch" href="/doc/assets/js/21.ab262167.js"><link rel="prefetch" href="/doc/assets/js/22.a7421118.js"><link rel="prefetch" href="/doc/assets/js/23.b2f0953d.js"><link rel="prefetch" href="/doc/assets/js/24.945f07e2.js"><link rel="prefetch" href="/doc/assets/js/25.55896e11.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/27.3c7e8c9e.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/29.27514922.js"><link rel="prefetch" href="/doc/assets/js/3.ececc857.js"><link rel="prefetch" href="/doc/assets/js/30.e6444117.js"><link rel="prefetch" href="/doc/assets/js/31.7251d101.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/8.63e7a89b.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/doc/" class="home-link router-link-active"><!----> <span class="site-name">h5-dooring</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/doc/zh/guide/" aria-current="page" class="sidebar-link">基本介绍</a></li><li><a href="/doc/zh/guide/introduced.html" class="sidebar-link">doring如何工作</a></li><li><a href="/doc/zh/guide/startedQuickly.html" class="sidebar-link">快速上手</a></li><li><a href="/doc/zh/guide/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组件开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/componentDev/componentStructure.html" class="sidebar-link">组件结构</a></li><li><a href="/doc/zh/guide/componentDev/DSLAnalysis.html" class="sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="sidebar-link">动态加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>功能实现</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/functionRealization/templateLibrary.html" class="sidebar-link">模板库</a></li><li><a href="/doc/zh/guide/functionRealization/saveJson.html" class="sidebar-link">保存json</a></li><li><a href="/doc/zh/guide/functionRealization/download.html" class="sidebar-link">下载源码</a></li><li><a href="/doc/zh/guide/functionRealization/pagePreview.html" aria-current="page" class="active sidebar-link">网页预览</a></li><li><a href="/doc/zh/guide/functionRealization/machinePreview.html" class="sidebar-link">真机预览</a></li><li><a href="/doc/zh/guide/functionRealization/revocation.html" class="sidebar-link">撤销/重做</a></li><li><a href="/doc/zh/guide/functionRealization/screenshot.html" class="sidebar-link">截图功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>私有化部署和二次开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/deployDev/deploy.html" class="sidebar-link">私有化部署</a></li><li><a href="/doc/zh/guide/deployDev/deploy_v6.html" class="sidebar-link">v6.dooring私有化部署(临时)</a></li><li><a href="/doc/zh/guide/deployDev/dir.html" class="sidebar-link">服务端数据说明</a></li><li><a href="/doc/zh/guide/deployDev/https.html" class="sidebar-link">支持https</a></li><li><a href="/doc/zh/guide/deployDev/oss.html" class="sidebar-link">接入第三方oss</a></li><li><a href="/doc/zh/guide/deployDev/form.html" class="sidebar-link">获取Form组件的值数据</a></li><li><a href="/doc/zh/guide/deployDev/api.html" class="sidebar-link">API接口文档</a></li><li><a href="/doc/zh/guide/deployDev/log.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="网页预览"><a href="#网页预览" class="header-anchor">#</a> 网页预览</h1> <p>我们看看网页预览的工作流程:</p> <img src="/doc/assets/img/preview-flow.b37c7798.png" alt="foo"> <p>前端预览界面:</p> <img src="/doc/assets/img/preview-page.3ec86df5.png" alt="foo"></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/17/2021, 9:57:34 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/doc/zh/guide/functionRealization/download.html" class="prev">
下载源码
</a></span> <span class="next"><a href="/doc/zh/guide/functionRealization/machinePreview.html">
真机预览
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/18.81ac15ea.js" defer></script><script src="/doc/assets/js/2.a5de04a4.js" defer></script><script src="/doc/assets/js/7.4f98f3a5.js" defer></script>
</body>
</html>

View File

@ -1,63 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/18.81ac15ea.js" as="script"><link rel="preload" href="/doc/assets/js/2.a5de04a4.js" as="script"><link rel="preload" href="/doc/assets/js/31.7251d101.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/13.96be485c.js"><link rel="prefetch" href="/doc/assets/js/14.c3ed6dd7.js"><link rel="prefetch" href="/doc/assets/js/15.751a6d56.js"><link rel="prefetch" href="/doc/assets/js/16.b025618a.js"><link rel="prefetch" href="/doc/assets/js/17.bf2e8f73.js"><link rel="prefetch" href="/doc/assets/js/19.67f92c26.js"><link rel="prefetch" href="/doc/assets/js/20.3e91412b.js"><link rel="prefetch" href="/doc/assets/js/21.ab262167.js"><link rel="prefetch" href="/doc/assets/js/22.a7421118.js"><link rel="prefetch" href="/doc/assets/js/23.b2f0953d.js"><link rel="prefetch" href="/doc/assets/js/24.945f07e2.js"><link rel="prefetch" href="/doc/assets/js/25.55896e11.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/27.3c7e8c9e.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/29.27514922.js"><link rel="prefetch" href="/doc/assets/js/3.ececc857.js"><link rel="prefetch" href="/doc/assets/js/30.e6444117.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/7.4f98f3a5.js"><link rel="prefetch" href="/doc/assets/js/8.63e7a89b.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/doc/" class="home-link router-link-active"><!----> <span class="site-name">h5-dooring</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/doc/zh/guide/" aria-current="page" class="sidebar-link">基本介绍</a></li><li><a href="/doc/zh/guide/introduced.html" class="sidebar-link">doring如何工作</a></li><li><a href="/doc/zh/guide/startedQuickly.html" class="sidebar-link">快速上手</a></li><li><a href="/doc/zh/guide/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组件开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/componentDev/componentStructure.html" class="sidebar-link">组件结构</a></li><li><a href="/doc/zh/guide/componentDev/DSLAnalysis.html" class="sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="sidebar-link">动态加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>功能实现</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/functionRealization/templateLibrary.html" class="sidebar-link">模板库</a></li><li><a href="/doc/zh/guide/functionRealization/saveJson.html" class="sidebar-link">保存json</a></li><li><a href="/doc/zh/guide/functionRealization/download.html" class="sidebar-link">下载源码</a></li><li><a href="/doc/zh/guide/functionRealization/pagePreview.html" class="sidebar-link">网页预览</a></li><li><a href="/doc/zh/guide/functionRealization/machinePreview.html" class="sidebar-link">真机预览</a></li><li><a href="/doc/zh/guide/functionRealization/revocation.html" aria-current="page" class="active sidebar-link">撤销/重做</a></li><li><a href="/doc/zh/guide/functionRealization/screenshot.html" class="sidebar-link">截图功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>私有化部署和二次开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/deployDev/deploy.html" class="sidebar-link">私有化部署</a></li><li><a href="/doc/zh/guide/deployDev/deploy_v6.html" class="sidebar-link">v6.dooring私有化部署(临时)</a></li><li><a href="/doc/zh/guide/deployDev/dir.html" class="sidebar-link">服务端数据说明</a></li><li><a href="/doc/zh/guide/deployDev/https.html" class="sidebar-link">支持https</a></li><li><a href="/doc/zh/guide/deployDev/oss.html" class="sidebar-link">接入第三方oss</a></li><li><a href="/doc/zh/guide/deployDev/form.html" class="sidebar-link">获取Form组件的值数据</a></li><li><a href="/doc/zh/guide/deployDev/api.html" class="sidebar-link">API接口文档</a></li><li><a href="/doc/zh/guide/deployDev/log.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="撤销-重做"><a href="#撤销-重做" class="header-anchor">#</a> 撤销/重做</h1> <p>撤销重做我们主要使用了redux-undo这个库配合Dva使用具体使用方法参考如下操作</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createLogger <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux-logger'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> message <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> undoable<span class="token punctuation">,</span> <span class="token punctuation">{</span> StateWithHistory <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux-undo'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Reducer<span class="token punctuation">,</span> AnyAction <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> dva <span class="token operator">=</span> <span class="token punctuation">{</span>
config<span class="token operator">:</span> <span class="token punctuation">{</span>
onAction<span class="token operator">:</span> <span class="token function">createLogger</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">onError</span><span class="token punctuation">(</span><span class="token parameter">e<span class="token operator">:</span> Error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
message<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>message<span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">onReducer</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">reducer<span class="token operator">:</span> Reducer<span class="token operator">&lt;</span>any<span class="token punctuation">,</span> AnyAction<span class="token operator">&gt;</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> undoReducer <span class="token operator">=</span> <span class="token function">undoable</span><span class="token punctuation">(</span>reducer<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">state<span class="token operator">:</span> StateWithHistory<span class="token operator">&lt;</span>any<span class="token operator">&gt;</span><span class="token punctuation">,</span> action<span class="token operator">:</span> AnyAction</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> newState <span class="token operator">=</span> <span class="token function">undoReducer</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> action<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> router <span class="token operator">=</span> newState<span class="token punctuation">.</span>present<span class="token punctuation">.</span>router <span class="token operator">?</span> newState<span class="token punctuation">.</span>present<span class="token punctuation">.</span>router <span class="token operator">:</span> newState<span class="token punctuation">.</span>present<span class="token punctuation">.</span>routing<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token operator">...</span>newState<span class="token punctuation">,</span> router<span class="token operator">:</span> router <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p>以上我们就实现了全局配置redux-undo在撤销重做按钮中我们就可以触发对应的方法来实现撤销重做的功能其次我们还使用了redux-logger来实现redux的日志输出。</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/17/2021, 9:57:34 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/doc/zh/guide/functionRealization/machinePreview.html" class="prev">
真机预览
</a></span> <span class="next"><a href="/doc/zh/guide/functionRealization/screenshot.html">
截图功能
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/18.81ac15ea.js" defer></script><script src="/doc/assets/js/2.a5de04a4.js" defer></script><script src="/doc/assets/js/31.7251d101.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -1,42 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/18.81ac15ea.js" as="script"><link rel="preload" href="/doc/assets/js/2.a5de04a4.js" as="script"><link rel="preload" href="/doc/assets/js/15.751a6d56.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/13.96be485c.js"><link rel="prefetch" href="/doc/assets/js/14.c3ed6dd7.js"><link rel="prefetch" href="/doc/assets/js/16.b025618a.js"><link rel="prefetch" href="/doc/assets/js/17.bf2e8f73.js"><link rel="prefetch" href="/doc/assets/js/19.67f92c26.js"><link rel="prefetch" href="/doc/assets/js/20.3e91412b.js"><link rel="prefetch" href="/doc/assets/js/21.ab262167.js"><link rel="prefetch" href="/doc/assets/js/22.a7421118.js"><link rel="prefetch" href="/doc/assets/js/23.b2f0953d.js"><link rel="prefetch" href="/doc/assets/js/24.945f07e2.js"><link rel="prefetch" href="/doc/assets/js/25.55896e11.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/27.3c7e8c9e.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/29.27514922.js"><link rel="prefetch" href="/doc/assets/js/3.ececc857.js"><link rel="prefetch" href="/doc/assets/js/30.e6444117.js"><link rel="prefetch" href="/doc/assets/js/31.7251d101.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/7.4f98f3a5.js"><link rel="prefetch" href="/doc/assets/js/8.63e7a89b.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/doc/" class="home-link router-link-active"><!----> <span class="site-name">h5-dooring</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/doc/zh/guide/" aria-current="page" class="sidebar-link">基本介绍</a></li><li><a href="/doc/zh/guide/introduced.html" class="sidebar-link">doring如何工作</a></li><li><a href="/doc/zh/guide/startedQuickly.html" class="sidebar-link">快速上手</a></li><li><a href="/doc/zh/guide/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组件开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/componentDev/componentStructure.html" class="sidebar-link">组件结构</a></li><li><a href="/doc/zh/guide/componentDev/DSLAnalysis.html" class="sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="sidebar-link">动态加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>功能实现</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/functionRealization/templateLibrary.html" class="sidebar-link">模板库</a></li><li><a href="/doc/zh/guide/functionRealization/saveJson.html" class="sidebar-link">保存json</a></li><li><a href="/doc/zh/guide/functionRealization/download.html" class="sidebar-link">下载源码</a></li><li><a href="/doc/zh/guide/functionRealization/pagePreview.html" class="sidebar-link">网页预览</a></li><li><a href="/doc/zh/guide/functionRealization/machinePreview.html" class="sidebar-link">真机预览</a></li><li><a href="/doc/zh/guide/functionRealization/revocation.html" class="sidebar-link">撤销/重做</a></li><li><a href="/doc/zh/guide/functionRealization/screenshot.html" aria-current="page" class="active sidebar-link">截图功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>私有化部署和二次开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/deployDev/deploy.html" class="sidebar-link">私有化部署</a></li><li><a href="/doc/zh/guide/deployDev/deploy_v6.html" class="sidebar-link">v6.dooring私有化部署(临时)</a></li><li><a href="/doc/zh/guide/deployDev/dir.html" class="sidebar-link">服务端数据说明</a></li><li><a href="/doc/zh/guide/deployDev/https.html" class="sidebar-link">支持https</a></li><li><a href="/doc/zh/guide/deployDev/oss.html" class="sidebar-link">接入第三方oss</a></li><li><a href="/doc/zh/guide/deployDev/form.html" class="sidebar-link">获取Form组件的值数据</a></li><li><a href="/doc/zh/guide/deployDev/api.html" class="sidebar-link">API接口文档</a></li><li><a href="/doc/zh/guide/deployDev/log.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="截图功能"><a href="#截图功能" class="header-anchor">#</a> 截图功能</h1> <p>截图功能这里我们主要使用了dom-to-image这个库来将html转化为图片并进行分享。</p> <img src="/doc/assets/img/screenshot.daeecedd.png" alt="foo"></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/17/2021, 9:57:34 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/doc/zh/guide/functionRealization/revocation.html" class="prev">
撤销/重做
</a></span> <span class="next"><a href="/doc/zh/guide/deployDev/deploy.html">
私有化部署
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/18.81ac15ea.js" defer></script><script src="/doc/assets/js/2.a5de04a4.js" defer></script><script src="/doc/assets/js/15.751a6d56.js" defer></script>
</body>
</html>

View File

@ -1,42 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/18.81ac15ea.js" as="script"><link rel="preload" href="/doc/assets/js/2.a5de04a4.js" as="script"><link rel="preload" href="/doc/assets/js/8.63e7a89b.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/13.96be485c.js"><link rel="prefetch" href="/doc/assets/js/14.c3ed6dd7.js"><link rel="prefetch" href="/doc/assets/js/15.751a6d56.js"><link rel="prefetch" href="/doc/assets/js/16.b025618a.js"><link rel="prefetch" href="/doc/assets/js/17.bf2e8f73.js"><link rel="prefetch" href="/doc/assets/js/19.67f92c26.js"><link rel="prefetch" href="/doc/assets/js/20.3e91412b.js"><link rel="prefetch" href="/doc/assets/js/21.ab262167.js"><link rel="prefetch" href="/doc/assets/js/22.a7421118.js"><link rel="prefetch" href="/doc/assets/js/23.b2f0953d.js"><link rel="prefetch" href="/doc/assets/js/24.945f07e2.js"><link rel="prefetch" href="/doc/assets/js/25.55896e11.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/27.3c7e8c9e.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/29.27514922.js"><link rel="prefetch" href="/doc/assets/js/3.ececc857.js"><link rel="prefetch" href="/doc/assets/js/30.e6444117.js"><link rel="prefetch" href="/doc/assets/js/31.7251d101.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/7.4f98f3a5.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/doc/" class="home-link router-link-active"><!----> <span class="site-name">h5-dooring</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/doc/zh/guide/" aria-current="page" class="sidebar-link">基本介绍</a></li><li><a href="/doc/zh/guide/introduced.html" class="sidebar-link">doring如何工作</a></li><li><a href="/doc/zh/guide/startedQuickly.html" class="sidebar-link">快速上手</a></li><li><a href="/doc/zh/guide/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组件开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/componentDev/componentStructure.html" class="sidebar-link">组件结构</a></li><li><a href="/doc/zh/guide/componentDev/DSLAnalysis.html" class="sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="sidebar-link">动态加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>功能实现</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/functionRealization/templateLibrary.html" aria-current="page" class="active sidebar-link">模板库</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/doc/zh/guide/functionRealization/templateLibrary.html#模板库实现思路" class="sidebar-link">模板库实现思路</a></li></ul></li><li><a href="/doc/zh/guide/functionRealization/saveJson.html" class="sidebar-link">保存json</a></li><li><a href="/doc/zh/guide/functionRealization/download.html" class="sidebar-link">下载源码</a></li><li><a href="/doc/zh/guide/functionRealization/pagePreview.html" class="sidebar-link">网页预览</a></li><li><a href="/doc/zh/guide/functionRealization/machinePreview.html" class="sidebar-link">真机预览</a></li><li><a href="/doc/zh/guide/functionRealization/revocation.html" class="sidebar-link">撤销/重做</a></li><li><a href="/doc/zh/guide/functionRealization/screenshot.html" class="sidebar-link">截图功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>私有化部署和二次开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/deployDev/deploy.html" class="sidebar-link">私有化部署</a></li><li><a href="/doc/zh/guide/deployDev/deploy_v6.html" class="sidebar-link">v6.dooring私有化部署(临时)</a></li><li><a href="/doc/zh/guide/deployDev/dir.html" class="sidebar-link">服务端数据说明</a></li><li><a href="/doc/zh/guide/deployDev/https.html" class="sidebar-link">支持https</a></li><li><a href="/doc/zh/guide/deployDev/oss.html" class="sidebar-link">接入第三方oss</a></li><li><a href="/doc/zh/guide/deployDev/form.html" class="sidebar-link">获取Form组件的值数据</a></li><li><a href="/doc/zh/guide/deployDev/api.html" class="sidebar-link">API接口文档</a></li><li><a href="/doc/zh/guide/deployDev/log.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="模板库实现思路"><a href="#模板库实现思路" class="header-anchor">#</a> 模板库实现思路</h2> <p>我们目前开放了模板库功能一方面我们会定期配置行业模板另一个方面Dooring还支持用户自己配置模板可以一键保存到云端供用户使用。我们也可以将模板变成自己的页面共享给其他人。实现方式本质上是保存用户的配置信息上传到服务器中做存储在后台提供了管理模板的模块可以修改删除模板。如下图所示</p> <h3 id="模板前台展示"><a href="#模板前台展示" class="header-anchor">#</a> 模板前台展示:</h3> <img src="/doc/assets/img/template-ft.4f6e0d14.png" alt="foo"> <h3 id="模板后台展示"><a href="#模板后台展示" class="header-anchor">#</a> 模板后台展示:</h3> <img src="/doc/assets/img/template-bg.244b9ac7.png" alt="foo"></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/17/2021, 9:57:34 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="prev">
动态加载
</a></span> <span class="next"><a href="/doc/zh/guide/functionRealization/saveJson.html">
保存json
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/18.81ac15ea.js" defer></script><script src="/doc/assets/js/2.a5de04a4.js" defer></script><script src="/doc/assets/js/8.63e7a89b.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -1,42 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/18.81ac15ea.js" as="script"><link rel="preload" href="/doc/assets/js/2.a5de04a4.js" as="script"><link rel="preload" href="/doc/assets/js/16.b025618a.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/13.96be485c.js"><link rel="prefetch" href="/doc/assets/js/14.c3ed6dd7.js"><link rel="prefetch" href="/doc/assets/js/15.751a6d56.js"><link rel="prefetch" href="/doc/assets/js/17.bf2e8f73.js"><link rel="prefetch" href="/doc/assets/js/19.67f92c26.js"><link rel="prefetch" href="/doc/assets/js/20.3e91412b.js"><link rel="prefetch" href="/doc/assets/js/21.ab262167.js"><link rel="prefetch" href="/doc/assets/js/22.a7421118.js"><link rel="prefetch" href="/doc/assets/js/23.b2f0953d.js"><link rel="prefetch" href="/doc/assets/js/24.945f07e2.js"><link rel="prefetch" href="/doc/assets/js/25.55896e11.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/27.3c7e8c9e.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/29.27514922.js"><link rel="prefetch" href="/doc/assets/js/3.ececc857.js"><link rel="prefetch" href="/doc/assets/js/30.e6444117.js"><link rel="prefetch" href="/doc/assets/js/31.7251d101.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/7.4f98f3a5.js"><link rel="prefetch" href="/doc/assets/js/8.63e7a89b.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/doc/" class="home-link router-link-active"><!----> <span class="site-name">h5-dooring</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/doc/zh/guide/" aria-current="page" class="sidebar-link">基本介绍</a></li><li><a href="/doc/zh/guide/introduced.html" aria-current="page" class="active sidebar-link">doring如何工作</a></li><li><a href="/doc/zh/guide/startedQuickly.html" class="sidebar-link">快速上手</a></li><li><a href="/doc/zh/guide/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组件开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/componentDev/componentStructure.html" class="sidebar-link">组件结构</a></li><li><a href="/doc/zh/guide/componentDev/DSLAnalysis.html" class="sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="sidebar-link">动态加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>功能实现</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/functionRealization/templateLibrary.html" class="sidebar-link">模板库</a></li><li><a href="/doc/zh/guide/functionRealization/saveJson.html" class="sidebar-link">保存json</a></li><li><a href="/doc/zh/guide/functionRealization/download.html" class="sidebar-link">下载源码</a></li><li><a href="/doc/zh/guide/functionRealization/pagePreview.html" class="sidebar-link">网页预览</a></li><li><a href="/doc/zh/guide/functionRealization/machinePreview.html" class="sidebar-link">真机预览</a></li><li><a href="/doc/zh/guide/functionRealization/revocation.html" class="sidebar-link">撤销/重做</a></li><li><a href="/doc/zh/guide/functionRealization/screenshot.html" class="sidebar-link">截图功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>私有化部署和二次开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/deployDev/deploy.html" class="sidebar-link">私有化部署</a></li><li><a href="/doc/zh/guide/deployDev/deploy_v6.html" class="sidebar-link">v6.dooring私有化部署(临时)</a></li><li><a href="/doc/zh/guide/deployDev/dir.html" class="sidebar-link">服务端数据说明</a></li><li><a href="/doc/zh/guide/deployDev/https.html" class="sidebar-link">支持https</a></li><li><a href="/doc/zh/guide/deployDev/oss.html" class="sidebar-link">接入第三方oss</a></li><li><a href="/doc/zh/guide/deployDev/form.html" class="sidebar-link">获取Form组件的值数据</a></li><li><a href="/doc/zh/guide/deployDev/api.html" class="sidebar-link">API接口文档</a></li><li><a href="/doc/zh/guide/deployDev/log.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><img src="/doc/assets/img/framework.1c9c696b.png" alt="foo"> <p>注:灰色部分还未实现,正在更新中...</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/17/2021, 7:12:02 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/doc/zh/guide/" class="prev router-link-active">
基本介绍
</a></span> <span class="next"><a href="/doc/zh/guide/startedQuickly.html">
快速上手
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/18.81ac15ea.js" defer></script><script src="/doc/assets/js/2.a5de04a4.js" defer></script><script src="/doc/assets/js/16.b025618a.js" defer></script>
</body>
</html>

View File

@ -1,44 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>快速上手 | h5-dooring</title>
<meta name="generator" content="VuePress 1.8.0">
<meta name="description" content="">
<link rel="preload" href="/doc/assets/css/0.styles.150aeb2b.css" as="style"><link rel="preload" href="/doc/assets/js/app.95eb3fd8.js" as="script"><link rel="preload" href="/doc/assets/js/18.81ac15ea.js" as="script"><link rel="preload" href="/doc/assets/js/2.a5de04a4.js" as="script"><link rel="preload" href="/doc/assets/js/17.bf2e8f73.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.6f1d3bfc.js"><link rel="prefetch" href="/doc/assets/js/12.fab21abd.js"><link rel="prefetch" href="/doc/assets/js/13.96be485c.js"><link rel="prefetch" href="/doc/assets/js/14.c3ed6dd7.js"><link rel="prefetch" href="/doc/assets/js/15.751a6d56.js"><link rel="prefetch" href="/doc/assets/js/16.b025618a.js"><link rel="prefetch" href="/doc/assets/js/19.67f92c26.js"><link rel="prefetch" href="/doc/assets/js/20.3e91412b.js"><link rel="prefetch" href="/doc/assets/js/21.ab262167.js"><link rel="prefetch" href="/doc/assets/js/22.a7421118.js"><link rel="prefetch" href="/doc/assets/js/23.b2f0953d.js"><link rel="prefetch" href="/doc/assets/js/24.945f07e2.js"><link rel="prefetch" href="/doc/assets/js/25.55896e11.js"><link rel="prefetch" href="/doc/assets/js/26.3f135e70.js"><link rel="prefetch" href="/doc/assets/js/27.3c7e8c9e.js"><link rel="prefetch" href="/doc/assets/js/28.47b21cca.js"><link rel="prefetch" href="/doc/assets/js/29.27514922.js"><link rel="prefetch" href="/doc/assets/js/3.ececc857.js"><link rel="prefetch" href="/doc/assets/js/30.e6444117.js"><link rel="prefetch" href="/doc/assets/js/31.7251d101.js"><link rel="prefetch" href="/doc/assets/js/32.dab5a5d2.js"><link rel="prefetch" href="/doc/assets/js/4.cde629ec.js"><link rel="prefetch" href="/doc/assets/js/5.be0f7e94.js"><link rel="prefetch" href="/doc/assets/js/6.4ee07341.js"><link rel="prefetch" href="/doc/assets/js/7.4f98f3a5.js"><link rel="prefetch" href="/doc/assets/js/8.63e7a89b.js"><link rel="prefetch" href="/doc/assets/js/9.b96234f5.js">
<link rel="stylesheet" href="/doc/assets/css/0.styles.150aeb2b.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/doc/" class="home-link router-link-active"><!----> <span class="site-name">h5-dooring</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/doc/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/doc/zh/guide/" class="nav-link router-link-active">
文档
</a></div><div class="nav-item"><a href="http://h5.dooring.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
体验
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer" class="nav-link external">
github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/doc/zh/guide/" aria-current="page" class="sidebar-link">基本介绍</a></li><li><a href="/doc/zh/guide/introduced.html" class="sidebar-link">doring如何工作</a></li><li><a href="/doc/zh/guide/startedQuickly.html" aria-current="page" class="active sidebar-link">快速上手</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/doc/zh/guide/startedQuickly.html#从零搭建一个h5表单页面" class="sidebar-link">从零搭建一个H5表单页面</a></li><li class="sidebar-sub-header"><a href="/doc/zh/guide/startedQuickly.html#环境准备" class="sidebar-link">环境准备</a></li><li class="sidebar-sub-header"><a href="/doc/zh/guide/startedQuickly.html#源码工程" class="sidebar-link">源码工程</a></li><li class="sidebar-sub-header"><a href="/doc/zh/guide/startedQuickly.html#本地运行" class="sidebar-link">本地运行</a></li></ul></li><li><a href="/doc/zh/guide/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组件开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/componentDev/componentStructure.html" class="sidebar-link">组件结构</a></li><li><a href="/doc/zh/guide/componentDev/DSLAnalysis.html" class="sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.html" class="sidebar-link">动态加载</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>功能实现</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/functionRealization/templateLibrary.html" class="sidebar-link">模板库</a></li><li><a href="/doc/zh/guide/functionRealization/saveJson.html" class="sidebar-link">保存json</a></li><li><a href="/doc/zh/guide/functionRealization/download.html" class="sidebar-link">下载源码</a></li><li><a href="/doc/zh/guide/functionRealization/pagePreview.html" class="sidebar-link">网页预览</a></li><li><a href="/doc/zh/guide/functionRealization/machinePreview.html" class="sidebar-link">真机预览</a></li><li><a href="/doc/zh/guide/functionRealization/revocation.html" class="sidebar-link">撤销/重做</a></li><li><a href="/doc/zh/guide/functionRealization/screenshot.html" class="sidebar-link">截图功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>私有化部署和二次开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/doc/zh/guide/deployDev/deploy.html" class="sidebar-link">私有化部署</a></li><li><a href="/doc/zh/guide/deployDev/deploy_v6.html" class="sidebar-link">v6.dooring私有化部署(临时)</a></li><li><a href="/doc/zh/guide/deployDev/dir.html" class="sidebar-link">服务端数据说明</a></li><li><a href="/doc/zh/guide/deployDev/https.html" class="sidebar-link">支持https</a></li><li><a href="/doc/zh/guide/deployDev/oss.html" class="sidebar-link">接入第三方oss</a></li><li><a href="/doc/zh/guide/deployDev/form.html" class="sidebar-link">获取Form组件的值数据</a></li><li><a href="/doc/zh/guide/deployDev/api.html" class="sidebar-link">API接口文档</a></li><li><a href="/doc/zh/guide/deployDev/log.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="快速上手"><a href="#快速上手" class="header-anchor">#</a> 快速上手</h1> <h2 id="从零搭建一个h5表单页面"><a href="#从零搭建一个h5表单页面" class="header-anchor">#</a> 从零搭建一个H5表单页面</h2> <iframe src="//player.bilibili.com/player.html?aid=715343955&amp;bvid=BV1QQ4y1Z725&amp;cid=332145157&amp;page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="allowfullscreen" style="width:100%;height:420px;margin-top:20px;"></iframe> <h2 id="环境准备"><a href="#环境准备" class="header-anchor">#</a> 环境准备</h2> <p>首先得有 node并确保 node 版本是 <code>10.13</code> 或以上mac/win 下推荐使用 n 来管理 node 版本)</p> <div class="language- extra-class"><pre class="language-text"><code>$ node-v
v10.13.0
</code></pre></div><p>注:推荐使用 yarn 管理 npm 依赖</p> <h2 id="源码工程"><a href="#源码工程" class="header-anchor">#</a> 源码工程</h2> <table><thead><tr><th>h5_plus(编辑器项目)</th> <th>admin(管理后台)</th> <th>Server(服务端项目)</th></tr></thead> <tbody></tbody></table> <p>本地拿到源码工程之后先安装对应依赖,在对应工程目录里执行 yarn 命令,等待依赖安装完成。</p> <h2 id="本地运行"><a href="#本地运行" class="header-anchor">#</a> 本地运行</h2> <p>1.首先本地启动 server在 src 目录的 index.js 中修改跨域白名单,改为本地的 ip+端口如http://192.167.0.3:8000</p> <p>2.其次本地启动 h5_plus,启动完毕在浏览器打开对应的启动地址即可查看,如下:</p> <img src="/doc/assets/img/home.f76105db.png" alt="foo"></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">5/8/2021, 12:34:13 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/doc/zh/guide/introduced.html" class="prev">
doring如何工作
</a></span> <span class="next"><a href="/doc/zh/guide/directoryStructure.html">
目录结构
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/doc/assets/js/app.95eb3fd8.js" defer></script><script src="/doc/assets/js/18.81ac15ea.js" defer></script><script src="/doc/assets/js/2.a5de04a4.js" defer></script><script src="/doc/assets/js/17.bf2e8f73.js" defer></script>
</body>
</html>

BIN
src/assets/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

View File

@ -1,44 +0,0 @@
import React, { memo } from 'react';
import { IFooterConfig } from './schema';
import logo from '@/assets/footer.png';
const Footer = memo((props: IFooterConfig) => {
const { bgColor, text, color, align, fontSize, height } = props;
return (
<>
{props.isTpl && (
<div>
<img src={logo} alt="" />
</div>
)}
{!props.isTpl && (
<div
style={{
overflow: 'hidden',
position: 'absolute',
width: `${props.baseWidth}%`,
height: `${props.baseHeight}%`,
borderRadius: props.baseRadius,
transform: `translate(${props.baseLeft}px,${props.baseTop}px)
scale(${props.baseScale / 100})
rotate(${props.baseRotate}deg)`,
}}
>
<footer
style={{
backgroundColor: bgColor,
color,
fontSize,
textAlign: align,
height,
lineHeight: height + 'px',
}}
>
{text}
</footer>
</div>
)}
</>
);
});
export default Footer;

View File

@ -1,90 +0,0 @@
import {
IColorConfigType,
INumberConfigType,
ISelectConfigType,
ITextConfigType,
TColorDefaultType,
TNumberDefaultType,
TSelectDefaultType,
TTextDefaultType,
} from '@/components/FormComponents/types';
import { baseConfig, baseDefault, ICommonBaseType } from '../../common';
export type TfooterSelectKeyType = 'left' | 'center' | 'right';
export type TFooterEditData = Array<
IColorConfigType | INumberConfigType | ITextConfigType | ISelectConfigType<TfooterSelectKeyType>
>;
export interface IFooterConfig extends ICommonBaseType {
bgColor: TColorDefaultType;
text: TTextDefaultType;
color: TColorDefaultType;
align: TSelectDefaultType<TfooterSelectKeyType>;
fontSize: TNumberDefaultType;
height: TNumberDefaultType;
}
export interface IFooterSchema {
editData: TFooterEditData;
config: IFooterConfig;
}
const Footer: IFooterSchema = {
editData: [
...baseConfig,
{
key: 'bgColor',
name: '背景色',
type: 'Color',
},
{
key: 'height',
name: '高度',
type: 'Number',
},
{
key: 'text',
name: '文字',
type: 'Text',
},
{
key: 'fontSize',
name: '字体大小',
type: 'Number',
},
{
key: 'color',
name: '文字颜色',
type: 'Color',
},
{
key: 'align',
name: '对齐方式',
type: 'Select',
range: [
{
key: 'left',
text: '左对齐',
},
{
key: 'center',
text: '居中对齐',
},
{
key: 'right',
text: '右对齐',
},
],
},
],
config: {
bgColor: 'rgba(0,0,0,1)',
text: '页脚Footer',
color: 'rgba(255,255,255,1)',
align: 'center',
fontSize: 16,
height: 48,
...baseDefault,
},
};
export default Footer;

View File

@ -1,6 +0,0 @@
const template = {
type: 'Footer',
h: 10,
displayName: '页脚组件',
};
export default template;

View File

@ -1,5 +1,4 @@
import Carousel from './Carousel/schema';
import Footer from './Footer/schema';
import Form from './Form/schema';
import Header from './Header/schema';
import Icon from './Icon/schema';
@ -15,7 +14,6 @@ import RichText from './RichText/schema';
const basicSchema = {
Carousel,
Footer,
Form,
Header,
Icon,

View File

@ -1,5 +1,4 @@
import Carousel from './Carousel/template';
import Footer from './Footer/template';
import Form from './Form/template';
import Header from './Header/template';
import Icon from './Icon/template';
@ -15,7 +14,6 @@ import RichText from './RichText/template';
const basicTemplate = [
Carousel,
Footer,
Form,
Header,
Icon,

View File

@ -23,7 +23,7 @@
height: 35px;
border-radius: 3px;
overflow: hidden;
background: url(../../../../assets/logo.svg) no-repeat;
background: url(../../../../assets/logo.png) no-repeat;
background-size: contain;
line-height: 50px;
margin-top: 7px;

View File

@ -1,5 +1,5 @@
import React, { useRef, memo, useMemo, useState, useEffect } from 'react';
import { Button, Input, Modal, Select, Upload, Tooltip, Badge } from 'antd';
import { Button, Input, Modal, Upload, Tooltip, Badge } from 'antd';
import {
ArrowLeftOutlined,
MobileOutlined,

View File

@ -17,7 +17,7 @@ const Home = () => {
if (type === 'H5') {
history.push('/editor?tid=123456');
} else if (type === 'PC') {
message.error('该功能暂未开放, 敬请关注...');
window.open('http://v6.dooring.cn/beta');
} else {
history.push('/ide');
}
@ -98,15 +98,11 @@ const Home = () => {
<div style={{ display: 'flex', justifyContent: 'center' }}>
<div style={{ width: '500px', marginLeft: '40px', marginTop: '32px' }}>
<span style={{ marginRight: '24px' }}>: </span>
<a href="http://49.234.61.19/qt" style={{ marginRight: '24px' }} target="_blank">
-线gif动图制作平台
<a href="http://v6.dooring.cn/beta" style={{ marginRight: '24px' }} target="_blank">
v6.dooring可视化大屏编辑器
</a>
<a
href="http://49.234.61.19/tool/cssTriangle"
style={{ marginRight: '24px' }}
target="_blank"
>
线css三角形生成器
<a href="http://h5.dooring.cn/qt" style={{ marginRight: '24px' }} target="_blank">
线gif动图制作平台
</a>
</div>
</div>

View File

@ -28,7 +28,7 @@
border-radius: 3px;
vertical-align: middle;
img {
width: auto;
width: 108px;
height: auto;
max-width: 100%;
max-height: 100%;

View File

@ -3,7 +3,7 @@ import { Controlled } from 'react-codemirror2';
import { useState } from 'react';
import { Button, message } from 'antd';
import { saveAs } from 'file-saver';
import Logo from '@/assets/logo.svg';
import Logo from '@/assets/logo.png';
import styles from './index.less';
import { isDev, useGetRect } from 'utils/tool';
import { SaveOutlined } from '@ant-design/icons';
@ -135,7 +135,7 @@ export default function() {
<div className={styles.header}>
<div className={styles.logoArea}>
<div className={styles.logo} title="Dooring">
<a href="http://io.nainor.com/h5_visible">
<a href="http://h5.dooring.cn">
<img src={Logo} alt="Dooring-强大的h5编辑器" />
</a>
</div>