mirror of
https://github.com/MrXujiang/h5-Dooring.git
synced 2026-03-15 08:10:50 +00:00
Merge branch 'MrXujiang:master' into master
This commit is contained in:
mokinzhao
GitHub
commit
d45b13ff16
2
.github/FUNDING.yml
vendored
2
.github/FUNDING.yml
vendored
@ -1,3 +1,3 @@
|
||||
# These are supported funding model platforms
|
||||
|
||||
github: [MrXujiang, AleryXu, yehuozhili]
|
||||
open_collective: h5-dooring
|
||||
|
||||
6
.gitignore
vendored
6
.gitignore
vendored
@ -103,4 +103,8 @@ typings/
|
||||
.tern-port
|
||||
|
||||
.umi/
|
||||
.umi-production/
|
||||
.umi-production/
|
||||
|
||||
# production
|
||||
/dist
|
||||
/doc-dist
|
||||
|
||||
@ -10,7 +10,7 @@ export default defineConfig({
|
||||
},
|
||||
devtool: 'source-map',
|
||||
antd: {},
|
||||
title: '趣谈前端-h5-dooring',
|
||||
title: 'h5-dooring',
|
||||
// exportStatic: {},
|
||||
base: '/',
|
||||
publicPath: '/',
|
||||
|
||||
@ -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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/17.e2c644fa.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/16.ebc27227.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/2.693230f5.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>How did we get 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.1cec26f9.js" defer></script><script src="/doc/assets/js/17.e2c644fa.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: 73 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 404 KiB |
@ -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 |
@ -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 |
@ -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;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,107 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[11],
|
||||
{
|
||||
360: function(e, t, v) {
|
||||
e.exports = v.p + 'assets/img/deploy.d1b1d698.png';
|
||||
},
|
||||
389: function(e, t, v) {
|
||||
'use strict';
|
||||
v.r(t);
|
||||
var _ = v(42),
|
||||
r = Object(_.a)(
|
||||
{},
|
||||
function() {
|
||||
var e = this,
|
||||
t = e.$createElement,
|
||||
_ = e._self._c || t;
|
||||
return _('ContentSlotsDistributor', { attrs: { 'slot-key': e.$parent.slotKey } }, [
|
||||
_('p', [e._v('私有化部署需要获取4个核心项目包, 包括')]),
|
||||
e._v(' '),
|
||||
_('ul', [
|
||||
_('li', [e._v('H5编辑器(h5_plus)')]),
|
||||
e._v(' '),
|
||||
_('li', [e._v('H5基座(h5)')]),
|
||||
e._v(' '),
|
||||
_('li', [e._v('Dooring管理后台(Dooring-Admin)')]),
|
||||
e._v(' '),
|
||||
_('li', [e._v('服务端项目(Server)')]),
|
||||
]),
|
||||
e._v(' '),
|
||||
_('p', [
|
||||
e._v('获取以上四个核心源码工程需要满足商业授权协议, 具体可联系'),
|
||||
_(
|
||||
'a',
|
||||
{
|
||||
attrs: {
|
||||
href: 'http://h5.dooring.cn/uploads/WechatIMG3_1758e9753e2.jpeg',
|
||||
target: '_blank',
|
||||
rel: 'noopener noreferrer',
|
||||
},
|
||||
},
|
||||
[e._v('徐小夕'), _('OutboundLink')],
|
||||
1,
|
||||
),
|
||||
]),
|
||||
e._v(' '),
|
||||
_('h3', { attrs: { id: '部署架构图' } }, [
|
||||
_('a', { staticClass: 'header-anchor', attrs: { href: '#部署架构图' } }, [
|
||||
e._v('#'),
|
||||
]),
|
||||
e._v(' 部署架构图'),
|
||||
]),
|
||||
e._v(' '),
|
||||
_('img', { attrs: { src: v(360), alt: 'H5-dooring部署' } }),
|
||||
e._v(' '),
|
||||
_('p', [e._v('部署流程如下:')]),
|
||||
e._v(' '),
|
||||
_('ol', [
|
||||
_('li', [e._v('下载4个源码工程, 安装依赖(npm install 或 yarn)')]),
|
||||
e._v(' '),
|
||||
_('li', [
|
||||
e._v('打包3个前端工程至'),
|
||||
_('code', [e._v('server')]),
|
||||
e._v('的static目录下'),
|
||||
]),
|
||||
e._v(' '),
|
||||
_('li', [
|
||||
e._v('在'),
|
||||
_('code', [e._v('server')]),
|
||||
e._v('下本地运行 '),
|
||||
_('code', [e._v('yarn start')]),
|
||||
e._v(' 或 '),
|
||||
_('code', [e._v('npm start')]),
|
||||
e._v(' 启动服务端进行本地测试'),
|
||||
]),
|
||||
e._v(' '),
|
||||
_('li', [
|
||||
e._v('打包服务端代码, '),
|
||||
_('code', [e._v('yarn build')]),
|
||||
e._v(' 生成 '),
|
||||
_('code', [e._v('dist')]),
|
||||
e._v(' 目录, 建议使用 '),
|
||||
_('code', [e._v('pm2')]),
|
||||
e._v(' 做'),
|
||||
_('code', [e._v('nodejs')]),
|
||||
e._v('服务的负载均衡, 运行 '),
|
||||
_('code', [e._v('pm2 start dist/index.js')]),
|
||||
e._v('启动生产环境代码'),
|
||||
]),
|
||||
]),
|
||||
e._v(' '),
|
||||
_('p', [
|
||||
e._v('也可以将以上步骤集成到gitlab等CI, CD服务中, 进行自动化打包发布, 或者采用'),
|
||||
_('code', [e._v('docker')]),
|
||||
e._v('进行容器化部署.'),
|
||||
]),
|
||||
]);
|
||||
},
|
||||
[],
|
||||
!1,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
);
|
||||
t.default = r.exports;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,39 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[12],
|
||||
{
|
||||
361: function(t, e, s) {
|
||||
t.exports = s.p + 'assets/img/preview-machine.895a0711.png';
|
||||
},
|
||||
392: 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(361), alt: 'foo' } }),
|
||||
t._v(' '),
|
||||
a('p', [t._v('由于不同机型预览的效果有些许不同，最终效果以实际看到的为主。')]),
|
||||
]);
|
||||
},
|
||||
[],
|
||||
!1,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
);
|
||||
e.default = n.exports;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,42 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[13],
|
||||
{
|
||||
364: function(t, s, e) {
|
||||
t.exports = e.p + 'assets/img/screenshot.daeecedd.png';
|
||||
},
|
||||
395: 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(364), alt: 'foo' } }),
|
||||
]);
|
||||
},
|
||||
[],
|
||||
!1,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
);
|
||||
s.default = i.exports;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,31 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[14],
|
||||
{
|
||||
367: function(t, s, e) {
|
||||
t.exports = e.p + 'assets/img/framework.1c9c696b.png';
|
||||
},
|
||||
399: 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(367), alt: 'foo' } }),
|
||||
this._v(' '),
|
||||
s('p', [this._v('注：灰色部分还未实现，正在更新中...')]),
|
||||
]);
|
||||
},
|
||||
[],
|
||||
!1,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
);
|
||||
s.default = o.exports;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,93 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[15],
|
||||
{
|
||||
368: function(t, a, s) {
|
||||
t.exports = s.p + 'assets/img/home.f76105db.png';
|
||||
},
|
||||
400: function(t, a, s) {
|
||||
'use strict';
|
||||
s.r(a);
|
||||
var e = s(42),
|
||||
r = 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: '环境准备' } }, [
|
||||
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: s(368), alt: 'foo' } }),
|
||||
]);
|
||||
},
|
||||
[],
|
||||
!1,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
);
|
||||
a.default = r.exports;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,161 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[16],
|
||||
{
|
||||
378: function(t, e, a) {
|
||||
'use strict';
|
||||
a.r(e);
|
||||
var o = a(374),
|
||||
n = a(375),
|
||||
i = a(376),
|
||||
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;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,50 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[17],
|
||||
{
|
||||
377: 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;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,25 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[18],
|
||||
{
|
||||
384: 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;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,26 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[19],
|
||||
{
|
||||
383: 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;
|
||||
},
|
||||
},
|
||||
]);
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,311 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[20],
|
||||
{
|
||||
385: 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;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,380 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[21],
|
||||
{
|
||||
386: 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('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中自定义更多辅助信息，方便使用者更高效的使用我们的编辑器。',
|
||||
),
|
||||
]),
|
||||
]);
|
||||
},
|
||||
[],
|
||||
!1,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
);
|
||||
s.default = p.exports;
|
||||
},
|
||||
},
|
||||
]);
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,354 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[23],
|
||||
{
|
||||
390: 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;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,330 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[24],
|
||||
{
|
||||
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('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('中找到我们.'),
|
||||
]),
|
||||
]);
|
||||
},
|
||||
[],
|
||||
!1,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
);
|
||||
s.default = e.exports;
|
||||
},
|
||||
},
|
||||
]);
|
||||
File diff suppressed because one or more lines are too long
@ -1,262 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[26],
|
||||
{
|
||||
394: 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;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,55 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[27],
|
||||
{
|
||||
396: 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;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -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, '"') + '"'),
|
||||
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) {},
|
||||
369: function(t, n, e) {
|
||||
t.exports = e.p + 'assets/img/logo.001d04e6.svg';
|
||||
},
|
||||
370: function(t, n, e) {
|
||||
'use strict';
|
||||
e(332);
|
||||
},
|
||||
379: 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(370), 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(369), 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;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,34 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[4],
|
||||
{
|
||||
335: function(t, e, n) {},
|
||||
373: function(t, e, n) {
|
||||
'use strict';
|
||||
n(335);
|
||||
},
|
||||
401: 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;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,40 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[5],
|
||||
{
|
||||
333: function(e, t, c) {},
|
||||
371: function(e, t, c) {
|
||||
'use strict';
|
||||
c(333);
|
||||
},
|
||||
380: 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(371), 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;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,106 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[6],
|
||||
{
|
||||
334: function(e, t, o) {},
|
||||
372: function(e, t, o) {
|
||||
'use strict';
|
||||
o(334);
|
||||
},
|
||||
381: 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(372), 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;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,44 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[7],
|
||||
{
|
||||
362: function(t, s, e) {
|
||||
t.exports = e.p + 'assets/img/preview-flow.b37c7798.png';
|
||||
},
|
||||
363: function(t, s, e) {
|
||||
t.exports = e.p + 'assets/img/preview-page.3ec86df5.png';
|
||||
},
|
||||
393: 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(362), alt: 'foo' } }),
|
||||
t._v(' '),
|
||||
r('p', [t._v('前端预览界面：')]),
|
||||
t._v(' '),
|
||||
r('img', { attrs: { src: e(363), alt: 'foo' } }),
|
||||
]);
|
||||
},
|
||||
[],
|
||||
!1,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
);
|
||||
s.default = a.exports;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,62 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[8],
|
||||
{
|
||||
365: function(t, s, a) {
|
||||
t.exports = a.p + 'assets/img/template-ft.4f6e0d14.png';
|
||||
},
|
||||
366: function(t, s, a) {
|
||||
t.exports = a.p + 'assets/img/template-bg.244b9ac7.png';
|
||||
},
|
||||
397: 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(365), 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(366), alt: 'foo' } }),
|
||||
]);
|
||||
},
|
||||
[],
|
||||
!1,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
);
|
||||
s.default = r.exports;
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -1,92 +0,0 @@
|
||||
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||||
[9],
|
||||
{
|
||||
358: function(t, o, r) {
|
||||
t.exports = r.p + 'assets/img/logo.001d04e6.svg';
|
||||
},
|
||||
382: 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 |
@ -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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/3.0105453b.js" as="script"><link rel="preload" href="/doc/assets/js/18.8be51919.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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/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/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/api.html" class="sidebar-link">API接口文档</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.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/3.0105453b.js" defer></script><script src="/doc/assets/js/18.8be51919.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/19.5b05b8ec.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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/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/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/api.html" class="sidebar-link">API接口文档</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.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/19.5b05b8ec.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/20.3fd45382.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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/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/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/api.html" class="sidebar-link">API接口文档</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.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/20.3fd45382.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,69 +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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/21.390bb49b.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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></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/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/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/api.html" class="sidebar-link">API接口文档</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">=></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"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
< 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="" />
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></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"><</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">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span><span class="token plain-text">
|
||||
< img src=</span><span class="token punctuation">{</span>logo <span class="token operator">&&</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"> />
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></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"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></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></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/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.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/21.390bb49b.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/10.b0d462d3.js" as="script"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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" class="sidebar-link">DSL设计</a></li><li><a href="/doc/zh/guide/componentDev/dynamicLoading.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/dynamicLoading.html#umi3提供的dynamic" class="sidebar-link">umi3提供的dynamic</a></li></ul></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/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/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/api.html" class="sidebar-link">API接口文档</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>目前H5-Dooring的组件都是通过动态加载的方式引入，好处是我们在页面中只会加载我们需要的组件，不需要的组件不会被加载，这样可以提高页面加载的速度，这样做也会出现一些问题，比如一个长页面，配置了很多组件，那么一个页面加载过程可以会触发多次请求，目前还没有遇到性能问题，但后续会逐渐优化这个问题。</p> <h2 id="umi3提供的dynamic"><a href="#umi3提供的dynamic" class="header-anchor">#</a> umi3提供的dynamic</h2> <p>目前组件的动态加载我们采用的umi的dynamic方案，基于它我们上层封装了一个组件动态加载器，原理如下：</p> <img src="/doc/assets/img/dynamic.15a5303a.png" alt="foo"> <p>具体代码可以参考Dooring的Github地址：<a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer">https://github.com/MrXujiang/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></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/DSLAnalysis.html" class="prev">
|
||||
DSL设计
|
||||
</a></span> <span class="next"><a href="/doc/zh/guide/functionRealization/templateLibrary.html">
|
||||
模板库
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/doc/assets/js/app.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/10.b0d462d3.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,313 +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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/22.dd7423cf.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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/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/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/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></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">"result"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"n"</span><span class="token operator">:</span> <span class="token string">"test"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"od"</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">"h5"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"t"</span><span class="token operator">:</span> <span class="token string">"23242ED"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"n"</span><span class="token operator">:</span> <span class="token string">"测试页面"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"rp"</span><span class="token operator">:</span> <span class="token string">"AAAAA"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"maxage"</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">"result"</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"msg"</span><span class="token operator">:</span> <span class="token string">"退出成功"</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">"id"</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"n"</span><span class="token operator">:</span> <span class="token string">"test"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"co"</span><span class="token operator">:</span> <span class="token string">"123456"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"od"</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">"h5"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"t"</span><span class="token operator">:</span> <span class="token string">"23242ED"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"n"</span><span class="token operator">:</span> <span class="token string">"测试页面"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"wx"</span><span class="token operator">:</span> <span class="token string">"Mr_xuxiaoxi"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"rp"</span><span class="token operator">:</span> <span class="token string">"AAAAA"</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">"id"</span><span class="token operator">:</span> <span class="token string">"3422EF"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"n"</span><span class="token operator">:</span> <span class="token string">"test"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"wx"</span><span class="token operator">:</span> <span class="token string">"Mr_xuxiaoxi"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"co"</span><span class="token operator">:</span> <span class="token string">"123456"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"od"</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">"h5"</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">"tpl"</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">"rp"</span><span class="token operator">:</span> <span class="token string">"AAAAA"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"h5Num"</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"tplNum"</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>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">"state"</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"result"</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"msg"</span><span class="token operator">:</span> <span class="token string">"修改成功"</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">"state"</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"result"</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"msg"</span><span class="token operator">:</span> <span class="token string">"删除成功"</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">"pageConfig"</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">"tpl"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"879742"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"item"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"Carousel"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"config"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"direction"</span><span class="token operator">:</span> <span class="token string">"left"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"swipeable"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"autoPlay"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"imgList"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"1"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"趣谈小课1"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"desc"</span><span class="token operator">:</span> <span class="token string">"致力于打造优质小课程"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"link"</span><span class="token operator">:</span> <span class="token string">"xxxxx"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"imgUrl"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"uid"</span><span class="token operator">:</span> <span class="token string">"001"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"image.png"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"status"</span><span class="token operator">:</span> <span class="token string">"done"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"http://io.nainor.com/uploads/1_1740bd7c3dc.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>
|
||||
<span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"2"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"趣谈小课1"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"desc"</span><span class="token operator">:</span> <span class="token string">"致力于打造优质小课程"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"link"</span><span class="token operator">:</span> <span class="token string">"xxxxx"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"imgUrl"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"uid"</span><span class="token operator">:</span> <span class="token string">"001"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"image.png"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"status"</span><span class="token operator">:</span> <span class="token string">"done"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"http://io.nainor.com/uploads/2_1740bd8d525.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>
|
||||
<span class="token property">"tplImg"</span><span class="token operator">:</span> <span class="token string">"http://io.nainor.com/uploads/carousal_17442e1420f.png"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"h"</span><span class="token operator">:</span> <span class="token number">82</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"editableEl"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"key"</span><span class="token operator">:</span> <span class="token string">"direction"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"方向"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"Radio"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"range"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"key"</span><span class="token operator">:</span> <span class="token string">"down"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"text"</span><span class="token operator">:</span> <span class="token string">"从上到下"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"key"</span><span class="token operator">:</span> <span class="token string">"left"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"text"</span><span class="token operator">:</span> <span class="token string">"从左到右"</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">"key"</span><span class="token operator">:</span> <span class="token string">"swipeable"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"是否可拖拽"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"Switch"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"key"</span><span class="token operator">:</span> <span class="token string">"autoPlay"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"是否自动播放"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"Switch"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"key"</span><span class="token operator">:</span> <span class="token string">"imgList"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"图片列表"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"DataList"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"category"</span><span class="token operator">:</span> <span class="token string">"base"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"point"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"i"</span><span class="token operator">:</span> <span class="token string">"x-0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"x"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"y"</span><span class="token operator">:</span> <span class="token number">13</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"w"</span><span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"h"</span><span class="token operator">:</span> <span class="token number">82</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"isBounded"</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">"status"</span><span class="token operator">:</span> <span class="token string">"inToCanvas"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"481194"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"item"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"Form"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"config"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"表单定制组件"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"fontSize"</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"titColor"</span><span class="token operator">:</span> <span class="token string">"rgba(60,60,60,1)"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"titWeight"</span><span class="token operator">:</span> <span class="token string">"400"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"bgColor"</span><span class="token operator">:</span> <span class="token string">"rgba(255,255,255,1)"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"btnColor"</span><span class="token operator">:</span> <span class="token string">"rgba(20,54,226,100)"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"btnTextColor"</span><span class="token operator">:</span> <span class="token string">"rgba(255,255,255,1)"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"api"</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"formControls"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"1"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"Text"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"label"</span><span class="token operator">:</span> <span class="token string">"姓名"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"placeholder"</span><span class="token operator">:</span> <span class="token string">"请输入姓名"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"2"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"Number"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"label"</span><span class="token operator">:</span> <span class="token string">"年龄"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"placeholder"</span><span class="token operator">:</span> <span class="token string">" 请输入年龄"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"4"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"MySelect"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"label"</span><span class="token operator">:</span> <span class="token string">"爱好"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"options"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"label"</span><span class="token operator">:</span> <span class="token string">"选项一"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"value"</span><span class="token operator">:</span> <span class="token string">"1"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"label"</span><span class="token operator">:</span> <span class="token string">"选项二"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"value"</span><span class="token operator">:</span> <span class="token string">"2"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"label"</span><span class="token operator">:</span> <span class="token string">"选项三"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"value"</span><span class="token operator">:</span> <span class="token string">"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 punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"h"</span><span class="token operator">:</span> <span class="token number">172</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"category"</span><span class="token operator">:</span> <span class="token string">"base"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"point"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"i"</span><span class="token operator">:</span> <span class="token string">"x-1"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"x"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"y"</span><span class="token operator">:</span> <span class="token number">98</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"w"</span><span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"h"</span><span class="token operator">:</span> <span class="token number">172</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"isBounded"</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">"status"</span><span class="token operator">:</span> <span class="token string">"inToCanvas"</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">"pageConfig"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"bgColor"</span><span class="token operator">:</span><span class="token string">"rgba(151,25,25,1)"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"title"</span><span class="token operator">:</span><span class="token string">"医院宣传页"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"tpl"</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">"tid"</span><span class="token operator">:</span> <span class="token string">"EF123D3"</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">"state"</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"result"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"tid"</span><span class="token operator">:</span> <span class="token string">"EF123D3"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"msg"</span><span class="token operator">:</span> <span class="token string">"保存成功"</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">"state"</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"result"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"tid"</span><span class="token operator">:</span> <span class="token string">"EF123D3"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"test页面"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"tid"</span><span class="token operator">:</span> <span class="token string">"EF123D6"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"test2页面"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"msg"</span><span class="token operator">:</span> <span class="token string">"删除成功"</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">"state"</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"result"</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"msg"</span><span class="token operator">:</span> <span class="token string">"表单提交成功"</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">"state"</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"result"</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"msg"</span><span class="token operator">:</span> <span class="token string">"批量导入成功"</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">"state"</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"result"</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"msg"</span><span class="token operator">:</span> <span class="token string">"删除成功"</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">"state"</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"result"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"img"</span><span class="token operator">:</span> <span class="token string">"http://xxx/uploads/tpl_175adabd8dd.jpg"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"合作模版"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"tid"</span><span class="token operator">:</span> <span class="token string">"B73349B6"</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">"state"</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"result"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"tid"</span><span class="token operator">:</span> <span class="token string">"B73349B6"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"msg"</span><span class="token operator">:</span> <span class="token string">"保存成功"</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">"state"</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"result"</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"msg"</span><span class="token operator">:</span> <span class="token string">"删除成功"</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">2/15/2021, 12:27:31 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/doc/zh/guide/deployDev/oss.html" class="prev">
|
||||
接入第三方oss
|
||||
</a></span> <!----></p></div> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/doc/assets/js/app.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/22.dd7423cf.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/11.a817ab83.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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/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" aria-current="page" class="active sidebar-link">私有化部署</a><ul class="sidebar-sub-headers"></ul></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/api.html" class="sidebar-link">API接口文档</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>私有化部署需要获取4个核心项目包, 包括</p> <ul><li>H5编辑器(h5_plus)</li> <li>H5基座(h5)</li> <li>Dooring管理后台(Dooring-Admin)</li> <li>服务端项目(Server)</li></ul> <p>获取以上四个核心源码工程需要满足商业授权协议, 具体可联系<a href="http://h5.dooring.cn/uploads/WechatIMG3_1758e9753e2.jpeg" target="_blank" rel="noopener noreferrer">徐小夕<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> <img src="/doc/assets/img/deploy.d1b1d698.png" alt="H5-dooring部署"> <p>部署流程如下:</p> <ol><li>下载4个源码工程, 安装依赖(npm install 或 yarn)</li> <li>打包3个前端工程至<code>server</code>的static目录下</li> <li>在<code>server</code>下本地运行 <code>yarn start</code> 或 <code>npm start</code> 启动服务端进行本地测试</li> <li>打包服务端代码, <code>yarn build</code> 生成 <code>dist</code> 目录, 建议使用 <code>pm2</code> 做<code>nodejs</code>服务的负载均衡, 运行 <code>pm2 start dist/index.js</code>启动生产环境代码</li></ol> <p>也可以将以上步骤集成到gitlab等CI, CD服务中, 进行自动化打包发布, 或者采用<code>docker</code>进行容器化部署.</p></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/functionRealization/screenshot.html" class="prev">
|
||||
截图功能
|
||||
</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.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/11.a817ab83.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/23.3c312dd7.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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/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/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/api.html" class="sidebar-link">API接口文档</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"><</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">"</span>Content-Security-Policy<span class="token punctuation">"</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">"</span>upgrade-insecure-requests<span class="token punctuation">"</span></span><span class="token punctuation">></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">=></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/deploy.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.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/23.3c312dd7.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/24.70cc97c3.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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/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/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/api.html" class="sidebar-link">API接口文档</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">=></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">=></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">&&</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></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/api.html">
|
||||
API接口文档
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/doc/assets/js/app.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/24.70cc97c3.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/25.e47f5b3c.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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/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/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/api.html" class="sidebar-link">API接口文档</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.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/25.e47f5b3c.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/12.7537ddc3.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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/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/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/api.html" class="sidebar-link">API接口文档</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.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/12.7537ddc3.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/7.1ca3fdb8.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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/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/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/api.html" class="sidebar-link">API接口文档</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/saveJson.html" class="prev">
|
||||
保存json
|
||||
</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.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/7.1ca3fdb8.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/26.bf8cc2c2.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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/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/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/api.html" class="sidebar-link">API接口文档</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"><</span>any<span class="token punctuation">,</span> AnyAction<span class="token operator">></span></span><span class="token punctuation">)</span> <span class="token operator">=></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"><</span>any<span class="token operator">></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.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/26.bf8cc2c2.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/27.9151272d.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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" aria-current="page" class="active sidebar-link">保存json</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/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/api.html" class="sidebar-link">API接口文档</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="保存json"><a href="#保存json" class="header-anchor">#</a> 保存json</h1> <p>我们配置好H5页面之后，如果希望其他人观看，我们可以保存页面并发送链接。但是如果有多人协作的需求，比如一个H5页面可能由多个人完成，这个时候该怎么实现呢？基于已有的方案，我们可以采用socket实现多人协同编辑，但是成本比较大，所有这里我们提供了保存json的功能。</p> <p>我们可以将配置好的页面导出为json，发送给另一个人，这样另一个人通过导入该json文件可以实时看到当前的页面，这里还是依靠我们的页面渲染引擎viewEngine。实现思路也很简单，可以在github[<a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" rel="noopener noreferrer">https://github.com/MrXujiang/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></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/templateLibrary.html" class="prev">
|
||||
模板库
|
||||
</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.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/27.9151272d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/13.c7b7a778.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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/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/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/api.html" class="sidebar-link">API接口文档</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.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/13.c7b7a778.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/8.83a09fe6.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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/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/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/api.html" class="sidebar-link">API接口文档</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.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/8.83a09fe6.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@ -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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/14.eff270f4.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/15.2cabc303.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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/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/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/api.html" class="sidebar-link">API接口文档</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.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/14.eff270f4.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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.05b20fd2.css" as="style"><link rel="preload" href="/doc/assets/js/app.1cec26f9.js" as="script"><link rel="preload" href="/doc/assets/js/16.ebc27227.js" as="script"><link rel="preload" href="/doc/assets/js/2.693230f5.js" as="script"><link rel="preload" href="/doc/assets/js/15.2cabc303.js" as="script"><link rel="prefetch" href="/doc/assets/js/10.b0d462d3.js"><link rel="prefetch" href="/doc/assets/js/11.a817ab83.js"><link rel="prefetch" href="/doc/assets/js/12.7537ddc3.js"><link rel="prefetch" href="/doc/assets/js/13.c7b7a778.js"><link rel="prefetch" href="/doc/assets/js/14.eff270f4.js"><link rel="prefetch" href="/doc/assets/js/17.e2c644fa.js"><link rel="prefetch" href="/doc/assets/js/18.8be51919.js"><link rel="prefetch" href="/doc/assets/js/19.5b05b8ec.js"><link rel="prefetch" href="/doc/assets/js/20.3fd45382.js"><link rel="prefetch" href="/doc/assets/js/21.390bb49b.js"><link rel="prefetch" href="/doc/assets/js/22.dd7423cf.js"><link rel="prefetch" href="/doc/assets/js/23.3c312dd7.js"><link rel="prefetch" href="/doc/assets/js/24.70cc97c3.js"><link rel="prefetch" href="/doc/assets/js/25.e47f5b3c.js"><link rel="prefetch" href="/doc/assets/js/26.bf8cc2c2.js"><link rel="prefetch" href="/doc/assets/js/27.9151272d.js"><link rel="prefetch" href="/doc/assets/js/3.0105453b.js"><link rel="prefetch" href="/doc/assets/js/4.7985c0ed.js"><link rel="prefetch" href="/doc/assets/js/5.82171d89.js"><link rel="prefetch" href="/doc/assets/js/6.133c066e.js"><link rel="prefetch" href="/doc/assets/js/7.1ca3fdb8.js"><link rel="prefetch" href="/doc/assets/js/8.83a09fe6.js"><link rel="prefetch" href="/doc/assets/js/9.90abe1c9.js">
|
||||
<link rel="stylesheet" href="/doc/assets/css/0.styles.05b20fd2.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#环境准备" 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/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/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/api.html" class="sidebar-link">API接口文档</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="环境准备"><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">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/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.1cec26f9.js" defer></script><script src="/doc/assets/js/16.ebc27227.js" defer></script><script src="/doc/assets/js/2.693230f5.js" defer></script><script src="/doc/assets/js/15.2cabc303.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -12,7 +12,7 @@ module.exports = {
|
||||
// { text: '1.X', link: '/zh/guide/' },
|
||||
// { text: '语言', link: '/zh/guide/' },
|
||||
{ text: '体验', link: 'http://h5.dooring.cn' },
|
||||
{ text: 'github', link: 'https://github.com/MrXujiang/h5-Dooring' },
|
||||
{ text: '私有化部署', link: 'http://h5.dooring.cn/h5_plus/price' },
|
||||
],
|
||||
sidebar: [
|
||||
{
|
||||
@ -27,6 +27,12 @@ module.exports = {
|
||||
collapsable: false,
|
||||
sidebarDepth: 1,
|
||||
},
|
||||
{
|
||||
title: '产品介绍',
|
||||
path: '/zh/guide/product',
|
||||
collapsable: false,
|
||||
sidebarDepth: 1,
|
||||
},
|
||||
{
|
||||
title: '快速上手',
|
||||
path: '/zh/guide/startedQuickly',
|
||||
@ -86,6 +92,12 @@ module.exports = {
|
||||
collapsable: false,
|
||||
sidebarDepth: 1,
|
||||
},
|
||||
{
|
||||
title: '下载源码',
|
||||
path: '/zh/guide/functionRealization/download',
|
||||
collapsable: false,
|
||||
sidebarDepth: 1,
|
||||
},
|
||||
{
|
||||
title: '网页预览',
|
||||
path: '/zh/guide/functionRealization/pagePreview',
|
||||
@ -112,6 +124,35 @@ module.exports = {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '组件商店',
|
||||
collapsable: false,
|
||||
sidebarDepth: 1,
|
||||
type: 'group',
|
||||
children: [
|
||||
{
|
||||
name: 'intro',
|
||||
title: '基本介绍',
|
||||
path: '/zh/guide/componentShop/intro',
|
||||
collapsable: false,
|
||||
sidebarDepth: 2,
|
||||
},
|
||||
{
|
||||
name: 'uploadCp',
|
||||
title: '上传组件',
|
||||
path: '/zh/guide/componentShop/uploadCp',
|
||||
collapsable: false,
|
||||
sidebarDepth: 2,
|
||||
},
|
||||
{
|
||||
name: 'cpManage',
|
||||
title: '组件审核',
|
||||
path: '/zh/guide/componentShop/cpManage',
|
||||
collapsable: false,
|
||||
sidebarDepth: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '私有化部署和二次开发',
|
||||
collapsable: false,
|
||||
@ -124,6 +165,18 @@ module.exports = {
|
||||
collapsable: false,
|
||||
sidebarDepth: 1,
|
||||
},
|
||||
{
|
||||
title: 'v6.dooring私有化部署(临时)',
|
||||
path: '/zh/guide/deployDev/deploy_v6',
|
||||
collapsable: false,
|
||||
sidebarDepth: 1,
|
||||
},
|
||||
{
|
||||
title: '服务端数据说明',
|
||||
path: '/zh/guide/deployDev/dir',
|
||||
collapsable: false,
|
||||
sidebarDepth: 1,
|
||||
},
|
||||
{
|
||||
title: '支持https',
|
||||
path: '/zh/guide/deployDev/https',
|
||||
@ -136,14 +189,32 @@ module.exports = {
|
||||
collapsable: false,
|
||||
sidebarDepth: 1,
|
||||
},
|
||||
{
|
||||
title: '获取Form组件的值数据',
|
||||
path: '/zh/guide/deployDev/form',
|
||||
collapsable: false,
|
||||
sidebarDepth: 1,
|
||||
},
|
||||
{
|
||||
title: 'API接口文档',
|
||||
path: '/zh/guide/deployDev/api',
|
||||
collapsable: false,
|
||||
sidebarDepth: 1,
|
||||
},
|
||||
{
|
||||
title: '更新日志',
|
||||
path: '/zh/guide/deployDev/log',
|
||||
collapsable: false,
|
||||
sidebarDepth: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'FAQ',
|
||||
path: '/zh/guide/FAQ',
|
||||
collapsable: false,
|
||||
sidebarDepth: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
@ -2,9 +2,10 @@
|
||||
<main class="home" :aria-labelledby="data.heroText !== null ? 'main-title' : null">
|
||||
<header class="hero">
|
||||
<h1 v-if="data.heroText !== null" id="main-title">
|
||||
<img src="../imgs/common/logo.svg" :alt="data.heroAlt || 'hero'" /><span>{{
|
||||
data.heroText || $title || "Hello"
|
||||
}}</span>
|
||||
<img
|
||||
src="http://cdn.dooring.cn/dr/logo.ff7fc6bb.png"
|
||||
:alt="data.heroAlt || 'hero'"
|
||||
/><span>{{ data.heroText || $title || "Hello" }}</span>
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
@ -71,12 +72,11 @@ $homePageWidth = 1080px
|
||||
text-align center
|
||||
img
|
||||
width: 190px
|
||||
height 50px
|
||||
display inline-block
|
||||
margin initial
|
||||
margin-bottom 0
|
||||
margin-right 20px
|
||||
vertical-align sub
|
||||
vertical-align -21px
|
||||
h1
|
||||
font-size 1.5rem
|
||||
font-weight 600
|
||||
|
||||
@ -7,7 +7,7 @@ features:
|
||||
- title: 简洁方便
|
||||
details: 任何人只需傻瓜式拖拽或进行简单编辑即可生成精美的H5页面
|
||||
- title: 插拔式体验
|
||||
details: 产品以GPL协议开源, 授权后可植入任何系统，并支持二次开发
|
||||
details: 产品以GPL协议部分开源, 授权后可植入任何系统，并支持二次开发
|
||||
- title: 持续迭代，无限可能
|
||||
details: 目前正在持续迭代中，后续可根据需求开发功能更强大的可视化系统
|
||||
actionText: 快速上手 →
|
||||
|
||||
BIN
doc/img/common/WX20210515-215658@2x.png
Normal file
BIN
doc/img/common/WX20210515-215658@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 280 KiB |
BIN
doc/img/common/v6.deploy.png
Normal file
BIN
doc/img/common/v6.deploy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
doc/img/functionRealization/down.png
Normal file
BIN
doc/img/functionRealization/down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 662 KiB |
28
doc/zh/guide/FAQ.md
Normal file
28
doc/zh/guide/FAQ.md
Normal file
@ -0,0 +1,28 @@
|
||||
<img src="http://cdn.dooring.cn/dr/logo.ff7fc6bb.png" alt="dooring" width=200>
|
||||
|
||||
H5-Dooring 仍在持续迭代, 如果有任何问题, 可以点击 [立即反馈](http://h5.dooring.cn/h5?tid=86C45FAE)。
|
||||
|
||||
## 问题汇总
|
||||
|
||||
#### 1. 本地部署后, win系统下如何启动server?
|
||||
|
||||
win下启动server, 需要将server/package.json的启动脚本修改为如下:
|
||||
|
||||
``` js
|
||||
"scripts": {
|
||||
"start": "set NODE_ENV=development&& nodemon -w src --exec \"babel-node src\"",
|
||||
// ... 其他不变
|
||||
},
|
||||
```
|
||||
|
||||
#### 2. 添加自定义组件, 需要改哪些文件?
|
||||
|
||||
dooring支持根据企业自身业务添加自定义组件, 目前2.0版本添加自定义组件只需要在 `editor/src/components/BasicShop` 对应的组件分类下添加组件即可, 最后在 `editor/src/components/BasicShop/template.ts`下对应位置添加组件描述即可生效. 同时, 为了保证发布后的H5页面保持最新, 需要在部署发布代码前在H5工程中对应的位置也同步一份组件代码. 后续会对这一流程做一定的优化.
|
||||
|
||||
#### 3. 本地如何调试对应的项目?
|
||||
|
||||
授权后, 本地安装项目依赖, 在调试编辑器(editor)项目或后台管理项目(admin)前, 需要先启动服务器工程(server), 在
|
||||
`server/index.js` 代码中添加 editor / admin 项目的启动 `ip`, 这样就能跨域请求了, 同时需要修改 editor / admin 项目中 `utils/tools.ts` 下的api地址, 开发环境改为本地 `server` 项目的 `ip`.
|
||||
|
||||
|
||||
如果在部署中遇到其他问题, 欢迎加我微信交流: `Mr_xuxiaoxi`
|
||||
@ -1,4 +1,4 @@
|
||||
<img src="../../img/common/logo.svg" alt="foo">
|
||||
<img src="http://cdn.dooring.cn/dr/logo.ff7fc6bb.png" alt="dooring" width=200>
|
||||
|
||||
H5-Dooring 是一款功能强大，高可扩展的 H5 可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的 H5 落地页最佳实践。
|
||||
|
||||
@ -6,12 +6,12 @@ H5-Dooring 是一款功能强大，高可扩展的 H5 可视化页面配置解
|
||||
|
||||
🎉 **可扩展，** Dooring 实现了较为完整的业务闭环，并使其模块化，编辑器内部功能接口也全部可以对接不同服务端语言，实现了标准化接口。此外还支持自定义组件，二次开发，设计模板等能力，以满足功能和跨领域的分层需求。
|
||||
|
||||
📦 **开箱即用，** Dooring 内置了**表单渲染器、页面渲染器、动态加载内核**等，仅需一套源码即可上手开发。并且还提供针对 React 的定制插件，内涵丰富的功能，可满足日常 80%的页面制作需求。
|
||||
📦 **开箱即用，** Dooring 内置了**表单渲染器、页面渲染器、动态加载内核**等，仅需一套源码即可上手开发。并且还提供针对 React 的定制插件，内涵丰富的功能，可满足日常 30%-60%的页面制作需求。
|
||||
|
||||
🚀 **大量自研，** 包含整个编辑器架构、组件设计、文档、请求库封装，后台管理系统等，满足日常项目的周边需求。
|
||||
|
||||
🚄 **与时俱进，** 在满足需求的同时，我们也不会停止对新技术的探索。比如更多**营销组件、业务功能，后台管理可视化，PC 页面编辑器，数据大屏定制**等等。
|
||||
🚄 **与时俱进，** 在满足需求的同时，我们也不会停止对新技术的探索。比如更多**营销组件, 可视化组件, 功能组件**等等。
|
||||
|
||||
## 为什么选择 Dooring
|
||||
|
||||
目前**github**已超过 3000+star，上线 2 个月累计 500+用户使用，解决完善了 100+问题，后续会持续迭代，更新，自研优秀，先进的 lowcode/nocode 解决方案。
|
||||
目前**github开源版**已超过 5200+star，上线 2 个月累计 1300+用户使用，解决完善了 100+问题，后续会持续迭代，更新，自研优秀，先进的 lowcode/nocode 解决方案。
|
||||
|
||||
@ -59,3 +59,121 @@ export default template;
|
||||
```
|
||||
|
||||
以上就是我们template的结构，type用来定义组件的类型，方便渲染器动态查找，h代表组件的初始化高度，我们可以自由设置。displayName是组件的中文名，用来在左侧组件面板中展示，方便用户理解，我们可以在template中自定义更多辅助信息，方便使用者更高效的使用我们的编辑器。
|
||||
|
||||
|
||||
## schema设计
|
||||
|
||||
开发一个自定义组件需要包含3部分, `Component`, `Schema` 和 `Template`. 接下来我们看一下 `Header` 组件的 `Schema`.
|
||||
|
||||
``` js
|
||||
import {
|
||||
IColorConfigType,
|
||||
INumberConfigType,
|
||||
ITextConfigType,
|
||||
IUploadConfigType,
|
||||
TColorDefaultType,
|
||||
TNumberDefaultType,
|
||||
TTextDefaultType,
|
||||
TUploadDefaultType,
|
||||
} from '@/components/FormComponents/types';
|
||||
import { baseConfig, baseDefault, ICommonBaseType } from '../../common';
|
||||
|
||||
export type THeaderEditData = Array<
|
||||
IColorConfigType | INumberConfigType | IUploadConfigType | ITextConfigType
|
||||
>;
|
||||
export interface IHeaderConfig extends ICommonBaseType {
|
||||
bgColor: TColorDefaultType;
|
||||
logo: TUploadDefaultType;
|
||||
logoText: TTextDefaultType;
|
||||
fontSize: TNumberDefaultType;
|
||||
color: TColorDefaultType;
|
||||
height: TNumberDefaultType;
|
||||
}
|
||||
|
||||
export interface IHeaderSchema {
|
||||
editData: THeaderEditData;
|
||||
config: IHeaderConfig;
|
||||
}
|
||||
|
||||
const Header: IHeaderSchema = {
|
||||
editData: [
|
||||
...baseConfig,
|
||||
{
|
||||
key: 'bgColor',
|
||||
name: '背景色',
|
||||
type: 'Color',
|
||||
},
|
||||
{
|
||||
key: 'height',
|
||||
name: '高度',
|
||||
type: 'Number',
|
||||
},
|
||||
{
|
||||
key: 'logo',
|
||||
name: 'logo',
|
||||
type: 'Upload',
|
||||
isCrop: true,
|
||||
cropRate: 1000 / 618,
|
||||
},
|
||||
{
|
||||
key: 'logoText',
|
||||
name: 'logo文字',
|
||||
type: 'Text',
|
||||
},
|
||||
{
|
||||
key: 'color',
|
||||
name: '文字颜色',
|
||||
type: 'Color',
|
||||
},
|
||||
{
|
||||
key: 'fontSize',
|
||||
name: '文字大小',
|
||||
type: 'Number',
|
||||
},
|
||||
],
|
||||
config: {
|
||||
bgColor: 'rgba(0,0,0,1)',
|
||||
logo: [
|
||||
{
|
||||
uid: '001',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: 'http://49.234.61.19/uploads/3_1740be8a482.png',
|
||||
},
|
||||
],
|
||||
logoText: '页头Header',
|
||||
fontSize: 20,
|
||||
color: 'rgba(255,255,255,1)',
|
||||
height: 50,
|
||||
...baseDefault,
|
||||
},
|
||||
};
|
||||
|
||||
export default Header;
|
||||
```
|
||||
|
||||
`editData`表示组件的可编辑属性, 我们可以自定义哪些组件可编辑. `config`为组件接收的属性, 和`editData`数组项中的`key`一一对应.
|
||||
|
||||
|
||||
### 组件编辑区属性类型
|
||||
|
||||
`Dooring`组件编辑面板有如下对应编辑类型:
|
||||
|
||||
- Upload 上传组件
|
||||
- Text 文本框
|
||||
- RichText 富文本
|
||||
- TextArea 多行文本
|
||||
- Number 数字输入框
|
||||
- DataList 列表编辑器
|
||||
- FileList 文件列表编辑器
|
||||
- InteractionData 交互设置
|
||||
- Color 颜色面板
|
||||
- MutiText 多文本
|
||||
- Select 选择下拉框
|
||||
- Radio 单选框
|
||||
- Switch 开关切换
|
||||
- CardPicker 卡片面板
|
||||
- Table 表格编辑器
|
||||
- Pos 坐标编辑器
|
||||
- FormItems 表单设计器
|
||||
|
||||
|
||||
16
doc/zh/guide/componentShop/cpManage.md
Normal file
16
doc/zh/guide/componentShop/cpManage.md
Normal file
@ -0,0 +1,16 @@
|
||||
<!--
|
||||
* @Date: 2021-01-17 14:24:40
|
||||
* @LastEditors: xuxiaoxi
|
||||
* @LastEditTime: 2021-01-17 19:42:53
|
||||
-->
|
||||
# 组件审核
|
||||
|
||||
组件审批主要由网站管理人员来操作，当用户组件提交成功之后，客户端会通过消息信令通知管理员，管理员收到消息后会审核组件。那么整个过程也很简单，我们可以使用 websocket 来实现消息双向通信，完整流程如下：
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/WX20210720-133112%402x.png" />
|
||||
|
||||
通过以上的实现方式客户端和服务端就可以随时进行通信了。接下来我们看看审批的效果：
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/WX20210720-133329%402x.png" />
|
||||
|
||||
|
||||
25
doc/zh/guide/componentShop/intro.md
Normal file
25
doc/zh/guide/componentShop/intro.md
Normal file
@ -0,0 +1,25 @@
|
||||
<!--
|
||||
* @Date: 2021-01-17 14:24:40
|
||||
* @LastEditors: xuxiaoxi
|
||||
* @LastEditTime: 2021-01-17 19:42:53
|
||||
-->
|
||||
## 组件商店基本介绍
|
||||
|
||||
对于可视化搭建平台而言，其中一个核心的环节就是组件资产。用户在设计搭建页面时会消费各种各样的组件，但是对于不同的用户而言，组件的需求往往是不一样的，大部分的 lowcode 或者 nocode 平台都不能很好的解决用户这些定制化的组件需求，所以为了解决这一问题，组件商店就孕育而生。
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/WX20210720-131747%402x.png" />
|
||||
|
||||
## 组件商店工作流设计
|
||||
|
||||
我们要想实现完整的组件商店工作流，需要满足以下几点：
|
||||
|
||||
- 组件线上编辑(上传)模块
|
||||
- 组件审核模块
|
||||
- 组件更新/发布模块
|
||||
- 组件管理(上架/下架/删除/下载)
|
||||
|
||||
有了以上4块的支持，基本的组件商店就可以 work 了。具体流程如下：
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/WX20210720-132319%402x.png" />
|
||||
|
||||
|
||||
19
doc/zh/guide/componentShop/uploadCp.md
Normal file
19
doc/zh/guide/componentShop/uploadCp.md
Normal file
@ -0,0 +1,19 @@
|
||||
<!--
|
||||
* @Date: 2021-01-17 14:24:40
|
||||
* @LastEditors: xuxiaoxi
|
||||
* @LastEditTime: 2021-01-17 19:42:53
|
||||
-->
|
||||
# 上传组件
|
||||
|
||||
当“ 生产者 ”编写好组件代码之后，需要对组件自身进行定义。因为可视化平台组件物料很依赖平台的组件开发协议，我们需要按照平台的规范去上传规范的自定义组件，这样平台才能更好的理解应用组件，保持用户认知的一致性。
|
||||
组件描述信息笔者这里设计了如下字段：
|
||||
|
||||
- 组件名称 (中文)
|
||||
- 组件名 (英文，方便存库)
|
||||
- 组件分类 (基础，可视化，营销，媒体等)
|
||||
- 组件默认大小 (宽高)
|
||||
- 组件图标 (方便用户认知，查找)
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/WechatIMG45705.png" />
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
|
||||
## 用户相关
|
||||
|
||||
### 登录
|
||||
### 用户登录
|
||||
|
||||
用户登录接口
|
||||
- `POST` /vip/check
|
||||
@ -119,6 +119,47 @@
|
||||
}
|
||||
```
|
||||
|
||||
### 生成登录码
|
||||
|
||||
生成登录码接口
|
||||
- `GET` /vip/gcode
|
||||
|
||||
先决条件:
|
||||
- 用户已登陆
|
||||
- 为超级管理员
|
||||
|
||||
|
||||
注: 生成登录码是由笔者写的`加密算法`实现, 不需要手动实现, 如果有自定义需求, 可以自行二次开发实现.
|
||||
|
||||
返回示例
|
||||
``` json
|
||||
{
|
||||
"co": "1x2fgggteee3456_zdd4",
|
||||
}
|
||||
```
|
||||
|
||||
`说明:` 为了保护用户信息安全, 返回的登录码是加密后的密文, 会调用笔者写的`xib.xip`方法进行加密, 如果想看到原始密码, 需要调用`xib.uxip`进行解密.
|
||||
|
||||
### 获取用户真实密码
|
||||
|
||||
获取用户真实密码接口
|
||||
- `GET` /vip/gcode/get
|
||||
|
||||
先决条件:
|
||||
- 用户已登陆
|
||||
- 为超级管理员
|
||||
|
||||
| 参数名 | 是否必选 | 类型 | 说明 |
|
||||
| ------------- |:-------------:|:-----:| -------------:|
|
||||
| co | true | string | 加密后的密码 |
|
||||
|
||||
返回示例
|
||||
``` json
|
||||
{
|
||||
"co": "12345678",
|
||||
}
|
||||
```
|
||||
|
||||
### 修改用户信息
|
||||
|
||||
修改用户接口
|
||||
@ -521,8 +562,230 @@
|
||||
|
||||
## 文件上传
|
||||
|
||||
- `POST` /files/upload/free
|
||||
|
||||
先决条件:
|
||||
- 用户已登陆
|
||||
|
||||
| 参数名 | 是否必选 | 类型 | 说明 |
|
||||
| ------------- |:-------------:|:-----:| -------------:|
|
||||
| File | true | File | 文件对象 |
|
||||
|
||||
返回示例
|
||||
``` json
|
||||
{
|
||||
"state": 200,
|
||||
"result": {
|
||||
"filename": "H5-Dooring",
|
||||
"url": "http://h5.dooring.cn/uploads/1_17ac208480d.png",
|
||||
"size": 261972
|
||||
},
|
||||
"msg": "文件上传成功"
|
||||
}
|
||||
```
|
||||
|
||||
## 数据统计
|
||||
|
||||
### 数据大盘接口
|
||||
|
||||
### 页面埋点
|
||||
- `GET` /vip/dashboard
|
||||
|
||||
先决条件:
|
||||
- 用户已登陆
|
||||
|
||||
返回示例
|
||||
``` json
|
||||
{
|
||||
"state": 200,
|
||||
"result": {
|
||||
"userNums": 1300,
|
||||
"pageNums": 808,
|
||||
"tplNums": 86,
|
||||
"views": 60235,
|
||||
"userList": []
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 组件商店
|
||||
|
||||
### 组件上传
|
||||
|
||||
- `POST` /visible/cp/save
|
||||
|
||||
先决条件:
|
||||
- 用户已登陆
|
||||
|
||||
| 参数名 | 是否必选 | 类型 | 说明 |
|
||||
| ------------- |:-------------:|:-----:| -------------:|
|
||||
| react | true | string | react字符串 |
|
||||
| css | true | string | css字符串 |
|
||||
| schema | true | string | schema字符串 |
|
||||
| form | true | object | 表单对象 |
|
||||
|
||||
返回示例
|
||||
``` json
|
||||
{
|
||||
"state": 200,
|
||||
"result": null,
|
||||
"msg": "提交成功, 请等待审核..."
|
||||
}
|
||||
```
|
||||
|
||||
### 获取组件上传列表
|
||||
|
||||
- `GET` /visible/cp/list
|
||||
|
||||
先决条件:
|
||||
- 用户已登陆
|
||||
|
||||
返回示例
|
||||
``` json
|
||||
{
|
||||
"state": 200,
|
||||
"result": [
|
||||
{
|
||||
"cpName":"test",
|
||||
"cpField":"test",
|
||||
"cate":"base",
|
||||
"width":3,
|
||||
"height":6,
|
||||
"icon":"http://196.345.0.345:3000/uploads/1_17a8a4eaedf.png",
|
||||
"ispass":3
|
||||
},
|
||||
{
|
||||
"cpName":"test2",
|
||||
"cpField":"test2",
|
||||
"cate":"media",
|
||||
"width":4,
|
||||
"height":20,
|
||||
"icon":"http://196.345.0.345:3000/uploads/1_17a8a4eaedf.png",
|
||||
"ispass":1
|
||||
}
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
### 获取组件详情
|
||||
|
||||
- `GET` /visible/cp/get
|
||||
|
||||
先决条件:
|
||||
- 用户已登陆
|
||||
|
||||
| 参数名 | 是否必选 | 类型 | 说明 |
|
||||
| ------------- |:-------------:|:-----:| -------------:|
|
||||
| cate | true | string | 组件分类 |
|
||||
| cpField | true | string | 组件英文名字段 |
|
||||
|
||||
返回示例
|
||||
``` json
|
||||
{
|
||||
"state": 200,
|
||||
"result": {
|
||||
"react": "react代码",
|
||||
"css": "css/less代码",
|
||||
"schema": "schema的js/ts代码"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 更新组件审批状态
|
||||
|
||||
- `POST` /visible/cp/update
|
||||
|
||||
先决条件:
|
||||
- 用户已登陆
|
||||
|
||||
| 参数名 | 是否必选 | 类型 | 说明 |
|
||||
| ------------- |:-------------:|:-----:| -------------:|
|
||||
| cate | true | string | 组件分类 |
|
||||
| cpField | true | string | 组件英文名字段 |
|
||||
| ispass | true | number | 组件审核状态, 0 待处理 1 审核中 2 审核通过 3 审核不通过 |
|
||||
|
||||
|
||||
返回示例
|
||||
``` json
|
||||
{
|
||||
"state": 200,
|
||||
"result": null,
|
||||
"msg": "审批成功"
|
||||
}
|
||||
```
|
||||
|
||||
### 删除组件
|
||||
|
||||
- `DELETE` /visible/cp/del
|
||||
|
||||
先决条件:
|
||||
- 用户已登陆
|
||||
|
||||
| 参数名 | 是否必选 | 类型 | 说明 |
|
||||
| ------------- |:-------------:|:-----:| -------------:|
|
||||
| cate | true | string | 组件分类 |
|
||||
| cpField | true | string | 组件英文名字段 |
|
||||
|
||||
返回示例
|
||||
``` json
|
||||
{
|
||||
"state": 200,
|
||||
"result": null,
|
||||
"msg": "删除成功"
|
||||
}
|
||||
```
|
||||
|
||||
### 下载组件源码
|
||||
|
||||
- `POST` /visible/cp/download
|
||||
|
||||
先决条件:
|
||||
- 用户已登陆
|
||||
|
||||
| 参数名 | 是否必选 | 类型 | 说明 |
|
||||
| ------------- |:-------------:|:-----:| -------------:|
|
||||
| cate | true | string | 组件分类 |
|
||||
| cpField | true | string | 组件英文名字段 |
|
||||
|
||||
返回示例
|
||||
``` json
|
||||
{
|
||||
"state": 200,
|
||||
"result": "组件压缩包地址"
|
||||
}
|
||||
```
|
||||
|
||||
## 数据源管理
|
||||
|
||||
### 获取用户数据源
|
||||
|
||||
- `GET` /vip/sourcedata/get
|
||||
|
||||
先决条件:
|
||||
- 用户已登陆
|
||||
|
||||
返回示例
|
||||
``` json
|
||||
{
|
||||
"state": 200,
|
||||
"result": [],
|
||||
}
|
||||
```
|
||||
|
||||
### 保存用户数据源
|
||||
|
||||
- `POST` /vip/sourcedata/save
|
||||
|
||||
先决条件:
|
||||
- 用户已登陆
|
||||
|
||||
| 参数名 | 是否必选 | 类型 | 说明 |
|
||||
| ------------- |:-------------:|:-----:| -------------:|
|
||||
| sourcedata | true | array | 用户数据源集合 |
|
||||
|
||||
返回示例
|
||||
``` json
|
||||
{
|
||||
"state": 200,
|
||||
"result": []
|
||||
}
|
||||
```
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
- Dooring管理后台(Dooring-Admin)
|
||||
- 服务端项目(Server)
|
||||
|
||||
获取以上四个核心源码工程需要满足商业授权协议, 具体可联系[徐小夕](http://h5.dooring.cn/uploads/WechatIMG3_1758e9753e2.jpeg)
|
||||
获取以上四个核心源码工程需要满足商业授权协议, 具体可联系作者[徐小夕](http://h5.dooring.cn/uploads/WechatIMG3_1758e9753e2.jpeg)
|
||||
|
||||
### 部署架构图
|
||||
|
||||
|
||||
46
doc/zh/guide/deployDev/deploy_v6.md
Normal file
46
doc/zh/guide/deployDev/deploy_v6.md
Normal file
@ -0,0 +1,46 @@
|
||||
<!--
|
||||
* @Date: 2021-01-20 23:25:29
|
||||
* @LastEditors: xuxiaoxi
|
||||
* @LastEditTime: 2021-01-22 21:48:34
|
||||
* @FilePath: /github-h5-Dooring/doc/zh/guide/deployDev/deploy.md
|
||||
-->
|
||||
|
||||
私有化部署需要获取3个核心项目包, 包括
|
||||
- 可视化大屏编辑器(v6.dooring/)
|
||||
- v6管理后台(v6.dooring/manage)
|
||||
- 服务端项目(v6.dooring/server)
|
||||
|
||||
获取以上三个核心源码工程需要满足商业授权协议, 具体可参考[商业授权方案](http://h5.dooring.cn/h5_plus/price)
|
||||
|
||||
### 部署架构图
|
||||
|
||||
<img src="../../../img/common/v6.deploy.png" alt="H5-dooring部署">
|
||||
|
||||
部署流程如下:
|
||||
|
||||
1. 下载3个源码工程, 安装依赖(npm install 或 yarn)
|
||||
2. 打包2个前端工程至`server`的static目录下
|
||||
3. 在`server`下本地运行 `yarn start` 或 `npm start` 启动服务端进行本地测试
|
||||
4. 打包服务端代码, `yarn build` 生成 `dist` 目录, 建议使用 `pm2` 做`nodejs`服务的负载均衡, 运行 `pm2 start dist/index.js`启动生产环境代码
|
||||
|
||||
也可以将以上步骤集成到gitlab等CI, CD服务中, 进行自动化打包发布, 或者采用`docker`进行容器化部署.
|
||||
|
||||
### 步骤3.4详细流程
|
||||
|
||||
#### 1. 安装项目环境
|
||||
|
||||
服务器需提前安装node和pm2, 将本项目上传至服务器指定的目录(如/www/activity), 进入项目目录, 执行:
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
#### 2. 修改项目域名
|
||||
|
||||
进入`./src/config/index.js`, 修改`staticPath`变量为当前服务器域名/ip, 如`http://xxx.com`或`http://xxx.com:8080`(如非80端口)
|
||||
|
||||
#### 3. 编译项目
|
||||
|
||||
执行`npm run build`编译项目, 生成`dist`目录
|
||||
|
||||
#### 4. 运行项目
|
||||
在项目根目录执行 `pm2 start dist/index.js`启动项目
|
||||
21
doc/zh/guide/deployDev/dir.md
Normal file
21
doc/zh/guide/deployDev/dir.md
Normal file
@ -0,0 +1,21 @@
|
||||
<!--
|
||||
* @Date: 2021-01-20 23:25:29
|
||||
* @LastEditors: xuxiaoxi
|
||||
* @LastEditTime: 2021-01-22 21:48:34
|
||||
* @FilePath: /github-h5-Dooring/doc/zh/guide/deployDev/deploy.md
|
||||
-->
|
||||
|
||||
服务端主要是我们的`server`工程, 数据主要存放在`server/public`下, 具体数据指代含义我们接下来会详细介绍.
|
||||
- bed 存放图片库中的分类图片, 私有化部署的用户可以直接在此处扩充图片(更好的建议是直接存到第三方图床)
|
||||
- h5 用户保存的h5数据文件, 一个页面对应一个json文件
|
||||
- h5_tpl 平台保存的模版数据文件夹
|
||||
- xxx.json 模版页面文件
|
||||
- tpls.json 模版库中的模版列表数据, 可以手动清空
|
||||
- h5_vip 会员数据目录
|
||||
- form 会员制作的含表单页面的表单收集数据
|
||||
- view.json 用户浏览量数据
|
||||
- vip.json 会员列表数据
|
||||
- vipCard.json 会员订单数据(暂时无用, 可删除)
|
||||
- image.json 图片库, 主要用来渲染页面的图片库数据
|
||||
- city.json 省市3级联动数据, 为表单组件提供数据支持
|
||||
|
||||
41
doc/zh/guide/deployDev/form.md
Normal file
41
doc/zh/guide/deployDev/form.md
Normal file
@ -0,0 +1,41 @@
|
||||
<!--
|
||||
* @Date: 2021-01-20 23:25:29
|
||||
* @LastEditors: xuxiaoxi
|
||||
* @LastEditTime: 2021-01-22 21:48:34
|
||||
* @FilePath: /github-h5-Dooring/doc/zh/guide/deployDev/deploy.md
|
||||
-->
|
||||
|
||||
### 获取Form组件的值数据
|
||||
|
||||
Form表单组件在`editor`目录下`src/components/BasicShop/BasicComponents`位置.
|
||||
|
||||
Form组件是`Dooring`的核心组件之一, 内部的值通过Form组件内部收集, 当然我们也可以暴露出来让其他交互或者组件消费(需要一定的二次开发), 关键代码如下:
|
||||
|
||||
``` js
|
||||
req.post(`/vip/h5/form/post${location.search}`, {...fields, ...formData}).then(res => {
|
||||
if(type === 'link') {
|
||||
// 解析参数
|
||||
let isPre = content.indexOf('?') < 0;
|
||||
let query = {dr: Date.now(), from: urlParmas.tid};
|
||||
try {
|
||||
query = params ? {...JSON.parse(params), ...query} : query;
|
||||
}catch(err) {
|
||||
console.log(err)
|
||||
}
|
||||
|
||||
// 跳转
|
||||
if(content.indexOf('http') > -1) {
|
||||
window.location.href = content + urlencode(query, isPre);
|
||||
return
|
||||
}
|
||||
|
||||
history.push(`/m?tid=${content}&${urlencode(query)}`);
|
||||
}else if(type === 'modal') {
|
||||
setVisible(true);
|
||||
}else if(type === 'code') {
|
||||
eval(content);
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
数据收集提交的核心代码在Form组件的第56-149行, 也就是`submit`方法. 表单组件收集到的数据统一存放在代码中的`formData`字段, 所以要想在其他地方获取用户表单填写的值, 我们只需要手动将`formData`传递出去, 或者挂载到全局(如window对象, localStorage, indexedDB等).
|
||||
96
doc/zh/guide/deployDev/log.md
Normal file
96
doc/zh/guide/deployDev/log.md
Normal file
@ -0,0 +1,96 @@
|
||||
<!--
|
||||
* @Date: 2021-01-20 23:25:29
|
||||
* @LastEditors: xuxiaoxi
|
||||
* @LastEditTime: 2021-01-22 21:48:34
|
||||
* @FilePath: /github-h5-Dooring/doc/zh/guide/deployDev/deploy.md
|
||||
-->
|
||||
|
||||
### 更新日志
|
||||
|
||||
#### 2.01
|
||||
|
||||
1. 优化编辑器加载性能
|
||||
2. iframe容器组件添加边框等属性
|
||||
3. 富文本组件添加背景色配置
|
||||
4. 修复真机预览时空数据还能显示二维码bug
|
||||
5. 优化页面高度适配问题, 添加高度适配器
|
||||
6. 优化组件交互时空链接点击出现message bug
|
||||
7. 更新dooring文档
|
||||
|
||||
#### 2.0
|
||||
|
||||
1. 完善数据源功能
|
||||
2. 轮播图/图片列表/List/文字跑马灯/横向滚动组件数据源对接完毕
|
||||
3. 组件库支持搜索功能
|
||||
4. 组件列表支持分页, 提高渲染性能
|
||||
5. 赞助墙交互优化
|
||||
6. 界面局部优化
|
||||
|
||||
#### 1.99
|
||||
|
||||
1. 添加数据源功能
|
||||
2. 视频组件支持封面图
|
||||
3. 优化页面DSL结构, 降低了jsonSchema体积30%-50%
|
||||
4. 官网优化
|
||||
5. 管理后台替换logo, 部分文案信息
|
||||
6. 添加图片列表组件
|
||||
7. 轮播图支持一键绑定数据源
|
||||
|
||||
|
||||
#### 1.98
|
||||
|
||||
1. 编辑器功能区添加更多折叠下拉框, 优化头部界面
|
||||
2. 添加数据源入口和界面
|
||||
3. 模版库优化, 剔除无用模版, 累计60+模版
|
||||
4. 入口页添加赞助墙
|
||||
5. 升级视频组件, 支持弹幕, 截屏, 模式设置等功能
|
||||
6. 文件上传路径兼容window服务器本地化部署
|
||||
|
||||
#### 1.96
|
||||
|
||||
1. 修复首页推荐项目外链地址和站内文案
|
||||
2. 替换Dooring网站logo
|
||||
3. 优化ios8以下访问H5时可能出现的页面卡顿问题
|
||||
4. 图片上传组件添加svg, gif图片格式支持
|
||||
5. 后台管理系统添加一键跳编辑器按钮
|
||||
6. 服务端编辑侧路由加固
|
||||
7. 文件上传组件添加自定义上传文档，支持七牛云，腾讯云，阿里oss等第三方图床方式
|
||||
|
||||
#### 1.95
|
||||
|
||||
1. dooring文档添加更新日志模块
|
||||
2. dooring增报错监控函数, 提供一键清空缓存按钮和自动重载功能
|
||||
3. 新增电商商品H5模版
|
||||
4. 页面配置增加背景模式和背景重复
|
||||
5. 表单添加字段名配置项
|
||||
|
||||
#### 1.94
|
||||
|
||||
1. 转盘组件支持转盘交互功能(跳转链接/打开弹窗/自定义代码)
|
||||
2. 添加网站拦截, 防止页面误关导致页面无法保存
|
||||
3. 优化页面控制条组件样式
|
||||
4. 按钮组件添加组件动画
|
||||
5. 图片组件添加组件动画
|
||||
6. 媒体组件icon优化
|
||||
7. 全局错误监控组件添加一键清除缓存功能
|
||||
|
||||
#### 1.93
|
||||
|
||||
1. 上线源码下载功能
|
||||
2. 服务端支持下载源码服务和下载次数限制
|
||||
3. 界面部分文案优化
|
||||
4. 出码基座优化
|
||||
5. 抽奖组件支持抽奖后自定义交互(弹窗/链接/自定义代码)
|
||||
|
||||
#### 1.92
|
||||
|
||||
1. 修复背景图预览适配问题
|
||||
2. 转盘组件支持中奖后自定义交互/弹窗/自定义代码
|
||||
3. 界面局部调整
|
||||
4. 后台管理表单数据支持多键查询
|
||||
5. 可视化大屏柱状图组件支持实时数据请求
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -43,3 +43,76 @@ observe.subscribe(() => {}, null, (res) => {
|
||||
|
||||
其他oss服务类似, 如果不清楚如何配置, 可以在[H5-Dooring官网](http://h5.dooring.cn/)中找到我们.
|
||||
|
||||
### 如何接入任何第三方上传服务
|
||||
|
||||
首先我们的上传组件`Upload`使用内部的服务接口来实现上传功能, 所以需要给组件的`action`赋值, 如下:
|
||||
|
||||
``` jsx
|
||||
<Upload
|
||||
fileList={fileList}
|
||||
onPreview={this.handlePreview}
|
||||
onChange={this.handleChange}
|
||||
onRemove={this.handleRemove}
|
||||
name="file"
|
||||
listType="picture-card"
|
||||
className={styles.avatarUploader}
|
||||
action={sdk_upload_api || action}
|
||||
withCredentials={withCredentials}
|
||||
headers={{
|
||||
'x-requested-with': localStorage.getItem('user') || '',
|
||||
'authorization': localStorage.getItem('token') || '',
|
||||
...headers
|
||||
}}
|
||||
beforeUpload={this.handleBeforeUpload}
|
||||
>
|
||||
{fileList.length >= maxLen ? null : uploadButton}
|
||||
</Upload>
|
||||
```
|
||||
如果需要集成第三方oss, 如七牛云, 阿里oss等, 我们需要将`Upload`组件的`action`属性设置为空字符串, 其次删除`onChange`属性, 上传操作统一在`beforeUpload`中进行. 案例如下:
|
||||
|
||||
``` jsx
|
||||
<Upload
|
||||
fileList={fileList}
|
||||
action=""
|
||||
onPreview={this.handlePreview}
|
||||
onRemove={this.onRemove}
|
||||
name="file"
|
||||
listType="picture-card"
|
||||
className={styles.avatarUploader}
|
||||
headers={{...headers}}
|
||||
beforeUpload={this.handleBeforeUpload}
|
||||
>
|
||||
{fileList.length >= maxLen ? null : uploadButton}
|
||||
</Upload>
|
||||
```
|
||||
自定义上传的核心逻辑放在了`beforeUpload`上. 我们具体看看`beforeUpload`这个方法如何实现.
|
||||
|
||||
``` js
|
||||
handleBeforeUpload = (file:RcFile) => {
|
||||
// 1. 限制图片类型
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/gif';
|
||||
if (!isJpgOrPng) {
|
||||
message.error('只能上传格式为jpeg/png/gif的图片');
|
||||
}
|
||||
// 限制上传文件大小
|
||||
const isLt3M = file.size / 1024 / 1024 < 3;
|
||||
if (!isLt3M) {
|
||||
message.error('图片必须小于3MB!');
|
||||
}
|
||||
if(isJpgOrPng && isLt3M) {
|
||||
// 3. 正常上传逻辑
|
||||
const fileName = file.name
|
||||
// 3.1 调用oss接口, 将图片上传oss
|
||||
// 3.2 将接口返回的url信息, 组装成fileList数据结构, 并更新state
|
||||
const fileList = [{ uid, name: fileName, status: 'done', url }];
|
||||
this.setState({
|
||||
curImgUrl: url,
|
||||
fileList,
|
||||
})
|
||||
// 3.3 将数据传给上层保存
|
||||
this.props.onChange && this.props.onChange(fileList)
|
||||
}
|
||||
return isJpgOrPng && isLt3M;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
35
doc/zh/guide/functionRealization/download.md
Normal file
35
doc/zh/guide/functionRealization/download.md
Normal file
@ -0,0 +1,35 @@
|
||||
<!--
|
||||
* @Date: 2021-01-17 14:26:00
|
||||
* @LastEditors: xuxiaoxi
|
||||
* @LastEditTime: 2021-05-17 21:32:58
|
||||
* @FilePath: /github-h5-Dooring/doc/zh/guide/functionRealization/saveJson.md
|
||||
-->
|
||||
## 下载源码
|
||||
目前Dooring已支持下载源码功能, 我们可以使用编辑器页面头部的下载按钮来实现下载用户搭建的H5源码.
|
||||
<img src="../../../img/functionRealization/down.png" alt="foo">
|
||||
|
||||
源码下载之后是完整的React项目源代码, 开发人员可以直接根据自己的业务需求来二次编写代码来满足不同的业务需求.
|
||||
|
||||
在拿到源码之后, 我们需要进入项目, 使用npm或者yarn安装项目依赖, 如下:
|
||||
|
||||
``` bash
|
||||
npm install
|
||||
// 或者
|
||||
yarn
|
||||
```
|
||||
|
||||
之后我们就可以本地运行项目了:
|
||||
|
||||
``` bash
|
||||
npm start
|
||||
// 或者
|
||||
yarn start
|
||||
```
|
||||
|
||||
因为源码工程采用`umi3.0`搭建, 所以代码配置可以参考`umi3.0`规范, 比如路由配置, `history`模式, 打包路径等, 二次开发完成之后, 我们可以执行:
|
||||
``` bash
|
||||
npm run build
|
||||
// 或者
|
||||
yarn build
|
||||
```
|
||||
将项目打包成html, 以便部署到任何服务器中.
|
||||
@ -1,3 +1,3 @@
|
||||
<img src="../../img/common/framework.png" alt="foo">
|
||||
|
||||
注：灰色部分还未实现，正在更新中...
|
||||
注：灰色部分不包括在实现范围内，可以参考商业授权版源码二次开发.
|
||||
|
||||
177
doc/zh/guide/product.md
Normal file
177
doc/zh/guide/product.md
Normal file
@ -0,0 +1,177 @@
|
||||
<img src="http://cdn.dooring.cn/dr/ccc.png" alt="dooring" width="100%">
|
||||
|
||||
H5-Dooring 是一款功能强大，高可扩展的 H5 可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的 H5 落地页最佳实践。
|
||||
|
||||
## 背景介绍
|
||||
|
||||
**LowCode** 平台这两年在国内热度很高, 也有很多公司在着手设计能支撑更多业务场景的低代码平台, 但是国内发展仍然处于起步阶段, 还有非常多的问题需要处理。就我本人服务过的多家上市公司, 中后台业务非常复杂, 但是通用性非常高, 业务逻辑和展现形态有很多复用性, 为了解决复用性低和研发效能低的问题, **规则引擎** 孕育而生, 当然这只是 **Lowcode/nocode** 的一个过渡方案, 但已经能为企业提高20%以上的研发效率。
|
||||
|
||||
当然很多企业早已看到这样的机会, 也研发出了非常优秀的 **LowCode** 产品, 但是由于国内企业业务的复杂性, 很多 **LowCode** 产品都存在一定的局限, 所以各大中小企业也开始研究可视化搭建相关的产品, 可谓“百花齐放”。
|
||||
|
||||
[**H5-Dooring**](http://h5.dooring.cn/h5_plus) 正是为了解决企业内部可视化搭建需求的解决方案, 它更多的是提供一套可视化搭建解决方案, 以源码的方式交付企业, 使得企业能从此方案中受益, 二次开发适合自身业务需求的搭建平台。当然随着 [**H5-Dooring**](http://h5.dooring.cn/h5_plus) 的不断更新和完善, 部分企业甚至不需要二次开发就能直接使用 [**H5-Dooring**](http://h5.dooring.cn/h5_plus) , 我们也提供部署服务, 来快速帮企业做项目部署。目前已完成了常用的功能:
|
||||
|
||||
- 微信/QQ分享(支持配置微信分享文案, 自定义分享图标)
|
||||
- https服务支持解决方案
|
||||
- oss解决方案(已跑通七牛云上传服务)
|
||||
- 国际化方案
|
||||
|
||||
同时由于 **H5-Dooring** 的核心在编辑器前端, 也是其最大价值所在, 我们服务层主要提供基础的数据支持服务(用户管理, H5页面管理, 模版管理, 基本页面统计等), 企业也可以轻松接入自己的服务后台,如 **java, php, go, python** 等。所以不用担心整合内部系统之后的数据问题, 同时我建议有二次开发需求的企业需要具备一定的技术能力, 比如**React, Nodejs** 等的开发经验。
|
||||
|
||||
## H5编辑器介绍
|
||||
接下来和大家详细介绍一下 [**H5-Dooring**](http://h5.dooring.cn/h5_plus) 编辑器的功能模块。
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/chrome-capture%20%284%29.gif" alt="dooring" width="100%">
|
||||
|
||||
### 1.入口页面
|
||||
|
||||
入口页面主要是我们在编辑器前台管理用户页面的一个入口, 我们可以创建H5页面, 在线编程等, 同时也能基于已有的精选模版来快速的创建页面:
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/1.png" alt="dooring" width="100%">
|
||||
|
||||
### 2.编辑器页面
|
||||
|
||||
编辑器页面的内容比较多, 也是最为重要的部分。我们可以从几个部分来介绍:
|
||||
|
||||
- 组件区
|
||||
- 画布区
|
||||
- 顶部功能区
|
||||
- 属性编辑面板
|
||||
- 数据源
|
||||
- 快捷键
|
||||
- 国际化
|
||||
|
||||
#### 2.1 组件区
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/3.png" alt="dooring" width="100%">
|
||||
|
||||
组件主要包括 基础组件, 图表组件, 媒体组件, 商品组件, 功能组件, 当然企业也可以基于自身业务划分不同的分类, 并进行组件的二次开发。我们只需要从左侧拖拽组件到画布, 即可使用该组件。
|
||||
|
||||
同时 [**H5-Dooring**](http://h5.dooring.cn/h5_plus) 还提供了组件定制的能力, 让用户选择自己常用的组件, 这样用户可以更高效的搭建页面:
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/4.png" alt="dooring" width="100%">
|
||||
|
||||
由上图所示, 用户只需要选择或者取消选择, 可以决定组件是否在编辑器页面显示, 如果后期用户想恢复设置, 也可以在该页面恢复。
|
||||
|
||||
#### 2.2 画布区
|
||||
|
||||
画布区可以动态调整画布大小来试试预览不同尺寸的样式, 也可以移动画布, 缩放画布来快捷的操作页面:
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/13.png" alt="dooring" width="100%">
|
||||
|
||||
#### 2.3 顶部功能区
|
||||
|
||||
顶部功能区包括的功能有:
|
||||
|
||||
- 模版库
|
||||
- 保存
|
||||
- 下载源码
|
||||
- 导出json
|
||||
- 导入json
|
||||
- 预览
|
||||
- 真机预览
|
||||
- 撤销/重做
|
||||
- 删除
|
||||
- 截图
|
||||
- 页面设置
|
||||
|
||||
大家可以亲自体验一下。
|
||||
|
||||
#### 2.4 属性编辑面板
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/12.png" alt="dooring" width="100%">
|
||||
|
||||
属性编辑面板可以对组件的外观, 逻辑, 交互进行配置, 比较简单但大部分满足业务搭建需求, 企业技术人员也可以增量式地添加更多属性配置。
|
||||
|
||||
#### 2.5 数据源
|
||||
|
||||
数据源主要为瓶平台用户提供一种高效的数据接入机制, 不同页面或者统同一页面的不同组件可以共享数据:
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/11.png" alt="dooring" width="100%">
|
||||
|
||||
更详细的数据源介绍可以参考我的文章 [Dooring可视化搭建平台数据源设计剖析](https://mp.weixin.qq.com/s?__biz=MzU2Mzk1NzkwOA==&mid=2247487877&idx=2&sn=770ff16d69d3e7ac2bbcd78e97ab8f32&chksm=fc53087ecb2481685451a50e892fa889781788ca16a4ce689ec7f7fff1ae99c91ac8b82a160d&token=1373546109&lang=zh_CN#rd)
|
||||
|
||||
#### 2.6 快捷键
|
||||
|
||||
快捷键主要分为画布内组件的快捷键(复制, 删除)和全局的快捷键, 如下图所示:
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/10.png" alt="dooring" width="100%">
|
||||
|
||||
#### 2.7 国际化
|
||||
|
||||
国际化目前已支持, 我们只需要在入口页面切换即可:
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/9.png" alt="dooring" width="100%">
|
||||
|
||||
|
||||
### 3.预览页面
|
||||
|
||||
用户可以点击顶部功能区的预览按钮一键预览:
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/5.png" alt="dooring" width="100%">
|
||||
|
||||
也可以在预览页面, 打开控制台调整为谷歌的仿真预览模式:
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/6.png" alt="dooring" width="100%">
|
||||
|
||||
### 4.真机预览
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/7.png" alt="dooring" width="100%">
|
||||
|
||||
### 5.登录页面
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/8.png" alt="dooring" width="100%">
|
||||
|
||||
|
||||
## Dooring后台管理介绍
|
||||
|
||||
**Dooring后台管理** 主要是为 **H5-Dooring** 提供数据支撑, 比如增删查改等操作, 同时随着用户需求的不断增加, **Dooring后台管理** 目前已实现了非常多的功能, 比如说表单数据收集, 表单数据分析, 导出数据, 基本的页面数据监控等, 接下来我就来带大家介绍一下。
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/20.png" alt="dooring" width="100%">
|
||||
|
||||
我们可以从上图的编辑器界面右上角头像下拉框中进入后台管理系统。
|
||||
|
||||
### 1.后台主页
|
||||
|
||||
后台主页主要是对编辑器页面提供基本的访问量统计, 同时对用户数, 模版数, 页面数进行统计, 企业可以根据自身需求二次开发更多数据统计方案。
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/21.png" alt="dooring" width="100%">
|
||||
|
||||
### 2.用户管理
|
||||
|
||||
用户管理主要是对网站用户进行管理(注册, 修改, 删除, 查看等), 当然只有超级管理员能看到, 目前我们做了简单的权限管理: 超级管理员, 普通用户. 普通用户可以管理自己的页面, 查看页面数据分析等,超级管理员可以使用所有功能, 比如管理用户, 生成注册链接, 模版管理, 页面管理等, 同时可以审核页面, 一键删除其他用户产生的不符合规定的页面。
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/22.png" alt="dooring" width="100%">
|
||||
|
||||
|
||||
### 3.页面管理
|
||||
|
||||
页面管理主要是对用户搭建的H5页面进行管理, 我们可以查看页面的链接, 页面访问量, 编辑页面标题, 删除页面等,如果这个页面包含表单, 我们还能一键查看表单数据的收集情况,并一键进行数据分析。
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/24.png" alt="dooring" width="100%">
|
||||
|
||||
|
||||
#### 3.1表单页面数据分析
|
||||
|
||||
表单数据分析主要针对有表单的页面, 我们可以一键统计表单数据, 并生成分析报告, 如下图:
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/23.png" alt="dooring" width="100%">
|
||||
|
||||
同时我们可以将数据导出为 `excel`, 或者将数据导入, 一键生成数据分析报告, 当然更多分析维度开发者也可以二次开发。
|
||||
|
||||
### 4.模版管理
|
||||
|
||||
超级管理员可以对用户产生的模版进行预览, 审核, 删除, 保证线上用户使用的模版都是精美可用的:
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/26.png" alt="dooring" width="100%">
|
||||
|
||||
### 5.精选模版管理
|
||||
|
||||
精选模版主要是用来管理 **H5-Dooring** 入口页面中的模版, 我们可以把精美的行业模版上传到精选模版中, 让用户更高效的搭建页面:
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/25.png" alt="dooring" width="100%">
|
||||
|
||||
## Dooring后台服务介绍
|
||||
|
||||
后台服务主要采用的 koa + nodejs, 同时还使用了微信 `sdk`, 轻松帮我们实现微信相关的功能, 接口遵循 `restful` 规范, 并且提供了接口文档, 企业可以轻松基于此使用自己的后端语言来接入, 比如 java, python, go, php等。
|
||||
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
# 快速上手
|
||||
|
||||
## 从零搭建一个H5表单页面
|
||||
|
||||
<iframe src="//player.bilibili.com/player.html?aid=715343955&bvid=BV1QQ4y1Z725&cid=332145157&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="width: 100%;height: 420px; margin-top: 20px"> </iframe>
|
||||
|
||||
|
||||
## 环境准备
|
||||
|
||||
首先得有 node，并确保 node 版本是 `10.13` 或以上，（mac/win 下推荐使用 n 来管理 node 版本）
|
||||
@ -26,3 +31,9 @@ v10.13.0
|
||||
2.其次本地启动 h5_plus,启动完毕在浏览器打开对应的启动地址即可查看，如下：
|
||||
|
||||
<img src="../../img/common/home.png" alt="foo">
|
||||
|
||||
## 项目路径说明
|
||||
|
||||
- `/h5_plus` H5编辑器项目
|
||||
- `/iH5` Dooring后台管理系统
|
||||
- `/doc` Dooring文档
|
||||
|
||||
BIN
logo.ff7fc6bb.png
Normal file
BIN
logo.ff7fc6bb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
@ -44,6 +44,7 @@
|
||||
"url": "https://github.com/MrXujiang/h5-Dooring/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"@alex_xu/react-slider-vertify": "^1.1.7",
|
||||
"@ant-design/icons": "^4.2.1",
|
||||
"@antv/f2": "^3.7.7",
|
||||
"@uiw/react-baidu-map": "^1.17.3",
|
||||
|
||||
275
readme.md
275
readme.md
@ -1,7 +1,7 @@
|
||||
> 让H5制作像搭积木一样简单!
|
||||
> Make H5 as easy as building blocks!
|
||||
|
||||
<p align="center">
|
||||
<img src="./public/logo.png" width="260" alt="H5编辑器,H5制作神器,H5 editor,lowcode">
|
||||
<img src="http://cdn.dooring.cn/dr/logo.ff7fc6bb.png" width="260" alt="H5编辑器,H5制作神器,H5 editor,lowcode">
|
||||
</p>
|
||||
<h1 align="center">Welcome to H5-Dooring 👋</h1>
|
||||
<p>
|
||||
@ -14,191 +14,106 @@
|
||||
</a>
|
||||
</p>
|
||||
|
||||
> H5-Dooring是一款功能强大，专业可靠的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。技术栈以react为主， 后台采用nodejs开发。
|
||||
|
||||
> H5-Dooring is a powerful, open source, free H5 visual page configuration solution dedicated to providing a simple, convenient, professional and reliable, unlimited set of H5 landing page best practices. The technology stack is mainly react, developed in the background using nodejs.
|
||||
|
||||
### 🏠 [Homepage](http://h5.dooring.cn)
|
||||
<img src="http://cdn.dooring.cn/dr/123.png" alt="H5-Dooring编辑器预览图" width="100%" />
|
||||
|
||||
### ✨ [Demo](http://h5.dooring.cn/h5_plus)
|
||||
| home🏠 | demo✨ | doc📦 | tutorial | wiki |
|
||||
| ----------- | ----------- | ----------- | ----------- | ----------- |
|
||||
| [website](http://h5.dooring.cn) | [Demo](http://h5.dooring.cn/h5_plus) | [Document](http://h5.dooring.cn/doc) | [视频&Video](https://www.zhihu.com/zvideo/1406394315950653440) | [wiki](https://github.com/MrXujiang/h5-Dooring/wiki)
|
||||
|
||||
### 📦 doc(文档) [H5-Dooring Document](http://h5.dooring.cn/doc)
|
||||
English | [简体中文](./zh.md)
|
||||
|
||||
### [视频教程 | Video tutorial](https://www.zhihu.com/zvideo/1326300284608417792)
|
||||
Related products:
|
||||
|
||||
<!-- <img src="http://io.nainor.com/uploads/face_17512320c6d.png" alt="H5可视化编辑器" /> -->
|
||||
|
||||
|
||||
相关产品: [V6.Dooring | 大屏可视化编辑器](https://github.com/MrXujiang/v6.dooring.public)
|
||||
- [V6.Dooring | Large screen visual editor](https://github.com/MrXujiang/v6.dooring.public)
|
||||
- [dooring-electron-lowcode | Dooring desktop software](https://github.com/MrXujiang/dooring-electron-lowcode)
|
||||
- [Lowcode community](http://lowcode.dooring.cn)
|
||||
|
||||
## Author
|
||||
|
||||
👤 **徐小夕**
|
||||
👤 **alex_xu**
|
||||
|
||||
* Website: http://h5.dooring.cn
|
||||
* Github: [@MrXujiang](https://github.com/MrXujiang)
|
||||
|
||||
## 声明
|
||||
|
||||
专有软件及代码，未获得授权的情况下，禁止对该仓库代码进行反编译、分发等行为，否则将承担相应的法律后果。
|
||||
|
||||
## 🤝 Contributing
|
||||
## 🤝 Contributing and support
|
||||
|
||||
Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/MrXujiang/h5-Dooring/issues).
|
||||
|
||||
## Show your support
|
||||
|
||||
Give a ⭐️ if this project helped you!
|
||||
|
||||
## ⭐️ dooring-sdk使用
|
||||
最近笔者正在开放dooring的插拔式服务, 以js-sdk的形式支持集成到外部系统中, 并提供开放API共使用者自由配置. 规划如下:
|
||||
|
||||
### Features
|
||||
1. editor
|
||||
- [x] Guides
|
||||
- [x] The underlying component
|
||||
- [x] Visual components
|
||||
- [x] Media components
|
||||
- [x] Product components
|
||||
- [x] Dragper
|
||||
- [x] Configure the panel
|
||||
- [x] Form designer
|
||||
- [x] (Multi) Page management (copy, edit, delete, new)
|
||||
- [x] Component animation
|
||||
- [x] Component interaction
|
||||
- [x] Data source management
|
||||
- [x] Quick preview
|
||||
- [x] Real machine preview
|
||||
- [x] Undo and redo
|
||||
- [x] WeChat shares
|
||||
- [x] shortcut key
|
||||
- [x] The template library
|
||||
- [x] Desktop software, Dooring-electron, supports offline use
|
||||
|
||||
|
||||
|
||||
2. Enhanced features
|
||||
- [x] Upload json, convert to H5 with one click
|
||||
- [x] Photo gallery
|
||||
- [x] Code capability (download source, download dis package)
|
||||
|
||||
4. backend API
|
||||
- [x] Create, save, and update your work
|
||||
- [x] User management, rights management
|
||||
- [x] One-click intelligent analysis
|
||||
- [x] Data look
|
||||
- [x] Form data collection
|
||||
- [x] Form data presentation
|
||||
- [x] Form data analysis, one-click export excel, form multi-condition search
|
||||
- [x] Preview online
|
||||
- [x] QR code preview
|
||||
- [x] Template management
|
||||
- [x] Code interface
|
||||
|
||||
## Update the log
|
||||
1. Whether the video component adds a full-screen configuration item when playing
|
||||
2. Fixes a click failure of the icon component
|
||||
3. The editor supports multi-size switching and canvas size customization
|
||||
4. Fix multilingual issues with background management analytics forms
|
||||
5. The component library supports user-defined selection
|
||||
|
||||
### The back-end section
|
||||
The back-end part because of the knowledge points involved is more, is not the focus of this article, so here is a few points, you can use completely different technology to achieve back-office services, such as PHP, Java, Python or Egg. The author here is using the "koa" .
|
||||
|
||||
Specific code can refer to the full stack development article:
|
||||
|
||||
- [基于Koa + React + TS从零开发全栈文档编辑器](https://mp.weixin.qq.com/s?__biz=MzU2Mzk1NzkwOA==&mid=2247486910&idx=2&sn=7ce865dd8a8f6769439f0e8eebb72212&chksm=fc531445cb249d534a7d8a362ad40d26bc90f2d2e867385768ee19575e32826fcbe419fcbe0b&token=297396546&lang=zh_CN#rd)
|
||||
|
||||
- [Dooring后台接口文档](http://h5.dooring.cn/doc/zh/guide/deployDev/api.html)
|
||||
- [私有化部署](http://h5.dooring.cn/h5_plus/price)
|
||||
|
||||
|
||||
### 1. 如何引用js-sdk | How to use js-sdk
|
||||
我们可以使用两种方式来使用我们的js-sdk, 第一种是在项目脚本中引入如下script标签, 如下:
|
||||
``` js
|
||||
<script src="http://h5.dooring.cn/dooring-sdk.js"></script>
|
||||
```
|
||||
或者直接复制如下代码到你的script标签中, 代码如下:
|
||||
``` js
|
||||
(function(){var b=document.createElement("iframe");var d=Date.now();var a="http://49.234.61.19";b.src=a+"/h5_plus/editor?tid="+d+"&"+c(dooringOpts)+"&isOpen=1";console.log(c(dooringOpts));b.style.border="none";b.style.width="100vw";b.style.height="100vh";if(dooringOpts&&dooringOpts.iframeStyle){b.style.border=dooringOpts.iframeStyle.border||"none";b.style.width=dooringOpts.iframeStyle.width||"100vw";b.style.height=dooringOpts.iframeStyle.height||"100vh"}document.querySelector(dooringOpts.container||"body").appendChild(b);function c(g){var e=Object.assign({gallery:false,template:false,saveTemplate:true,save:true,downCode:true,isPhoneTest:false,helpPage:true,uploadApi:"",formApi:"",screenshotsApi:""},g.controls||{});var h="";for(var f in e){h+=f+"="+encodeURI(e[f])+"&"}return h.slice(0,h.length-1)}})();
|
||||
```
|
||||
|
||||
### 2. 自定义选项 | Custom options
|
||||
|
||||
我们可以在全局定义如下配置项:
|
||||
|
||||
``` js
|
||||
var dooringOpts = {
|
||||
container: '', // 挂载到哪个dom节点上
|
||||
iframeStyle: { // iframe自定义样式
|
||||
width: '',
|
||||
height: '',
|
||||
border: ''
|
||||
},
|
||||
controls: {
|
||||
gallery: false, // 是否启动图片库
|
||||
template: false, // 是否启用模版库
|
||||
saveTemplate: true, // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
|
||||
save: true, // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
|
||||
downCode: true, // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
|
||||
isPhoneTest: false,
|
||||
helpPage: true, // false/true表示隐藏/显示帮助页面
|
||||
uploadApi: '', // 自定义上传api
|
||||
formApi: '', // 自定义表单提交api
|
||||
screenshotsApi: '' // 自定义截图提交api
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
注: 在使用自定义配置时, 自定义配置的顺序应先于sdk引入的顺序, 所以正确的使用案例如下:
|
||||
|
||||
``` js
|
||||
<script>
|
||||
var dooringOpts = {
|
||||
|
||||
}
|
||||
</script>
|
||||
<script src="http://49.234.61.19/dooring-sdk.js"></script>
|
||||
```
|
||||
|
||||
|
||||
## 技术栈 | The technology stack
|
||||
* **React** 前端主流框架(react,vue,angular)之一,更适合开发灵活度高且复杂的应用
|
||||
* **dva** 主流的react应用状态管理工具，基于redux
|
||||
* **less** css预编译语言，轻松编写结构化分明的css
|
||||
* **umi** 基于react的前端集成解决方案
|
||||
* **antd** 地球人都知道的react组件库
|
||||
* **axios** 强大的前端请求库
|
||||
* **react-dnd** 基于react的拖拽组件解决方案，具有优秀的设计哲学
|
||||
* **qrcode.react** 基于react的二维码生成插件
|
||||
* **zarm** 基于react的移动端ui库，轻松实现美观的H5应用
|
||||
* **koa** 基于nodejs的上一代开发框架，轻松实现基于nodejs的后端开发
|
||||
* **@koa/router** 基于koa2的服务端路由中间件
|
||||
* **ramda** 优秀的函数式js工具库
|
||||
|
||||
### 预览功能 | Preview features
|
||||
预览功能这块比较简单, 我们只需要将用户生成的json数据丢进H5渲染器中即可, 这里我们需要做一个渲染页面单独用来预览组件. 先来看看几个预览效果:
|
||||
> The preview function is relatively simple, we just need to throw the user-generated jason data into the H5 renderer, here we need to make a rendering page for the preview components separately. Let's take a look at a few previews:
|
||||
|
||||
<img src="http://49.234.61.19/uploads/pr_1_1763cc4184a.png" alt="h5_preview_pic" width="375px"/>
|
||||
<br />
|
||||
<img src="http://49.234.61.19/uploads/pr_2_1763cc49dd1.png" alt="h5_preview_pic" width="375px"/>
|
||||
|
||||
前面的渲染器原理已经介绍了, 这里就不一一介绍了,感兴趣的可以交流讨论.
|
||||
|
||||
### 实现在线下载功能 | Enable online download
|
||||
在线下载这块我们需要用到一个开源库: **file-saver**, 专门解决前端下载文件困难的窘境. 具体使用举例:
|
||||
``` js
|
||||
var FileSaver = require('file-saver');
|
||||
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
|
||||
FileSaver.saveAs(blob, "hello world.txt");
|
||||
```
|
||||
以上代码可以实现将传入的数据下载为txt文件, 如果是Blob, 是不是还能在线下载图片, html呢? 答案是肯定的, 所以我们的下载任务采用该方案来实现.
|
||||
|
||||
### 后端部分 | The back-end section
|
||||
后端部分由于涉及的知识点比较多, 不是本文考虑的重点, 所以这里大致提几个点, 大家可以用完全不同的技术来实现后台服务, 比如说**PHP**, **Java**, **Python**或者**Egg**. 笔者这里采用的是**koa**. 主要实现功能如下:
|
||||
* 保存模板 | Save the template
|
||||
* 真机预览的数据源存储 | The data source store for the real machine preview
|
||||
* 用户相关功能 | User-related features
|
||||
* H5图床和静态文件托管 | H5 map bed and static file hosting
|
||||
|
||||
具体代码可以参考笔者的另一篇全栈开发文章
|
||||
|
||||
[基于nodeJS从0到1实现一个CMS全栈项目](https://juejin.im/post/6844903952761225230)
|
||||
|
||||
模式基本一致.
|
||||
|
||||
## wiki(参考文档)
|
||||
* [H5可视化编辑器(H5 Dooring)介绍](https://github.com/MrXujiang/h5-Dooring/wiki/H5%E5%8F%AF%E8%A7%86%E5%8C%96%E7%BC%96%E8%BE%91%E5%99%A8(H5-Dooring)%E4%BB%8B%E7%BB%8D)
|
||||
* [Form Editor(动态表单设计器)](https://github.com/MrXujiang/h5-Dooring/wiki/Form-Editor(%E5%8A%A8%E6%80%81%E8%A1%A8%E5%8D%95%E8%AE%BE%E8%AE%A1%E5%99%A8))
|
||||
* [基于f2实现移动端可视化编辑器(dooring升级版)](https://github.com/MrXujiang/h5-Dooring/wiki/%E5%9F%BA%E4%BA%8Ef2%E5%AE%9E%E7%8E%B0%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%8F%AF%E8%A7%86%E5%8C%96%E7%BC%96%E8%BE%91%E5%99%A8(dooring%E5%8D%87%E7%BA%A7%E7%89%88))
|
||||
* [实现H5可视化编辑器的实时预览和真机扫码预览功能](https://github.com/MrXujiang/h5-Dooring/wiki/%E5%AE%9E%E7%8E%B0H5%E5%8F%AF%E8%A7%86%E5%8C%96%E7%BC%96%E8%BE%91%E5%99%A8%E7%9A%84%E5%AE%9E%E6%97%B6%E9%A2%84%E8%A7%88%E5%92%8C%E7%9C%9F%E6%9C%BA%E6%89%AB%E7%A0%81%E9%A2%84%E8%A7%88%E5%8A%9F%E8%83%BD)
|
||||
* [基于H5 Dooring场景下的图片 文件上传方案指南](https://github.com/MrXujiang/h5-Dooring/wiki/%E5%9F%BA%E4%BA%8EH5-Dooring%E5%9C%BA%E6%99%AF%E4%B8%8B%E7%9A%84%E5%9B%BE%E7%89%87-%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E6%96%B9%E6%A1%88%E6%8C%87%E5%8D%97)
|
||||
|
||||
## 已完成功能 | The functionality is complete
|
||||
1. 组件库拖拽和显示 | Component library drag and display
|
||||
2. 组件库动态编辑 | Component library dynamic editing
|
||||
3. H5页面预览功能 | H5 page preview feature
|
||||
4. 保存H5页面配置文件 | Save the H5 page profile
|
||||
5. 保存为模版 | Save as a template
|
||||
6. 移动端跨端适配 | Mobile cross-end fit
|
||||
7. 媒体组件 | The media component
|
||||
8. 在线下载网站代码功能 | Download the website code feature online
|
||||
9. 添加typescript支持 | Add typescript support
|
||||
10. 表单设计器/自定义表单组件 | Form designer/custom form components
|
||||
11. 可视化组件Chart实现 | Visual component Chart implementation
|
||||
12. 在线编程模块(Mini Web IDE) | Online programming module
|
||||
13. 新增图表组件 面积图，折线图， 饼图 | Added chart component area chart, line chart, pie chart
|
||||
14. 添加图片库,支持用户在线选择图片素材 | Add a picture library to allow users to select picture footage online
|
||||
15. 升级图片组件为图文组件 | Upgrade the picture component to the picture component
|
||||
16. 添加模版库 | Add a template library
|
||||
17. 添加可视化组件(基于g2)如折线图, 饼图, 面积图等 | Add visualization components (based on g2) such as line charts, pie charts, area charts, etc
|
||||
18. form组件文本框字段修改 | The form component text box field is modified
|
||||
19. 清空按钮添加确认框 | Empty the button to add a confirmation box
|
||||
20. 表单组件中添加展示型文本,用来对字段说明 | Add presentation text to the form component to describe the field
|
||||
21. 支持组件复制, 右键删除 | Support for component replication, right-click deletion
|
||||
|
||||
## 正在完成功能 | The functionality is being completed
|
||||
* 丰富组件库组件 Enrich component library components
|
||||
* 添加配置交互功能 Add configuration interaction
|
||||
* 组件细分和代码优化 Component segmentation and code optimization
|
||||
* 单元测试 Unit tests
|
||||
|
||||
## Install(安装)
|
||||
1. 下载代码 | Download the code
|
||||
## Install
|
||||
1. Download the code
|
||||
```sh
|
||||
git clone https://github.com/MrXujiang/h5-Dooring.git
|
||||
```
|
||||
2. 进入项目目录 | Go to the project catalog
|
||||
2. Go to the project catalog
|
||||
```sh
|
||||
cd ./h5-Dooring
|
||||
```
|
||||
|
||||
3. 安装依赖包 | Install the dependency package
|
||||
3. Install the dependency package
|
||||
```sh
|
||||
yarn install
|
||||
or
|
||||
@ -207,7 +122,7 @@ cnpm install
|
||||
|
||||
## Usage
|
||||
|
||||
本地启动应用 | Launch the app locally
|
||||
Launch the app locally
|
||||
```sh
|
||||
yarn start
|
||||
or
|
||||
@ -216,11 +131,11 @@ cnpm run start
|
||||
|
||||
## How to run the downloaded code ?
|
||||
|
||||
1. 可以将压缩包解压直接放到服务器根目录, 访问根目录地址即可
|
||||
2. `vscode`安装Live Server插件, 将下载的压缩包解压成文件夹, 用`vscode`打开, 点击Live Server即可, 注意要删除启动路径的`index.html`, 改成`/`
|
||||
1. The compression package can be unzipped directly to the server root, and access to the root address is sufficient
|
||||
2. 'vscode' installs the Live Server plug-in, unzips the downloaded compression package into a folder, opens with 'vscode', clicks on Live Server, and notes that to remove the 'index .html' of the startup path, change it to '/'
|
||||
|
||||
|
||||
如发现本地启动后组件拖拽遇到奇怪的报错, 是应为第三方组件在开发环境的bug, 可以采用一下方式解决:
|
||||
If you find that the local boot component drag and drop encountered strange errors, is the third-party component in the development environment bug, you can take a step to solve:
|
||||
> If you find that the local start-up component drag encountered strange errors, is a bug that should be a third-party component in the development environment, can be resolved in a way:
|
||||
|
||||
```sh
|
||||
@ -228,32 +143,34 @@ yarn dev
|
||||
or
|
||||
cnpm run dev
|
||||
```
|
||||
前提是先安装http-server模块.
|
||||
The premise is to install the http-server module first.
|
||||
|
||||
## Browsers support
|
||||
|
||||
Modern browsers does not support IE browser
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IEdge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
|
||||
| Edge | last 2 versions | last 2 versions | last 2 versions |
|
||||
|
||||
## Partner project
|
||||
|
||||
* [mitu-editor - 轻量级且强大的图片编辑器](https://github.com/H5-Dooring/mitu-editor)
|
||||
* [powerNice - 一款轻量级文档管理编辑器](http://h5.dooring.cn/powernice/views)
|
||||
* [rc-drag - 基于react的轻量级拖拽缩放组件](https://github.com/MrXujiang/rc-drag)
|
||||
* [Luckysheet - 强大的在线excel编辑器](https://github.com/mengshukeji/Luckysheet)
|
||||
* [Blink - 一款自定义的生成故障艺术动画的组件库](https://github.com/MrXujiang/blink)
|
||||
* [frontend-developer-roadmap | 一个能提高开发者工作效率的前端js库汇总](https://github.com/MrXujiang/frontend-developer-roadmap)
|
||||
* [lucky-canvas 抽奖插件 | 一个支持H5, 微信小程序, React的抽奖插件](https://github.com/LuckDraw/lucky-canvas)
|
||||
* [vue-admin-box | 免费并且开源的中后台管理系统模板](https://github.com/cmdparkour/vue-admin-box)
|
||||
* [基于antd开箱即用的后台管理模版ant-simple-pro](https://github.com/lgf196/ant-simple-pro)
|
||||
|
||||
## 更新日志 | Update the log
|
||||
1. 添加在线编程模块（在执行代码前先启动node服务 npm run server）
|
||||
2. 添加客服机器人模块[chatbot-antd](https://www.npmjs.com/package/chatbot-antd)
|
||||
3. 添加数据可视化模块
|
||||
4. 添加表单定制模块
|
||||
## Sponsored
|
||||
Open source is not easy, with your sponsorship, we will do better
|
||||
|
||||
<img src="http://cdn.dooring.cn/dr/WechatIMG2.jpeg" width="180px" />
|
||||
|
||||
## 持续升级 | Continuous upgrades
|
||||
正在升级1.5版本，敬请期待...
|
||||
## Technical feedback and communication
|
||||
wechat：beautifulFront
|
||||
|
||||
## 赞助 | Sponsored
|
||||
开源不易, 有了您的赞助, 我们会做的更好~
|
||||
|
||||
<img src="http://49.234.61.19/uploads/WechatIMG2_1742b586c3d.jpeg" width="180px" />
|
||||
|
||||
## 技术反馈和交流群 | Technical feedback and communication
|
||||
微信：beautifulFront
|
||||
|
||||
<img src="http://49.234.61.19/uploads/code_1763cc23385.png" width="180px" />
|
||||
<img src="http://cdn.dooring.cn/dr/qtqd_code.png" width="180px" />
|
||||
|
||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
@ -43,7 +43,7 @@ export interface IDataListConfigType {
|
||||
key: string;
|
||||
name: string;
|
||||
type: 'DataList';
|
||||
cropRate: number;
|
||||
cropRate?: number;
|
||||
}
|
||||
|
||||
export type TDataListDefaultTypeItem = {
|
||||
@ -51,8 +51,9 @@ export type TDataListDefaultTypeItem = {
|
||||
title: string;
|
||||
desc: string;
|
||||
link: string;
|
||||
type?: number;
|
||||
imgUrl: TUploadDefaultType;
|
||||
type?: number;
|
||||
price?: string;
|
||||
};
|
||||
|
||||
export type TDataListDefaultType = Array<TDataListDefaultTypeItem>;
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
import React, { memo, ReactElement, ReactNode } from 'react';
|
||||
import React, { memo } from 'react';
|
||||
import { Button, Popover } from 'antd';
|
||||
import { serverUrl } from '@/utils/tool';
|
||||
import styles from './index.less';
|
||||
|
||||
interface IProps {
|
||||
text: any;
|
||||
text?: any;
|
||||
}
|
||||
|
||||
///这组件写的有问题 popover会重定位
|
||||
const content = (
|
||||
<div className={styles.imgWrap}>
|
||||
<img src={`${serverUrl}/uploads/WechatIMG2_1742b586c3d.jpeg`} alt="sponsorship" />
|
||||
<img src={`http://h5.dooring.cn/uploads/WechatIMG2_17969ccfe40.jpeg`} alt="sponsorship" />
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@ -31,10 +31,11 @@ const ViewRender = memo((props: ViewProps) => {
|
||||
onDragStart={onDragStart}
|
||||
onResizeStop={onResizeStop}
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
backgroundColor: pageData && pageData.bgColor,
|
||||
backgroundImage:
|
||||
pageData && pageData.bgImage ? `url(${pageData.bgImage[0].url})` : 'initial',
|
||||
backgroundSize: 'contain',
|
||||
backgroundSize: '100%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}}
|
||||
>
|
||||
|
||||
@ -117,7 +117,7 @@ export default function Layout({ children }: IRouteComponentProps) {
|
||||
<div style={{ height: 380 }}>
|
||||
<iframe
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
src="//player.bilibili.com/player.html?aid=204342673&bvid=BV1jh411k7xs&cid=301889522&page=1"
|
||||
src="//player.bilibili.com/player.html?aid=975155770&bvid=BV1844y1C7cA&cid=399340856&page=1"
|
||||
scrolling="no"
|
||||
border="0"
|
||||
frameborder="no"
|
||||
|
||||
@ -9,8 +9,6 @@ import {
|
||||
TNumberDefaultType,
|
||||
} from '@/components/FormComponents/types';
|
||||
|
||||
import { serverUrl } from '@/utils/tool';
|
||||
|
||||
export type CarouselDirectionKeyType = 'down' | 'left';
|
||||
|
||||
export type TCarouselEditData = Array<
|
||||
@ -87,7 +85,7 @@ const Carousel: ICarouselSchema = {
|
||||
uid: '001',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: `${serverUrl}/uploads/1_1740bd7c3dc.png`,
|
||||
url: 'http://h5.dooring.cn/uploads/1_1740bd7c3dc.png',
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -101,12 +99,12 @@ const Carousel: ICarouselSchema = {
|
||||
uid: '001',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: `${serverUrl}/uploads/2_1740bd8d525.png`,
|
||||
url: 'http://h5.dooring.cn/uploads/1_1740bd7c3dc.png',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
tplImg: `${serverUrl}/uploads/carousal_17442e1420f.png`,
|
||||
tplImg: 'http://h5.dooring.cn/uploads/1_1740bd7c3dc.png',
|
||||
},
|
||||
};
|
||||
export default Carousel;
|
||||
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -1,6 +0,0 @@
|
||||
const template = {
|
||||
type: 'Footer',
|
||||
h: 10,
|
||||
displayName: '页脚组件',
|
||||
};
|
||||
export default template;
|
||||
@ -3,6 +3,7 @@ import { Button } from 'zarm';
|
||||
import BaseForm from './BaseForm';
|
||||
import styles from './index.less';
|
||||
import { IFormConfig } from './schema';
|
||||
import { IsPC } from '@/utils/tool';
|
||||
import logo from '@/assets/form.png';
|
||||
const FormComponent = (props: IFormConfig & { isTpl: boolean }) => {
|
||||
const {
|
||||
@ -52,7 +53,7 @@ const FormComponent = (props: IFormConfig & { isTpl: boolean }) => {
|
||||
backgroundColor: bgColor,
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
pointerEvents: isEditorPage ? 'none' : 'initial',
|
||||
pointerEvents: isEditorPage || IsPC() ? 'none' : 'initial',
|
||||
}}
|
||||
>
|
||||
{title && (
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user