docs: update site
This commit is contained in:
dntzhang
parent
d61dfc6b0a
commit
8462bbdde6
|
|
@ -1,79 +1,81 @@
|
|||
{
|
||||
"cn.css": "static/css/cn.4dd07f49.css",
|
||||
"cn.css.map": "static/css/cn.4dd07f49.css.map",
|
||||
"cn.js": "static/js/cn.adfc9698.js",
|
||||
"cn.js.map": "static/js/cn.adfc9698.js.map",
|
||||
"cn.js": "static/js/cn.69bf80ec.js",
|
||||
"cn.js.map": "static/js/cn.69bf80ec.js.map",
|
||||
"index.css": "static/css/index.4dd07f49.css",
|
||||
"index.css.map": "static/css/index.4dd07f49.css.map",
|
||||
"index.js": "static/js/index.337ca875.js",
|
||||
"index.js.map": "static/js/index.337ca875.js.map",
|
||||
"static/js/0.8b145f4a.chunk.js": "static/js/0.8b145f4a.chunk.js",
|
||||
"static/js/0.8b145f4a.chunk.js.map": "static/js/0.8b145f4a.chunk.js.map",
|
||||
"static/js/1.7152f15f.chunk.js": "static/js/1.7152f15f.chunk.js",
|
||||
"static/js/1.7152f15f.chunk.js.map": "static/js/1.7152f15f.chunk.js.map",
|
||||
"static/js/10.29b8e7af.chunk.js": "static/js/10.29b8e7af.chunk.js",
|
||||
"static/js/10.29b8e7af.chunk.js.map": "static/js/10.29b8e7af.chunk.js.map",
|
||||
"static/js/11.1b7cb28d.chunk.js": "static/js/11.1b7cb28d.chunk.js",
|
||||
"static/js/11.1b7cb28d.chunk.js.map": "static/js/11.1b7cb28d.chunk.js.map",
|
||||
"static/js/12.7a88317e.chunk.js": "static/js/12.7a88317e.chunk.js",
|
||||
"static/js/12.7a88317e.chunk.js.map": "static/js/12.7a88317e.chunk.js.map",
|
||||
"static/js/13.2918b297.chunk.js": "static/js/13.2918b297.chunk.js",
|
||||
"static/js/13.2918b297.chunk.js.map": "static/js/13.2918b297.chunk.js.map",
|
||||
"static/js/14.8e15502a.chunk.js": "static/js/14.8e15502a.chunk.js",
|
||||
"static/js/14.8e15502a.chunk.js.map": "static/js/14.8e15502a.chunk.js.map",
|
||||
"static/js/15.29ed0917.chunk.js": "static/js/15.29ed0917.chunk.js",
|
||||
"static/js/15.29ed0917.chunk.js.map": "static/js/15.29ed0917.chunk.js.map",
|
||||
"static/js/16.c061a335.chunk.js": "static/js/16.c061a335.chunk.js",
|
||||
"static/js/16.c061a335.chunk.js.map": "static/js/16.c061a335.chunk.js.map",
|
||||
"static/js/17.98ec3c54.chunk.js": "static/js/17.98ec3c54.chunk.js",
|
||||
"static/js/17.98ec3c54.chunk.js.map": "static/js/17.98ec3c54.chunk.js.map",
|
||||
"static/js/18.c2baaa95.chunk.js": "static/js/18.c2baaa95.chunk.js",
|
||||
"static/js/18.c2baaa95.chunk.js.map": "static/js/18.c2baaa95.chunk.js.map",
|
||||
"static/js/19.d422232c.chunk.js": "static/js/19.d422232c.chunk.js",
|
||||
"static/js/19.d422232c.chunk.js.map": "static/js/19.d422232c.chunk.js.map",
|
||||
"static/js/2.56c4128f.chunk.js": "static/js/2.56c4128f.chunk.js",
|
||||
"static/js/2.56c4128f.chunk.js.map": "static/js/2.56c4128f.chunk.js.map",
|
||||
"static/js/20.74ce16c4.chunk.js": "static/js/20.74ce16c4.chunk.js",
|
||||
"static/js/20.74ce16c4.chunk.js.map": "static/js/20.74ce16c4.chunk.js.map",
|
||||
"static/js/21.f32e4629.chunk.js": "static/js/21.f32e4629.chunk.js",
|
||||
"static/js/21.f32e4629.chunk.js.map": "static/js/21.f32e4629.chunk.js.map",
|
||||
"static/js/22.507213f4.chunk.js": "static/js/22.507213f4.chunk.js",
|
||||
"static/js/22.507213f4.chunk.js.map": "static/js/22.507213f4.chunk.js.map",
|
||||
"static/js/23.0d3df93c.chunk.js": "static/js/23.0d3df93c.chunk.js",
|
||||
"static/js/23.0d3df93c.chunk.js.map": "static/js/23.0d3df93c.chunk.js.map",
|
||||
"static/js/24.6b1e5b87.chunk.js": "static/js/24.6b1e5b87.chunk.js",
|
||||
"static/js/24.6b1e5b87.chunk.js.map": "static/js/24.6b1e5b87.chunk.js.map",
|
||||
"static/js/25.1a80d358.chunk.js": "static/js/25.1a80d358.chunk.js",
|
||||
"static/js/25.1a80d358.chunk.js.map": "static/js/25.1a80d358.chunk.js.map",
|
||||
"static/js/26.7e140343.chunk.js": "static/js/26.7e140343.chunk.js",
|
||||
"static/js/26.7e140343.chunk.js.map": "static/js/26.7e140343.chunk.js.map",
|
||||
"static/js/27.1d911d63.chunk.js": "static/js/27.1d911d63.chunk.js",
|
||||
"static/js/27.1d911d63.chunk.js.map": "static/js/27.1d911d63.chunk.js.map",
|
||||
"static/js/28.b709e42a.chunk.js": "static/js/28.b709e42a.chunk.js",
|
||||
"static/js/28.b709e42a.chunk.js.map": "static/js/28.b709e42a.chunk.js.map",
|
||||
"static/js/29.4ab54b26.chunk.js": "static/js/29.4ab54b26.chunk.js",
|
||||
"static/js/29.4ab54b26.chunk.js.map": "static/js/29.4ab54b26.chunk.js.map",
|
||||
"static/js/3.5c65f2d1.chunk.js": "static/js/3.5c65f2d1.chunk.js",
|
||||
"static/js/3.5c65f2d1.chunk.js.map": "static/js/3.5c65f2d1.chunk.js.map",
|
||||
"static/js/30.aa3bcd07.chunk.js": "static/js/30.aa3bcd07.chunk.js",
|
||||
"static/js/30.aa3bcd07.chunk.js.map": "static/js/30.aa3bcd07.chunk.js.map",
|
||||
"static/js/31.2d60b0ad.chunk.js": "static/js/31.2d60b0ad.chunk.js",
|
||||
"static/js/31.2d60b0ad.chunk.js.map": "static/js/31.2d60b0ad.chunk.js.map",
|
||||
"static/js/32.82312b44.chunk.js": "static/js/32.82312b44.chunk.js",
|
||||
"static/js/32.82312b44.chunk.js.map": "static/js/32.82312b44.chunk.js.map",
|
||||
"static/js/33.82a91116.chunk.js": "static/js/33.82a91116.chunk.js",
|
||||
"static/js/33.82a91116.chunk.js.map": "static/js/33.82a91116.chunk.js.map",
|
||||
"static/js/4.ef4e50b7.chunk.js": "static/js/4.ef4e50b7.chunk.js",
|
||||
"static/js/4.ef4e50b7.chunk.js.map": "static/js/4.ef4e50b7.chunk.js.map",
|
||||
"static/js/5.4f7dc34c.chunk.js": "static/js/5.4f7dc34c.chunk.js",
|
||||
"static/js/5.4f7dc34c.chunk.js.map": "static/js/5.4f7dc34c.chunk.js.map",
|
||||
"static/js/6.b671be71.chunk.js": "static/js/6.b671be71.chunk.js",
|
||||
"static/js/6.b671be71.chunk.js.map": "static/js/6.b671be71.chunk.js.map",
|
||||
"static/js/7.84f1e9ff.chunk.js": "static/js/7.84f1e9ff.chunk.js",
|
||||
"static/js/7.84f1e9ff.chunk.js.map": "static/js/7.84f1e9ff.chunk.js.map",
|
||||
"static/js/8.3ca68a2f.chunk.js": "static/js/8.3ca68a2f.chunk.js",
|
||||
"static/js/8.3ca68a2f.chunk.js.map": "static/js/8.3ca68a2f.chunk.js.map",
|
||||
"static/js/9.41bdd90e.chunk.js": "static/js/9.41bdd90e.chunk.js",
|
||||
"static/js/9.41bdd90e.chunk.js.map": "static/js/9.41bdd90e.chunk.js.map",
|
||||
"index.js": "static/js/index.86e1a2e8.js",
|
||||
"index.js.map": "static/js/index.86e1a2e8.js.map",
|
||||
"static/js/0.d5b74022.chunk.js": "static/js/0.d5b74022.chunk.js",
|
||||
"static/js/0.d5b74022.chunk.js.map": "static/js/0.d5b74022.chunk.js.map",
|
||||
"static/js/1.0804289c.chunk.js": "static/js/1.0804289c.chunk.js",
|
||||
"static/js/1.0804289c.chunk.js.map": "static/js/1.0804289c.chunk.js.map",
|
||||
"static/js/10.24b49a1e.chunk.js": "static/js/10.24b49a1e.chunk.js",
|
||||
"static/js/10.24b49a1e.chunk.js.map": "static/js/10.24b49a1e.chunk.js.map",
|
||||
"static/js/11.0952627f.chunk.js": "static/js/11.0952627f.chunk.js",
|
||||
"static/js/11.0952627f.chunk.js.map": "static/js/11.0952627f.chunk.js.map",
|
||||
"static/js/12.4d6c8564.chunk.js": "static/js/12.4d6c8564.chunk.js",
|
||||
"static/js/12.4d6c8564.chunk.js.map": "static/js/12.4d6c8564.chunk.js.map",
|
||||
"static/js/13.01f992e2.chunk.js": "static/js/13.01f992e2.chunk.js",
|
||||
"static/js/13.01f992e2.chunk.js.map": "static/js/13.01f992e2.chunk.js.map",
|
||||
"static/js/14.9228c2b9.chunk.js": "static/js/14.9228c2b9.chunk.js",
|
||||
"static/js/14.9228c2b9.chunk.js.map": "static/js/14.9228c2b9.chunk.js.map",
|
||||
"static/js/15.ea5faa4c.chunk.js": "static/js/15.ea5faa4c.chunk.js",
|
||||
"static/js/15.ea5faa4c.chunk.js.map": "static/js/15.ea5faa4c.chunk.js.map",
|
||||
"static/js/16.1de6eeb8.chunk.js": "static/js/16.1de6eeb8.chunk.js",
|
||||
"static/js/16.1de6eeb8.chunk.js.map": "static/js/16.1de6eeb8.chunk.js.map",
|
||||
"static/js/17.9dd2c4c9.chunk.js": "static/js/17.9dd2c4c9.chunk.js",
|
||||
"static/js/17.9dd2c4c9.chunk.js.map": "static/js/17.9dd2c4c9.chunk.js.map",
|
||||
"static/js/18.fdaed2b1.chunk.js": "static/js/18.fdaed2b1.chunk.js",
|
||||
"static/js/18.fdaed2b1.chunk.js.map": "static/js/18.fdaed2b1.chunk.js.map",
|
||||
"static/js/19.1642acf9.chunk.js": "static/js/19.1642acf9.chunk.js",
|
||||
"static/js/19.1642acf9.chunk.js.map": "static/js/19.1642acf9.chunk.js.map",
|
||||
"static/js/2.3e2dcb04.chunk.js": "static/js/2.3e2dcb04.chunk.js",
|
||||
"static/js/2.3e2dcb04.chunk.js.map": "static/js/2.3e2dcb04.chunk.js.map",
|
||||
"static/js/20.928f5040.chunk.js": "static/js/20.928f5040.chunk.js",
|
||||
"static/js/20.928f5040.chunk.js.map": "static/js/20.928f5040.chunk.js.map",
|
||||
"static/js/21.92841bfa.chunk.js": "static/js/21.92841bfa.chunk.js",
|
||||
"static/js/21.92841bfa.chunk.js.map": "static/js/21.92841bfa.chunk.js.map",
|
||||
"static/js/22.0c61cf89.chunk.js": "static/js/22.0c61cf89.chunk.js",
|
||||
"static/js/22.0c61cf89.chunk.js.map": "static/js/22.0c61cf89.chunk.js.map",
|
||||
"static/js/23.7411faba.chunk.js": "static/js/23.7411faba.chunk.js",
|
||||
"static/js/23.7411faba.chunk.js.map": "static/js/23.7411faba.chunk.js.map",
|
||||
"static/js/24.65c84326.chunk.js": "static/js/24.65c84326.chunk.js",
|
||||
"static/js/24.65c84326.chunk.js.map": "static/js/24.65c84326.chunk.js.map",
|
||||
"static/js/25.aa9268fc.chunk.js": "static/js/25.aa9268fc.chunk.js",
|
||||
"static/js/25.aa9268fc.chunk.js.map": "static/js/25.aa9268fc.chunk.js.map",
|
||||
"static/js/26.76e4b54d.chunk.js": "static/js/26.76e4b54d.chunk.js",
|
||||
"static/js/26.76e4b54d.chunk.js.map": "static/js/26.76e4b54d.chunk.js.map",
|
||||
"static/js/27.28e692a9.chunk.js": "static/js/27.28e692a9.chunk.js",
|
||||
"static/js/27.28e692a9.chunk.js.map": "static/js/27.28e692a9.chunk.js.map",
|
||||
"static/js/28.252b1f2a.chunk.js": "static/js/28.252b1f2a.chunk.js",
|
||||
"static/js/28.252b1f2a.chunk.js.map": "static/js/28.252b1f2a.chunk.js.map",
|
||||
"static/js/29.91a5c5cc.chunk.js": "static/js/29.91a5c5cc.chunk.js",
|
||||
"static/js/29.91a5c5cc.chunk.js.map": "static/js/29.91a5c5cc.chunk.js.map",
|
||||
"static/js/3.43c90a31.chunk.js": "static/js/3.43c90a31.chunk.js",
|
||||
"static/js/3.43c90a31.chunk.js.map": "static/js/3.43c90a31.chunk.js.map",
|
||||
"static/js/30.4facc9fa.chunk.js": "static/js/30.4facc9fa.chunk.js",
|
||||
"static/js/30.4facc9fa.chunk.js.map": "static/js/30.4facc9fa.chunk.js.map",
|
||||
"static/js/31.c9dd949c.chunk.js": "static/js/31.c9dd949c.chunk.js",
|
||||
"static/js/31.c9dd949c.chunk.js.map": "static/js/31.c9dd949c.chunk.js.map",
|
||||
"static/js/32.6232106f.chunk.js": "static/js/32.6232106f.chunk.js",
|
||||
"static/js/32.6232106f.chunk.js.map": "static/js/32.6232106f.chunk.js.map",
|
||||
"static/js/33.4111d2df.chunk.js": "static/js/33.4111d2df.chunk.js",
|
||||
"static/js/33.4111d2df.chunk.js.map": "static/js/33.4111d2df.chunk.js.map",
|
||||
"static/js/34.e19db945.chunk.js": "static/js/34.e19db945.chunk.js",
|
||||
"static/js/34.e19db945.chunk.js.map": "static/js/34.e19db945.chunk.js.map",
|
||||
"static/js/4.8b52adab.chunk.js": "static/js/4.8b52adab.chunk.js",
|
||||
"static/js/4.8b52adab.chunk.js.map": "static/js/4.8b52adab.chunk.js.map",
|
||||
"static/js/5.f63e6ac6.chunk.js": "static/js/5.f63e6ac6.chunk.js",
|
||||
"static/js/5.f63e6ac6.chunk.js.map": "static/js/5.f63e6ac6.chunk.js.map",
|
||||
"static/js/6.c4de5d89.chunk.js": "static/js/6.c4de5d89.chunk.js",
|
||||
"static/js/6.c4de5d89.chunk.js.map": "static/js/6.c4de5d89.chunk.js.map",
|
||||
"static/js/7.ca30d11d.chunk.js": "static/js/7.ca30d11d.chunk.js",
|
||||
"static/js/7.ca30d11d.chunk.js.map": "static/js/7.ca30d11d.chunk.js.map",
|
||||
"static/js/8.d8f052f0.chunk.js": "static/js/8.d8f052f0.chunk.js",
|
||||
"static/js/8.d8f052f0.chunk.js.map": "static/js/8.d8f052f0.chunk.js.map",
|
||||
"static/js/9.7aa4de2f.chunk.js": "static/js/9.7aa4de2f.chunk.js",
|
||||
"static/js/9.7aa4de2f.chunk.js.map": "static/js/9.7aa4de2f.chunk.js.map",
|
||||
"static/media/omi-logo2019.svg": "static/media/omi-logo2019.923166c3.svg"
|
||||
}
|
||||
|
|
@ -1 +1 @@
|
|||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Front End Cross-Frameworks Framework</title><link href="./static/css/cn.4dd07f49.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/cn.adfc9698.js"></script></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Front End Cross-Frameworks Framework</title><link href="./static/css/cn.4dd07f49.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/cn.69bf80ec.js"></script></body></html>
|
||||
|
|
@ -1 +1 @@
|
|||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Front End Cross-Frameworks Framework</title><link href="./static/css/index.4dd07f49.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/index.337ca875.js"></script></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Front End Cross-Frameworks Framework</title><link href="./static/css/index.4dd07f49.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/index.86e1a2e8.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([0],{72:function(n,t){n.exports="\n## Update\n\n`update` \u65b9\u6cd5\u662f\u5185\u7f6e\u7684\u91cd\u8981\u6838\u5fc3\u65b9\u6cd5\uff0c\u7528\u4e8e\u66f4\u65b0\u7ec4\u4ef6\u81ea\u8eab\u3002\u6bd4\u5982:\n\n```js\nthis.update()\n```\n\n\u4e5f\u53ef\u4ee5\u4f20\u9012\u53c2\u6570\uff0c\u51b3\u5b9a\u662f\u5426\u5728 html \u6a21\u5f0f\u4e0b\u5ffd\u7565 attributes:\n\n```js\nthis.update(true)\n```\n\n\u4e3e\u4e2a\u573a\u666f\uff0c\u6bd4\u5982\u70b9\u51fb\u5f39\u51fa\u5c42\u7684 mask \u5173\u95ed\u5f39\u51fa\uff0c\u5728 react \u4e2d\u9700\u8981\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\uff0c\u8ba9\u7236\u7ec4\u4ef6\u66f4\u65b0\uff0c\u800c Omi \u63a8\u5d07\u81ea\u66f4\u65b0\uff0c\u8fd9\u6837 diff \u7684\u533a\u57df\u66f4\u5c0f\u3002\n\n```js\nonMaskClick = ()=> {\n //\u4fee\u6539 props\n this.props.show = false\n //\u9632\u6b62\u7236\u7ec4\u4ef6\u66f4\u65b0 diff \u4e0d\u51fa\u7ed3\u679c\n this.prevProps.show = false\n //\u66f4\u65b0\uff0c\u5e76\u4e14\u5728 html \u6a21\u5f0f\u4e0b\u5ffd\u7565 attributes\n this.update(true)\n //\u89e6\u53d1\u4e8b\u4ef6\uff0c\u53ef\u4ee5\u901a\u8fc7\u8fd9\u4e2a\u66f4\u6539\u5916\u90e8\u7684\u72b6\u6001\u53d8\u91cf\u6765\u4fdd\u6301\u4e00\u81f4\u6027\uff0c\u4f46\u662f\u5916\u9762\u7684\u7ec4\u4ef6\u4e0d\u7528\u518d\u66f4\u65b0\n this.fire('close')\n}\n```\n\n### UpdateSelf\n\n\n\n`updateSelf` \u65b9\u6cd5\u4e0d\u4f1a\u66f4\u65b0\u5b50\u7ec4\u4ef6\u3002"}});
|
||||
//# sourceMappingURL=0.8b145f4a.chunk.js.map
|
||||
webpackJsonp([0],{73:function(n,t){n.exports="\n## Update\n\n`update` \u65b9\u6cd5\u662f\u5185\u7f6e\u7684\u91cd\u8981\u6838\u5fc3\u65b9\u6cd5\uff0c\u7528\u4e8e\u66f4\u65b0\u7ec4\u4ef6\u81ea\u8eab\u3002\u6bd4\u5982:\n\n```js\nthis.update()\n```\n\n\u4e5f\u53ef\u4ee5\u4f20\u9012\u53c2\u6570\uff0c\u51b3\u5b9a\u662f\u5426\u5728 html \u6a21\u5f0f\u4e0b\u5ffd\u7565 attributes:\n\n```js\nthis.update(true)\n```\n\n\u4e3e\u4e2a\u573a\u666f\uff0c\u6bd4\u5982\u70b9\u51fb\u5f39\u51fa\u5c42\u7684 mask \u5173\u95ed\u5f39\u51fa\uff0c\u5728 react \u4e2d\u9700\u8981\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\uff0c\u8ba9\u7236\u7ec4\u4ef6\u66f4\u65b0\uff0c\u800c Omi \u63a8\u5d07\u81ea\u66f4\u65b0\uff0c\u8fd9\u6837 diff \u7684\u533a\u57df\u66f4\u5c0f\u3002\n\n```js\nonMaskClick = ()=> {\n //\u4fee\u6539 props\n this.props.show = false\n //\u9632\u6b62\u7236\u7ec4\u4ef6\u66f4\u65b0 diff \u4e0d\u51fa\u7ed3\u679c\n this.prevProps.show = false\n //\u66f4\u65b0\uff0c\u5e76\u4e14\u5728 html \u6a21\u5f0f\u4e0b\u5ffd\u7565 attributes\n this.update(true)\n //\u89e6\u53d1\u4e8b\u4ef6\uff0c\u53ef\u4ee5\u901a\u8fc7\u8fd9\u4e2a\u66f4\u6539\u5916\u90e8\u7684\u72b6\u6001\u53d8\u91cf\u6765\u4fdd\u6301\u4e00\u81f4\u6027\uff0c\u4f46\u662f\u5916\u9762\u7684\u7ec4\u4ef6\u4e0d\u7528\u518d\u66f4\u65b0\n this.fire('close')\n}\n```\n\n### UpdateSelf\n\n\n\n`updateSelf` \u65b9\u6cd5\u4e0d\u4f1a\u66f4\u65b0\u5b50\u7ec4\u4ef6\u3002"}});
|
||||
//# sourceMappingURL=0.d5b74022.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/0.8b145f4a.chunk.js","docs/zh-cn/update.md"],"names":["webpackJsonp","72","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/0.8b145f4a.chunk.js","sourcesContent":["webpackJsonp([0],{\n\n/***/ 72:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\\n## Update\\n\\n`update` 方法是内置的重要核心方法，用于更新组件自身。比如:\\n\\n```js\\nthis.update()\\n```\\n\\n也可以传递参数，决定是否在 html 模式下忽略 attributes:\\n\\n```js\\nthis.update(true)\\n```\\n\\n举个场景，比如点击弹出层的 mask 关闭弹出，在 react 中需要传递给父组件，让父组件更新，而 Omi 推崇自更新，这样 diff 的区域更小。\\n\\n```js\\nonMaskClick = ()=> {\\n //修改 props\\n this.props.show = false\\n //防止父组件更新 diff 不出结果\\n this.prevProps.show = false\\n //更新，并且在 html 模式下忽略 attributes\\n this.update(true)\\n //触发事件，可以通过这个更改外部的状态变量来保持一致性，但是外面的组件不用再更新\\n this.fire('close')\\n}\\n```\\n\\n### UpdateSelf\\n\\n\\n\\n`updateSelf` 方法不会更新子组件。\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/0.8b145f4a.chunk.js","module.exports = \"\\n## Update\\n\\n`update` 方法是内置的重要核心方法，用于更新组件自身。比如:\\n\\n```js\\nthis.update()\\n```\\n\\n也可以传递参数，决定是否在 html 模式下忽略 attributes:\\n\\n```js\\nthis.update(true)\\n```\\n\\n举个场景，比如点击弹出层的 mask 关闭弹出，在 react 中需要传递给父组件，让父组件更新，而 Omi 推崇自更新，这样 diff 的区域更小。\\n\\n```js\\nonMaskClick = ()=> {\\n //修改 props\\n this.props.show = false\\n //防止父组件更新 diff 不出结果\\n this.prevProps.show = false\\n //更新，并且在 html 模式下忽略 attributes\\n this.update(true)\\n //触发事件，可以通过这个更改外部的状态变量来保持一致性，但是外面的组件不用再更新\\n this.fire('close')\\n}\\n```\\n\\n### UpdateSelf\\n\\n\\n\\n`updateSelf` 方法不会更新子组件。\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/update.md\n// module id = 72\n// module chunks = 0"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/0.d5b74022.chunk.js","docs/zh-cn/update.md"],"names":["webpackJsonp","73","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/0.d5b74022.chunk.js","sourcesContent":["webpackJsonp([0],{\n\n/***/ 73:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\\n## Update\\n\\n`update` 方法是内置的重要核心方法，用于更新组件自身。比如:\\n\\n```js\\nthis.update()\\n```\\n\\n也可以传递参数，决定是否在 html 模式下忽略 attributes:\\n\\n```js\\nthis.update(true)\\n```\\n\\n举个场景，比如点击弹出层的 mask 关闭弹出，在 react 中需要传递给父组件，让父组件更新，而 Omi 推崇自更新，这样 diff 的区域更小。\\n\\n```js\\nonMaskClick = ()=> {\\n //修改 props\\n this.props.show = false\\n //防止父组件更新 diff 不出结果\\n this.prevProps.show = false\\n //更新，并且在 html 模式下忽略 attributes\\n this.update(true)\\n //触发事件，可以通过这个更改外部的状态变量来保持一致性，但是外面的组件不用再更新\\n this.fire('close')\\n}\\n```\\n\\n### UpdateSelf\\n\\n\\n\\n`updateSelf` 方法不会更新子组件。\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/0.d5b74022.chunk.js","module.exports = \"\\n## Update\\n\\n`update` 方法是内置的重要核心方法，用于更新组件自身。比如:\\n\\n```js\\nthis.update()\\n```\\n\\n也可以传递参数，决定是否在 html 模式下忽略 attributes:\\n\\n```js\\nthis.update(true)\\n```\\n\\n举个场景，比如点击弹出层的 mask 关闭弹出，在 react 中需要传递给父组件，让父组件更新，而 Omi 推崇自更新，这样 diff 的区域更小。\\n\\n```js\\nonMaskClick = ()=> {\\n //修改 props\\n this.props.show = false\\n //防止父组件更新 diff 不出结果\\n this.prevProps.show = false\\n //更新，并且在 html 模式下忽略 attributes\\n this.update(true)\\n //触发事件，可以通过这个更改外部的状态变量来保持一致性，但是外面的组件不用再更新\\n this.fire('close')\\n}\\n```\\n\\n### UpdateSelf\\n\\n\\n\\n`updateSelf` 方法不会更新子组件。\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/update.md\n// module id = 73\n// module chunks = 0"],"sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([10],{62:function(n,e){n.exports="\n### \u751f\u547d\u5468\u671f\n\n| Lifecycle method | When it gets called |\n| ---------------- | -------------------------------------------- |\n| `install` | \u51c6\u5907\u63d2\u5165\u5230\u6587\u6863 |\n| `installed` | \u63d2\u5165\u5230\u6587\u6863\u4e4b\u540e |\n| `uninstall` | \u4ece\u6587\u6863\u4e2d\u79fb\u9664 |\n| `beforeUpdate` | update \u4e4b\u524d |\n| `updated` | update \u4e4b\u540e |\n| `beforeRender` | `render()` \u4e4b\u524d |\n| `receiveProps` | \u7236\u5143\u7d20\u91cd\u65b0\u6e32\u67d3\u89e6\u53d1\uff0c\u8fd4\u56de false \u53ef\u963b\u6b62\u66f4\u65b0 |\n\n\u4e3e\u4e2a\u4f8b\u5b50:\n\n```js\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-timer', class extends WeElement {\n data = {\n seconds: 0\n }\n\n tick() {\n this.data.seconds++\n this.update()\n }\n\n install() {\n this.interval = setInterval(() => this.tick(), 1000)\n }\n\n uninstall() {\n clearInterval(this.interval)\n }\n\n render() {\n return <div>Seconds: {this.data.seconds}</div>\n }\n})\n\nrender(<my-timer />, 'body')\n```"}});
|
||||
//# sourceMappingURL=10.29b8e7af.chunk.js.map
|
||||
webpackJsonp([10],{63:function(n,e){n.exports="\n### \u751f\u547d\u5468\u671f\n\n| Lifecycle method | When it gets called |\n| ---------------- | -------------------------------------------- |\n| `install` | \u51c6\u5907\u63d2\u5165\u5230\u6587\u6863 |\n| `installed` | \u63d2\u5165\u5230\u6587\u6863\u4e4b\u540e |\n| `uninstall` | \u4ece\u6587\u6863\u4e2d\u79fb\u9664 |\n| `beforeUpdate` | update \u4e4b\u524d |\n| `updated` | update \u4e4b\u540e |\n| `beforeRender` | `render()` \u4e4b\u524d |\n| `receiveProps` | \u7236\u5143\u7d20\u91cd\u65b0\u6e32\u67d3\u89e6\u53d1\uff0c\u8fd4\u56de false \u53ef\u963b\u6b62\u66f4\u65b0 |\n\n\u4e3e\u4e2a\u4f8b\u5b50:\n\n```js\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-timer', class extends WeElement {\n data = {\n seconds: 0\n }\n\n tick() {\n this.data.seconds++\n this.update()\n }\n\n install() {\n this.interval = setInterval(() => this.tick(), 1000)\n }\n\n uninstall() {\n clearInterval(this.interval)\n }\n\n render() {\n return <div>Seconds: {this.data.seconds}</div>\n }\n})\n\nrender(<my-timer />, 'body')\n```"}});
|
||||
//# sourceMappingURL=10.24b49a1e.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/10.29b8e7af.chunk.js","docs/zh-cn/lifecycle.md"],"names":["webpackJsonp","62","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/10.29b8e7af.chunk.js","sourcesContent":["webpackJsonp([10],{\n\n/***/ 62:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\\n### 生命周期\\n\\n| Lifecycle method | When it gets called |\\n| ---------------- | -------------------------------------------- |\\n| `install` | 准备插入到文档 |\\n| `installed` | 插入到文档之后 |\\n| `uninstall` | 从文档中移除 |\\n| `beforeUpdate` | update 之前 |\\n| `updated` | update 之后 |\\n| `beforeRender` | `render()` 之前 |\\n| `receiveProps` | 父元素重新渲染触发，返回 false 可阻止更新 |\\n\\n举个例子:\\n\\n```js\\nimport { render, WeElement, define } from 'omi'\\n\\ndefine('my-timer', class extends WeElement {\\n data = {\\n seconds: 0\\n }\\n\\n tick() {\\n this.data.seconds++\\n this.update()\\n }\\n\\n install() {\\n this.interval = setInterval(() => this.tick(), 1000)\\n }\\n\\n uninstall() {\\n clearInterval(this.interval)\\n }\\n\\n render() {\\n return <div>Seconds: {this.data.seconds}</div>\\n }\\n})\\n\\nrender(<my-timer />, 'body')\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/10.29b8e7af.chunk.js","module.exports = \"\\n### 生命周期\\n\\n| Lifecycle method | When it gets called |\\n| ---------------- | -------------------------------------------- |\\n| `install` | 准备插入到文档 |\\n| `installed` | 插入到文档之后 |\\n| `uninstall` | 从文档中移除 |\\n| `beforeUpdate` | update 之前 |\\n| `updated` | update 之后 |\\n| `beforeRender` | `render()` 之前 |\\n| `receiveProps` | 父元素重新渲染触发，返回 false 可阻止更新 |\\n\\n举个例子:\\n\\n```js\\nimport { render, WeElement, define } from 'omi'\\n\\ndefine('my-timer', class extends WeElement {\\n data = {\\n seconds: 0\\n }\\n\\n tick() {\\n this.data.seconds++\\n this.update()\\n }\\n\\n install() {\\n this.interval = setInterval(() => this.tick(), 1000)\\n }\\n\\n uninstall() {\\n clearInterval(this.interval)\\n }\\n\\n render() {\\n return <div>Seconds: {this.data.seconds}</div>\\n }\\n})\\n\\nrender(<my-timer />, 'body')\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/lifecycle.md\n// module id = 62\n// module chunks = 10"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/10.24b49a1e.chunk.js","docs/zh-cn/lifecycle.md"],"names":["webpackJsonp","63","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/10.24b49a1e.chunk.js","sourcesContent":["webpackJsonp([10],{\n\n/***/ 63:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\\n### 生命周期\\n\\n| Lifecycle method | When it gets called |\\n| ---------------- | -------------------------------------------- |\\n| `install` | 准备插入到文档 |\\n| `installed` | 插入到文档之后 |\\n| `uninstall` | 从文档中移除 |\\n| `beforeUpdate` | update 之前 |\\n| `updated` | update 之后 |\\n| `beforeRender` | `render()` 之前 |\\n| `receiveProps` | 父元素重新渲染触发，返回 false 可阻止更新 |\\n\\n举个例子:\\n\\n```js\\nimport { render, WeElement, define } from 'omi'\\n\\ndefine('my-timer', class extends WeElement {\\n data = {\\n seconds: 0\\n }\\n\\n tick() {\\n this.data.seconds++\\n this.update()\\n }\\n\\n install() {\\n this.interval = setInterval(() => this.tick(), 1000)\\n }\\n\\n uninstall() {\\n clearInterval(this.interval)\\n }\\n\\n render() {\\n return <div>Seconds: {this.data.seconds}</div>\\n }\\n})\\n\\nrender(<my-timer />, 'body')\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/10.24b49a1e.chunk.js","module.exports = \"\\n### 生命周期\\n\\n| Lifecycle method | When it gets called |\\n| ---------------- | -------------------------------------------- |\\n| `install` | 准备插入到文档 |\\n| `installed` | 插入到文档之后 |\\n| `uninstall` | 从文档中移除 |\\n| `beforeUpdate` | update 之前 |\\n| `updated` | update 之后 |\\n| `beforeRender` | `render()` 之前 |\\n| `receiveProps` | 父元素重新渲染触发，返回 false 可阻止更新 |\\n\\n举个例子:\\n\\n```js\\nimport { render, WeElement, define } from 'omi'\\n\\ndefine('my-timer', class extends WeElement {\\n data = {\\n seconds: 0\\n }\\n\\n tick() {\\n this.data.seconds++\\n this.update()\\n }\\n\\n install() {\\n this.interval = setInterval(() => this.tick(), 1000)\\n }\\n\\n uninstall() {\\n clearInterval(this.interval)\\n }\\n\\n render() {\\n return <div>Seconds: {this.data.seconds}</div>\\n }\\n})\\n\\nrender(<my-timer />, 'body')\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/lifecycle.md\n// module id = 63\n// module chunks = 10"],"sourceRoot":""}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([11],{62:function(n,e){n.exports="# omi-kbone\n\n<p align=\"center\"><img src=\"https://tencent.github.io/omi/assets/snake.jpg\" alt=\"omi-kbone\" width=\"200\"/></p>\n\n\u4f7f\u7528 omi + [kbone](https://github.com/wechat-miniprogram/kbone) \u591a\u7aef\u5f00\u53d1(\u5c0f\u7a0b\u5e8f\u548cWeb)\u7684\u8d2a\u5403\u86c7\u6e38\u620f\u3002\n\n## \u4e00\u5957\u8bed\u6cd5\u591a\u7aef\u8fd0\u884c\n\n\u4e3b\u754c\u9762:\n\n```jsx\nimport { define, h, rpx } from 'omio'\nimport '../game'\nimport './_index.css'\n\ndefine('my-index', ({ store }) => (\n <div class=\"container\">\n <h1>OMI SNAKE</h1>\n\n <my-game></my-game>\n\n <div class=\"ctrl\">\n <div class=\"btn cm-btn cm-btn-dir up\" onClick={store.turnUp}><i></i><em></em><span>Up</span></div>\n <div class=\"btn cm-btn cm-btn-dir down\" onClick={store.turnDown}><i></i><em></em><span>Down</span></div>\n <div class=\"btn cm-btn cm-btn-dir left\" onClick={store.turnLeft}><i></i><em></em><span >Left</span></div>\n <div class=\"btn cm-btn cm-btn-dir right\" onClick={store.turnRight}><i></i><em></em><span >Right</span></div>\n <div class=\"btn cm-btn space\" onClick={store.toggleSpeed}><i></i><span >\u52a0\u901f/\u51cf\u901f</span></div>\n <div class=\"btn reset small\" onClick={store.reset}><i ></i><span >Reset</span></div>\n <div class=\"btn pp small\" onClick={store.pauseOrPlay}><i></i><span >{store.data.paused ? 'Play' : 'Pause'}</span></div>\n </div>\n </div>\n), {\n useSelf: ['paused'],\n css: (\"undefined\" != typeof wx && wx.getSystemInfoSync) ? '' : rpx(require('./_index.css'))\n })\n```\n\n\u6e38\u620f\u754c\u9762:\n\n```jsx\nimport { define, h, rpx } from 'omio'\nimport './_index.css'\n\ndefine('my-game', _ => (\n <div class=\"game\">\n {_.store.data.map.map(row => {\n return <p>\n {row.map(col => {\n if (col) {\n return <b class='s'></b>\n }\n return <b></b>\n })}\n </p>\n })}\n </div>\n), {\n use: ['map'],\n css: (\"undefined\" != typeof wx && wx.getSystemInfoSync) ? '' : rpx(require('./_index.css'))\n })\n```\n\n## \u5feb\u901f\u5f00\u59cb\n\n``` bash\nnpx omi-cli init-kbone my-app\ncd my-app\nnpm run mp //\u5f00\u53d1\u5c0f\u7a0b\u5e8f\nnpm run web //\u5f00\u53d1 web\nnpm run build //\u53d1\u5e03 web\n```\n\n## \u76ee\u5f55\u8bf4\u660e\n\n```\n\u251c\u2500 build\n\u2502 \u251c\u2500 mp //\u5fae\u4fe1\u5f00\u53d1\u8005\u5de5\u5177\u6307\u5411\u7684\u76ee\u5f55\uff0c\u7528\u4e8e\u751f\u4ea7\u73af\u5883\n\u2502 \u251c\u2500 web //web \u7f16\u8bd1\u51fa\u7684\u6587\u4ef6\uff0c\u7528\u4e8e\u751f\u4ea7\u73af\u5883\n\u251c\u2500 config\n\u251c\u2500 public\n\u251c\u2500 scripts\n\u251c\u2500 src\n\u2502 \u251c\u2500 assets\n\u2502 \u251c\u2500 components //\u5b58\u653e\u6240\u6709\u9875\u9762\u7684\u7ec4\u4ef6\n\u2502 \u251c\u2500 models //\u5b58\u653e\u6240\u6709\u6a21\u578b\n\u2502 \u251c\u2500 stores //\u5b58\u653e\u9875\u9762\u7684 store\n\u2502 \u251c\u2500 log.js //\u5165\u53e3\u6587\u4ef6\uff0c\u4f1a build \u6210 log.html\n\u2502 \u2514\u2500 index.js //\u5165\u53e3\u6587\u4ef6\uff0c\u4f1a build \u6210 index.html\n```\n\n## \u6ce8\u610f\u4e8b\u9879\n\n* \u4e0d\u8981\u4f7f\u7528 bindtap\uff0c\u4f7f\u7528 onClick\n* \u56fe\u7247\u8bf7\u4f7f\u7528 cdn \u5730\u5740\u6216\u8005 base64\n* \u5982\u679c\u8981\u517c\u5bb9 web\uff0c\u8bf7\u7528 HTML \u548c CSS \u6807\u7b7e\uff0c\u6bd4\u5982\u7528 div\uff0c\u4e0d\u7528 view \u7b49\n\n## License\n\nMIT \n"}});
|
||||
//# sourceMappingURL=11.0952627f.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([11],{61:function(n,e){n.exports="## JSX\n\nJSX \u662f\u76ee\u524d\u4e3a\u6b62\u5f00\u53d1\u4f53\u9a8c\u6700\u68d2\u3001\u8bed\u6cd5\u566a\u97f3\u6700\u5c11\u3001\u8868\u8fbe\u80fd\u529b\u6700\u5f3a\u4e14\u56fe\u7075\u5b8c\u5907\u7684 UI \u8868\u8fbe\u5f0f\uff0c\u6a21\u677f\u5f15\u64ce\u4e0d\u5b8c\u5907\uff0c\u6a21\u677f\u5b57\u7b26\u4e32\u56fe\u7075\u5b8c\u5907\u4f46\u662f\u8bed\u6cd5\u566a\u97f3\u592a\u5927\u3002\u5373\uff1a\n\n```js\nJSX > JS\n```\n\n## Hello JSX\n\n\u4f7f\u7528 JSX\uff0c\u53ef\u4ee5\u5728 JS \u4e2d\u4e66\u5199\u95ed\u5408\u7684 XML \u6807\u7b7e\u6765\u8868\u8fbe DOM \u7ed3\u6784\u7b49\uff0c\u6bd4\u5982:\n\n```jsx\nconst element = <h1>Hello, world!</h1>\n```\n\n## \u6570\u636e\u7ed1\u5b9a\n\n\u636e\u7ed1\u5b9a\u4f7f\u7528\u5355\u62ec\u53f7\u5c06\u53d8\u91cf\u6216\u8868\u8fbe\u5f0f\u3001\u6216JS\u8bed\u53e5\u5757\u5305\u8d77\u6765\uff1a\n\n```jsx\n<h1>{user.name}</h1>\n```\n\n\u5728 Omi \u7684 render \u91cc\u8bd5\u8bd5:\n\n```jsx\ndefine('my-element', class extends WeElement {\n render(props) {\n return <h1>{props.name}</h1>\n }\n})\n```\n\n\u4f7f\u7528\u5143\u7d20:\n\n```jsx\n<my-element name='dntzhang' />\n```\n\n\u8fd8\u53ef\u4ee5\u5199\u8868\u8fbe\u5f0f:\n\n```jsx\n<h1>{user.age > 18 ? '\u6210\u5e74' : '\u672a\u6210\u5e74'}<h1>\n```\n\n\u8868\u8fbe\u5f0f\u91cc\u4e5f\u53ef\u4ee5\u5d4c\u5165 JSX\uff1a\n\n```jsx\n<h1>{ user.age > 18 ? <div>\u6210\u5e74</div> : <div>\u672a\u6210\u5e74</div> }<h1>\n```\n\n\u4e0a\u9762\u7684\u4e09\u5143\u5176\u5b9e\u5c31\u662f if else\uff0c\u5982\u679c\u4ec5\u4ec5\u9700\u8981 if\uff0c\u53ef\u4ee5\uff1a\n\n```jsx\n<h1>{ user.age > 18 && <div>\u6210\u5e74</div> }<h1>\n```\n\n\u5f3a\u5927\uff01\n\n## \u5217\u8868\u6e32\u67d3\n\n\u6570\u636e\u6e90:\n\n```js\nconst arr = [{\n message: 'foo',\n}, {\n message: 'bar'\n}]\n```\n\nJSX \u6e32\u67d3:\n\n```jsx\n<ul>\n {arr.map(item =>\n <li>{item.message}</li>\n )}\n</ul>\n```\n\n\u7b49\u540c\u4e8e:\n\n```jsx\n<ul>\n {\n arr.map(item => {\n return <li>{item.message}</li>\n })\n }\n</ul>\n```\n\n\u5982\u679c\u662f `{}` \u5305\u88f9\uff0c\u5c31\u9700\u8981 `return`\u3002\u5982\u679c\u9700\u8981 index:\n\n```jsx\n<ul>\n {arr.map((item, index) =>\n <li>{index}: {item.message}</li>\n )}\n</ul>\n```\n\n## \u7efc\u5408\u4f8b\u5b50\n\n\u8fd9\u91cc\u4e3e\u4e00\u4e2a\u4e5d\u4e5d\u4e58\u6cd5\u8868:\n\n```jsx\nimport { define, render, WeElement } from 'omi'\n\ndefine('my-app', class extends WeElement {\n\n static css = `span{\n display: inline-block;\n width: 68px;\n }`\n\n render(props) {\n return (\n <div>\n {props.numbers.map((a, indexA) =>\n <div>\n {\n props.numbers.map((b, indexB) => {\n return indexA <= indexB && <span>{a}*{b}={a * b} </span>\n })\n }\n </div>\n )}\n </div>\n )\n }\n})\n\nrender(<my-app numbers={[1, 2, 3, 4, 5, 6, 7, 8, 9]} />, 'body')\n```\n\n\u7ed3\u679c\u5c55\u793a:\n\n\n\n[\u2192 \u5728\u7ebf\u67e5\u770b](https://tencent.github.io/omi/packages/omi/examples/99/)"}});
|
||||
//# sourceMappingURL=11.1b7cb28d.chunk.js.map
|
||||
webpackJsonp([12],{61:function(n,e){n.exports="## JSX\n\nJSX \u662f\u76ee\u524d\u4e3a\u6b62\u5f00\u53d1\u4f53\u9a8c\u6700\u68d2\u3001\u8bed\u6cd5\u566a\u97f3\u6700\u5c11\u3001\u8868\u8fbe\u80fd\u529b\u6700\u5f3a\u4e14\u56fe\u7075\u5b8c\u5907\u7684 UI \u8868\u8fbe\u5f0f\uff0c\u6a21\u677f\u5f15\u64ce\u4e0d\u5b8c\u5907\uff0c\u6a21\u677f\u5b57\u7b26\u4e32\u56fe\u7075\u5b8c\u5907\u4f46\u662f\u8bed\u6cd5\u566a\u97f3\u592a\u5927\u3002\u5373\uff1a\n\n```js\nJSX > JS\n```\n\n## Hello JSX\n\n\u4f7f\u7528 JSX\uff0c\u53ef\u4ee5\u5728 JS \u4e2d\u4e66\u5199\u95ed\u5408\u7684 XML \u6807\u7b7e\u6765\u8868\u8fbe DOM \u7ed3\u6784\u7b49\uff0c\u6bd4\u5982:\n\n```jsx\nconst element = <h1>Hello, world!</h1>\n```\n\n## \u6570\u636e\u7ed1\u5b9a\n\n\u636e\u7ed1\u5b9a\u4f7f\u7528\u5355\u62ec\u53f7\u5c06\u53d8\u91cf\u6216\u8868\u8fbe\u5f0f\u3001\u6216JS\u8bed\u53e5\u5757\u5305\u8d77\u6765\uff1a\n\n```jsx\n<h1>{user.name}</h1>\n```\n\n\u5728 Omi \u7684 render \u91cc\u8bd5\u8bd5:\n\n```jsx\ndefine('my-element', class extends WeElement {\n render(props) {\n return <h1>{props.name}</h1>\n }\n})\n```\n\n\u4f7f\u7528\u5143\u7d20:\n\n```jsx\n<my-element name='dntzhang' />\n```\n\n\u8fd8\u53ef\u4ee5\u5199\u8868\u8fbe\u5f0f:\n\n```jsx\n<h1>{user.age > 18 ? '\u6210\u5e74' : '\u672a\u6210\u5e74'}<h1>\n```\n\n\u8868\u8fbe\u5f0f\u91cc\u4e5f\u53ef\u4ee5\u5d4c\u5165 JSX\uff1a\n\n```jsx\n<h1>{ user.age > 18 ? <div>\u6210\u5e74</div> : <div>\u672a\u6210\u5e74</div> }<h1>\n```\n\n\u4e0a\u9762\u7684\u4e09\u5143\u5176\u5b9e\u5c31\u662f if else\uff0c\u5982\u679c\u4ec5\u4ec5\u9700\u8981 if\uff0c\u53ef\u4ee5\uff1a\n\n```jsx\n<h1>{ user.age > 18 && <div>\u6210\u5e74</div> }<h1>\n```\n\n\u5f3a\u5927\uff01\n\n## \u5217\u8868\u6e32\u67d3\n\n\u6570\u636e\u6e90:\n\n```js\nconst arr = [{\n message: 'foo',\n}, {\n message: 'bar'\n}]\n```\n\nJSX \u6e32\u67d3:\n\n```jsx\n<ul>\n {arr.map(item =>\n <li>{item.message}</li>\n )}\n</ul>\n```\n\n\u7b49\u540c\u4e8e:\n\n```jsx\n<ul>\n {\n arr.map(item => {\n return <li>{item.message}</li>\n })\n }\n</ul>\n```\n\n\u5982\u679c\u662f `{}` \u5305\u88f9\uff0c\u5c31\u9700\u8981 `return`\u3002\u5982\u679c\u9700\u8981 index:\n\n```jsx\n<ul>\n {arr.map((item, index) =>\n <li>{index}: {item.message}</li>\n )}\n</ul>\n```\n\n## \u7efc\u5408\u4f8b\u5b50\n\n\u8fd9\u91cc\u4e3e\u4e00\u4e2a\u4e5d\u4e5d\u4e58\u6cd5\u8868:\n\n```jsx\nimport { define, render, WeElement } from 'omi'\n\ndefine('my-app', class extends WeElement {\n\n static css = `span{\n display: inline-block;\n width: 68px;\n }`\n\n render(props) {\n return (\n <div>\n {props.numbers.map((a, indexA) =>\n <div>\n {\n props.numbers.map((b, indexB) => {\n return indexA <= indexB && <span>{a}*{b}={a * b} </span>\n })\n }\n </div>\n )}\n </div>\n )\n }\n})\n\nrender(<my-app numbers={[1, 2, 3, 4, 5, 6, 7, 8, 9]} />, 'body')\n```\n\n\u7ed3\u679c\u5c55\u793a:\n\n\n\n[\u2192 \u5728\u7ebf\u67e5\u770b](https://tencent.github.io/omi/packages/omi/examples/99/)"}});
|
||||
//# sourceMappingURL=12.4d6c8564.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([12],{60:function(n,e){n.exports="\x3c!-- <p align=\"center\"><img src=\"https://github.com/Tencent/omi/raw/master/assets/omi-logo2019.svg?sanitize=true\" alt=\"omi\" width=\"300\"/></p>\n<h2 align=\"center\">Omi - \u4e0b\u4e00\u4ee3\u524d\u7aef\u6846\u67b6\uff0c\u53bb\u4e07\u7269\u7cdf\u7c95\uff0c\u5408\u7cbe\u534e\u4e3a\u4e00\u70b9\u70b9 JS</h2>\n<p align=\"center\"><b>\u57fa\u4e8e Web Components \u5e76\u652f\u6301 IE8+(omio) \u548c \u5c0f\u7a0b\u5e8f(omip)</b></p>\n --\x3e\n\n## Omi \u662f\u4ec0\u4e48\uff1f\n\nOmi (\u8bfb\u97f3 /\u02c8om\u026a/\uff0c\u7c7b\u4f3c\u4e8e \u6b27\u7c73) \u662f\u8de8\u6846\u67b6\u6846\u67b6\uff0c\u57fa\u4e8e Web Components \u8bbe\u8ba1\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528\u76f8\u540c\u8bed\u6cd5\u7684 omio \u517c\u5bb9 IE8+\u3002\u652f\u6301 PC Web\u3001\u79fb\u52a8 H5 \u548c\u5c0f\u7a0b\u5e8f\u5f00\u53d1(One framework, Mobile & desktop & mini program)\u3002\n\n\n<em> Omi looks really neat!<br> </em>\n\u3000\u3000\u3000\u3000\u2014 [Jason Miller (Creator of Preact)](https://twitter.com/_developit/)\n\n<em> I really like the trend towards \"frameworks\" that:<br><br>\"export default class WeElement extends HTMLElement {..}\"<br> <br>This one, Omi, is from Tencent.</em> \n\u3000\u3000\u3000\u3000\u2014 [Dion Almaer](https://twitter.com/dalmaer/)\n\n## \u5feb\u901f\u4e0a\u624b\n\n```jsx {8-11}\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-counter', class extends WeElement {\n data = {\n count: 1\n }\n\n static css = `\n span{\n color: red;\n }`\n\n sub = () => {\n this.data.count--\n this.update()\n }\n\n add = () => {\n this.data.count++\n this.update()\n }\n\n render() {\n return (\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.data.count}</span>\n <button onClick={this.add}>+</button>\n </div>\n )\n }\n})\n\nrender(<my-counter />, 'body')\n```\n\n\u901a\u8fc7\u4e0a\u9762\u811a\u672c\u7684\u6267\u884c\uff0c\u4f60\u5df2\u7ecf\u5b9a\u4e49\u597d\u4e86\u4e00\u4e2a\u81ea\u5b9a\u4e49\u6807\u7b7e\uff0c\u53ef\u4ee5\u4e0d\u4f7f\u7528 render \u65b9\u6cd5\uff0c\u76f4\u63a5\u4f7f\u7528 `my-counter` \u6807\u7b7e\uff1a\n\n```jsx\n<body>\n <my-counter></my-counter>\n</body>\n```\n\n\u770b\u4e0a\u9762\u9ad8\u4eae\u7684\u90e8\u5206\uff0c\u53ef\u4ee5\u7ed9\u7ec4\u4ef6\u52a0\u6837\u5f0f\uff0c\u6bd4\u5982\u4e0a\u9762\u7684 span \u7684\u4f5c\u7528\u57df\u4ec5\u4ec5\u5728\u7ec4\u4ef6\u5185\u90e8\uff0c\u4e0d\u4f1a\u6c61\u67d3\u522b\u7684\u7ec4\u4ef6\u3002\u5230\u73b0\u5728\u4f60\u5df2\u7ecf\u6210\u529f\u5165\u95e8 Omi \u4e86\uff01\u4f60\u5b66\u4f1a\u4e86:\n\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u7ed3\u6784**\uff0c\u5982\u4e0a\u9762\u4f7f\u7528 JSX \u4e66\u5199\u7ed3\u6784\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u884c\u4e3a**\uff0c\u5982\u4e0a\u9762\u7684 `onClick` \u7ed1\u5b9a\u4e8b\u4ef6\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u6837\u5f0f**\uff0c\u5982\u4e0a\u9762\u7684 `static css`\n* \u6e32\u67d3\u7ec4\u4ef6\u5230 body\uff0c\u5f53\u7136\u4e5f\u53ef\u4ee5\u628a\u7ec4\u4ef6\u6e32\u67d3\u5230\u4efb\u610f\u5176\u4ed6\u7ec4\u4ef6\n\n\n## \u65e0\u72b6\u6001\u89c6\u56fe\u548c Store \u7cfb\u7edf\n\n```jsx\nimport { define, render } from 'omi'\n\nclass Store {\n data = {\n count: 1\n }\n sub = () => {\n this.data.count--\n }\n add = () => {\n this.data.count++\n }\n}\n\ndefine('my-counter', _ => (\n <div>\n <button onClick={_.store.sub}>-</button>\n <span>{_.store.data.count}</span>\n <button onClick={_.store.add}>+</button>\n </div>\n), {\n use: ['count'], \n //or using useSelf, useSelf will update self only, exclude children components\n //useSelf: ['count'], \n css: `span { color: red; }`,\n installed() {\n console.log('installed')\n }\n })\n\nrender(<my-counter />, 'body', new Store)\n```\n\n\u5165\u95e8\u4e86\uff0c\u606d\u559c\u4f60\uff01"}});
|
||||
//# sourceMappingURL=12.7a88317e.chunk.js.map
|
||||
webpackJsonp([13],{60:function(n,e){n.exports="\x3c!-- <p align=\"center\"><img src=\"https://github.com/Tencent/omi/raw/master/assets/omi-logo2019.svg?sanitize=true\" alt=\"omi\" width=\"300\"/></p>\n<h2 align=\"center\">Omi - \u4e0b\u4e00\u4ee3\u524d\u7aef\u6846\u67b6\uff0c\u53bb\u4e07\u7269\u7cdf\u7c95\uff0c\u5408\u7cbe\u534e\u4e3a\u4e00\u70b9\u70b9 JS</h2>\n<p align=\"center\"><b>\u57fa\u4e8e Web Components \u5e76\u652f\u6301 IE8+(omio) \u548c \u5c0f\u7a0b\u5e8f(omip)</b></p>\n --\x3e\n\n## Omi \u662f\u4ec0\u4e48\uff1f\n\nOmi (\u8bfb\u97f3 /\u02c8om\u026a/\uff0c\u7c7b\u4f3c\u4e8e \u6b27\u7c73) \u662f\u8de8\u6846\u67b6\u6846\u67b6\uff0c\u57fa\u4e8e Web Components \u8bbe\u8ba1\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528\u76f8\u540c\u8bed\u6cd5\u7684 omio \u517c\u5bb9 IE8+\u3002\u652f\u6301 PC Web\u3001\u79fb\u52a8 H5 \u548c\u5c0f\u7a0b\u5e8f\u5f00\u53d1(One framework, Mobile & desktop & mini program)\u3002\n\n\n<em> Omi looks really neat!<br> </em>\n\u3000\u3000\u3000\u3000\u2014 [Jason Miller (Creator of Preact)](https://twitter.com/_developit/)\n\n<em> I really like the trend towards \"frameworks\" that:<br><br>\"export default class WeElement extends HTMLElement {..}\"<br> <br>This one, Omi, is from Tencent.</em> \n\u3000\u3000\u3000\u3000\u2014 [Dion Almaer](https://twitter.com/dalmaer/)\n\n## \u5feb\u901f\u4e0a\u624b\n\n```jsx {8-11}\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-counter', class extends WeElement {\n data = {\n count: 1\n }\n\n static css = `\n span{\n color: red;\n }`\n\n sub = () => {\n this.data.count--\n this.update()\n }\n\n add = () => {\n this.data.count++\n this.update()\n }\n\n render() {\n return (\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.data.count}</span>\n <button onClick={this.add}>+</button>\n </div>\n )\n }\n})\n\nrender(<my-counter />, 'body')\n```\n\n\u901a\u8fc7\u4e0a\u9762\u811a\u672c\u7684\u6267\u884c\uff0c\u4f60\u5df2\u7ecf\u5b9a\u4e49\u597d\u4e86\u4e00\u4e2a\u81ea\u5b9a\u4e49\u6807\u7b7e\uff0c\u53ef\u4ee5\u4e0d\u4f7f\u7528 render \u65b9\u6cd5\uff0c\u76f4\u63a5\u4f7f\u7528 `my-counter` \u6807\u7b7e\uff1a\n\n```jsx\n<body>\n <my-counter></my-counter>\n</body>\n```\n\n\u770b\u4e0a\u9762\u9ad8\u4eae\u7684\u90e8\u5206\uff0c\u53ef\u4ee5\u7ed9\u7ec4\u4ef6\u52a0\u6837\u5f0f\uff0c\u6bd4\u5982\u4e0a\u9762\u7684 span \u7684\u4f5c\u7528\u57df\u4ec5\u4ec5\u5728\u7ec4\u4ef6\u5185\u90e8\uff0c\u4e0d\u4f1a\u6c61\u67d3\u522b\u7684\u7ec4\u4ef6\u3002\u5230\u73b0\u5728\u4f60\u5df2\u7ecf\u6210\u529f\u5165\u95e8 Omi \u4e86\uff01\u4f60\u5b66\u4f1a\u4e86:\n\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u7ed3\u6784**\uff0c\u5982\u4e0a\u9762\u4f7f\u7528 JSX \u4e66\u5199\u7ed3\u6784\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u884c\u4e3a**\uff0c\u5982\u4e0a\u9762\u7684 `onClick` \u7ed1\u5b9a\u4e8b\u4ef6\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u6837\u5f0f**\uff0c\u5982\u4e0a\u9762\u7684 `static css`\n* \u6e32\u67d3\u7ec4\u4ef6\u5230 body\uff0c\u5f53\u7136\u4e5f\u53ef\u4ee5\u628a\u7ec4\u4ef6\u6e32\u67d3\u5230\u4efb\u610f\u5176\u4ed6\u7ec4\u4ef6\n\n\n## \u65e0\u72b6\u6001\u89c6\u56fe\u548c Store \u7cfb\u7edf\n\n```jsx\nimport { define, render } from 'omi'\n\nclass Store {\n data = {\n count: 1\n }\n sub = () => {\n this.data.count--\n }\n add = () => {\n this.data.count++\n }\n}\n\ndefine('my-counter', _ => (\n <div>\n <button onClick={_.store.sub}>-</button>\n <span>{_.store.data.count}</span>\n <button onClick={_.store.add}>+</button>\n </div>\n), {\n use: ['count'], \n //or using useSelf, useSelf will update self only, exclude children components\n //useSelf: ['count'], \n css: `span { color: red; }`,\n installed() {\n console.log('installed')\n }\n })\n\nrender(<my-counter />, 'body', new Store)\n```\n\n\u5165\u95e8\u4e86\uff0c\u606d\u559c\u4f60\uff01"}});
|
||||
//# sourceMappingURL=13.01f992e2.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([13],{59:function(n,i){n.exports='## \u5b89\u88c5 \n\n\u76f4\u63a5\u4e0b\u8f7d\u5e76\u7528 `<script>` \u6807\u7b7e\u5f15\u5165\uff0cOmi \u4f1a\u88ab\u6ce8\u518c\u4e3a\u4e00\u4e2a\u5168\u5c40\u53d8\u91cf\u3002\n\n* [Omi \u5f00\u53d1\u7248\u672c](https://unpkg.com/omi@latest/dist/omi.js)\n* [Omi \u538b\u7f29\u7248\u672c](https://unpkg.com/omi@latest/dist/omi.min.js)\n\n\u4e5f\u53ef\u4ee5\u901a\u8fc7 npm \u5b89\u88c5\n\n```bash\nnpm i omi\n```\n\n\u5982\u679c\u9700\u8981\u517c\u5bb9 IE8+\uff0c\u53ef\u4ee5\u9009\u62e9 omio\uff0c\u5b83\u62e5\u6709\u548c omi \u51e0\u4e4e\u4e00\u6837\u7684 API\uff0c\u4e14 Omi \u4e5f\u4f1a\u88ab\u6ce8\u518c\u4e3a\u4e00\u4e2a\u5168\u5c40\u53d8\u91cf\u3002\n\n* [Omio \u5f00\u53d1\u7248\u672c](https://unpkg.com/omio@latest/dist/omi.js)\n* [Omio \u538b\u7f29\u7248\u672c](https://unpkg.com/omi@latest/dist/omi.min.js)\n\n\u6216\u8005\n\n```bash\nnpm i omio\n```\n\n## \u547d\u4ee4\u884c\u5de5\u5177\n\nOmi \u63d0\u4f9b\u4e86\u5b98\u65b9\u7684 CLI\uff0c\u4f60\u4e0d\u9700\u8981\u53bb\u5b66\u4e60\u600e\u4e48\u914d\u7f6e webpack\u3001babel\u6216\u8005 TypeScript\uff0cCLI \u5e2e\u4f60\u914d\u7f6e\u597d\u4e86\u4e00\u5207\uff0c\u4e14\u63d0\u4f9b\u4e86\u5404\u79cd\u6a21\u677f\u6ee1\u8db3\u4e0d\u540c\u7684\u9879\u76ee\u7c7b\u578b\u3002\n\n```bash\n$ npm i omi-cli -g # install cli\n$ omi init my-app # init project\n$ cd my-app \n$ npm start # develop\n$ npm run build # release\n```\n\n> `npx omi-cli init my-app` \u4e5f\u662f\u652f\u6301\u7684(npm v5.2.0+).\n\n\u76ee\u5f55\u63cf\u8ff0:\n\n```\n\u251c\u2500 config\n\u251c\u2500 public\n\u251c\u2500 scripts\n\u251c\u2500 src\n\u2502 \u251c\u2500 assets\n\u2502 \u251c\u2500 elements //Store all custom elements\n\u2502 \u251c\u2500 store //Store all this store of pages\n\u2502 \u251c\u2500 admin.js //Entry js of compiler\uff0cwill build to admin.html\n\u2502 \u2514\u2500 index.js //Entry js of compiler\uff0cwill build to index.html\n```\n\n\n### npm \u811a\u672c\n\n```json\n"scripts": {\n "start": "node scripts/start.js",\n "build": "PUBLIC_URL=. node scripts/build.js",\n "build-windows": "set PUBLIC_URL=.&& node scripts/build.js",\n "fix": "eslint src --fix"\n}\n```\n\n\u4f60\u4e5f\u53ef\u4ee5\u8bbe\u7f6e PUBLIC_URL, \u6bd4\u5982\uff1a\n\n```json\n...\n"build": "PUBLIC_URL=https://your.url.com/sub node scripts/build.js",\n"build-windows": "set PUBLIC_URL=https://your.url.com/sub&& node scripts/build.js",\n...\n```\n\n### \u5207\u6362 omi \u548c omio\n\n\u589e\u52a0\u6216\u5220\u9664 package.json \u91cc\u7684 alias config \u53ef\u4ee5\u5207\u6362 omi \u548c omio \u6e32\u67d3:\n\n```js\n ...\n "alias": {\n "omi": "omio"\n }\n ...\n```\n \n\n## \u9879\u76ee\u6a21\u677f\n\n| **Template Type**| **Command**| **Describe**|\n| ------------ | -----------| ----------------- |\n|\u57fa\u7840\u6a21\u677f(v3.3.0+)|`omi init my-app`| \u57fa\u7840\u6a21\u677f\uff0c\u652f\u6301 omi \u548c omio(IE8+)|\n|Kbone Template|`omi init-kbone my-app` | \u4f7f\u7528 omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f\u6216\u8005 Web|\n|\u5c0f\u7a0b\u5e8f\u6a21\u677f(v3.3.5+)|`omi init-p my-app`| Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f |\n|mps|`omi init-mps my-app`| \u539f\u751f\u5c0f\u7a0b\u5e8f\u589e\u5f3a\u6846\u67b6(JSX + Less \u8f93\u51fa WXML + WXSS) |\n|mps ts \u7248\u672c|`omi init-mps-ts my-app`| \u539f\u751f\u5c0f\u7a0b\u5e8f\u589e\u5f3a\u6846\u67b6(JSX + Less \u8f93\u51fa WXML + WXSS) |\n|omi-cloud|`omi init-cloud my-app`| \u5c0f\u7a0b\u5e8f\u2022\u4e91\u5f00\u53d1|\n|\u57fa\u7840\u6a21\u677f(v3.3.9+)|`omi init-o my-app`| \u652f\u6301 IE8 \u7684\u57fa\u7840\u6a21\u677f\uff0c\u53ea\u662f build \u7684\u65f6\u5019\u652f\u6301 IE8\uff0c\u5f00\u53d1\u8c03\u8bd5\u8bf7\u7528 IE9|\n|\u652f\u6301\u9884\u6e32\u67d3\u5feb\u7167\u9aa8\u67b6\u7684\u6a21\u677f|`omi init-snap my-app`| \u57fa\u7840\u6a21\u677f\uff0c\u652f\u6301 omi \u548c omio(IE8+)\uff0c\u5185\u7f6e\u9884\u6e32\u67d3|\n|TypeScript \u6a21\u677f(omi-cli v3.3.0+)|`omi init-ts my-app`|\u4f7f\u7528 TypeScript \u7684\u6a21\u677f|\n|Mobile \u6a21\u677f|`omi init-weui my-app`| \u4f7f\u7528 weui \u548c omi-router \u7684\u6a21\u677f|\n|omi-mp \u6a21\u677f(omi-cli v3.0.13+)|`omi init-mp my-app` |\u4f7f\u7528\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1 H5|\n'}});
|
||||
//# sourceMappingURL=13.2918b297.chunk.js.map
|
||||
webpackJsonp([14],{59:function(n,i){n.exports='## \u5b89\u88c5 \n\n\u76f4\u63a5\u4e0b\u8f7d\u5e76\u7528 `<script>` \u6807\u7b7e\u5f15\u5165\uff0cOmi \u4f1a\u88ab\u6ce8\u518c\u4e3a\u4e00\u4e2a\u5168\u5c40\u53d8\u91cf\u3002\n\n* [Omi \u5f00\u53d1\u7248\u672c](https://unpkg.com/omi@latest/dist/omi.js)\n* [Omi \u538b\u7f29\u7248\u672c](https://unpkg.com/omi@latest/dist/omi.min.js)\n\n\u4e5f\u53ef\u4ee5\u901a\u8fc7 npm \u5b89\u88c5\n\n```bash\nnpm i omi\n```\n\n\u5982\u679c\u9700\u8981\u517c\u5bb9 IE8+\uff0c\u53ef\u4ee5\u9009\u62e9 omio\uff0c\u5b83\u62e5\u6709\u548c omi \u51e0\u4e4e\u4e00\u6837\u7684 API\uff0c\u4e14 Omi \u4e5f\u4f1a\u88ab\u6ce8\u518c\u4e3a\u4e00\u4e2a\u5168\u5c40\u53d8\u91cf\u3002\n\n* [Omio \u5f00\u53d1\u7248\u672c](https://unpkg.com/omio@latest/dist/omi.js)\n* [Omio \u538b\u7f29\u7248\u672c](https://unpkg.com/omi@latest/dist/omi.min.js)\n\n\u6216\u8005\n\n```bash\nnpm i omio\n```\n\n## \u547d\u4ee4\u884c\u5de5\u5177\n\nOmi \u63d0\u4f9b\u4e86\u5b98\u65b9\u7684 CLI\uff0c\u4f60\u4e0d\u9700\u8981\u53bb\u5b66\u4e60\u600e\u4e48\u914d\u7f6e webpack\u3001babel\u6216\u8005 TypeScript\uff0cCLI \u5e2e\u4f60\u914d\u7f6e\u597d\u4e86\u4e00\u5207\uff0c\u4e14\u63d0\u4f9b\u4e86\u5404\u79cd\u6a21\u677f\u6ee1\u8db3\u4e0d\u540c\u7684\u9879\u76ee\u7c7b\u578b\u3002\n\n```bash\n$ npm i omi-cli -g # install cli\n$ omi init my-app # init project\n$ cd my-app \n$ npm start # develop\n$ npm run build # release\n```\n\n> `npx omi-cli init my-app` \u4e5f\u662f\u652f\u6301\u7684(npm v5.2.0+).\n\n\u76ee\u5f55\u63cf\u8ff0:\n\n```\n\u251c\u2500 config\n\u251c\u2500 public\n\u251c\u2500 scripts\n\u251c\u2500 src\n\u2502 \u251c\u2500 assets\n\u2502 \u251c\u2500 elements //Store all custom elements\n\u2502 \u251c\u2500 store //Store all this store of pages\n\u2502 \u251c\u2500 admin.js //Entry js of compiler\uff0cwill build to admin.html\n\u2502 \u2514\u2500 index.js //Entry js of compiler\uff0cwill build to index.html\n```\n\n\n### npm \u811a\u672c\n\n```json\n"scripts": {\n "start": "node scripts/start.js",\n "build": "PUBLIC_URL=. node scripts/build.js",\n "build-windows": "set PUBLIC_URL=.&& node scripts/build.js",\n "fix": "eslint src --fix"\n}\n```\n\n\u4f60\u4e5f\u53ef\u4ee5\u8bbe\u7f6e PUBLIC_URL, \u6bd4\u5982\uff1a\n\n```json\n...\n"build": "PUBLIC_URL=https://your.url.com/sub node scripts/build.js",\n"build-windows": "set PUBLIC_URL=https://your.url.com/sub&& node scripts/build.js",\n...\n```\n\n### \u5207\u6362 omi \u548c omio\n\n\u589e\u52a0\u6216\u5220\u9664 package.json \u91cc\u7684 alias config \u53ef\u4ee5\u5207\u6362 omi \u548c omio \u6e32\u67d3:\n\n```js\n ...\n "alias": {\n "omi": "omio"\n }\n ...\n```\n \n\n## \u9879\u76ee\u6a21\u677f\n\n| **Template Type**| **Command**| **Describe**|\n| ------------ | -----------| ----------------- |\n|\u57fa\u7840\u6a21\u677f(v3.3.0+)|`omi init my-app`| \u57fa\u7840\u6a21\u677f\uff0c\u652f\u6301 omi \u548c omio(IE8+)|\n|Kbone Template|`omi init-kbone my-app` | \u4f7f\u7528 omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f\u6216\u8005 Web|\n|\u5c0f\u7a0b\u5e8f\u6a21\u677f(v3.3.5+)|`omi init-p my-app`| Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f |\n|mps|`omi init-mps my-app`| \u539f\u751f\u5c0f\u7a0b\u5e8f\u589e\u5f3a\u6846\u67b6(JSX + Less \u8f93\u51fa WXML + WXSS) |\n|mps ts \u7248\u672c|`omi init-mps-ts my-app`| \u539f\u751f\u5c0f\u7a0b\u5e8f\u589e\u5f3a\u6846\u67b6(JSX + Less \u8f93\u51fa WXML + WXSS) |\n|omi-cloud|`omi init-cloud my-app`| \u5c0f\u7a0b\u5e8f\u2022\u4e91\u5f00\u53d1|\n|\u57fa\u7840\u6a21\u677f(v3.3.9+)|`omi init-o my-app`| \u652f\u6301 IE8 \u7684\u57fa\u7840\u6a21\u677f\uff0c\u53ea\u662f build \u7684\u65f6\u5019\u652f\u6301 IE8\uff0c\u5f00\u53d1\u8c03\u8bd5\u8bf7\u7528 IE9|\n|\u652f\u6301\u9884\u6e32\u67d3\u5feb\u7167\u9aa8\u67b6\u7684\u6a21\u677f|`omi init-snap my-app`| \u57fa\u7840\u6a21\u677f\uff0c\u652f\u6301 omi \u548c omio(IE8+)\uff0c\u5185\u7f6e\u9884\u6e32\u67d3|\n|TypeScript \u6a21\u677f(omi-cli v3.3.0+)|`omi init-ts my-app`|\u4f7f\u7528 TypeScript \u7684\u6a21\u677f|\n|Mobile \u6a21\u677f|`omi init-weui my-app`| \u4f7f\u7528 weui \u548c omi-router \u7684\u6a21\u677f|\n|omi-mp \u6a21\u677f(omi-cli v3.0.13+)|`omi init-mp my-app` |\u4f7f\u7528\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1 H5|\n'}});
|
||||
//# sourceMappingURL=14.9228c2b9.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([14],{58:function(n,e){n.exports="## Extend\n\n\u901a\u8fc7 Extend \u53ef\u4ee5\u6269\u5c55 attr \u7528\u6765\u6269\u5c55 DOM \u7684\u80fd\u529b\u3002\n\n\n## \u4e3e\u4e2a\u4f8b\u5b50\n\n\u6bd4\u5982\u4f60\u53ef\u4ee5\u901a\u8fc7 extend \u8f7b\u677e\u5b9e\u73b0\u53cc\u5411\u7ed1\u5b9a\u7684\u529f\u80fd\uff1a\n\n```jsx\nimport { define, WeElement, render, extend, get, set } from 'omi'\n\nextend('model', (el, path, scope) => {\n el.value = get(scope, path)\n el.addEventListener('input', () => {\n set(scope, path, el.value)\n scope.update()\n })\n})\n\ndefine('my-component', class extends WeElement {\n msg = 'two-way binding'\n\n render(props) {\n return (\n <div>\n <input o-model=\"msg\"></input>\n <div>{this.msg}</div>\n </div>\n )\n }\n})\n\nrender(<my-component />, 'body')\n```\n\n[\u2192 \u5728\u7ebf\u6f14\u793a](https://codepen.io/omijs/pen/aeLYjx)"}});
|
||||
//# sourceMappingURL=14.8e15502a.chunk.js.map
|
||||
webpackJsonp([15],{58:function(n,e){n.exports="## Extend\n\n\u901a\u8fc7 Extend \u53ef\u4ee5\u6269\u5c55 attr \u7528\u6765\u6269\u5c55 DOM \u7684\u80fd\u529b\u3002\n\n\n## \u4e3e\u4e2a\u4f8b\u5b50\n\n\u6bd4\u5982\u4f60\u53ef\u4ee5\u901a\u8fc7 extend \u8f7b\u677e\u5b9e\u73b0\u53cc\u5411\u7ed1\u5b9a\u7684\u529f\u80fd\uff1a\n\n```jsx\nimport { define, WeElement, render, extend, get, set } from 'omi'\n\nextend('model', (el, path, scope) => {\n el.value = get(scope, path)\n el.addEventListener('input', () => {\n set(scope, path, el.value)\n scope.update()\n })\n})\n\ndefine('my-component', class extends WeElement {\n msg = 'two-way binding'\n\n render(props) {\n return (\n <div>\n <input o-model=\"msg\"></input>\n <div>{this.msg}</div>\n </div>\n )\n }\n})\n\nrender(<my-component />, 'body')\n```\n\n[\u2192 \u5728\u7ebf\u6f14\u793a](https://codepen.io/omijs/pen/aeLYjx)"}});
|
||||
//# sourceMappingURL=15.ea5faa4c.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/14.8e15502a.chunk.js","docs/zh-cn/extend.md"],"names":["webpackJsonp","58","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/14.8e15502a.chunk.js","sourcesContent":["webpackJsonp([14],{\n\n/***/ 58:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Extend\\n\\n通过 Extend 可以扩展 attr 用来扩展 DOM 的能力。\\n\\n\\n## 举个例子\\n\\n比如你可以通过 extend 轻松实现双向绑定的功能：\\n\\n```jsx\\nimport { define, WeElement, render, extend, get, set } from 'omi'\\n\\nextend('model', (el, path, scope) => {\\n el.value = get(scope, path)\\n el.addEventListener('input', () => {\\n set(scope, path, el.value)\\n scope.update()\\n })\\n})\\n\\ndefine('my-component', class extends WeElement {\\n msg = 'two-way binding'\\n\\n render(props) {\\n return (\\n <div>\\n <input o-model=\\\"msg\\\"></input>\\n <div>{this.msg}</div>\\n </div>\\n )\\n }\\n})\\n\\nrender(<my-component />, 'body')\\n```\\n\\n[→ 在线演示](https://codepen.io/omijs/pen/aeLYjx)\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/14.8e15502a.chunk.js","module.exports = \"## Extend\\n\\n通过 Extend 可以扩展 attr 用来扩展 DOM 的能力。\\n\\n\\n## 举个例子\\n\\n比如你可以通过 extend 轻松实现双向绑定的功能：\\n\\n```jsx\\nimport { define, WeElement, render, extend, get, set } from 'omi'\\n\\nextend('model', (el, path, scope) => {\\n el.value = get(scope, path)\\n el.addEventListener('input', () => {\\n set(scope, path, el.value)\\n scope.update()\\n })\\n})\\n\\ndefine('my-component', class extends WeElement {\\n msg = 'two-way binding'\\n\\n render(props) {\\n return (\\n <div>\\n <input o-model=\\\"msg\\\"></input>\\n <div>{this.msg}</div>\\n </div>\\n )\\n }\\n})\\n\\nrender(<my-component />, 'body')\\n```\\n\\n[→ 在线演示](https://codepen.io/omijs/pen/aeLYjx)\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/extend.md\n// module id = 58\n// module chunks = 14"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/15.ea5faa4c.chunk.js","docs/zh-cn/extend.md"],"names":["webpackJsonp","58","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/15.ea5faa4c.chunk.js","sourcesContent":["webpackJsonp([15],{\n\n/***/ 58:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Extend\\n\\n通过 Extend 可以扩展 attr 用来扩展 DOM 的能力。\\n\\n\\n## 举个例子\\n\\n比如你可以通过 extend 轻松实现双向绑定的功能：\\n\\n```jsx\\nimport { define, WeElement, render, extend, get, set } from 'omi'\\n\\nextend('model', (el, path, scope) => {\\n el.value = get(scope, path)\\n el.addEventListener('input', () => {\\n set(scope, path, el.value)\\n scope.update()\\n })\\n})\\n\\ndefine('my-component', class extends WeElement {\\n msg = 'two-way binding'\\n\\n render(props) {\\n return (\\n <div>\\n <input o-model=\\\"msg\\\"></input>\\n <div>{this.msg}</div>\\n </div>\\n )\\n }\\n})\\n\\nrender(<my-component />, 'body')\\n```\\n\\n[→ 在线演示](https://codepen.io/omijs/pen/aeLYjx)\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/15.ea5faa4c.chunk.js","module.exports = \"## Extend\\n\\n通过 Extend 可以扩展 attr 用来扩展 DOM 的能力。\\n\\n\\n## 举个例子\\n\\n比如你可以通过 extend 轻松实现双向绑定的功能：\\n\\n```jsx\\nimport { define, WeElement, render, extend, get, set } from 'omi'\\n\\nextend('model', (el, path, scope) => {\\n el.value = get(scope, path)\\n el.addEventListener('input', () => {\\n set(scope, path, el.value)\\n scope.update()\\n })\\n})\\n\\ndefine('my-component', class extends WeElement {\\n msg = 'two-way binding'\\n\\n render(props) {\\n return (\\n <div>\\n <input o-model=\\\"msg\\\"></input>\\n <div>{this.msg}</div>\\n </div>\\n )\\n }\\n})\\n\\nrender(<my-component />, 'body')\\n```\\n\\n[→ 在线演示](https://codepen.io/omijs/pen/aeLYjx)\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/extend.md\n// module id = 58\n// module chunks = 15"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([15],{57:function(n,e){n.exports="## Event\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n alert('Hello Omi!')\n }\n\n render() {\n return (\n <h1 onClick={this.onClick}>Hello, world!</h1>\n )\n }\n})\n```\n\n### Custom Event\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n this.fire('myevent', { name: 'abc' })\n }\n\n render(props) {\n return (\n <h1 onClick={this.onClick}>Hello, world!</h1>\n )\n }\n})\n```\n\n\u7136\u540e\u5728\u4f60\u7684\u81ea\u5b9a\u4e49\u5143\u7d20\u4e0a\u7ed1\u5b9a\u4e8b\u4ef6\uff1a\n\n```jsx\n<my-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-element>\n```\n\n\u901a\u8fc7 `this.fire` \u89e6\u53d1\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0cfire \u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u4e8b\u4ef6\u540d\u79f0\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f\u4f20\u9012\u7684\u6570\u636e\u3002\u901a\u8fc7 `evt.detail` \u53ef\u4ee5\u83b7\u53d6\u5230\u4f20\u9012\u7684\u6570\u636e\u3002\n"}});
|
||||
//# sourceMappingURL=15.29ed0917.chunk.js.map
|
||||
webpackJsonp([16],{57:function(n,e){n.exports="## Event\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n alert('Hello Omi!')\n }\n\n render() {\n return (\n <h1 onClick={this.onClick}>Hello, world!</h1>\n )\n }\n})\n```\n\n### Custom Event\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n this.fire('myevent', { name: 'abc' })\n }\n\n render(props) {\n return (\n <h1 onClick={this.onClick}>Hello, world!</h1>\n )\n }\n})\n```\n\n\u7136\u540e\u5728\u4f60\u7684\u81ea\u5b9a\u4e49\u5143\u7d20\u4e0a\u7ed1\u5b9a\u4e8b\u4ef6\uff1a\n\n```jsx\n<my-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-element>\n```\n\n\u901a\u8fc7 `this.fire` \u89e6\u53d1\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0cfire \u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u4e8b\u4ef6\u540d\u79f0\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f\u4f20\u9012\u7684\u6570\u636e\u3002\u901a\u8fc7 `evt.detail` \u53ef\u4ee5\u83b7\u53d6\u5230\u4f20\u9012\u7684\u6570\u636e\u3002\n"}});
|
||||
//# sourceMappingURL=16.1de6eeb8.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/15.29ed0917.chunk.js","docs/zh-cn/event.md"],"names":["webpackJsonp","57","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/15.29ed0917.chunk.js","sourcesContent":["webpackJsonp([15],{\n\n/***/ 57:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n alert('Hello Omi!')\\n }\\n\\n render() {\\n return (\\n <h1 onClick={this.onClick}>Hello, world!</h1>\\n )\\n }\\n})\\n```\\n\\n### Custom Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n this.fire('myevent', { name: 'abc' })\\n }\\n\\n render(props) {\\n return (\\n <h1 onClick={this.onClick}>Hello, world!</h1>\\n )\\n }\\n})\\n```\\n\\n然后在你的自定义元素上绑定事件：\\n\\n```jsx\\n<my-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-element>\\n```\\n\\n通过 `this.fire` 触发自定义事件，fire 第一个参数是事件名称，第二个参数是传递的数据。通过 `evt.detail` 可以获取到传递的数据。\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/15.29ed0917.chunk.js","module.exports = \"## Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n alert('Hello Omi!')\\n }\\n\\n render() {\\n return (\\n <h1 onClick={this.onClick}>Hello, world!</h1>\\n )\\n }\\n})\\n```\\n\\n### Custom Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n this.fire('myevent', { name: 'abc' })\\n }\\n\\n render(props) {\\n return (\\n <h1 onClick={this.onClick}>Hello, world!</h1>\\n )\\n }\\n})\\n```\\n\\n然后在你的自定义元素上绑定事件：\\n\\n```jsx\\n<my-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-element>\\n```\\n\\n通过 `this.fire` 触发自定义事件，fire 第一个参数是事件名称，第二个参数是传递的数据。通过 `evt.detail` 可以获取到传递的数据。\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/event.md\n// module id = 57\n// module chunks = 15"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/16.1de6eeb8.chunk.js","docs/zh-cn/event.md"],"names":["webpackJsonp","57","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/16.1de6eeb8.chunk.js","sourcesContent":["webpackJsonp([16],{\n\n/***/ 57:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n alert('Hello Omi!')\\n }\\n\\n render() {\\n return (\\n <h1 onClick={this.onClick}>Hello, world!</h1>\\n )\\n }\\n})\\n```\\n\\n### Custom Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n this.fire('myevent', { name: 'abc' })\\n }\\n\\n render(props) {\\n return (\\n <h1 onClick={this.onClick}>Hello, world!</h1>\\n )\\n }\\n})\\n```\\n\\n然后在你的自定义元素上绑定事件：\\n\\n```jsx\\n<my-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-element>\\n```\\n\\n通过 `this.fire` 触发自定义事件，fire 第一个参数是事件名称，第二个参数是传递的数据。通过 `evt.detail` 可以获取到传递的数据。\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/16.1de6eeb8.chunk.js","module.exports = \"## Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n alert('Hello Omi!')\\n }\\n\\n render() {\\n return (\\n <h1 onClick={this.onClick}>Hello, world!</h1>\\n )\\n }\\n})\\n```\\n\\n### Custom Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n this.fire('myevent', { name: 'abc' })\\n }\\n\\n render(props) {\\n return (\\n <h1 onClick={this.onClick}>Hello, world!</h1>\\n )\\n }\\n})\\n```\\n\\n然后在你的自定义元素上绑定事件：\\n\\n```jsx\\n<my-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-element>\\n```\\n\\n通过 `this.fire` 触发自定义事件，fire 第一个参数是事件名称，第二个参数是传递的数据。通过 `evt.detail` 可以获取到传递的数据。\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/event.md\n// module id = 57\n// module chunks = 16"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([16],{56:function(n,e){n.exports="## CSS\n\n\u8fd9\u91cc\u8bf4\u7684\u662f props \u7684 css\uff0c\u800c\u4e0d\u662f `static css`\uff0c\u5b83\u63d0\u4f9b\u4e86\u4fee\u6539 shadow dom \u5185\u90e8 scoped style \u7684\u80fd\u529b\u3002\n\n### \u4e3e\u4e2a\u4f8b\u5b50\n\n```jsx\ndefine('my-element', class extends WeElement {\n static css = `h1{\n color: red;\n }`\n\n render() {\n return (\n <div>\n <h1>Look at my color!<h1>\n </div>\n )\n }\n})\n```\n\n\u4e0a\u9762\u7684 `my-element` \u7684 h1 \u6807\u7b7e\u989c\u8272\u662f\u7ea2\u8272\u3002\u6709\u4ec0\u4e48\u529e\u6cd5\u4fee\u6539\u5417\uff1f\n\n```jsx\ndefine('my-app', class extends WeElement {\n\n myCSS = `\n h1{\n color: green;\n }`\n\n onClick = () => {\n //\u52a8\u6001\u4fee\u6539\n this.myCSS = `\n h1{\n color: blue;\n }`\n this.update()\n }\n\n render() {\n return (\n <div onClick={this.onClick}>\n <my-element css={this.myCSS} />\n </div>\n )\n }\n})\n```\n\n\u800c\u4e14\u8fd8\u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u7684\u65b9\u5f0f\u4fdd\u8bc1\u4e00\u5b9a\u80fd\u591f\u4fee\u6539\uff1a\n\n```css\ncolor: blue!important;\n```\n"}});
|
||||
//# sourceMappingURL=16.c061a335.chunk.js.map
|
||||
webpackJsonp([17],{56:function(n,e){n.exports="## CSS\n\n\u8fd9\u91cc\u8bf4\u7684\u662f props \u7684 css\uff0c\u800c\u4e0d\u662f `static css`\uff0c\u5b83\u63d0\u4f9b\u4e86\u4fee\u6539 shadow dom \u5185\u90e8 scoped style \u7684\u80fd\u529b\u3002\n\n### \u4e3e\u4e2a\u4f8b\u5b50\n\n```jsx\ndefine('my-element', class extends WeElement {\n static css = `h1{\n color: red;\n }`\n\n render() {\n return (\n <div>\n <h1>Look at my color!<h1>\n </div>\n )\n }\n})\n```\n\n\u4e0a\u9762\u7684 `my-element` \u7684 h1 \u6807\u7b7e\u989c\u8272\u662f\u7ea2\u8272\u3002\u6709\u4ec0\u4e48\u529e\u6cd5\u4fee\u6539\u5417\uff1f\n\n```jsx\ndefine('my-app', class extends WeElement {\n\n myCSS = `\n h1{\n color: green;\n }`\n\n onClick = () => {\n //\u52a8\u6001\u4fee\u6539\n this.myCSS = `\n h1{\n color: blue;\n }`\n this.update()\n }\n\n render() {\n return (\n <div onClick={this.onClick}>\n <my-element css={this.myCSS} />\n </div>\n )\n }\n})\n```\n\n\u800c\u4e14\u8fd8\u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u7684\u65b9\u5f0f\u4fdd\u8bc1\u4e00\u5b9a\u80fd\u591f\u4fee\u6539\uff1a\n\n```css\ncolor: blue!important;\n```\n"}});
|
||||
//# sourceMappingURL=17.9dd2c4c9.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/16.c061a335.chunk.js","docs/zh-cn/css.md"],"names":["webpackJsonp","56","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/16.c061a335.chunk.js","sourcesContent":["webpackJsonp([16],{\n\n/***/ 56:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## CSS\\n\\n这里说的是 props 的 css，而不是 `static css`，它提供了修改 shadow dom 内部 scoped style 的能力。\\n\\n### 举个例子\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static css = `h1{\\n color: red;\\n }`\\n\\n render() {\\n return (\\n <div>\\n <h1>Look at my color!<h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n上面的 `my-element` 的 h1 标签颜色是红色。有什么办法修改吗？\\n\\n```jsx\\ndefine('my-app', class extends WeElement {\\n\\n myCSS = `\\n h1{\\n color: green;\\n }`\\n\\n onClick = () => {\\n //动态修改\\n this.myCSS = `\\n h1{\\n color: blue;\\n }`\\n this.update()\\n }\\n\\n render() {\\n return (\\n <div onClick={this.onClick}>\\n <my-element css={this.myCSS} />\\n </div>\\n )\\n }\\n})\\n```\\n\\n而且还可以通过下面的方式保证一定能够修改：\\n\\n```css\\ncolor: blue!important;\\n```\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/16.c061a335.chunk.js","module.exports = \"## CSS\\n\\n这里说的是 props 的 css，而不是 `static css`，它提供了修改 shadow dom 内部 scoped style 的能力。\\n\\n### 举个例子\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static css = `h1{\\n color: red;\\n }`\\n\\n render() {\\n return (\\n <div>\\n <h1>Look at my color!<h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n上面的 `my-element` 的 h1 标签颜色是红色。有什么办法修改吗？\\n\\n```jsx\\ndefine('my-app', class extends WeElement {\\n\\n myCSS = `\\n h1{\\n color: green;\\n }`\\n\\n onClick = () => {\\n //动态修改\\n this.myCSS = `\\n h1{\\n color: blue;\\n }`\\n this.update()\\n }\\n\\n render() {\\n return (\\n <div onClick={this.onClick}>\\n <my-element css={this.myCSS} />\\n </div>\\n )\\n }\\n})\\n```\\n\\n而且还可以通过下面的方式保证一定能够修改：\\n\\n```css\\ncolor: blue!important;\\n```\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/css.md\n// module id = 56\n// module chunks = 16"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/17.9dd2c4c9.chunk.js","docs/zh-cn/css.md"],"names":["webpackJsonp","56","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/17.9dd2c4c9.chunk.js","sourcesContent":["webpackJsonp([17],{\n\n/***/ 56:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## CSS\\n\\n这里说的是 props 的 css，而不是 `static css`，它提供了修改 shadow dom 内部 scoped style 的能力。\\n\\n### 举个例子\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static css = `h1{\\n color: red;\\n }`\\n\\n render() {\\n return (\\n <div>\\n <h1>Look at my color!<h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n上面的 `my-element` 的 h1 标签颜色是红色。有什么办法修改吗？\\n\\n```jsx\\ndefine('my-app', class extends WeElement {\\n\\n myCSS = `\\n h1{\\n color: green;\\n }`\\n\\n onClick = () => {\\n //动态修改\\n this.myCSS = `\\n h1{\\n color: blue;\\n }`\\n this.update()\\n }\\n\\n render() {\\n return (\\n <div onClick={this.onClick}>\\n <my-element css={this.myCSS} />\\n </div>\\n )\\n }\\n})\\n```\\n\\n而且还可以通过下面的方式保证一定能够修改：\\n\\n```css\\ncolor: blue!important;\\n```\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/17.9dd2c4c9.chunk.js","module.exports = \"## CSS\\n\\n这里说的是 props 的 css，而不是 `static css`，它提供了修改 shadow dom 内部 scoped style 的能力。\\n\\n### 举个例子\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static css = `h1{\\n color: red;\\n }`\\n\\n render() {\\n return (\\n <div>\\n <h1>Look at my color!<h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n上面的 `my-element` 的 h1 标签颜色是红色。有什么办法修改吗？\\n\\n```jsx\\ndefine('my-app', class extends WeElement {\\n\\n myCSS = `\\n h1{\\n color: green;\\n }`\\n\\n onClick = () => {\\n //动态修改\\n this.myCSS = `\\n h1{\\n color: blue;\\n }`\\n this.update()\\n }\\n\\n render() {\\n return (\\n <div onClick={this.onClick}>\\n <my-element css={this.myCSS} />\\n </div>\\n )\\n }\\n})\\n```\\n\\n而且还可以通过下面的方式保证一定能够修改：\\n\\n```css\\ncolor: blue!important;\\n```\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/css.md\n// module id = 56\n// module chunks = 17"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([17],{55:function(s,n){s.exports="## Class\n\nOmi \u6709\u5185\u7f6e\u7684\u4e24\u4e2a class \u65b9\u6cd5 `classNames` \u548c `extractClass`\uff1a\n\n```js\nimport { classNames, extractClass } from 'omi'\n\ndefine('my-element', class extends WeElement {\n render(props) {\n //extractClass \u4f1a\u53d6\u51fa props \u7684 class \u6216 className \u5c5e\u6027\u5e76\u4e0e\u5176\u4ed6 classNames \u5408\u5e76\u5728\u4e00\u8d77\n const cls = extractClass(props, 'o-my-class', {\n 'other-class': true,\n 'other-class-b': this.xxx === 1\n })\n\n return (\n <div {...cls} {...props}>\n Test\n </div>\n )\n }\n})\n```\n\n\u4e0a\u9762\u7684 `classNames` \u548c npm \u4e0a\u7684 [classNames](https://www.npmjs.com/package/classnames) \u662f\u4e00\u6837\u7684\u3002"}});
|
||||
//# sourceMappingURL=17.98ec3c54.chunk.js.map
|
||||
webpackJsonp([18],{55:function(s,n){s.exports="## Class\n\nOmi \u6709\u5185\u7f6e\u7684\u4e24\u4e2a class \u65b9\u6cd5 `classNames` \u548c `extractClass`\uff1a\n\n```js\nimport { classNames, extractClass } from 'omi'\n\ndefine('my-element', class extends WeElement {\n render(props) {\n //extractClass \u4f1a\u53d6\u51fa props \u7684 class \u6216 className \u5c5e\u6027\u5e76\u4e0e\u5176\u4ed6 classNames \u5408\u5e76\u5728\u4e00\u8d77\n const cls = extractClass(props, 'o-my-class', {\n 'other-class': true,\n 'other-class-b': this.xxx === 1\n })\n\n return (\n <div {...cls} {...props}>\n Test\n </div>\n )\n }\n})\n```\n\n\u4e0a\u9762\u7684 `classNames` \u548c npm \u4e0a\u7684 [classNames](https://www.npmjs.com/package/classnames) \u662f\u4e00\u6837\u7684\u3002"}});
|
||||
//# sourceMappingURL=18.fdaed2b1.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/17.98ec3c54.chunk.js","docs/zh-cn/class.md"],"names":["webpackJsonp","55","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/17.98ec3c54.chunk.js","sourcesContent":["webpackJsonp([17],{\n\n/***/ 55:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Class\\n\\nOmi 有内置的两个 class 方法 `classNames` 和 `extractClass`：\\n\\n```js\\nimport { classNames, extractClass } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n //extractClass 会取出 props 的 class 或 className 属性并与其他 classNames 合并在一起\\n const cls = extractClass(props, 'o-my-class', {\\n 'other-class': true,\\n 'other-class-b': this.xxx === 1\\n })\\n\\n return (\\n <div {...cls} {...props}>\\n Test\\n </div>\\n )\\n }\\n})\\n```\\n\\n上面的 `classNames` 和 npm 上的 [classNames](https://www.npmjs.com/package/classnames) 是一样的。\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/17.98ec3c54.chunk.js","module.exports = \"## Class\\n\\nOmi 有内置的两个 class 方法 `classNames` 和 `extractClass`：\\n\\n```js\\nimport { classNames, extractClass } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n //extractClass 会取出 props 的 class 或 className 属性并与其他 classNames 合并在一起\\n const cls = extractClass(props, 'o-my-class', {\\n 'other-class': true,\\n 'other-class-b': this.xxx === 1\\n })\\n\\n return (\\n <div {...cls} {...props}>\\n Test\\n </div>\\n )\\n }\\n})\\n```\\n\\n上面的 `classNames` 和 npm 上的 [classNames](https://www.npmjs.com/package/classnames) 是一样的。\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/class.md\n// module id = 55\n// module chunks = 17"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/18.fdaed2b1.chunk.js","docs/zh-cn/class.md"],"names":["webpackJsonp","55","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/18.fdaed2b1.chunk.js","sourcesContent":["webpackJsonp([18],{\n\n/***/ 55:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Class\\n\\nOmi 有内置的两个 class 方法 `classNames` 和 `extractClass`：\\n\\n```js\\nimport { classNames, extractClass } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n //extractClass 会取出 props 的 class 或 className 属性并与其他 classNames 合并在一起\\n const cls = extractClass(props, 'o-my-class', {\\n 'other-class': true,\\n 'other-class-b': this.xxx === 1\\n })\\n\\n return (\\n <div {...cls} {...props}>\\n Test\\n </div>\\n )\\n }\\n})\\n```\\n\\n上面的 `classNames` 和 npm 上的 [classNames](https://www.npmjs.com/package/classnames) 是一样的。\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/18.fdaed2b1.chunk.js","module.exports = \"## Class\\n\\nOmi 有内置的两个 class 方法 `classNames` 和 `extractClass`：\\n\\n```js\\nimport { classNames, extractClass } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n //extractClass 会取出 props 的 class 或 className 属性并与其他 classNames 合并在一起\\n const cls = extractClass(props, 'o-my-class', {\\n 'other-class': true,\\n 'other-class-b': this.xxx === 1\\n })\\n\\n return (\\n <div {...cls} {...props}>\\n Test\\n </div>\\n )\\n }\\n})\\n```\\n\\n上面的 `classNames` 和 npm 上的 [classNames](https://www.npmjs.com/package/classnames) 是一样的。\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/class.md\n// module id = 55\n// module chunks = 18"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([18],{54:function(e,t){e.exports="\n## Update\n\n`update` method is an important built-in core method for updating components themselves. For example:\n\n```js\nthis.update()\n```\n\nYou can also pass parameters to decide whether to ignore attributes in html mode and updates:\n\n```js\nthis.update(true)\n```\n\nFor example, click on the mask of the pop-up layer to close the pop-up, pass it to the parent component in the react, let the parent component update, while Omi advocates self-update, so that the diff area is smaller.\n\n```js\nonMaskClick = ()=> {\n //change props\n this.props.show = false\n //prevent parent component from updating diff without results\n this.prevProps.show = false\n //update self and ignore attributes in html mode\n this.update(true)\n //trigger events, which can be used to change external state variables to maintain consistency, but external components need not be updated\n this.fire('close')\n}\n```\n\n### UpdateSelf\n\n\n\n`updateSelf` method does not update child components."}});
|
||||
//# sourceMappingURL=18.c2baaa95.chunk.js.map
|
||||
webpackJsonp([19],{54:function(e,t){e.exports="\n## Update\n\n`update` method is an important built-in core method for updating components themselves. For example:\n\n```js\nthis.update()\n```\n\nYou can also pass parameters to decide whether to ignore attributes in html mode and updates:\n\n```js\nthis.update(true)\n```\n\nFor example, click on the mask of the pop-up layer to close the pop-up, pass it to the parent component in the react, let the parent component update, while Omi advocates self-update, so that the diff area is smaller.\n\n```js\nonMaskClick = ()=> {\n //change props\n this.props.show = false\n //prevent parent component from updating diff without results\n this.prevProps.show = false\n //update self and ignore attributes in html mode\n this.update(true)\n //trigger events, which can be used to change external state variables to maintain consistency, but external components need not be updated\n this.fire('close')\n}\n```\n\n### UpdateSelf\n\n\n\n`updateSelf` method does not update child components."}});
|
||||
//# sourceMappingURL=19.1642acf9.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/18.c2baaa95.chunk.js","docs/en/update.md"],"names":["webpackJsonp","54","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/18.c2baaa95.chunk.js","sourcesContent":["webpackJsonp([18],{\n\n/***/ 54:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\\n## Update\\n\\n`update` method is an important built-in core method for updating components themselves. For example:\\n\\n```js\\nthis.update()\\n```\\n\\nYou can also pass parameters to decide whether to ignore attributes in html mode and updates:\\n\\n```js\\nthis.update(true)\\n```\\n\\nFor example, click on the mask of the pop-up layer to close the pop-up, pass it to the parent component in the react, let the parent component update, while Omi advocates self-update, so that the diff area is smaller.\\n\\n```js\\nonMaskClick = ()=> {\\n //change props\\n this.props.show = false\\n //prevent parent component from updating diff without results\\n this.prevProps.show = false\\n //update self and ignore attributes in html mode\\n this.update(true)\\n //trigger events, which can be used to change external state variables to maintain consistency, but external components need not be updated\\n this.fire('close')\\n}\\n```\\n\\n### UpdateSelf\\n\\n\\n\\n`updateSelf` method does not update child components.\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/18.c2baaa95.chunk.js","module.exports = \"\\n## Update\\n\\n`update` method is an important built-in core method for updating components themselves. For example:\\n\\n```js\\nthis.update()\\n```\\n\\nYou can also pass parameters to decide whether to ignore attributes in html mode and updates:\\n\\n```js\\nthis.update(true)\\n```\\n\\nFor example, click on the mask of the pop-up layer to close the pop-up, pass it to the parent component in the react, let the parent component update, while Omi advocates self-update, so that the diff area is smaller.\\n\\n```js\\nonMaskClick = ()=> {\\n //change props\\n this.props.show = false\\n //prevent parent component from updating diff without results\\n this.prevProps.show = false\\n //update self and ignore attributes in html mode\\n this.update(true)\\n //trigger events, which can be used to change external state variables to maintain consistency, but external components need not be updated\\n this.fire('close')\\n}\\n```\\n\\n### UpdateSelf\\n\\n\\n\\n`updateSelf` method does not update child components.\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/update.md\n// module id = 54\n// module chunks = 18"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/19.1642acf9.chunk.js","docs/en/update.md"],"names":["webpackJsonp","54","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/19.1642acf9.chunk.js","sourcesContent":["webpackJsonp([19],{\n\n/***/ 54:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\\n## Update\\n\\n`update` method is an important built-in core method for updating components themselves. For example:\\n\\n```js\\nthis.update()\\n```\\n\\nYou can also pass parameters to decide whether to ignore attributes in html mode and updates:\\n\\n```js\\nthis.update(true)\\n```\\n\\nFor example, click on the mask of the pop-up layer to close the pop-up, pass it to the parent component in the react, let the parent component update, while Omi advocates self-update, so that the diff area is smaller.\\n\\n```js\\nonMaskClick = ()=> {\\n //change props\\n this.props.show = false\\n //prevent parent component from updating diff without results\\n this.prevProps.show = false\\n //update self and ignore attributes in html mode\\n this.update(true)\\n //trigger events, which can be used to change external state variables to maintain consistency, but external components need not be updated\\n this.fire('close')\\n}\\n```\\n\\n### UpdateSelf\\n\\n\\n\\n`updateSelf` method does not update child components.\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/19.1642acf9.chunk.js","module.exports = \"\\n## Update\\n\\n`update` method is an important built-in core method for updating components themselves. For example:\\n\\n```js\\nthis.update()\\n```\\n\\nYou can also pass parameters to decide whether to ignore attributes in html mode and updates:\\n\\n```js\\nthis.update(true)\\n```\\n\\nFor example, click on the mask of the pop-up layer to close the pop-up, pass it to the parent component in the react, let the parent component update, while Omi advocates self-update, so that the diff area is smaller.\\n\\n```js\\nonMaskClick = ()=> {\\n //change props\\n this.props.show = false\\n //prevent parent component from updating diff without results\\n this.prevProps.show = false\\n //update self and ignore attributes in html mode\\n this.update(true)\\n //trigger events, which can be used to change external state variables to maintain consistency, but external components need not be updated\\n this.fire('close')\\n}\\n```\\n\\n### UpdateSelf\\n\\n\\n\\n`updateSelf` method does not update child components.\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/update.md\n// module id = 54\n// module chunks = 19"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([2],{70:function(n,e){n.exports="## \u670d\u52a1\u5668\u7aef\u6e32\u67d3\n\n\u670d\u52a1\u5668\u7aef\u6e32\u67d3\u82f1\u6587\u53eb Server-Side Rendering\uff0c\u7b80\u79f0 SSR\uff0c\u6709\u4e24\u5927\u4f18\u52bf:\n\n* \u5bf9 SEO \u53cb\u597d\n* \u66f4\u5feb\u7684\u9996\u5c4f\u5c55\u793a\u65f6\u95f4\n\n\u7528\u670d\u52a1\u5668\u7aef\u6e32\u67d3 (SSR) \u4e5f\u6709\u7f3a\u70b9\uff0c\u6bd4\u5982\u589e\u52a0\u670d\u52a1\u5668\u7aef\u5f00\u9500\u3002\u5f00\u53d1\u8005\u53ef\u4ee5\u81ea\u884c\u6743\u8861\u662f\u5426\u4f7f\u7528 SSR\uff0c\u6216\u8005\u76f4\u63a5\u4f7f\u7528 [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md) \u9884\u6e32\u67d3\uff0c\u9884\u6e32\u67d3\u4e0d\u9700\u8981\u670d\u52a1\u5668\u7aef\u989d\u5916\u7684\u5f00\u9500\uff0c\u76f4\u63a5\u5728\u6784\u5efa\u65f6\u5019\u65e0\u5934\u6d4f\u89c8\u5668\u751f\u6210\u9aa8\u67b6\u5c4f\uff0c\u6240\u4ee5\u4e5f\u5c31\u6ca1\u6709\u52a8\u6001\u6570\u636e\u5185\u5bb9\uff0c\u800c SSR \u53ef\u4ee5\u8fd4\u56de\u52a8\u6001\u6570\u636e\u751f\u6210\u7684HTML\uff0c\u8fd8\u53ef\u4ee5\u628a\u6570\u636e\u5e8f\u5217\u5316\u4e0e HTML \u4e00\u540c\u8fd4\u56de\u3002\n\n## \u5feb\u901f\u4f7f\u7528\n\n```bash\n$ npm i omi-cli -g # \u5168\u5c40\u5b89\u88c5 cli\n$ omi init-ssr my-app # \u521d\u59cb\u5316\u9879\u76ee \n$ cd my-app \n$ npm start # \u5f00\u53d1\n$ npm run build # \u53d1\u5e03\n```\n\n## \u539f\u7406\u89e3\u6790\n\n\u5b9a\u4e49\u7ec4\u4ef6\uff1a\n\n```jsx\nimport { WeElement, define } from 'omio'\n\ndefine('my-element', class extends WeElement {\n install() {\n this.data = { liked: false }\n }\n\n static css = 'button{ color: red; }'\n\n render() {\n if (this.data.liked) {\n return 'You liked this.'\n }\n\n return <button onClick={() => {\n this.data.liked = true\n this.update()\n }} >Like</button>\n }\n})\n```\n\n\u6ce8\u610f\u8fd9\u91cc\u4f7f\u7528\u4e86 omio\uff0cSSR \u53ea\u80fd\u4f7f\u7528 omio\uff0c\u800c\u4e0d\u80fd\u4f7f\u7528 omi\uff0c\u56e0\u4e3a omi \u662f web components\uff0cnode \u65e0\u6cd5\u6e32\u67d3 web components\u3002\n\n> omi \u548c omio \u9879\u76ee\u90fd\u5fc5\u987b\u4f7f\u7528 omio \u8fdb\u884c SSR\n\n\u8d77\u4e2a node \u670d\u52a1\u5668:\n\n```jsx\nvar express = require('express')\nvar app = express()\nvar Omi = require('omio')\nrequire('./my-element')\n\napp.get('/', function (req, res) {\n const obj = Omi.renderToString(<my-element />)\n res.end(`<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Omi SSR</title>\n ${toString(obj.css)}\n </head>\n <body>${obj.html}</body>\n</html>`)\n})\n\nfunction toString(css){\n return (\n css.map(style => {\n return `<style id=\"${style.id}\">${style.css}</style>`\n }\n ))\n )\n}\n\napp.listen(3000)\n```\n\n\u76f4\u51fa\u7684 HTML \u7ed3\u6784:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Omi SSR</title>\n <style type=\"text/css\" id=\"_ss0\">button[_ss0]{color:red;}</style>\n </head>\n <body><button _ss0>Like</button></body>\n</html>\n```\n\n\u663e\u793a\u6548\u679c:\n\n\n\n\n"}});
|
||||
//# sourceMappingURL=2.56c4128f.chunk.js.map
|
||||
webpackJsonp([2],{71:function(n,e){n.exports="## \u670d\u52a1\u5668\u7aef\u6e32\u67d3\n\n\u670d\u52a1\u5668\u7aef\u6e32\u67d3\u82f1\u6587\u53eb Server-Side Rendering\uff0c\u7b80\u79f0 SSR\uff0c\u6709\u4e24\u5927\u4f18\u52bf:\n\n* \u5bf9 SEO \u53cb\u597d\n* \u66f4\u5feb\u7684\u9996\u5c4f\u5c55\u793a\u65f6\u95f4\n\n\u7528\u670d\u52a1\u5668\u7aef\u6e32\u67d3 (SSR) \u4e5f\u6709\u7f3a\u70b9\uff0c\u6bd4\u5982\u589e\u52a0\u670d\u52a1\u5668\u7aef\u5f00\u9500\u3002\u5f00\u53d1\u8005\u53ef\u4ee5\u81ea\u884c\u6743\u8861\u662f\u5426\u4f7f\u7528 SSR\uff0c\u6216\u8005\u76f4\u63a5\u4f7f\u7528 [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md) \u9884\u6e32\u67d3\uff0c\u9884\u6e32\u67d3\u4e0d\u9700\u8981\u670d\u52a1\u5668\u7aef\u989d\u5916\u7684\u5f00\u9500\uff0c\u76f4\u63a5\u5728\u6784\u5efa\u65f6\u5019\u65e0\u5934\u6d4f\u89c8\u5668\u751f\u6210\u9aa8\u67b6\u5c4f\uff0c\u6240\u4ee5\u4e5f\u5c31\u6ca1\u6709\u52a8\u6001\u6570\u636e\u5185\u5bb9\uff0c\u800c SSR \u53ef\u4ee5\u8fd4\u56de\u52a8\u6001\u6570\u636e\u751f\u6210\u7684HTML\uff0c\u8fd8\u53ef\u4ee5\u628a\u6570\u636e\u5e8f\u5217\u5316\u4e0e HTML \u4e00\u540c\u8fd4\u56de\u3002\n\n## \u5feb\u901f\u4f7f\u7528\n\n```bash\n$ npm i omi-cli -g # \u5168\u5c40\u5b89\u88c5 cli\n$ omi init-ssr my-app # \u521d\u59cb\u5316\u9879\u76ee \n$ cd my-app \n$ npm start # \u5f00\u53d1\n$ npm run build # \u53d1\u5e03\n```\n\n## \u539f\u7406\u89e3\u6790\n\n\u5b9a\u4e49\u7ec4\u4ef6\uff1a\n\n```jsx\nimport { WeElement, define } from 'omio'\n\ndefine('my-element', class extends WeElement {\n install() {\n this.data = { liked: false }\n }\n\n static css = 'button{ color: red; }'\n\n render() {\n if (this.data.liked) {\n return 'You liked this.'\n }\n\n return <button onClick={() => {\n this.data.liked = true\n this.update()\n }} >Like</button>\n }\n})\n```\n\n\u6ce8\u610f\u8fd9\u91cc\u4f7f\u7528\u4e86 omio\uff0cSSR \u53ea\u80fd\u4f7f\u7528 omio\uff0c\u800c\u4e0d\u80fd\u4f7f\u7528 omi\uff0c\u56e0\u4e3a omi \u662f web components\uff0cnode \u65e0\u6cd5\u6e32\u67d3 web components\u3002\n\n> omi \u548c omio \u9879\u76ee\u90fd\u5fc5\u987b\u4f7f\u7528 omio \u8fdb\u884c SSR\n\n\u8d77\u4e2a node \u670d\u52a1\u5668:\n\n```jsx\nvar express = require('express')\nvar app = express()\nvar Omi = require('omio')\nrequire('./my-element')\n\napp.get('/', function (req, res) {\n const obj = Omi.renderToString(<my-element />)\n res.end(`<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Omi SSR</title>\n ${toString(obj.css)}\n </head>\n <body>${obj.html}</body>\n</html>`)\n})\n\nfunction toString(css){\n return (\n css.map(style => {\n return `<style id=\"${style.id}\">${style.css}</style>`\n }\n ))\n )\n}\n\napp.listen(3000)\n```\n\n\u76f4\u51fa\u7684 HTML \u7ed3\u6784:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Omi SSR</title>\n <style type=\"text/css\" id=\"_ss0\">button[_ss0]{color:red;}</style>\n </head>\n <body><button _ss0>Like</button></body>\n</html>\n```\n\n\u663e\u793a\u6548\u679c:\n\n\n\n\n"}});
|
||||
//# sourceMappingURL=2.3e2dcb04.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([20],{52:function(n,e){n.exports="## Server-Side Rendering\n\nServer-Side Rendering(SSR) has two advantages:\n\n* Be friendly to SEO\n* Faster First Screen Display Time\n\nServer-side rendering (SSR) also has drawbacks, such as increasing server-side overhead. Developers can weigh whether to use SSR or pre-render directly with [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md). Pre-rendering does not require additional server-side overhead and generates skeleton screen directly at the time of construction, so there is no dynamic data content. SSR can return HTML generated by dynamic data, and also the serialization data can be returned with HTML.\n\n## Usage\n\n```bash\n$ npm i omi-cli -g # install cli\n$ omi init-ssr my-app # init project\n$ cd my-app \n$ npm start # develop\n$ npm run build # release\n```\n\n## Principle\n\nDefine component:\n\n```jsx\nimport { WeElement, define } from 'omio'\n\ndefine('my-element', class extends WeElement {\n install() {\n this.data = { liked: false }\n }\n\n static css = 'button{ color: red; }'\n\n render() {\n if (this.data.liked) {\n return 'You liked this.'\n }\n\n return <button onClick={() => {\n this.data.liked = true\n this.update()\n }} >Like</button>\n }\n})\n```\n\nNote that omio is used here, SSR can only use omio, not omi, because OMI is web components, node can not render web components.\n\n> Both OMI and omio projects must use omio for SSR\n\nStart a node server:\n\n```jsx\nvar express = require('express')\nvar app = express()\nvar Omi = require('omio')\nrequire('./my-element')\n\napp.get('/', function (req, res) {\n const obj = Omi.renderToString(<my-element />)\n res.end(`<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Omi SSR</title>\n ${toString(obj.css)}\n </head>\n <body>${obj.html}</body>\n</html>`)\n})\n\nfunction toString(css){\n return (\n css.map(style => {\n return `<style id=\"${style.id}\">${style.css}</style>`\n }\n ))\n )\n}\n\napp.listen(3000)\n```\n\nRendering HTML structure:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Omi SSR</title>\n <style type=\"text/css\" id=\"_ss0\">button[_ss0]{color:red;}</style>\n </head>\n <body><button _ss0>Like</button></body>\n</html>\n```\n\nPreview:\n\n\n\n\n"}});
|
||||
//# sourceMappingURL=20.74ce16c4.chunk.js.map
|
||||
webpackJsonp([21],{52:function(n,e){n.exports="## Server-Side Rendering\n\nServer-Side Rendering(SSR) has two advantages:\n\n* Be friendly to SEO\n* Faster First Screen Display Time\n\nServer-side rendering (SSR) also has drawbacks, such as increasing server-side overhead. Developers can weigh whether to use SSR or pre-render directly with [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md). Pre-rendering does not require additional server-side overhead and generates skeleton screen directly at the time of construction, so there is no dynamic data content. SSR can return HTML generated by dynamic data, and also the serialization data can be returned with HTML.\n\n## Usage\n\n```bash\n$ npm i omi-cli -g # install cli\n$ omi init-ssr my-app # init project\n$ cd my-app \n$ npm start # develop\n$ npm run build # release\n```\n\n## Principle\n\nDefine component:\n\n```jsx\nimport { WeElement, define } from 'omio'\n\ndefine('my-element', class extends WeElement {\n install() {\n this.data = { liked: false }\n }\n\n static css = 'button{ color: red; }'\n\n render() {\n if (this.data.liked) {\n return 'You liked this.'\n }\n\n return <button onClick={() => {\n this.data.liked = true\n this.update()\n }} >Like</button>\n }\n})\n```\n\nNote that omio is used here, SSR can only use omio, not omi, because OMI is web components, node can not render web components.\n\n> Both OMI and omio projects must use omio for SSR\n\nStart a node server:\n\n```jsx\nvar express = require('express')\nvar app = express()\nvar Omi = require('omio')\nrequire('./my-element')\n\napp.get('/', function (req, res) {\n const obj = Omi.renderToString(<my-element />)\n res.end(`<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Omi SSR</title>\n ${toString(obj.css)}\n </head>\n <body>${obj.html}</body>\n</html>`)\n})\n\nfunction toString(css){\n return (\n css.map(style => {\n return `<style id=\"${style.id}\">${style.css}</style>`\n }\n ))\n )\n}\n\napp.listen(3000)\n```\n\nRendering HTML structure:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Omi SSR</title>\n <style type=\"text/css\" id=\"_ss0\">button[_ss0]{color:red;}</style>\n </head>\n <body><button _ss0>Like</button></body>\n</html>\n```\n\nPreview:\n\n\n\n\n"}});
|
||||
//# sourceMappingURL=21.92841bfa.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([21],{51:function(n,e){n.exports="# omi-router\n\nomi-router is a router plugin of [Omi](https://tencent.github.io/omi/), and it is lightweight, easy and powerful to use. It is a solution to build Omi's SPA(Single Page Application).\n\n[\u2192 DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)\n\nThe advantage of SPA is very clear.\n\n* No refresh to load a content\n* No refresh to previous/forward page\n* Shareable link (Other can see the same page as you see)\n* No blank page and transmission animation\n* Reusable resource (If multi-page, same resource shold be loaded multi times)\n\nYes, there are many advantages. Let's do it.\n\n## Install\n\n### NPM\n\n```js\nnpm install omi-router\n```\n\n## Usage\n\n```js\n//You can visit route in the global context.\nimport 'omi-router'\nimport { define, WeElement, render } from 'omi'\nimport './about'\nimport './home'\nimport './user'\nimport './user-list'\n\ndefine('my-app', class extends WeElement {\n\n data = { tag: 'my-home' }\n\n install() {\n\n route('/', () => {\n this.data.tag = 'my-home'\n this.update()\n })\n\n route('/about', (evt) => {\n console.log(evt.query)\n this.data.tag = 'my-about'\n this.update()\n })\n\n route('/user-list', () => {\n this.data.tag = 'user-list'\n this.update()\n })\n\n route('/user/:name/category/:category', (evt) => {\n this.data.tag = 'my-user'\n this.data.params = evt.params\n this.update()\n })\n\n route('*', function () {\n console.log('not found')\n })\n\n route.before = (evt) => {\n console.log('before')\n //prevent route when return false\n //return false\n }\n\n route.after = (evt) => {\n console.log('after')\n }\n }\n\n onClick = () => {\n route.to('/user/vorshen/category/html')\n }\n\n render(props, data) {\n return (\n <div>\n <ul>\n <li><a href=\"#/\" >Home</a></li>\n <li><a href=\"#/about\" >About</a></li>\n <li><a href=\"#/user-list\" >UserList</a></li>\n <li><a href=\"#/about?name=dntzhang&age=18\" >About Dntzhang</a></li>\n </ul>\n <div id=\"view\">\n <data.tag params={data.params} />\n </div>\n <div><button onClick={this.onClick}>Test route.to</button></div>\n </div>\n )\n }\n})\n\nrender(<my-app />, \"#container\")\n```\n\n## Match\n\n| Rule | Path | route.params |\n|---------|------|--------|\n| /user/:name | /user/dntzhang | `{ name: 'dntzhang' }` |\n| /user/:name/category/:category | /user/dntzhang/category/js | `{ name: 'dntzhang', category: 'js' }` |\n\nNote: If hash is empty, it will be automatically recognized as `/` \u3002\n\n## With Query Parameter\n\n```html\n<li><a href=\"#/about?name=dntzhang&age=18\" >About</a></li>\n```\n\n```js\nroute('/about', (evt) => {\n //output { name: 'dntzhang', age : '18' } when click the tag above\n console.log(evt.query)\n})\n```\n\n## With Data\n\n```js\nroute.to('/about',(evt) => {\n //{ a: 1 }\n console.log(evt.data)\n})\nroute.to('/about', { a: 1 })\n```\n\n## Links\n\n* [DEMO](https://tencent.github.io/omi/packages/omi-router/examples/simple/)\n* [Source](https://github.com/Tencent/omi/tree/master/packages/omi-router/examples/simple)\n\n## License\nThis content is released under the [MIT](http://opensource.org/licenses/MIT) License.\n"}});
|
||||
//# sourceMappingURL=21.f32e4629.chunk.js.map
|
||||
webpackJsonp([22],{51:function(n,e){n.exports="# omi-router\n\nomi-router is a router plugin of [Omi](https://tencent.github.io/omi/), and it is lightweight, easy and powerful to use. It is a solution to build Omi's SPA(Single Page Application).\n\n[\u2192 DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)\n\nThe advantage of SPA is very clear.\n\n* No refresh to load a content\n* No refresh to previous/forward page\n* Shareable link (Other can see the same page as you see)\n* No blank page and transmission animation\n* Reusable resource (If multi-page, same resource shold be loaded multi times)\n\nYes, there are many advantages. Let's do it.\n\n## Install\n\n### NPM\n\n```js\nnpm install omi-router\n```\n\n## Usage\n\n```js\n//You can visit route in the global context.\nimport 'omi-router'\nimport { define, WeElement, render } from 'omi'\nimport './about'\nimport './home'\nimport './user'\nimport './user-list'\n\ndefine('my-app', class extends WeElement {\n\n data = { tag: 'my-home' }\n\n install() {\n\n route('/', () => {\n this.data.tag = 'my-home'\n this.update()\n })\n\n route('/about', (evt) => {\n console.log(evt.query)\n this.data.tag = 'my-about'\n this.update()\n })\n\n route('/user-list', () => {\n this.data.tag = 'user-list'\n this.update()\n })\n\n route('/user/:name/category/:category', (evt) => {\n this.data.tag = 'my-user'\n this.data.params = evt.params\n this.update()\n })\n\n route('*', function () {\n console.log('not found')\n })\n\n route.before = (evt) => {\n console.log('before')\n //prevent route when return false\n //return false\n }\n\n route.after = (evt) => {\n console.log('after')\n }\n }\n\n onClick = () => {\n route.to('/user/vorshen/category/html')\n }\n\n render(props, data) {\n return (\n <div>\n <ul>\n <li><a href=\"#/\" >Home</a></li>\n <li><a href=\"#/about\" >About</a></li>\n <li><a href=\"#/user-list\" >UserList</a></li>\n <li><a href=\"#/about?name=dntzhang&age=18\" >About Dntzhang</a></li>\n </ul>\n <div id=\"view\">\n <data.tag params={data.params} />\n </div>\n <div><button onClick={this.onClick}>Test route.to</button></div>\n </div>\n )\n }\n})\n\nrender(<my-app />, \"#container\")\n```\n\n## Match\n\n| Rule | Path | route.params |\n|---------|------|--------|\n| /user/:name | /user/dntzhang | `{ name: 'dntzhang' }` |\n| /user/:name/category/:category | /user/dntzhang/category/js | `{ name: 'dntzhang', category: 'js' }` |\n\nNote: If hash is empty, it will be automatically recognized as `/` \u3002\n\n## With Query Parameter\n\n```html\n<li><a href=\"#/about?name=dntzhang&age=18\" >About</a></li>\n```\n\n```js\nroute('/about', (evt) => {\n //output { name: 'dntzhang', age : '18' } when click the tag above\n console.log(evt.query)\n})\n```\n\n## With Data\n\n```js\nroute.to('/about',(evt) => {\n //{ a: 1 }\n console.log(evt.data)\n})\nroute.to('/about', { a: 1 })\n```\n\n## Links\n\n* [DEMO](https://tencent.github.io/omi/packages/omi-router/examples/simple/)\n* [Source](https://github.com/Tencent/omi/tree/master/packages/omi-router/examples/simple)\n\n## License\nThis content is released under the [MIT](http://opensource.org/licenses/MIT) License.\n"}});
|
||||
//# sourceMappingURL=22.0c61cf89.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([22],{50:function(n,e){n.exports="## Ref\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n console.log(this.h1)\n }\n\n render(props) {\n return (\n <div>\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\n </div>\n )\n }\n})\n```\n\nAdd `ref = {e => {this. anyNameYouWant = e} ` to the element, and then you can access the element using `this. anyNameYouWant` in the JS code. You can improve the performance of update in two ways:\n\n* Assignment ahead of time\n* createRef\n\n### Assignment ahead of time\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n console.log(this.h1)\n }\n\n myRef = e => { this.h1 = e }\n\n render(props) {\n return (\n <div>\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\n </div>\n )\n }\n})\n```\n\n### createRef\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n console.log(this.myRef.current) //h1\n }\n\n myRef = createRef()\n\n render(props) {\n return (\n <div>\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\n </div>\n )\n }\n})\n```"}});
|
||||
//# sourceMappingURL=22.507213f4.chunk.js.map
|
||||
webpackJsonp([23],{50:function(n,e){n.exports="## Ref\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n console.log(this.h1)\n }\n\n render(props) {\n return (\n <div>\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\n </div>\n )\n }\n})\n```\n\nAdd `ref = {e => {this. anyNameYouWant = e} ` to the element, and then you can access the element using `this. anyNameYouWant` in the JS code. You can improve the performance of update in two ways:\n\n* Assignment ahead of time\n* createRef\n\n### Assignment ahead of time\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n console.log(this.h1)\n }\n\n myRef = e => { this.h1 = e }\n\n render(props) {\n return (\n <div>\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\n </div>\n )\n }\n})\n```\n\n### createRef\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n console.log(this.myRef.current) //h1\n }\n\n myRef = createRef()\n\n render(props) {\n return (\n <div>\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\n </div>\n )\n }\n})\n```"}});
|
||||
//# sourceMappingURL=23.7411faba.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/22.507213f4.chunk.js","docs/en/ref.md"],"names":["webpackJsonp","50","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/22.507213f4.chunk.js","sourcesContent":["webpackJsonp([22],{\n\n/***/ 50:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Ref\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\nAdd `ref = {e => {this. anyNameYouWant = e} ` to the element, and then you can access the element using `this. anyNameYouWant` in the JS code. You can improve the performance of update in two ways:\\n\\n* Assignment ahead of time\\n* createRef\\n\\n### Assignment ahead of time\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n myRef = e => { this.h1 = e }\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n### createRef\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.myRef.current) //h1\\n }\\n\\n myRef = createRef()\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/22.507213f4.chunk.js","module.exports = \"## Ref\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\nAdd `ref = {e => {this. anyNameYouWant = e} ` to the element, and then you can access the element using `this. anyNameYouWant` in the JS code. You can improve the performance of update in two ways:\\n\\n* Assignment ahead of time\\n* createRef\\n\\n### Assignment ahead of time\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n myRef = e => { this.h1 = e }\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n### createRef\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.myRef.current) //h1\\n }\\n\\n myRef = createRef()\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/ref.md\n// module id = 50\n// module chunks = 22"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/23.7411faba.chunk.js","docs/en/ref.md"],"names":["webpackJsonp","50","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/23.7411faba.chunk.js","sourcesContent":["webpackJsonp([23],{\n\n/***/ 50:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Ref\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\nAdd `ref = {e => {this. anyNameYouWant = e} ` to the element, and then you can access the element using `this. anyNameYouWant` in the JS code. You can improve the performance of update in two ways:\\n\\n* Assignment ahead of time\\n* createRef\\n\\n### Assignment ahead of time\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n myRef = e => { this.h1 = e }\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n### createRef\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.myRef.current) //h1\\n }\\n\\n myRef = createRef()\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/23.7411faba.chunk.js","module.exports = \"## Ref\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\nAdd `ref = {e => {this. anyNameYouWant = e} ` to the element, and then you can access the element using `this. anyNameYouWant` in the JS code. You can improve the performance of update in two ways:\\n\\n* Assignment ahead of time\\n* createRef\\n\\n### Assignment ahead of time\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n myRef = e => { this.h1 = e }\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n### createRef\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.myRef.current) //h1\\n }\\n\\n myRef = createRef()\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/ref.md\n// module id = 50\n// module chunks = 23"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([23],{49:function(n,e){n.exports="\n## Props\n\nTransfer data to sub elements through props, such as:\n\n```jsx\nimport { WeElement, define, render } from 'omi'\n\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.name}!</h1>\n )\n }\n})\n```\n\nUsing element:\n\n```jsx\n<my-element name=\"world\"></my-element>\n```\n\nYou can also pass any type of data to props:\n\n```jsx\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.myObj.name}!</h1>\n )\n }\n})\n```\n\nUsing element:\n\n```jsx\n<my-element myObj={{ name: 'world' }}></my-element>\n```\n\nYou can set the default value by the `static defaultProps` property\uff0cuse `static propTypes` to set the type:\n\n```jsx\ndefine('my-element', class extends WeElement {\n static defaultProps = {\n\t\tname: 'Omi',\n\t\tmyAge: 18\n\t}\n\n static propTypes = {\n\t\tname: String,\n\t\tmyAge: Number\n }\n \n render(props) {\n return (\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\n )\n }\n})\n```\n\nSpecial attention should be paid to adding `static propTypes` if your custom elements want to be used directly in other frameworks or without frameworks. For example, it can be used directly in the body:\n\n```html\n<body>\n <my-element name=\"dntzhang\" my-age=\"20\"></my-element>\n</body>\n```\n\n### Once Props\n\n```jsx\ndefine('my-element', class extends WeElement {\n install() {\n this.name = this.props.name\n }\n\n render() {\n return (\n <h1>Hello, {this.name}!</h1>\n )\n }\n})\n```\n\nNext time the parent component updated and changed props, it will not affect the component."}});
|
||||
//# sourceMappingURL=23.0d3df93c.chunk.js.map
|
||||
webpackJsonp([24],{49:function(n,e){n.exports="\n## Props\n\nTransfer data to sub elements through props, such as:\n\n```jsx\nimport { WeElement, define, render } from 'omi'\n\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.name}!</h1>\n )\n }\n})\n```\n\nUsing element:\n\n```jsx\n<my-element name=\"world\"></my-element>\n```\n\nYou can also pass any type of data to props:\n\n```jsx\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.myObj.name}!</h1>\n )\n }\n})\n```\n\nUsing element:\n\n```jsx\n<my-element myObj={{ name: 'world' }}></my-element>\n```\n\nYou can set the default value by the `static defaultProps` property\uff0cuse `static propTypes` to set the type:\n\n```jsx\ndefine('my-element', class extends WeElement {\n static defaultProps = {\n\t\tname: 'Omi',\n\t\tmyAge: 18\n\t}\n\n static propTypes = {\n\t\tname: String,\n\t\tmyAge: Number\n }\n \n render(props) {\n return (\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\n )\n }\n})\n```\n\nSpecial attention should be paid to adding `static propTypes` if your custom elements want to be used directly in other frameworks or without frameworks. For example, it can be used directly in the body:\n\n```html\n<body>\n <my-element name=\"dntzhang\" my-age=\"20\"></my-element>\n</body>\n```\n\n### Once Props\n\n```jsx\ndefine('my-element', class extends WeElement {\n install() {\n this.name = this.props.name\n }\n\n render() {\n return (\n <h1>Hello, {this.name}!</h1>\n )\n }\n})\n```\n\nNext time the parent component updated and changed props, it will not affect the component."}});
|
||||
//# sourceMappingURL=24.65c84326.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/23.0d3df93c.chunk.js","docs/en/props.md"],"names":["webpackJsonp","49","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/23.0d3df93c.chunk.js","sourcesContent":["webpackJsonp([23],{\n\n/***/ 49:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\\n## Props\\n\\nTransfer data to sub elements through props, such as:\\n\\n```jsx\\nimport { WeElement, define, render } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nUsing element:\\n\\n```jsx\\n<my-element name=\\\"world\\\"></my-element>\\n```\\n\\nYou can also pass any type of data to props:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.myObj.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nUsing element:\\n\\n```jsx\\n<my-element myObj={{ name: 'world' }}></my-element>\\n```\\n\\nYou can set the default value by the `static defaultProps` property，use `static propTypes` to set the type:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n\\t}\\n\\n static propTypes = {\\n\\t\\tname: String,\\n\\t\\tmyAge: Number\\n }\\n \\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\\n\\nSpecial attention should be paid to adding `static propTypes` if your custom elements want to be used directly in other frameworks or without frameworks. For example, it can be used directly in the body:\\n\\n```html\\n<body>\\n <my-element name=\\\"dntzhang\\\" my-age=\\\"20\\\"></my-element>\\n</body>\\n```\\n\\n### Once Props\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n install() {\\n this.name = this.props.name\\n }\\n\\n render() {\\n return (\\n <h1>Hello, {this.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nNext time the parent component updated and changed props, it will not affect the component.\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/23.0d3df93c.chunk.js","module.exports = \"\\n## Props\\n\\nTransfer data to sub elements through props, such as:\\n\\n```jsx\\nimport { WeElement, define, render } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nUsing element:\\n\\n```jsx\\n<my-element name=\\\"world\\\"></my-element>\\n```\\n\\nYou can also pass any type of data to props:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.myObj.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nUsing element:\\n\\n```jsx\\n<my-element myObj={{ name: 'world' }}></my-element>\\n```\\n\\nYou can set the default value by the `static defaultProps` property，use `static propTypes` to set the type:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n\\t}\\n\\n static propTypes = {\\n\\t\\tname: String,\\n\\t\\tmyAge: Number\\n }\\n \\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\\n\\nSpecial attention should be paid to adding `static propTypes` if your custom elements want to be used directly in other frameworks or without frameworks. For example, it can be used directly in the body:\\n\\n```html\\n<body>\\n <my-element name=\\\"dntzhang\\\" my-age=\\\"20\\\"></my-element>\\n</body>\\n```\\n\\n### Once Props\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n install() {\\n this.name = this.props.name\\n }\\n\\n render() {\\n return (\\n <h1>Hello, {this.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nNext time the parent component updated and changed props, it will not affect the component.\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/props.md\n// module id = 49\n// module chunks = 23"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/24.65c84326.chunk.js","docs/en/props.md"],"names":["webpackJsonp","49","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/24.65c84326.chunk.js","sourcesContent":["webpackJsonp([24],{\n\n/***/ 49:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\\n## Props\\n\\nTransfer data to sub elements through props, such as:\\n\\n```jsx\\nimport { WeElement, define, render } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nUsing element:\\n\\n```jsx\\n<my-element name=\\\"world\\\"></my-element>\\n```\\n\\nYou can also pass any type of data to props:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.myObj.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nUsing element:\\n\\n```jsx\\n<my-element myObj={{ name: 'world' }}></my-element>\\n```\\n\\nYou can set the default value by the `static defaultProps` property，use `static propTypes` to set the type:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n\\t}\\n\\n static propTypes = {\\n\\t\\tname: String,\\n\\t\\tmyAge: Number\\n }\\n \\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\\n\\nSpecial attention should be paid to adding `static propTypes` if your custom elements want to be used directly in other frameworks or without frameworks. For example, it can be used directly in the body:\\n\\n```html\\n<body>\\n <my-element name=\\\"dntzhang\\\" my-age=\\\"20\\\"></my-element>\\n</body>\\n```\\n\\n### Once Props\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n install() {\\n this.name = this.props.name\\n }\\n\\n render() {\\n return (\\n <h1>Hello, {this.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nNext time the parent component updated and changed props, it will not affect the component.\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/24.65c84326.chunk.js","module.exports = \"\\n## Props\\n\\nTransfer data to sub elements through props, such as:\\n\\n```jsx\\nimport { WeElement, define, render } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nUsing element:\\n\\n```jsx\\n<my-element name=\\\"world\\\"></my-element>\\n```\\n\\nYou can also pass any type of data to props:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.myObj.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nUsing element:\\n\\n```jsx\\n<my-element myObj={{ name: 'world' }}></my-element>\\n```\\n\\nYou can set the default value by the `static defaultProps` property，use `static propTypes` to set the type:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n\\t}\\n\\n static propTypes = {\\n\\t\\tname: String,\\n\\t\\tmyAge: Number\\n }\\n \\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\\n\\nSpecial attention should be paid to adding `static propTypes` if your custom elements want to be used directly in other frameworks or without frameworks. For example, it can be used directly in the body:\\n\\n```html\\n<body>\\n <my-element name=\\\"dntzhang\\\" my-age=\\\"20\\\"></my-element>\\n</body>\\n```\\n\\n### Once Props\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n install() {\\n this.name = this.props.name\\n }\\n\\n render() {\\n return (\\n <h1>Hello, {this.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nNext time the parent component updated and changed props, it will not affect the component.\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/props.md\n// module id = 49\n// module chunks = 24"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([24],{48:function(e,t){e.exports="## Ecosystem of Omi\n\n| **Project** | **Description** |\n| ------------------------------- | ----------------------------------- |\n| [omip](https://github.com/Tencent/omi/tree/master/packages/omip)| \u76f4\u63a5\u4f7f\u7528 Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f\u6216 H5 SPA\uff01\uff01\uff01|\n| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| Omi for old browsers(IE8+ and mobile browsers).|\n| [omix](https://github.com/Tencent/omi/tree/master/packages/omix)| Tiny size mini programe framework.|\n| [omi-chart](https://github.com/Tencent/omi/tree/master/packages/omi-chart)| Simple HTML5 Charts using chart-x tag.|\n| [md2site](https://tencent.github.io/omi/assets/md2site/)| Static Site Generator with markdown powered by Omio.|\n| [omi-mvvm](https://github.com/Tencent/omi/blob/master/tutorial/omi-mvvm.md)| MVVM comes back bravely with [mappingjs](https://github.com/Tencent/omi/tree/master/packages/mappingjs) strong support.|\n| [omi-html](https://github.com/Tencent/omi/tree/master/packages/omi-html)| Using [htm](https://github.com/developit/htm) in omi.|\n| [omi-30-seconds](https://github.com/Tencent/omi/tree/master/packages/omi-30-seconds)| Useful Omi snippets that you can understand in 30 seconds.|\n| [omi-canvas](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Perfect fusion of web components, jsx and canvas.|\n| [omi-mp](https://github.com/Tencent/omi/tree/master/packages/omi-mp)| Develop and generate Web HTML5 Single-Page Applications by wechat mini program. The output source is base on omi + [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router)|\n| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi official router in 1KB js. [\u2192 DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/) |\n| [omi-devtools](https://github.com/f/omi-devtools)| Browser DevTools extension |\n| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| Project scaffolding |\n| [omi-swiper](https://github.com/loo41/Omi-Swiper)| Omi + Swiper |\n| [omi-vscode](https://github.com/ZainChen/omi-vscode)| Vscode extension for omi, [Install now!](https://marketplace.visualstudio.com/items?itemName=ZainChen.omi) |\n| [omi-ex](https://github.com/Tencent/omi/tree/master/packages/omi-ex)| Omi.js extension(TypeScript) |\n| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi / [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) integration. Made css3 transform super easy in your Omi project.|\n| [omi-tap](https://github.com/Tencent/omi/releases/tag/v4.0.24)| Native tap event support(omi v4.0.24+\uff09|\n| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)|Support touch and gesture events in your Omi project.|\n| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)|Smooth scrolling, rotation, pull to refresh and any motion for the web.|\n| [omi-use](https://github.com/Tencent/omi/blob/master/docs/main-concepts.md#use)|React hooks like API|\n| [omi-native](https://github.com/Tencent/omi/tree/master/packages/omi-native)|Render web components to native|\n|[omi-i18n](https://github.com/i18next/omi-i18n)| Internationalization solution for omi.js using i18next ecosystem |\n| [omi-page](https://github.com/Tencent/omi/tree/master/packages/omi-page) |Tiny client-side router by [page](https://github.com/visionmedia/page.js)|\n\n## Examples\n\n* [\u2192 Omi Examples](https://github.com/Tencent/omi/tree/master/packages/omi/examples)\n* [\u2192 Omio Examples](https://github.com/Tencent/omi/tree/master/packages/omio/examples)"}});
|
||||
//# sourceMappingURL=24.6b1e5b87.chunk.js.map
|
||||
webpackJsonp([25],{48:function(e,t){e.exports="## Ecosystem of Omi\n\n| **Project** | **Description** |\n| ------------------------------- | ----------------------------------- |\n| [omip](https://github.com/Tencent/omi/tree/master/packages/omip)| \u76f4\u63a5\u4f7f\u7528 Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f\u6216 H5 SPA\uff01\uff01\uff01|\n| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| Omi for old browsers(IE8+ and mobile browsers).|\n| [omix](https://github.com/Tencent/omi/tree/master/packages/omix)| Tiny size mini programe framework.|\n| [omi-chart](https://github.com/Tencent/omi/tree/master/packages/omi-chart)| Simple HTML5 Charts using chart-x tag.|\n| [md2site](https://tencent.github.io/omi/assets/md2site/)| Static Site Generator with markdown powered by Omio.|\n| [omi-mvvm](https://github.com/Tencent/omi/blob/master/tutorial/omi-mvvm.md)| MVVM comes back bravely with [mappingjs](https://github.com/Tencent/omi/tree/master/packages/mappingjs) strong support.|\n| [omi-html](https://github.com/Tencent/omi/tree/master/packages/omi-html)| Using [htm](https://github.com/developit/htm) in omi.|\n| [omi-30-seconds](https://github.com/Tencent/omi/tree/master/packages/omi-30-seconds)| Useful Omi snippets that you can understand in 30 seconds.|\n| [omi-canvas](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Perfect fusion of web components, jsx and canvas.|\n| [omi-mp](https://github.com/Tencent/omi/tree/master/packages/omi-mp)| Develop and generate Web HTML5 Single-Page Applications by wechat mini program. The output source is base on omi + [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router)|\n| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi official router in 1KB js. [\u2192 DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/) |\n| [omi-devtools](https://github.com/f/omi-devtools)| Browser DevTools extension |\n| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| Project scaffolding |\n| [omi-swiper](https://github.com/loo41/Omi-Swiper)| Omi + Swiper |\n| [omi-vscode](https://github.com/ZainChen/omi-vscode)| Vscode extension for omi, [Install now!](https://marketplace.visualstudio.com/items?itemName=ZainChen.omi) |\n| [omi-ex](https://github.com/Tencent/omi/tree/master/packages/omi-ex)| Omi.js extension(TypeScript) |\n| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi / [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) integration. Made css3 transform super easy in your Omi project.|\n| [omi-tap](https://github.com/Tencent/omi/releases/tag/v4.0.24)| Native tap event support(omi v4.0.24+\uff09|\n| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)|Support touch and gesture events in your Omi project.|\n| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)|Smooth scrolling, rotation, pull to refresh and any motion for the web.|\n| [omi-use](https://github.com/Tencent/omi/blob/master/docs/main-concepts.md#use)|React hooks like API|\n| [omi-native](https://github.com/Tencent/omi/tree/master/packages/omi-native)|Render web components to native|\n|[omi-i18n](https://github.com/i18next/omi-i18n)| Internationalization solution for omi.js using i18next ecosystem |\n| [omi-page](https://github.com/Tencent/omi/tree/master/packages/omi-page) |Tiny client-side router by [page](https://github.com/visionmedia/page.js)|\n\n## Examples\n\n* [\u2192 Omi Examples](https://github.com/Tencent/omi/tree/master/packages/omi/examples)\n* [\u2192 Omio Examples](https://github.com/Tencent/omi/tree/master/packages/omio/examples)"}});
|
||||
//# sourceMappingURL=25.aa9268fc.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([25],{47:function(n,e){n.exports="# Omim\n\nCross-Frameworks components, powered by Material Design and [Omi](https://github.com/Tencent/omi).\n\n* [DOCS & REPL](https://tencent.github.io/omi/packages/omim/docs/build/index.html)\n\n\n\n## Features\n\n* Render by Custom Elements of Web Components\n* Any framework can use the components, such as Omi, React, Vue and Angular \n* Support both JSX and native HTML elements \n* Each element can be used independently\n* Super easy to change theme colors, fonts and rounded corners\n* Extended HTML capabilities, you can pass false attributes to elements through string `'0'` or string `'flase'`\n\n## Usage\n\n### Via script\n\n```html\n<script src=\"https://unpkg.com/omi\"><\/script>\n<script src=\"https://unpkg.com/@omim/core@latest/button/index.js\"><\/script>\n\n<m-button>I am button</m-button>\n```\n\n### Via npm\n\n``` bash\nnpm install @omim/core\n```\n\nThen:\n\n```js\nimport '@omim/core/button'\n```\n\nThen use the element in Omi, React, Vue or Angular:\n\n``` html\n<m-button>I am button</m-button>\n```\n\nIt can also be used in pure js:\n\n```js\nvar button = document.createElement('m-button')\nbutton.innerHTML = 'I am button'\ndocument.body.append(button)\nbutton.addEventListener('click', function () {\n console.log('Clicked!')\n})\n\n//or\n//document.body.innerHTML = '<m-button>I am button</m-button>'\n```\n\n## Change Theme\n\n```js\ndocument.body.style.setProperty('--mdc-theme-primary', 'red')\ndocument.body.style.setProperty('--mdc-theme-secondary', 'blue')\ndocument.body.style.setProperty('--mdc-shape-small-component-radius', '2px')\n```\n\nAll the config:\n\n```\n--mdc-theme-primary: #0072d9;\n--mdc-theme-secondary: #2170b8;\n--mdc-theme-error: #f5222d;\n--mdc-theme-surface: #ffffff;\n--mdc-theme-on-primary: #ffffff;\n--mdc-theme-on-secondary: #ffffff;\n--mdc-theme-on-error: #ffffff;\n--mdc-theme-on-surface: #000000;\n--mdc-theme-background: #ffffff;\n--mdc-shape-small-component-radius: 4px;\n--mdc-shape-medium-component-radius: 4px;\n--mdc-shape-large-component-radius: 0px;\n--mdc-typography--font-family: Roboto, sans-serif;\n```\n\n## HTML Extention \n\nYou can set boolean prop to false from markup by 0 or false string.\n\n```js\ndefine('my-element', class extends WeElement {\n static defaultProps = {\n show: true\n }\n\n static propTypes = {\n show: Boolean\n }\n\n render(props) {\n ...\n ...\n }\n})\n```\n\nUse:\n\n```html\n<my-element show=\"false\"></my-element>\n```\n\nor\n\n```html\n<my-element show=\"0\"></my-element>\n```\n\n## Contribution\n\n### CMD\n\nBuild component:\n\n```bash\nnpm run build -- component-name\n```\n\nBuild all components:\n\n```bash\nnpm run build-all\n```\n\nBuild demo:\n\n```bash\nnpm start demo-name\n```\n\nPublish:\n\n```bash\nnpm publish --access public\n```\n\n### Links\n\n* [material.io docs](https://material.io/develop/web/components/buttons/) \n* [material.io demo](https://material-components.github.io/material-components-web-catalog/#/) \n* [material-theme-builder](https://material-theme-builder.glitch.me/)\n* [material-components-web](https://github.com/material-components/material-components-web)\n* [material-icons](https://material.io/tools/icons/?style=baseline)\n"}});
|
||||
//# sourceMappingURL=25.1a80d358.chunk.js.map
|
||||
webpackJsonp([26],{47:function(n,e){n.exports="# Omim\n\nCross-Frameworks components, powered by Material Design and [Omi](https://github.com/Tencent/omi).\n\n* [DOCS & REPL](https://tencent.github.io/omi/packages/omim/docs/build/index.html)\n\n\n\n## Features\n\n* Render by Custom Elements of Web Components\n* Any framework can use the components, such as Omi, React, Vue and Angular \n* Support both JSX and native HTML elements \n* Each element can be used independently\n* Super easy to change theme colors, fonts and rounded corners\n* Extended HTML capabilities, you can pass false attributes to elements through string `'0'` or string `'flase'`\n\n## Usage\n\n### Via script\n\n```html\n<script src=\"https://unpkg.com/omi\"><\/script>\n<script src=\"https://unpkg.com/@omim/core@latest/button/index.js\"><\/script>\n\n<m-button>I am button</m-button>\n```\n\n### Via npm\n\n``` bash\nnpm install @omim/core\n```\n\nThen:\n\n```js\nimport '@omim/core/button'\n```\n\nThen use the element in Omi, React, Vue or Angular:\n\n``` html\n<m-button>I am button</m-button>\n```\n\nIt can also be used in pure js:\n\n```js\nvar button = document.createElement('m-button')\nbutton.innerHTML = 'I am button'\ndocument.body.append(button)\nbutton.addEventListener('click', function () {\n console.log('Clicked!')\n})\n\n//or\n//document.body.innerHTML = '<m-button>I am button</m-button>'\n```\n\n## Change Theme\n\n```js\ndocument.body.style.setProperty('--mdc-theme-primary', 'red')\ndocument.body.style.setProperty('--mdc-theme-secondary', 'blue')\ndocument.body.style.setProperty('--mdc-shape-small-component-radius', '2px')\n```\n\nAll the config:\n\n```\n--mdc-theme-primary: #0072d9;\n--mdc-theme-secondary: #2170b8;\n--mdc-theme-error: #f5222d;\n--mdc-theme-surface: #ffffff;\n--mdc-theme-on-primary: #ffffff;\n--mdc-theme-on-secondary: #ffffff;\n--mdc-theme-on-error: #ffffff;\n--mdc-theme-on-surface: #000000;\n--mdc-theme-background: #ffffff;\n--mdc-shape-small-component-radius: 4px;\n--mdc-shape-medium-component-radius: 4px;\n--mdc-shape-large-component-radius: 0px;\n--mdc-typography--font-family: Roboto, sans-serif;\n```\n\n## HTML Extention \n\nYou can set boolean prop to false from markup by 0 or false string.\n\n```js\ndefine('my-element', class extends WeElement {\n static defaultProps = {\n show: true\n }\n\n static propTypes = {\n show: Boolean\n }\n\n render(props) {\n ...\n ...\n }\n})\n```\n\nUse:\n\n```html\n<my-element show=\"false\"></my-element>\n```\n\nor\n\n```html\n<my-element show=\"0\"></my-element>\n```\n\n## Contribution\n\n### CMD\n\nBuild component:\n\n```bash\nnpm run build -- component-name\n```\n\nBuild all components:\n\n```bash\nnpm run build-all\n```\n\nBuild demo:\n\n```bash\nnpm start demo-name\n```\n\nPublish:\n\n```bash\nnpm publish --access public\n```\n\n### Links\n\n* [material.io docs](https://material.io/develop/web/components/buttons/) \n* [material.io demo](https://material-components.github.io/material-components-web-catalog/#/) \n* [material-theme-builder](https://material-theme-builder.glitch.me/)\n* [material-components-web](https://github.com/material-components/material-components-web)\n* [material-icons](https://material.io/tools/icons/?style=baseline)\n"}});
|
||||
//# sourceMappingURL=26.76e4b54d.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([26],{46:function(e,n){e.exports="## Lifecycle\n\n| Lifecycle method | When it gets called |\n| ---------------- | -------------------------------------------- |\n| `install` | before the component gets mounted to the DOM |\n| `installed` | after the component gets mounted to the DOM |\n| `uninstall` | prior to removal from the DOM |\n| `beforeUpdate` | before update |\n| `updated` | after update |\n| `beforeRender` | before `render()` |\n| `receiveProps` | parent element re-render will trigger it, `return false` will prevent update action |\n\nFor example:\n\n```js\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-timer', class extends WeElement {\n data = {\n seconds: 0\n }\n\n tick() {\n this.data.seconds++\n this.update()\n }\n\n install() {\n this.interval = setInterval(() => this.tick(), 1000)\n }\n\n uninstall() {\n clearInterval(this.interval)\n }\n\n render() {\n return <div>Seconds: {this.data.seconds}</div>\n }\n})\n\nrender(<my-timer />, 'body')\n```\n"}});
|
||||
//# sourceMappingURL=26.7e140343.chunk.js.map
|
||||
webpackJsonp([27],{46:function(e,n){e.exports="## Lifecycle\n\n| Lifecycle method | When it gets called |\n| ---------------- | -------------------------------------------- |\n| `install` | before the component gets mounted to the DOM |\n| `installed` | after the component gets mounted to the DOM |\n| `uninstall` | prior to removal from the DOM |\n| `beforeUpdate` | before update |\n| `updated` | after update |\n| `beforeRender` | before `render()` |\n| `receiveProps` | parent element re-render will trigger it, `return false` will prevent update action |\n\nFor example:\n\n```js\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-timer', class extends WeElement {\n data = {\n seconds: 0\n }\n\n tick() {\n this.data.seconds++\n this.update()\n }\n\n install() {\n this.interval = setInterval(() => this.tick(), 1000)\n }\n\n uninstall() {\n clearInterval(this.interval)\n }\n\n render() {\n return <div>Seconds: {this.data.seconds}</div>\n }\n})\n\nrender(<my-timer />, 'body')\n```\n"}});
|
||||
//# sourceMappingURL=27.28e692a9.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/26.7e140343.chunk.js","docs/en/lifecycle.md"],"names":["webpackJsonp","46","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/26.7e140343.chunk.js","sourcesContent":["webpackJsonp([26],{\n\n/***/ 46:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Lifecycle\\n\\n| Lifecycle method | When it gets called |\\n| ---------------- | -------------------------------------------- |\\n| `install` | before the component gets mounted to the DOM |\\n| `installed` | after the component gets mounted to the DOM |\\n| `uninstall` | prior to removal from the DOM |\\n| `beforeUpdate` | before update |\\n| `updated` | after update |\\n| `beforeRender` | before `render()` |\\n| `receiveProps` | parent element re-render will trigger it, `return false` will prevent update action |\\n\\nFor example:\\n\\n```js\\nimport { render, WeElement, define } from 'omi'\\n\\ndefine('my-timer', class extends WeElement {\\n data = {\\n seconds: 0\\n }\\n\\n tick() {\\n this.data.seconds++\\n this.update()\\n }\\n\\n install() {\\n this.interval = setInterval(() => this.tick(), 1000)\\n }\\n\\n uninstall() {\\n clearInterval(this.interval)\\n }\\n\\n render() {\\n return <div>Seconds: {this.data.seconds}</div>\\n }\\n})\\n\\nrender(<my-timer />, 'body')\\n```\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/26.7e140343.chunk.js","module.exports = \"## Lifecycle\\n\\n| Lifecycle method | When it gets called |\\n| ---------------- | -------------------------------------------- |\\n| `install` | before the component gets mounted to the DOM |\\n| `installed` | after the component gets mounted to the DOM |\\n| `uninstall` | prior to removal from the DOM |\\n| `beforeUpdate` | before update |\\n| `updated` | after update |\\n| `beforeRender` | before `render()` |\\n| `receiveProps` | parent element re-render will trigger it, `return false` will prevent update action |\\n\\nFor example:\\n\\n```js\\nimport { render, WeElement, define } from 'omi'\\n\\ndefine('my-timer', class extends WeElement {\\n data = {\\n seconds: 0\\n }\\n\\n tick() {\\n this.data.seconds++\\n this.update()\\n }\\n\\n install() {\\n this.interval = setInterval(() => this.tick(), 1000)\\n }\\n\\n uninstall() {\\n clearInterval(this.interval)\\n }\\n\\n render() {\\n return <div>Seconds: {this.data.seconds}</div>\\n }\\n})\\n\\nrender(<my-timer />, 'body')\\n```\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/lifecycle.md\n// module id = 46\n// module chunks = 26"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/27.28e692a9.chunk.js","docs/en/lifecycle.md"],"names":["webpackJsonp","46","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/27.28e692a9.chunk.js","sourcesContent":["webpackJsonp([27],{\n\n/***/ 46:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Lifecycle\\n\\n| Lifecycle method | When it gets called |\\n| ---------------- | -------------------------------------------- |\\n| `install` | before the component gets mounted to the DOM |\\n| `installed` | after the component gets mounted to the DOM |\\n| `uninstall` | prior to removal from the DOM |\\n| `beforeUpdate` | before update |\\n| `updated` | after update |\\n| `beforeRender` | before `render()` |\\n| `receiveProps` | parent element re-render will trigger it, `return false` will prevent update action |\\n\\nFor example:\\n\\n```js\\nimport { render, WeElement, define } from 'omi'\\n\\ndefine('my-timer', class extends WeElement {\\n data = {\\n seconds: 0\\n }\\n\\n tick() {\\n this.data.seconds++\\n this.update()\\n }\\n\\n install() {\\n this.interval = setInterval(() => this.tick(), 1000)\\n }\\n\\n uninstall() {\\n clearInterval(this.interval)\\n }\\n\\n render() {\\n return <div>Seconds: {this.data.seconds}</div>\\n }\\n})\\n\\nrender(<my-timer />, 'body')\\n```\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/27.28e692a9.chunk.js","module.exports = \"## Lifecycle\\n\\n| Lifecycle method | When it gets called |\\n| ---------------- | -------------------------------------------- |\\n| `install` | before the component gets mounted to the DOM |\\n| `installed` | after the component gets mounted to the DOM |\\n| `uninstall` | prior to removal from the DOM |\\n| `beforeUpdate` | before update |\\n| `updated` | after update |\\n| `beforeRender` | before `render()` |\\n| `receiveProps` | parent element re-render will trigger it, `return false` will prevent update action |\\n\\nFor example:\\n\\n```js\\nimport { render, WeElement, define } from 'omi'\\n\\ndefine('my-timer', class extends WeElement {\\n data = {\\n seconds: 0\\n }\\n\\n tick() {\\n this.data.seconds++\\n this.update()\\n }\\n\\n install() {\\n this.interval = setInterval(() => this.tick(), 1000)\\n }\\n\\n uninstall() {\\n clearInterval(this.interval)\\n }\\n\\n render() {\\n return <div>Seconds: {this.data.seconds}</div>\\n }\\n})\\n\\nrender(<my-timer />, 'body')\\n```\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/lifecycle.md\n// module id = 46\n// module chunks = 27"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([27],{45:function(n,e){n.exports="## JSX\n\nJSX is the best UI expression with the least grammatical noise, the strongest expressive ability and Turing complete. The template engine is not complete, the template string is Turing complete, but the grammatical noise is too big. \n\n```js\nJSX > JS\n```\n\n## Hello JSX\n\nWith JSX, closed XML tags can be written in JS to express DOM structures, such as:\n\n```jsx\nconst element = <h1>Hello, world!</h1>\n```\n\n## Data binding\n\nVariables or expressions, or JS statement blocks, are wrapped in single parentheses according to the binding:\n\n```jsx\n<h1>{user.name}</h1>\n```\n\nTry it in Omi's render method:\n\n```jsx\ndefine('my-element', class extends WeElement {\n render(props) {\n return <h1>{props.name}</h1>\n }\n})\n```\n\nUsing element:\n\n```jsx\n<my-element name='dntzhang' />\n```\n\nYou can also write expressions:\n\n```jsx\n<h1>{user.age > 18 ? 'Adult' : 'Minor'}<h1>\n```\n\nJSX can also be embedded in expressions:\n\n```jsx\n<h1>{ user.age > 18 ? <div>Adult</div> : <div>Minor</div> }<h1>\n```\n\nThe above three elements are actually if else. If only if, you can:\n\n```jsx\n<h1>{ user.age > 18 && <div>\u6210\u5e74</div> }<h1>\n```\n\nPowerful!\n\n## List rendering\n\nDatasource:\n\n```js\nconst arr = [{\n message: 'foo',\n}, {\n message: 'bar'\n}]\n```\n\nJSX rendering:\n\n```jsx\n<ul>\n {arr.map(item =>\n <li>{item.message}</li>\n )}\n</ul>\n```\n\nEquate to:\n\n```jsx\n<ul>\n {\n arr.map(item => {\n return <li>{item.message}</li>\n })\n }\n</ul>\n```\n\nIf it's a `{}'package, you need `return'. If you need an index:\n\n```jsx\n<ul>\n {arr.map((item, index) =>\n <li>{index}: {item.message}</li>\n )}\n</ul>\n```\n\n## Comprehensive example\n\nHere is a ninety-nine multiplication table:\n\n```jsx\nimport { define, render, WeElement } from 'omi'\n\ndefine('my-app', class extends WeElement {\n\n static css = `span{\n display: inline-block;\n width: 68px;\n }`\n\n render(props) {\n return (\n <div>\n {props.numbers.map((a, indexA) =>\n <div>\n {\n props.numbers.map((b, indexB) => {\n return indexA <= indexB && <span>{a}*{b}={a * b} </span>\n })\n }\n </div>\n )}\n </div>\n )\n }\n})\n\nrender(<my-app numbers={[1, 2, 3, 4, 5, 6, 7, 8, 9]} />, 'body')\n```\n\nResult display:\n\n\n\n[\u2192 Online Demo](https://tencent.github.io/omi/packages/omi/examples/99/)"}});
|
||||
//# sourceMappingURL=27.1d911d63.chunk.js.map
|
||||
webpackJsonp([28],{45:function(n,e){n.exports="## JSX\n\nJSX is the best UI expression with the least grammatical noise, the strongest expressive ability and Turing complete. The template engine is not complete, the template string is Turing complete, but the grammatical noise is too big. \n\n```js\nJSX > JS\n```\n\n## Hello JSX\n\nWith JSX, closed XML tags can be written in JS to express DOM structures, such as:\n\n```jsx\nconst element = <h1>Hello, world!</h1>\n```\n\n## Data binding\n\nVariables or expressions, or JS statement blocks, are wrapped in single parentheses according to the binding:\n\n```jsx\n<h1>{user.name}</h1>\n```\n\nTry it in Omi's render method:\n\n```jsx\ndefine('my-element', class extends WeElement {\n render(props) {\n return <h1>{props.name}</h1>\n }\n})\n```\n\nUsing element:\n\n```jsx\n<my-element name='dntzhang' />\n```\n\nYou can also write expressions:\n\n```jsx\n<h1>{user.age > 18 ? 'Adult' : 'Minor'}<h1>\n```\n\nJSX can also be embedded in expressions:\n\n```jsx\n<h1>{ user.age > 18 ? <div>Adult</div> : <div>Minor</div> }<h1>\n```\n\nThe above three elements are actually if else. If only if, you can:\n\n```jsx\n<h1>{ user.age > 18 && <div>\u6210\u5e74</div> }<h1>\n```\n\nPowerful!\n\n## List rendering\n\nDatasource:\n\n```js\nconst arr = [{\n message: 'foo',\n}, {\n message: 'bar'\n}]\n```\n\nJSX rendering:\n\n```jsx\n<ul>\n {arr.map(item =>\n <li>{item.message}</li>\n )}\n</ul>\n```\n\nEquate to:\n\n```jsx\n<ul>\n {\n arr.map(item => {\n return <li>{item.message}</li>\n })\n }\n</ul>\n```\n\nIf it's a `{}'package, you need `return'. If you need an index:\n\n```jsx\n<ul>\n {arr.map((item, index) =>\n <li>{index}: {item.message}</li>\n )}\n</ul>\n```\n\n## Comprehensive example\n\nHere is a ninety-nine multiplication table:\n\n```jsx\nimport { define, render, WeElement } from 'omi'\n\ndefine('my-app', class extends WeElement {\n\n static css = `span{\n display: inline-block;\n width: 68px;\n }`\n\n render(props) {\n return (\n <div>\n {props.numbers.map((a, indexA) =>\n <div>\n {\n props.numbers.map((b, indexB) => {\n return indexA <= indexB && <span>{a}*{b}={a * b} </span>\n })\n }\n </div>\n )}\n </div>\n )\n }\n})\n\nrender(<my-app numbers={[1, 2, 3, 4, 5, 6, 7, 8, 9]} />, 'body')\n```\n\nResult display:\n\n\n\n[\u2192 Online Demo](https://tencent.github.io/omi/packages/omi/examples/99/)"}});
|
||||
//# sourceMappingURL=28.252b1f2a.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([28],{44:function(n,e){n.exports="## What's Omi \uff1f\n\nOmi (pronounced /\u02c8om\u026a/) is cross-frameworks framework base on Web Component, you can also use omio compatible IE8+ with the same grammar. One framework, Mobile & desktop & mini program.\n\n<em> Omi looks really neat!<br> </em>\n\u3000\u3000\u3000\u3000\u2014 [Jason Miller (Creator of Preact)](https://twitter.com/_developit/)\n\n<em> I really like the trend towards \"frameworks\" that:<br><br>\"export default class WeElement extends HTMLElement {..}\"<br> <br>This one, Omi, is from Tencent.</em> \n\u3000\u3000\u3000\u3000\u2014 [Dion Almaer](https://twitter.com/dalmaer/)\n\n## Add Omi in One Minute\n\n```jsx {8-11}\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-counter', class extends WeElement {\n data = {\n count: 1\n }\n\n static css = `\n span{\n color: red;\n }`\n\n sub = () => {\n this.data.count--\n this.update()\n }\n\n add = () => {\n this.data.count++\n this.update()\n }\n\n render() {\n return (\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.data.count}</span>\n <button onClick={this.add}>+</button>\n </div>\n )\n }\n})\n\nrender(<my-counter />, 'body')\n```\n\nYou can also use `my-counter` tag directly in HTML\uff1a\n\n```jsx\n<body>\n <my-counter></my-counter>\n</body>\n```\n\nLooking at the highlighted part above, you can style the components. For example, the scope of the span above is only within the components, and it does not pollute other components. So far you have successfully started Omi! You learned:\n\n* Add **structure** for components, such as JSX writing structure above\n* Add **behavior** to the component, such as the `onClick` binding event above\n* Add **style** to the component, such as `static css` above\n* Rendering components to body, of course, can also render components to any other component\n\n## Stateless View & Store System\n\n```jsx\nimport { define, render } from 'omi'\n\nclass Store {\n data = {\n count: 1\n }\n sub = () => {\n this.data.count--\n }\n add = () => {\n this.data.count++\n }\n}\n\ndefine('my-counter', _ => (\n <div>\n <button onClick={_.store.sub}>-</button>\n <span>{_.store.data.count}</span>\n <button onClick={_.store.add}>+</button>\n </div>\n), {\n use: ['count'], \n //or using useSelf, useSelf will update self only, exclude children components\n //useSelf: ['count'], \n css: `span { color: red; }`,\n installed() {\n console.log('installed')\n }\n })\n\nrender(<my-counter />, 'body', new Store)\n```\n\nGetting started, Congratulations!"}});
|
||||
//# sourceMappingURL=28.b709e42a.chunk.js.map
|
||||
webpackJsonp([29],{44:function(n,e){n.exports="## What's Omi \uff1f\n\nOmi (pronounced /\u02c8om\u026a/) is cross-frameworks framework base on Web Component, you can also use omio compatible IE8+ with the same grammar. One framework, Mobile & desktop & mini program.\n\n<em> Omi looks really neat!<br> </em>\n\u3000\u3000\u3000\u3000\u2014 [Jason Miller (Creator of Preact)](https://twitter.com/_developit/)\n\n<em> I really like the trend towards \"frameworks\" that:<br><br>\"export default class WeElement extends HTMLElement {..}\"<br> <br>This one, Omi, is from Tencent.</em> \n\u3000\u3000\u3000\u3000\u2014 [Dion Almaer](https://twitter.com/dalmaer/)\n\n## Add Omi in One Minute\n\n```jsx {8-11}\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-counter', class extends WeElement {\n data = {\n count: 1\n }\n\n static css = `\n span{\n color: red;\n }`\n\n sub = () => {\n this.data.count--\n this.update()\n }\n\n add = () => {\n this.data.count++\n this.update()\n }\n\n render() {\n return (\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.data.count}</span>\n <button onClick={this.add}>+</button>\n </div>\n )\n }\n})\n\nrender(<my-counter />, 'body')\n```\n\nYou can also use `my-counter` tag directly in HTML\uff1a\n\n```jsx\n<body>\n <my-counter></my-counter>\n</body>\n```\n\nLooking at the highlighted part above, you can style the components. For example, the scope of the span above is only within the components, and it does not pollute other components. So far you have successfully started Omi! You learned:\n\n* Add **structure** for components, such as JSX writing structure above\n* Add **behavior** to the component, such as the `onClick` binding event above\n* Add **style** to the component, such as `static css` above\n* Rendering components to body, of course, can also render components to any other component\n\n## Stateless View & Store System\n\n```jsx\nimport { define, render } from 'omi'\n\nclass Store {\n data = {\n count: 1\n }\n sub = () => {\n this.data.count--\n }\n add = () => {\n this.data.count++\n }\n}\n\ndefine('my-counter', _ => (\n <div>\n <button onClick={_.store.sub}>-</button>\n <span>{_.store.data.count}</span>\n <button onClick={_.store.add}>+</button>\n </div>\n), {\n use: ['count'], \n //or using useSelf, useSelf will update self only, exclude children components\n //useSelf: ['count'], \n css: `span { color: red; }`,\n installed() {\n console.log('installed')\n }\n })\n\nrender(<my-counter />, 'body', new Store)\n```\n\nGetting started, Congratulations!"}});
|
||||
//# sourceMappingURL=29.91a5c5cc.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([3],{69:function(n,e){n.exports="# omi-router\n\nomi-router \u662f [Omi](https://tencent.github.io/omi/) \u4e13\u5c5e\u7684router\u63d2\u4ef6\uff0c\u6587\u4ef6\u5c3a\u5bf8\u8f7b\u91cf\uff0c\u4f7f\u7528\u7b80\u4fbf\uff0c\u529f\u80fd\u5f3a\u5927\u3002\u7528\u4e8eOmi\u5236\u4f5cWeb\u5355\u9875\u5e94\u7528\u7684\u9996\u9009\u89e3\u51b3\u65b9\u6848\u3002\n\n[\u2192 DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)\n\n\u5355\u9875\u7684\u597d\u5904\u4e5f\u662f\u975e\u5e38\u660e\u663e:\n\n* \u65e0\u5237\u65b0\u52a0\u8f7d\u9875\u9762\u5185\u5bb9\n* \u65e0\u5237\u65b0\u524d\u8fdb\u548c\u540e\u9000\u9875\u9762\n* \u8def\u7531\u4e2d\u7684\u67d0\u4e2a\u94fe\u63a5\u7684\u4f20\u64ad\u548c\u5206\u4eab\uff08\u522b\u4eba\u770b\u5230\u7684\u548c\u4f60\u4e00\u6837\u7684\u72b6\u6001\uff09\n* \u8f6c\u573a\u52a8\u753b\uff08a\u6807\u7b7e\u8df3\u8f6c\u4e0d\u4ec5\u8981\u767d\u5c4f\uff0c\u800c\u4e14\u6ca1\u6709\u8f6c\u573a\u52a8\u753b\uff09\n* \u8d44\u6e90\u590d\u7528\uff08\u5355\u9875\u4e2d\u7684\u8bb8\u591a\u8d44\u6e90\u4e00\u5b9a\u662f\u53ef\u4ee5\u5171\u7528\u7684\uff0c\u6700\u5178\u578b\u7684\u6bd4\u5982omi.js\uff0c\u5982\u679c\u4e0d\u662f\u5355\u9875\u7684\u8bdd\uff0c\u4f60\u9700\u8981\u52a0\u8f7d\u591a\u6b21\uff09\n\n\u597d\u4e86\uff0c\u597d\u5904\u8fd9\u4e48\u591a\uff0c\u770b\u770b\u600e\u4e48\u5b89\u88c5\u4f7f\u7528\u5427~~\n\n## \u5b89\u88c5\n\n### NPM\n\n```js\nnpm install omi-router\n```\n\n## \u5f00\u59cb\n\n```js\n//\u4f60\u53ef\u4ee5\u5728\u5168\u5c40\u8bbf\u95ee\u5230 route\nimport 'omi-router'\nimport { define, WeElement, render } from 'omi'\nimport './about'\nimport './home'\nimport './user'\nimport './user-list'\n\ndefine('my-app', class extends WeElement {\n\n data = { tag: 'my-home' }\n\n install() {\n\n route('/', () => {\n this.data.tag = 'my-home'\n this.update()\n })\n\n route('/about', (evt) => {\n console.log(evt.query)\n this.data.tag = 'my-about'\n this.update()\n })\n\n route('/user-list', () => {\n this.data.tag = 'user-list'\n this.update()\n })\n\n route('/user/:name/category/:category', (evt) => {\n this.data.tag = 'my-user'\n this.data.params = evt.params\n this.update()\n })\n\n route('*', function () {\n console.log('not found')\n })\n\n route.before = (evt) => {\n console.log('before')\n //prevent route when return false\n //return false\n }\n\n route.after = (evt) => {\n console.log('after')\n }\n }\n\n onClick = () => {\n route.to('/user/vorshen/category/html')\n }\n\n render(props, data) {\n return (\n <div>\n <ul>\n <li><a href=\"#/\" >Home</a></li>\n <li><a href=\"#/about\" >About</a></li>\n <li><a href=\"#/user-list\" >UserList</a></li>\n <li><a href=\"#/about?name=dntzhang&age=18\" >About Dntzhang</a></li>\n </ul>\n <div id=\"view\">\n <data.tag params={data.params} />\n </div>\n <div><button onClick={this.onClick}>Test route.to</button></div>\n </div>\n )\n }\n})\n\nrender(<my-app />, \"#container\")\n```\n\n## \u52a8\u6001\u5339\u914d\n\n| \u6a21\u5f0f | \u5339\u914d\u8def\u5f84 | route.params |\n|---------|------|--------|\n| /user/:name | /user/dntzhang | `{ name: 'dntzhang' }` |\n| /user/:name/category/:category | /user/dntzhang/category/js | `{ name: 'dntzhang', category: 'js' }` |\n\n\u6ce8\u610f\uff1a \u5982\u679c hash \u4e3a\u7a7a\uff0c\u4f1a\u81ea\u52a8\u88ab\u8bc6\u522b\u4e3a `/`\u3002\n\n## \u53e6\u4e00\u79cd\u643a\u5e26\u67e5\u8be2\u53c2\u6570\u65b9\u6cd5\n\n```html\n<li><a href=\"#/about?name=dntzhang&age=18\" >About</a></li>\n```\n\n```js\nroute('/about', (evt) => {\n //\u70b9\u51fb\u4e0a\u9762\u7684\u6807\u7b7e\u4f1a\u8f93\u51fa { name: 'dntzhang', age : '18' } \n console.log(evt.query)\n})\n```\n\n## \u643a\u5e26 JSON Data\n\n```js\nroute.to('/about',(evt) => {\n //{ a: 1 }\n console.log(evt.data)\n})\nroute.to('/about', { a: 1 })\n```\n\n### \u5730\u5740\n\n* [\u5728\u7ebf\u6f14\u793a\u5730\u5740](https://tencent.github.io/omi/packages/omi-router/examples/simple/)\n* [\u6e90\u7801\u5730\u5740](https://github.com/Tencent/omi/tree/master/packages/omi-router/examples/simple)\n\n## License\nThis content is released under the [MIT](http://opensource.org/licenses/MIT) License.\n"}});
|
||||
//# sourceMappingURL=3.5c65f2d1.chunk.js.map
|
||||
webpackJsonp([3],{70:function(n,e){n.exports="# omi-router\n\nomi-router \u662f [Omi](https://tencent.github.io/omi/) \u4e13\u5c5e\u7684router\u63d2\u4ef6\uff0c\u6587\u4ef6\u5c3a\u5bf8\u8f7b\u91cf\uff0c\u4f7f\u7528\u7b80\u4fbf\uff0c\u529f\u80fd\u5f3a\u5927\u3002\u7528\u4e8eOmi\u5236\u4f5cWeb\u5355\u9875\u5e94\u7528\u7684\u9996\u9009\u89e3\u51b3\u65b9\u6848\u3002\n\n[\u2192 DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)\n\n\u5355\u9875\u7684\u597d\u5904\u4e5f\u662f\u975e\u5e38\u660e\u663e:\n\n* \u65e0\u5237\u65b0\u52a0\u8f7d\u9875\u9762\u5185\u5bb9\n* \u65e0\u5237\u65b0\u524d\u8fdb\u548c\u540e\u9000\u9875\u9762\n* \u8def\u7531\u4e2d\u7684\u67d0\u4e2a\u94fe\u63a5\u7684\u4f20\u64ad\u548c\u5206\u4eab\uff08\u522b\u4eba\u770b\u5230\u7684\u548c\u4f60\u4e00\u6837\u7684\u72b6\u6001\uff09\n* \u8f6c\u573a\u52a8\u753b\uff08a\u6807\u7b7e\u8df3\u8f6c\u4e0d\u4ec5\u8981\u767d\u5c4f\uff0c\u800c\u4e14\u6ca1\u6709\u8f6c\u573a\u52a8\u753b\uff09\n* \u8d44\u6e90\u590d\u7528\uff08\u5355\u9875\u4e2d\u7684\u8bb8\u591a\u8d44\u6e90\u4e00\u5b9a\u662f\u53ef\u4ee5\u5171\u7528\u7684\uff0c\u6700\u5178\u578b\u7684\u6bd4\u5982omi.js\uff0c\u5982\u679c\u4e0d\u662f\u5355\u9875\u7684\u8bdd\uff0c\u4f60\u9700\u8981\u52a0\u8f7d\u591a\u6b21\uff09\n\n\u597d\u4e86\uff0c\u597d\u5904\u8fd9\u4e48\u591a\uff0c\u770b\u770b\u600e\u4e48\u5b89\u88c5\u4f7f\u7528\u5427~~\n\n## \u5b89\u88c5\n\n### NPM\n\n```js\nnpm install omi-router\n```\n\n## \u5f00\u59cb\n\n```js\n//\u4f60\u53ef\u4ee5\u5728\u5168\u5c40\u8bbf\u95ee\u5230 route\nimport 'omi-router'\nimport { define, WeElement, render } from 'omi'\nimport './about'\nimport './home'\nimport './user'\nimport './user-list'\n\ndefine('my-app', class extends WeElement {\n\n data = { tag: 'my-home' }\n\n install() {\n\n route('/', () => {\n this.data.tag = 'my-home'\n this.update()\n })\n\n route('/about', (evt) => {\n console.log(evt.query)\n this.data.tag = 'my-about'\n this.update()\n })\n\n route('/user-list', () => {\n this.data.tag = 'user-list'\n this.update()\n })\n\n route('/user/:name/category/:category', (evt) => {\n this.data.tag = 'my-user'\n this.data.params = evt.params\n this.update()\n })\n\n route('*', function () {\n console.log('not found')\n })\n\n route.before = (evt) => {\n console.log('before')\n //prevent route when return false\n //return false\n }\n\n route.after = (evt) => {\n console.log('after')\n }\n }\n\n onClick = () => {\n route.to('/user/vorshen/category/html')\n }\n\n render(props, data) {\n return (\n <div>\n <ul>\n <li><a href=\"#/\" >Home</a></li>\n <li><a href=\"#/about\" >About</a></li>\n <li><a href=\"#/user-list\" >UserList</a></li>\n <li><a href=\"#/about?name=dntzhang&age=18\" >About Dntzhang</a></li>\n </ul>\n <div id=\"view\">\n <data.tag params={data.params} />\n </div>\n <div><button onClick={this.onClick}>Test route.to</button></div>\n </div>\n )\n }\n})\n\nrender(<my-app />, \"#container\")\n```\n\n## \u52a8\u6001\u5339\u914d\n\n| \u6a21\u5f0f | \u5339\u914d\u8def\u5f84 | route.params |\n|---------|------|--------|\n| /user/:name | /user/dntzhang | `{ name: 'dntzhang' }` |\n| /user/:name/category/:category | /user/dntzhang/category/js | `{ name: 'dntzhang', category: 'js' }` |\n\n\u6ce8\u610f\uff1a \u5982\u679c hash \u4e3a\u7a7a\uff0c\u4f1a\u81ea\u52a8\u88ab\u8bc6\u522b\u4e3a `/`\u3002\n\n## \u53e6\u4e00\u79cd\u643a\u5e26\u67e5\u8be2\u53c2\u6570\u65b9\u6cd5\n\n```html\n<li><a href=\"#/about?name=dntzhang&age=18\" >About</a></li>\n```\n\n```js\nroute('/about', (evt) => {\n //\u70b9\u51fb\u4e0a\u9762\u7684\u6807\u7b7e\u4f1a\u8f93\u51fa { name: 'dntzhang', age : '18' } \n console.log(evt.query)\n})\n```\n\n## \u643a\u5e26 JSON Data\n\n```js\nroute.to('/about',(evt) => {\n //{ a: 1 }\n console.log(evt.data)\n})\nroute.to('/about', { a: 1 })\n```\n\n### \u5730\u5740\n\n* [\u5728\u7ebf\u6f14\u793a\u5730\u5740](https://tencent.github.io/omi/packages/omi-router/examples/simple/)\n* [\u6e90\u7801\u5730\u5740](https://github.com/Tencent/omi/tree/master/packages/omi-router/examples/simple)\n\n## License\nThis content is released under the [MIT](http://opensource.org/licenses/MIT) License.\n"}});
|
||||
//# sourceMappingURL=3.43c90a31.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([29],{43:function(n,i){n.exports='## Installation \n\nSimply download and include with `<script>`. Omi will be registered as a global variable.\n\n* [Omi Development Version](https://unpkg.com/omi@latest/dist/omi.js)\n* [Omi Production Version](https://unpkg.com/omi@latest/dist/omi.min.js)\n\nInstall via npm:\n\n```\nnpm i omi\n```\n\nIf you need to be compatible with IE8+, you can choose omio, which has almost the same API as omi, and Omi will be registered as a global variable.\n\n* [Omio Development Version](https://unpkg.com/omio@latest/dist/omi.js)\n* [Omio Production Version](https://unpkg.com/omi@latest/dist/omi.min.js)\n\nInstall via npm:\n\n```\nnpm i omio\n```\n\n## CLI\n\nOmi provides the official CLI. You don\'t need to learn how to configure webpack, Babel or TypeScript. CLI helps you configure everything and provides various templates for different project types.\n\n```bash\n$ npm i omi-cli -g # install cli\n$ omi init my-app # init project\n$ cd my-app \n$ npm start # develop\n$ npm run build # release\n```\n\n> `npx omi-cli init my-app` is also supported(npm v5.2.0+).\n\nDirectory description:\n\n```\n\u251c\u2500 config\n\u251c\u2500 public\n\u251c\u2500 scripts\n\u251c\u2500 src\n\u2502 \u251c\u2500 assets\n\u2502 \u251c\u2500 elements //Store all custom elements\n\u2502 \u251c\u2500 store //Store all this store of pages\n\u2502 \u251c\u2500 admin.js //Entry js of compiler\uff0cwill build to admin.html\n\u2502 \u2514\u2500 index.js //Entry js of compiler\uff0cwill build to index.html\n```\n\n\n### Scripts\n\n```json\n"scripts": {\n "start": "node scripts/start.js",\n "build": "PUBLIC_URL=. node scripts/build.js",\n "build-windows": "set PUBLIC_URL=.&& node scripts/build.js",\n "fix": "eslint src --fix"\n}\n```\n\nYou can set up the PUBLIC_URL, such as\uff1a\n\n```json\n...\n"build": "PUBLIC_URL=https://your.url.com/sub node scripts/build.js",\n"build-windows": "set PUBLIC_URL=https://your.url.com/sub&& node scripts/build.js",\n...\n```\n\n### Switch omi and omio\n\nAdd or remove the alias config in package.json to switch omi and omio\uff1a\n\n```js\n ...\n "alias": {\n "omi": "omio"\n }\n ...\n```\n\n## Project Template\n\n| **Template Type**| **Command**| **Describe**|\n| ------------ | -----------| ----------------- |\n|Base Template(v3.3.0+)|`omi init my-app`| Basic omi or omio(IE8+) project template.|\n|Kbone Template|`omi init-kbone my-app` |Developing mini program or web using omi.|\n|\u5c0f\u7a0b\u5e8f\u6a21\u677f(v3.3.5+)|`omi init-p my-app`| Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f |\n|Base Template with snapshoot|`omi init-snap my-app`| Basic omi or omio(IE8+) project template with snapshoot prerendering.|\n|TypeScript Template(omi-cli v3.3.0+)|`omi init-ts my-app`|Basic template with typescript.|\n|Mobile Template|`omi init-weui my-app`| Mobile web app template with weui and omi-router.|\n\n'}});
|
||||
//# sourceMappingURL=29.4ab54b26.chunk.js.map
|
||||
webpackJsonp([30],{43:function(n,i){n.exports='## Installation \n\nSimply download and include with `<script>`. Omi will be registered as a global variable.\n\n* [Omi Development Version](https://unpkg.com/omi@latest/dist/omi.js)\n* [Omi Production Version](https://unpkg.com/omi@latest/dist/omi.min.js)\n\nInstall via npm:\n\n```\nnpm i omi\n```\n\nIf you need to be compatible with IE8+, you can choose omio, which has almost the same API as omi, and Omi will be registered as a global variable.\n\n* [Omio Development Version](https://unpkg.com/omio@latest/dist/omi.js)\n* [Omio Production Version](https://unpkg.com/omi@latest/dist/omi.min.js)\n\nInstall via npm:\n\n```\nnpm i omio\n```\n\n## CLI\n\nOmi provides the official CLI. You don\'t need to learn how to configure webpack, Babel or TypeScript. CLI helps you configure everything and provides various templates for different project types.\n\n```bash\n$ npm i omi-cli -g # install cli\n$ omi init my-app # init project\n$ cd my-app \n$ npm start # develop\n$ npm run build # release\n```\n\n> `npx omi-cli init my-app` is also supported(npm v5.2.0+).\n\nDirectory description:\n\n```\n\u251c\u2500 config\n\u251c\u2500 public\n\u251c\u2500 scripts\n\u251c\u2500 src\n\u2502 \u251c\u2500 assets\n\u2502 \u251c\u2500 elements //Store all custom elements\n\u2502 \u251c\u2500 store //Store all this store of pages\n\u2502 \u251c\u2500 admin.js //Entry js of compiler\uff0cwill build to admin.html\n\u2502 \u2514\u2500 index.js //Entry js of compiler\uff0cwill build to index.html\n```\n\n\n### Scripts\n\n```json\n"scripts": {\n "start": "node scripts/start.js",\n "build": "PUBLIC_URL=. node scripts/build.js",\n "build-windows": "set PUBLIC_URL=.&& node scripts/build.js",\n "fix": "eslint src --fix"\n}\n```\n\nYou can set up the PUBLIC_URL, such as\uff1a\n\n```json\n...\n"build": "PUBLIC_URL=https://your.url.com/sub node scripts/build.js",\n"build-windows": "set PUBLIC_URL=https://your.url.com/sub&& node scripts/build.js",\n...\n```\n\n### Switch omi and omio\n\nAdd or remove the alias config in package.json to switch omi and omio\uff1a\n\n```js\n ...\n "alias": {\n "omi": "omio"\n }\n ...\n```\n\n## Project Template\n\n| **Template Type**| **Command**| **Describe**|\n| ------------ | -----------| ----------------- |\n|Base Template(v3.3.0+)|`omi init my-app`| Basic omi or omio(IE8+) project template.|\n|Kbone Template|`omi init-kbone my-app` |Developing mini program or web using omi.|\n|\u5c0f\u7a0b\u5e8f\u6a21\u677f(v3.3.5+)|`omi init-p my-app`| Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f |\n|Base Template with snapshoot|`omi init-snap my-app`| Basic omi or omio(IE8+) project template with snapshoot prerendering.|\n|TypeScript Template(omi-cli v3.3.0+)|`omi init-ts my-app`|Basic template with typescript.|\n|Mobile Template|`omi init-weui my-app`| Mobile web app template with weui and omi-router.|\n\n'}});
|
||||
//# sourceMappingURL=30.4facc9fa.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([30],{42:function(n,e){n.exports="## Extend\n\nExtend can extend attr's ability to extend DOM.\n\n\n## Example\n\nFor example, you can easily implement two way binding through extend:\n\n```jsx\nimport { define, WeElement, render, extend, get, set } from 'omi'\n\nextend('model', (el, path, scope) => {\n el.value = get(scope, path)\n el.addEventListener('input', () => {\n set(scope, path, el.value)\n scope.update()\n })\n})\n\ndefine('my-component', class extends WeElement {\n msg = 'two-way binding'\n\n render(props) {\n return (\n <div>\n <input o-model=\"msg\"></input>\n <div>{this.msg}</div>\n </div>\n )\n }\n})\n\nrender(<my-component />, 'body')\n```\n\n[\u2192 Codepen](https://codepen.io/omijs/pen/aeLYjx)"}});
|
||||
//# sourceMappingURL=30.aa3bcd07.chunk.js.map
|
||||
webpackJsonp([31],{42:function(n,e){n.exports="## Extend\n\nExtend can extend attr's ability to extend DOM.\n\n\n## Example\n\nFor example, you can easily implement two way binding through extend:\n\n```jsx\nimport { define, WeElement, render, extend, get, set } from 'omi'\n\nextend('model', (el, path, scope) => {\n el.value = get(scope, path)\n el.addEventListener('input', () => {\n set(scope, path, el.value)\n scope.update()\n })\n})\n\ndefine('my-component', class extends WeElement {\n msg = 'two-way binding'\n\n render(props) {\n return (\n <div>\n <input o-model=\"msg\"></input>\n <div>{this.msg}</div>\n </div>\n )\n }\n})\n\nrender(<my-component />, 'body')\n```\n\n[\u2192 Codepen](https://codepen.io/omijs/pen/aeLYjx)"}});
|
||||
//# sourceMappingURL=31.c9dd949c.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/30.aa3bcd07.chunk.js","docs/en/extend.md"],"names":["webpackJsonp","42","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/30.aa3bcd07.chunk.js","sourcesContent":["webpackJsonp([30],{\n\n/***/ 42:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Extend\\n\\nExtend can extend attr's ability to extend DOM.\\n\\n\\n## Example\\n\\nFor example, you can easily implement two way binding through extend:\\n\\n```jsx\\nimport { define, WeElement, render, extend, get, set } from 'omi'\\n\\nextend('model', (el, path, scope) => {\\n el.value = get(scope, path)\\n el.addEventListener('input', () => {\\n set(scope, path, el.value)\\n scope.update()\\n })\\n})\\n\\ndefine('my-component', class extends WeElement {\\n msg = 'two-way binding'\\n\\n render(props) {\\n return (\\n <div>\\n <input o-model=\\\"msg\\\"></input>\\n <div>{this.msg}</div>\\n </div>\\n )\\n }\\n})\\n\\nrender(<my-component />, 'body')\\n```\\n\\n[→ Codepen](https://codepen.io/omijs/pen/aeLYjx)\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/30.aa3bcd07.chunk.js","module.exports = \"## Extend\\n\\nExtend can extend attr's ability to extend DOM.\\n\\n\\n## Example\\n\\nFor example, you can easily implement two way binding through extend:\\n\\n```jsx\\nimport { define, WeElement, render, extend, get, set } from 'omi'\\n\\nextend('model', (el, path, scope) => {\\n el.value = get(scope, path)\\n el.addEventListener('input', () => {\\n set(scope, path, el.value)\\n scope.update()\\n })\\n})\\n\\ndefine('my-component', class extends WeElement {\\n msg = 'two-way binding'\\n\\n render(props) {\\n return (\\n <div>\\n <input o-model=\\\"msg\\\"></input>\\n <div>{this.msg}</div>\\n </div>\\n )\\n }\\n})\\n\\nrender(<my-component />, 'body')\\n```\\n\\n[→ Codepen](https://codepen.io/omijs/pen/aeLYjx)\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/extend.md\n// module id = 42\n// module chunks = 30"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/31.c9dd949c.chunk.js","docs/en/extend.md"],"names":["webpackJsonp","42","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/31.c9dd949c.chunk.js","sourcesContent":["webpackJsonp([31],{\n\n/***/ 42:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Extend\\n\\nExtend can extend attr's ability to extend DOM.\\n\\n\\n## Example\\n\\nFor example, you can easily implement two way binding through extend:\\n\\n```jsx\\nimport { define, WeElement, render, extend, get, set } from 'omi'\\n\\nextend('model', (el, path, scope) => {\\n el.value = get(scope, path)\\n el.addEventListener('input', () => {\\n set(scope, path, el.value)\\n scope.update()\\n })\\n})\\n\\ndefine('my-component', class extends WeElement {\\n msg = 'two-way binding'\\n\\n render(props) {\\n return (\\n <div>\\n <input o-model=\\\"msg\\\"></input>\\n <div>{this.msg}</div>\\n </div>\\n )\\n }\\n})\\n\\nrender(<my-component />, 'body')\\n```\\n\\n[→ Codepen](https://codepen.io/omijs/pen/aeLYjx)\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/31.c9dd949c.chunk.js","module.exports = \"## Extend\\n\\nExtend can extend attr's ability to extend DOM.\\n\\n\\n## Example\\n\\nFor example, you can easily implement two way binding through extend:\\n\\n```jsx\\nimport { define, WeElement, render, extend, get, set } from 'omi'\\n\\nextend('model', (el, path, scope) => {\\n el.value = get(scope, path)\\n el.addEventListener('input', () => {\\n set(scope, path, el.value)\\n scope.update()\\n })\\n})\\n\\ndefine('my-component', class extends WeElement {\\n msg = 'two-way binding'\\n\\n render(props) {\\n return (\\n <div>\\n <input o-model=\\\"msg\\\"></input>\\n <div>{this.msg}</div>\\n </div>\\n )\\n }\\n})\\n\\nrender(<my-component />, 'body')\\n```\\n\\n[→ Codepen](https://codepen.io/omijs/pen/aeLYjx)\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/extend.md\n// module id = 42\n// module chunks = 31"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([31],{41:function(e,n){e.exports="## Event\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n alert('Hello Omi!')\n }\n\n render() {\n return (\n <h1 onClick={this.onClick}>Hello, world!</h1>\n )\n }\n})\n```\n\n### Custom Event\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n this.fire('myevent', { name: 'abc' })\n }\n\n render(props) {\n return (\n <h1 onClick={this.onClick}>Hello, world!</h1>\n )\n }\n})\n```\n\nThen bind events on your custom elements:\n\n```jsx\n<my-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-element>\n```\n\nFire triggers a custom event by `this.fire`. The first parameter of fire is the name of the event, and the second parameter is the data passed. The transmitted data can be obtained by `evt.detail'.\n"}});
|
||||
//# sourceMappingURL=31.2d60b0ad.chunk.js.map
|
||||
webpackJsonp([32],{41:function(e,n){e.exports="## Event\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n alert('Hello Omi!')\n }\n\n render() {\n return (\n <h1 onClick={this.onClick}>Hello, world!</h1>\n )\n }\n})\n```\n\n### Custom Event\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n this.fire('myevent', { name: 'abc' })\n }\n\n render(props) {\n return (\n <h1 onClick={this.onClick}>Hello, world!</h1>\n )\n }\n})\n```\n\nThen bind events on your custom elements:\n\n```jsx\n<my-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-element>\n```\n\nFire triggers a custom event by `this.fire`. The first parameter of fire is the name of the event, and the second parameter is the data passed. The transmitted data can be obtained by `evt.detail'.\n"}});
|
||||
//# sourceMappingURL=32.6232106f.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/31.2d60b0ad.chunk.js","docs/en/event.md"],"names":["webpackJsonp","41","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/31.2d60b0ad.chunk.js","sourcesContent":["webpackJsonp([31],{\n\n/***/ 41:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n alert('Hello Omi!')\\n }\\n\\n render() {\\n return (\\n <h1 onClick={this.onClick}>Hello, world!</h1>\\n )\\n }\\n})\\n```\\n\\n### Custom Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n this.fire('myevent', { name: 'abc' })\\n }\\n\\n render(props) {\\n return (\\n <h1 onClick={this.onClick}>Hello, world!</h1>\\n )\\n }\\n})\\n```\\n\\nThen bind events on your custom elements:\\n\\n```jsx\\n<my-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-element>\\n```\\n\\nFire triggers a custom event by `this.fire`. The first parameter of fire is the name of the event, and the second parameter is the data passed. The transmitted data can be obtained by `evt.detail'.\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/31.2d60b0ad.chunk.js","module.exports = \"## Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n alert('Hello Omi!')\\n }\\n\\n render() {\\n return (\\n <h1 onClick={this.onClick}>Hello, world!</h1>\\n )\\n }\\n})\\n```\\n\\n### Custom Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n this.fire('myevent', { name: 'abc' })\\n }\\n\\n render(props) {\\n return (\\n <h1 onClick={this.onClick}>Hello, world!</h1>\\n )\\n }\\n})\\n```\\n\\nThen bind events on your custom elements:\\n\\n```jsx\\n<my-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-element>\\n```\\n\\nFire triggers a custom event by `this.fire`. The first parameter of fire is the name of the event, and the second parameter is the data passed. The transmitted data can be obtained by `evt.detail'.\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/event.md\n// module id = 41\n// module chunks = 31"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/32.6232106f.chunk.js","docs/en/event.md"],"names":["webpackJsonp","41","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/32.6232106f.chunk.js","sourcesContent":["webpackJsonp([32],{\n\n/***/ 41:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n alert('Hello Omi!')\\n }\\n\\n render() {\\n return (\\n <h1 onClick={this.onClick}>Hello, world!</h1>\\n )\\n }\\n})\\n```\\n\\n### Custom Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n this.fire('myevent', { name: 'abc' })\\n }\\n\\n render(props) {\\n return (\\n <h1 onClick={this.onClick}>Hello, world!</h1>\\n )\\n }\\n})\\n```\\n\\nThen bind events on your custom elements:\\n\\n```jsx\\n<my-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-element>\\n```\\n\\nFire triggers a custom event by `this.fire`. The first parameter of fire is the name of the event, and the second parameter is the data passed. The transmitted data can be obtained by `evt.detail'.\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/32.6232106f.chunk.js","module.exports = \"## Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n alert('Hello Omi!')\\n }\\n\\n render() {\\n return (\\n <h1 onClick={this.onClick}>Hello, world!</h1>\\n )\\n }\\n})\\n```\\n\\n### Custom Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n this.fire('myevent', { name: 'abc' })\\n }\\n\\n render(props) {\\n return (\\n <h1 onClick={this.onClick}>Hello, world!</h1>\\n )\\n }\\n})\\n```\\n\\nThen bind events on your custom elements:\\n\\n```jsx\\n<my-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-element>\\n```\\n\\nFire triggers a custom event by `this.fire`. The first parameter of fire is the name of the event, and the second parameter is the data passed. The transmitted data can be obtained by `evt.detail'.\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/event.md\n// module id = 41\n// module chunks = 32"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([32],{40:function(n,e){n.exports="## CSS\n\nThis is the css of props, not `static css`, which provides the ability to modify scoped style within shadow dom. \n\n## Example\n\n```jsx\ndefine('my-element', class extends WeElement {\n static css = `h1{\n color: red;\n }`\n\n render() {\n return (\n <div>\n <h1>Look at my color!<h1>\n </div>\n )\n }\n})\n```\n\nThe h1 of `my-element' above is red. Is there any way to modify it?\n\n```jsx\ndefine('my-app', class extends WeElement {\n\n myCSS = `\n h1{\n color: green;\n }`\n\n onClick = () => {\n //Dynamic modification\n this.myCSS = `\n h1{\n color: blue;\n }`\n this.update()\n }\n\n render() {\n return (\n <div onClick={this.onClick}>\n <my-element css={this.myCSS} />\n </div>\n )\n }\n})\n```\n\nIt can also be guaranteed that it can be modified in the following ways:\n\n```css\ncolor: blue!important;\n```\n"}});
|
||||
//# sourceMappingURL=32.82312b44.chunk.js.map
|
||||
webpackJsonp([33],{40:function(n,e){n.exports="## CSS\n\nThis is the css of props, not `static css`, which provides the ability to modify scoped style within shadow dom. \n\n## Example\n\n```jsx\ndefine('my-element', class extends WeElement {\n static css = `h1{\n color: red;\n }`\n\n render() {\n return (\n <div>\n <h1>Look at my color!<h1>\n </div>\n )\n }\n})\n```\n\nThe h1 of `my-element' above is red. Is there any way to modify it?\n\n```jsx\ndefine('my-app', class extends WeElement {\n\n myCSS = `\n h1{\n color: green;\n }`\n\n onClick = () => {\n //Dynamic modification\n this.myCSS = `\n h1{\n color: blue;\n }`\n this.update()\n }\n\n render() {\n return (\n <div onClick={this.onClick}>\n <my-element css={this.myCSS} />\n </div>\n )\n }\n})\n```\n\nIt can also be guaranteed that it can be modified in the following ways:\n\n```css\ncolor: blue!important;\n```\n"}});
|
||||
//# sourceMappingURL=33.4111d2df.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/32.82312b44.chunk.js","docs/en/css.md"],"names":["webpackJsonp","40","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/32.82312b44.chunk.js","sourcesContent":["webpackJsonp([32],{\n\n/***/ 40:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## CSS\\n\\nThis is the css of props, not `static css`, which provides the ability to modify scoped style within shadow dom. \\n\\n## Example\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static css = `h1{\\n color: red;\\n }`\\n\\n render() {\\n return (\\n <div>\\n <h1>Look at my color!<h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\nThe h1 of `my-element' above is red. Is there any way to modify it?\\n\\n```jsx\\ndefine('my-app', class extends WeElement {\\n\\n myCSS = `\\n h1{\\n color: green;\\n }`\\n\\n onClick = () => {\\n //Dynamic modification\\n this.myCSS = `\\n h1{\\n color: blue;\\n }`\\n this.update()\\n }\\n\\n render() {\\n return (\\n <div onClick={this.onClick}>\\n <my-element css={this.myCSS} />\\n </div>\\n )\\n }\\n})\\n```\\n\\nIt can also be guaranteed that it can be modified in the following ways:\\n\\n```css\\ncolor: blue!important;\\n```\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/32.82312b44.chunk.js","module.exports = \"## CSS\\n\\nThis is the css of props, not `static css`, which provides the ability to modify scoped style within shadow dom. \\n\\n## Example\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static css = `h1{\\n color: red;\\n }`\\n\\n render() {\\n return (\\n <div>\\n <h1>Look at my color!<h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\nThe h1 of `my-element' above is red. Is there any way to modify it?\\n\\n```jsx\\ndefine('my-app', class extends WeElement {\\n\\n myCSS = `\\n h1{\\n color: green;\\n }`\\n\\n onClick = () => {\\n //Dynamic modification\\n this.myCSS = `\\n h1{\\n color: blue;\\n }`\\n this.update()\\n }\\n\\n render() {\\n return (\\n <div onClick={this.onClick}>\\n <my-element css={this.myCSS} />\\n </div>\\n )\\n }\\n})\\n```\\n\\nIt can also be guaranteed that it can be modified in the following ways:\\n\\n```css\\ncolor: blue!important;\\n```\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/css.md\n// module id = 40\n// module chunks = 32"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/33.4111d2df.chunk.js","docs/en/css.md"],"names":["webpackJsonp","40","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/33.4111d2df.chunk.js","sourcesContent":["webpackJsonp([33],{\n\n/***/ 40:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## CSS\\n\\nThis is the css of props, not `static css`, which provides the ability to modify scoped style within shadow dom. \\n\\n## Example\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static css = `h1{\\n color: red;\\n }`\\n\\n render() {\\n return (\\n <div>\\n <h1>Look at my color!<h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\nThe h1 of `my-element' above is red. Is there any way to modify it?\\n\\n```jsx\\ndefine('my-app', class extends WeElement {\\n\\n myCSS = `\\n h1{\\n color: green;\\n }`\\n\\n onClick = () => {\\n //Dynamic modification\\n this.myCSS = `\\n h1{\\n color: blue;\\n }`\\n this.update()\\n }\\n\\n render() {\\n return (\\n <div onClick={this.onClick}>\\n <my-element css={this.myCSS} />\\n </div>\\n )\\n }\\n})\\n```\\n\\nIt can also be guaranteed that it can be modified in the following ways:\\n\\n```css\\ncolor: blue!important;\\n```\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/33.4111d2df.chunk.js","module.exports = \"## CSS\\n\\nThis is the css of props, not `static css`, which provides the ability to modify scoped style within shadow dom. \\n\\n## Example\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static css = `h1{\\n color: red;\\n }`\\n\\n render() {\\n return (\\n <div>\\n <h1>Look at my color!<h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\nThe h1 of `my-element' above is red. Is there any way to modify it?\\n\\n```jsx\\ndefine('my-app', class extends WeElement {\\n\\n myCSS = `\\n h1{\\n color: green;\\n }`\\n\\n onClick = () => {\\n //Dynamic modification\\n this.myCSS = `\\n h1{\\n color: blue;\\n }`\\n this.update()\\n }\\n\\n render() {\\n return (\\n <div onClick={this.onClick}>\\n <my-element css={this.myCSS} />\\n </div>\\n )\\n }\\n})\\n```\\n\\nIt can also be guaranteed that it can be modified in the following ways:\\n\\n```css\\ncolor: blue!important;\\n```\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/css.md\n// module id = 40\n// module chunks = 33"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([33],{39:function(s,n){s.exports="## Class\n\nOmi has two built-in class methods `extractClass` and `classNames`.\n\n```js\nimport { classNames, extractClass } from 'omi'\n\ndefine('my-element', class extends WeElement {\n render(props) {\n //extractClass will take out this class/className from props and merge the other classNames to obj\n const cls = extractClass(props, 'o-my-class', {\n 'other-class': true,\n 'other-class-b': this.xxx === 1\n })\n\n return (\n <div {...cls} {...props}>\n Test\n </div>\n )\n }\n})\n \n```\n\nThe `classNames` is the same as [classnames](https://github.com/JedWatson/classnames) of [npm](https://www.npmjs.com/package/classnames)."}});
|
||||
//# sourceMappingURL=33.82a91116.chunk.js.map
|
||||
webpackJsonp([34],{39:function(s,n){s.exports="## Class\n\nOmi has two built-in class methods `extractClass` and `classNames`.\n\n```js\nimport { classNames, extractClass } from 'omi'\n\ndefine('my-element', class extends WeElement {\n render(props) {\n //extractClass will take out this class/className from props and merge the other classNames to obj\n const cls = extractClass(props, 'o-my-class', {\n 'other-class': true,\n 'other-class-b': this.xxx === 1\n })\n\n return (\n <div {...cls} {...props}>\n Test\n </div>\n )\n }\n})\n \n```\n\nThe `classNames` is the same as [classnames](https://github.com/JedWatson/classnames) of [npm](https://www.npmjs.com/package/classnames)."}});
|
||||
//# sourceMappingURL=34.e19db945.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/33.82a91116.chunk.js","docs/en/class.md"],"names":["webpackJsonp","39","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/33.82a91116.chunk.js","sourcesContent":["webpackJsonp([33],{\n\n/***/ 39:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Class\\n\\nOmi has two built-in class methods `extractClass` and `classNames`.\\n\\n```js\\nimport { classNames, extractClass } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n //extractClass will take out this class/className from props and merge the other classNames to obj\\n const cls = extractClass(props, 'o-my-class', {\\n 'other-class': true,\\n 'other-class-b': this.xxx === 1\\n })\\n\\n return (\\n <div {...cls} {...props}>\\n Test\\n </div>\\n )\\n }\\n})\\n \\n```\\n\\nThe `classNames` is the same as [classnames](https://github.com/JedWatson/classnames) of [npm](https://www.npmjs.com/package/classnames).\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/33.82a91116.chunk.js","module.exports = \"## Class\\n\\nOmi has two built-in class methods `extractClass` and `classNames`.\\n\\n```js\\nimport { classNames, extractClass } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n //extractClass will take out this class/className from props and merge the other classNames to obj\\n const cls = extractClass(props, 'o-my-class', {\\n 'other-class': true,\\n 'other-class-b': this.xxx === 1\\n })\\n\\n return (\\n <div {...cls} {...props}>\\n Test\\n </div>\\n )\\n }\\n})\\n \\n```\\n\\nThe `classNames` is the same as [classnames](https://github.com/JedWatson/classnames) of [npm](https://www.npmjs.com/package/classnames).\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/class.md\n// module id = 39\n// module chunks = 33"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/34.e19db945.chunk.js","docs/en/class.md"],"names":["webpackJsonp","39","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/34.e19db945.chunk.js","sourcesContent":["webpackJsonp([34],{\n\n/***/ 39:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Class\\n\\nOmi has two built-in class methods `extractClass` and `classNames`.\\n\\n```js\\nimport { classNames, extractClass } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n //extractClass will take out this class/className from props and merge the other classNames to obj\\n const cls = extractClass(props, 'o-my-class', {\\n 'other-class': true,\\n 'other-class-b': this.xxx === 1\\n })\\n\\n return (\\n <div {...cls} {...props}>\\n Test\\n </div>\\n )\\n }\\n})\\n \\n```\\n\\nThe `classNames` is the same as [classnames](https://github.com/JedWatson/classnames) of [npm](https://www.npmjs.com/package/classnames).\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/34.e19db945.chunk.js","module.exports = \"## Class\\n\\nOmi has two built-in class methods `extractClass` and `classNames`.\\n\\n```js\\nimport { classNames, extractClass } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n //extractClass will take out this class/className from props and merge the other classNames to obj\\n const cls = extractClass(props, 'o-my-class', {\\n 'other-class': true,\\n 'other-class-b': this.xxx === 1\\n })\\n\\n return (\\n <div {...cls} {...props}>\\n Test\\n </div>\\n )\\n }\\n})\\n \\n```\\n\\nThe `classNames` is the same as [classnames](https://github.com/JedWatson/classnames) of [npm](https://www.npmjs.com/package/classnames).\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/class.md\n// module id = 39\n// module chunks = 34"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([4],{68:function(n,e){n.exports="## Ref\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n console.log(this.h1)\n }\n\n render(props) {\n return (\n <div>\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\n </div>\n )\n }\n})\n```\n\n\u5728\u5143\u7d20\u4e0a\u6dfb\u52a0 `ref={e => { this.anyNameYouWant = e }}` \uff0c\u7136\u540e\u4f60\u5c31\u53ef\u4ee5 JS \u4ee3\u7801\u91cc\u4f7f\u7528 `this.anyNameYouWant` \u8bbf\u95ee\u8be5\u5143\u7d20\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528\u4e24\u79cd\u65b9\u5f0f\u6765\u63d0\u9ad8 update \u7684\u6027\u80fd\uff1a\n\n* \u63d0\u524d\u8d4b\u503c\n* createRef\n\n### \u63d0\u524d\u8d4b\u503c\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n console.log(this.h1)\n }\n\n myRef = e => { this.h1 = e }\n\n render(props) {\n return (\n <div>\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\n </div>\n )\n }\n})\n```\n\n### createRef\n\n\u4f60\u4e5f\u53ef\u4ee5\u4f7f\u7528 `createRef` \u6765\u5f97\u5230\u66f4\u9ad8\u7684\u6027\u80fd:\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n console.log(this.myRef.current) //h1\n }\n\n myRef = createRef()\n\n render(props) {\n return (\n <div>\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\n </div>\n )\n }\n})\n```"}});
|
||||
//# sourceMappingURL=4.ef4e50b7.chunk.js.map
|
||||
webpackJsonp([4],{69:function(n,e){n.exports="## Ref\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n console.log(this.h1)\n }\n\n render(props) {\n return (\n <div>\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\n </div>\n )\n }\n})\n```\n\n\u5728\u5143\u7d20\u4e0a\u6dfb\u52a0 `ref={e => { this.anyNameYouWant = e }}` \uff0c\u7136\u540e\u4f60\u5c31\u53ef\u4ee5 JS \u4ee3\u7801\u91cc\u4f7f\u7528 `this.anyNameYouWant` \u8bbf\u95ee\u8be5\u5143\u7d20\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528\u4e24\u79cd\u65b9\u5f0f\u6765\u63d0\u9ad8 update \u7684\u6027\u80fd\uff1a\n\n* \u63d0\u524d\u8d4b\u503c\n* createRef\n\n### \u63d0\u524d\u8d4b\u503c\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n console.log(this.h1)\n }\n\n myRef = e => { this.h1 = e }\n\n render(props) {\n return (\n <div>\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\n </div>\n )\n }\n})\n```\n\n### createRef\n\n\u4f60\u4e5f\u53ef\u4ee5\u4f7f\u7528 `createRef` \u6765\u5f97\u5230\u66f4\u9ad8\u7684\u6027\u80fd:\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n console.log(this.myRef.current) //h1\n }\n\n myRef = createRef()\n\n render(props) {\n return (\n <div>\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\n </div>\n )\n }\n})\n```"}});
|
||||
//# sourceMappingURL=4.8b52adab.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/4.ef4e50b7.chunk.js","docs/zh-cn/ref.md"],"names":["webpackJsonp","68","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/4.ef4e50b7.chunk.js","sourcesContent":["webpackJsonp([4],{\n\n/***/ 68:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Ref\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n在元素上添加 `ref={e => { this.anyNameYouWant = e }}` ，然后你就可以 JS 代码里使用 `this.anyNameYouWant` 访问该元素。你可以使用两种方式来提高 update 的性能：\\n\\n* 提前赋值\\n* createRef\\n\\n### 提前赋值\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n myRef = e => { this.h1 = e }\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n### createRef\\n\\n你也可以使用 `createRef` 来得到更高的性能:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.myRef.current) //h1\\n }\\n\\n myRef = createRef()\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/4.ef4e50b7.chunk.js","module.exports = \"## Ref\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n在元素上添加 `ref={e => { this.anyNameYouWant = e }}` ，然后你就可以 JS 代码里使用 `this.anyNameYouWant` 访问该元素。你可以使用两种方式来提高 update 的性能：\\n\\n* 提前赋值\\n* createRef\\n\\n### 提前赋值\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n myRef = e => { this.h1 = e }\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n### createRef\\n\\n你也可以使用 `createRef` 来得到更高的性能:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.myRef.current) //h1\\n }\\n\\n myRef = createRef()\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/ref.md\n// module id = 68\n// module chunks = 4"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/4.8b52adab.chunk.js","docs/zh-cn/ref.md"],"names":["webpackJsonp","69","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/4.8b52adab.chunk.js","sourcesContent":["webpackJsonp([4],{\n\n/***/ 69:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Ref\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n在元素上添加 `ref={e => { this.anyNameYouWant = e }}` ，然后你就可以 JS 代码里使用 `this.anyNameYouWant` 访问该元素。你可以使用两种方式来提高 update 的性能：\\n\\n* 提前赋值\\n* createRef\\n\\n### 提前赋值\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n myRef = e => { this.h1 = e }\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n### createRef\\n\\n你也可以使用 `createRef` 来得到更高的性能:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.myRef.current) //h1\\n }\\n\\n myRef = createRef()\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/4.8b52adab.chunk.js","module.exports = \"## Ref\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n在元素上添加 `ref={e => { this.anyNameYouWant = e }}` ，然后你就可以 JS 代码里使用 `this.anyNameYouWant` 访问该元素。你可以使用两种方式来提高 update 的性能：\\n\\n* 提前赋值\\n* createRef\\n\\n### 提前赋值\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n myRef = e => { this.h1 = e }\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n### createRef\\n\\n你也可以使用 `createRef` 来得到更高的性能:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.myRef.current) //h1\\n }\\n\\n myRef = createRef()\\n\\n render(props) {\\n return (\\n <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/ref.md\n// module id = 69\n// module chunks = 4"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([5],{67:function(n,e){n.exports="\n## Props\n\n\u901a\u8fc7 Props \u5411\u5b50\u7ec4\u4ef6\u4f20\u9012\u6570\u636e\uff0c\u6bd4\u5982\uff1a\n\n```jsx\nimport { WeElement, define, render } from 'omi'\n\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.name}!</h1>\n )\n }\n})\n```\n\n\u4f7f\u7528\u5143\u7d20:\n\n```jsx\n<my-element name=\"world\"></my-element>\n```\n\n\u4f60\u4e5f\u53ef\u4ee5\u4f20\u4efb\u610f\u7c7b\u578b\u7684\u6570\u636e\u7ed9 props:\n\n```jsx\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.myObj.name}!</h1>\n )\n }\n})\n```\n\n\u4f7f\u7528\u5143\u7d20:\n\n```jsx\n<my-element myObj={{ name: 'world' }}></my-element>\n```\n\n\u4f60\u53ef\u4ee5\u901a\u8fc7\u9759\u6001\u5c5e\u6027 `static defaultProps` \u6765\u8bbe\u7f6e\u9ed8\u8ba4\u503c\uff0c\u4f7f\u7528 `static propTypes` \u6765\u8bbe\u7f6e\u7c7b\u578b:\n\n```jsx\ndefine('my-element', class extends WeElement {\n static defaultProps = {\n\t\tname: 'Omi',\n\t\tmyAge: 18\n }\n \n static propTypes = {\n\t\tname: String,\n\t\tmyAge: Number\n\t}\n\n render(props) {\n return (\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\n )\n }\n})\n```\n\n\u9700\u8981\u7279\u522b\u6ce8\u610f\uff0c\u5982\u679c\u4f60\u7684\u81ea\u5b9a\u4e49\u5143\u7d20\u60f3\u8981\u76f4\u63a5\u5728\u5176\u4ed6\u6846\u67b6\u6216\u8005\u65e0\u6846\u67b6\u7684\u60c5\u51b5\u4e0b\u539f\u751f\u4f7f\u7528\uff0c\u8bf7\u4e00\u5b9a\u8981\u52a0\u4e0a `static propTypes` \u624d\u80fd\u751f\u6548\u3002\u6bd4\u5982\uff0c\u8fd9\u6837\u5c31\u53ef\u4ee5\u76f4\u63a5\u5728 body \u4e2d\u4f7f\u7528:\n\n```html\n<body>\n <my-element name=\"dntzhang\" my-age=\"20\"></my-element>\n</body>\n```\n\n### \u9ad8\u7ea7\u6280\u5de7\n\n\u8fd9\u91cc\u4ecb\u7ecd\u4e00\u6b21\u6027\u4f7f\u7528 prop \u7684\u6280\u5de7:\n\n```jsx\ndefine('my-element', class extends WeElement {\n install() {\n this.name = this.props.name\n }\n\n render() {\n return (\n <h1>Hello, {this.name}!</h1>\n )\n }\n})\n```\n\n\u4e0b\u6b21\u7236\u7ec4\u4ef6 update \u5e76\u4e14\u4fee\u6539\u4e86 props \u4e5f\u4e0d\u4f1a\u5f71\u54cd\u5230\u8be5\u7ec4\u4ef6\u3002"}});
|
||||
//# sourceMappingURL=5.4f7dc34c.chunk.js.map
|
||||
webpackJsonp([5],{68:function(n,e){n.exports="\n## Props\n\n\u901a\u8fc7 Props \u5411\u5b50\u7ec4\u4ef6\u4f20\u9012\u6570\u636e\uff0c\u6bd4\u5982\uff1a\n\n```jsx\nimport { WeElement, define, render } from 'omi'\n\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.name}!</h1>\n )\n }\n})\n```\n\n\u4f7f\u7528\u5143\u7d20:\n\n```jsx\n<my-element name=\"world\"></my-element>\n```\n\n\u4f60\u4e5f\u53ef\u4ee5\u4f20\u4efb\u610f\u7c7b\u578b\u7684\u6570\u636e\u7ed9 props:\n\n```jsx\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.myObj.name}!</h1>\n )\n }\n})\n```\n\n\u4f7f\u7528\u5143\u7d20:\n\n```jsx\n<my-element myObj={{ name: 'world' }}></my-element>\n```\n\n\u4f60\u53ef\u4ee5\u901a\u8fc7\u9759\u6001\u5c5e\u6027 `static defaultProps` \u6765\u8bbe\u7f6e\u9ed8\u8ba4\u503c\uff0c\u4f7f\u7528 `static propTypes` \u6765\u8bbe\u7f6e\u7c7b\u578b:\n\n```jsx\ndefine('my-element', class extends WeElement {\n static defaultProps = {\n\t\tname: 'Omi',\n\t\tmyAge: 18\n }\n \n static propTypes = {\n\t\tname: String,\n\t\tmyAge: Number\n\t}\n\n render(props) {\n return (\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\n )\n }\n})\n```\n\n\u9700\u8981\u7279\u522b\u6ce8\u610f\uff0c\u5982\u679c\u4f60\u7684\u81ea\u5b9a\u4e49\u5143\u7d20\u60f3\u8981\u76f4\u63a5\u5728\u5176\u4ed6\u6846\u67b6\u6216\u8005\u65e0\u6846\u67b6\u7684\u60c5\u51b5\u4e0b\u539f\u751f\u4f7f\u7528\uff0c\u8bf7\u4e00\u5b9a\u8981\u52a0\u4e0a `static propTypes` \u624d\u80fd\u751f\u6548\u3002\u6bd4\u5982\uff0c\u8fd9\u6837\u5c31\u53ef\u4ee5\u76f4\u63a5\u5728 body \u4e2d\u4f7f\u7528:\n\n```html\n<body>\n <my-element name=\"dntzhang\" my-age=\"20\"></my-element>\n</body>\n```\n\n### \u9ad8\u7ea7\u6280\u5de7\n\n\u8fd9\u91cc\u4ecb\u7ecd\u4e00\u6b21\u6027\u4f7f\u7528 prop \u7684\u6280\u5de7:\n\n```jsx\ndefine('my-element', class extends WeElement {\n install() {\n this.name = this.props.name\n }\n\n render() {\n return (\n <h1>Hello, {this.name}!</h1>\n )\n }\n})\n```\n\n\u4e0b\u6b21\u7236\u7ec4\u4ef6 update \u5e76\u4e14\u4fee\u6539\u4e86 props \u4e5f\u4e0d\u4f1a\u5f71\u54cd\u5230\u8be5\u7ec4\u4ef6\u3002"}});
|
||||
//# sourceMappingURL=5.f63e6ac6.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/5.4f7dc34c.chunk.js","docs/zh-cn/props.md"],"names":["webpackJsonp","67","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/5.4f7dc34c.chunk.js","sourcesContent":["webpackJsonp([5],{\n\n/***/ 67:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\\n## Props\\n\\n通过 Props 向子组件传递数据，比如：\\n\\n```jsx\\nimport { WeElement, define, render } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n使用元素:\\n\\n```jsx\\n<my-element name=\\\"world\\\"></my-element>\\n```\\n\\n你也可以传任意类型的数据给 props:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.myObj.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n使用元素:\\n\\n```jsx\\n<my-element myObj={{ name: 'world' }}></my-element>\\n```\\n\\n你可以通过静态属性 `static defaultProps` 来设置默认值，使用 `static propTypes` 来设置类型:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n }\\n \\n static propTypes = {\\n\\t\\tname: String,\\n\\t\\tmyAge: Number\\n\\t}\\n\\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\\n\\n需要特别注意，如果你的自定义元素想要直接在其他框架或者无框架的情况下原生使用，请一定要加上 `static propTypes` 才能生效。比如，这样就可以直接在 body 中使用:\\n\\n```html\\n<body>\\n <my-element name=\\\"dntzhang\\\" my-age=\\\"20\\\"></my-element>\\n</body>\\n```\\n\\n### 高级技巧\\n\\n这里介绍一次性使用 prop 的技巧:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n install() {\\n this.name = this.props.name\\n }\\n\\n render() {\\n return (\\n <h1>Hello, {this.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n下次父组件 update 并且修改了 props 也不会影响到该组件。\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/5.4f7dc34c.chunk.js","module.exports = \"\\n## Props\\n\\n通过 Props 向子组件传递数据，比如：\\n\\n```jsx\\nimport { WeElement, define, render } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n使用元素:\\n\\n```jsx\\n<my-element name=\\\"world\\\"></my-element>\\n```\\n\\n你也可以传任意类型的数据给 props:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.myObj.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n使用元素:\\n\\n```jsx\\n<my-element myObj={{ name: 'world' }}></my-element>\\n```\\n\\n你可以通过静态属性 `static defaultProps` 来设置默认值，使用 `static propTypes` 来设置类型:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n }\\n \\n static propTypes = {\\n\\t\\tname: String,\\n\\t\\tmyAge: Number\\n\\t}\\n\\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\\n\\n需要特别注意，如果你的自定义元素想要直接在其他框架或者无框架的情况下原生使用，请一定要加上 `static propTypes` 才能生效。比如，这样就可以直接在 body 中使用:\\n\\n```html\\n<body>\\n <my-element name=\\\"dntzhang\\\" my-age=\\\"20\\\"></my-element>\\n</body>\\n```\\n\\n### 高级技巧\\n\\n这里介绍一次性使用 prop 的技巧:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n install() {\\n this.name = this.props.name\\n }\\n\\n render() {\\n return (\\n <h1>Hello, {this.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n下次父组件 update 并且修改了 props 也不会影响到该组件。\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/props.md\n// module id = 67\n// module chunks = 5"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/5.f63e6ac6.chunk.js","docs/zh-cn/props.md"],"names":["webpackJsonp","68","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/5.f63e6ac6.chunk.js","sourcesContent":["webpackJsonp([5],{\n\n/***/ 68:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\\n## Props\\n\\n通过 Props 向子组件传递数据，比如：\\n\\n```jsx\\nimport { WeElement, define, render } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n使用元素:\\n\\n```jsx\\n<my-element name=\\\"world\\\"></my-element>\\n```\\n\\n你也可以传任意类型的数据给 props:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.myObj.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n使用元素:\\n\\n```jsx\\n<my-element myObj={{ name: 'world' }}></my-element>\\n```\\n\\n你可以通过静态属性 `static defaultProps` 来设置默认值，使用 `static propTypes` 来设置类型:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n }\\n \\n static propTypes = {\\n\\t\\tname: String,\\n\\t\\tmyAge: Number\\n\\t}\\n\\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\\n\\n需要特别注意，如果你的自定义元素想要直接在其他框架或者无框架的情况下原生使用，请一定要加上 `static propTypes` 才能生效。比如，这样就可以直接在 body 中使用:\\n\\n```html\\n<body>\\n <my-element name=\\\"dntzhang\\\" my-age=\\\"20\\\"></my-element>\\n</body>\\n```\\n\\n### 高级技巧\\n\\n这里介绍一次性使用 prop 的技巧:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n install() {\\n this.name = this.props.name\\n }\\n\\n render() {\\n return (\\n <h1>Hello, {this.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n下次父组件 update 并且修改了 props 也不会影响到该组件。\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/5.f63e6ac6.chunk.js","module.exports = \"\\n## Props\\n\\n通过 Props 向子组件传递数据，比如：\\n\\n```jsx\\nimport { WeElement, define, render } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n使用元素:\\n\\n```jsx\\n<my-element name=\\\"world\\\"></my-element>\\n```\\n\\n你也可以传任意类型的数据给 props:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.myObj.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n使用元素:\\n\\n```jsx\\n<my-element myObj={{ name: 'world' }}></my-element>\\n```\\n\\n你可以通过静态属性 `static defaultProps` 来设置默认值，使用 `static propTypes` 来设置类型:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n }\\n \\n static propTypes = {\\n\\t\\tname: String,\\n\\t\\tmyAge: Number\\n\\t}\\n\\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\\n\\n需要特别注意，如果你的自定义元素想要直接在其他框架或者无框架的情况下原生使用，请一定要加上 `static propTypes` 才能生效。比如，这样就可以直接在 body 中使用:\\n\\n```html\\n<body>\\n <my-element name=\\\"dntzhang\\\" my-age=\\\"20\\\"></my-element>\\n</body>\\n```\\n\\n### 高级技巧\\n\\n这里介绍一次性使用 prop 的技巧:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n install() {\\n this.name = this.props.name\\n }\\n\\n render() {\\n return (\\n <h1>Hello, {this.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n下次父组件 update 并且修改了 props 也不会影响到该组件。\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/props.md\n// module id = 68\n// module chunks = 5"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([6],{66:function(t,e){t.exports="## Omi \u751f\u6001\n\n[\u2192 Omi \u751f\u6001\u5b66\u4e60\u8def\u7ebf\u56fe](https://github.com/Tencent/omi/tree/master/assets/rm.md)\n\n| **\u9879\u76ee** | **\u63cf\u8ff0** |\n| ------------------------------- | ----------------------------------- |\n| [omip](https://github.com/Tencent/omi/tree/master/packages/omip)| \u76f4\u63a5\u4f7f\u7528 Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f\u6216 H5 SPA\uff01\uff01\uff01|\n| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| \u517c\u5bb9\u8001\u6d4f\u89c8\u5668\u7684 Omi \u7248\u672c(\u652f\u6301\u5230IE8+\u548c\u79fb\u52a8\u7aef\u6d4f\u89c8\u5668)\u3002|\n| [omix](https://github.com/Tencent/omi/tree/master/packages/omix)| \u6781\u5c0f\u5374\u7cbe\u5de7\u7684\u5c0f\u7a0b\u5e8f\u6846\u67b6\u3002|\n| [omi-mp](https://github.com/Tencent/omi/tree/master/packages/omi-mp)| \u901a\u8fc7\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u548c\u751f\u6210 Web \u5355\u9875\u5e94\u7528(H5 SPA)|\n| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi \u5b98\u65b9\u8def\u7531,\u8d85\u7ea7\u5c0f\u7684\u5c3a\u5bf8\uff0c\u53ea\u6709 1KB \u7684 js\u3002[\u2192 DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)|\n| [md2site](https://tencent.github.io/omi/assets/md2site/)| \u7528 markdown \u751f\u6210\u9759\u6001\u7f51\u7ad9\u6587\u6863.|\n| [omi-mvvm](https://github.com/Tencent/omi/blob/master/tutorial/omi-mvvm.cn.md)| MVVM \u738b\u8005\u5f52\u6765, [mappingjs](https://github.com/Tencent/omi/tree/master/packages/mappingjs) \u5f3a\u529b\u52a0\u6301\u3002|\n| [omi-chart](https://github.com/Tencent/omi/tree/master/packages/omi-chart)| \u4e00\u4e2a chart-x \u6807\u7b7e\u641e\u5b9a\u62a5\u8868|\n| [mp-mvvm](https://github.com/Tencent/omi/tree/master/packages/mp-mvvm)| \u5c0f\u7a0b\u5e8f\u63d2\u4e0a MVVM \u7684\u7fc5\u8180, [mappingjs](https://github.com/Tencent/omi/tree/master/packages/mappingjs) \u5f3a\u529b\u52a0\u6301\u3002|\n| [omi-html](https://github.com/Tencent/omi/tree/master/packages/omi-html)| Using [htm](https://github.com/developit/htm) in omi.|\n| [omi-30-seconds](https://github.com/Tencent/omi/tree/master/packages/omi-30-seconds)| 30 \u79d2\u7406\u89e3\u4e00\u6bb5\u6709\u7528\u7684 Omi \u4ee3\u7801\u7247\u6bb5.|\n| [omi-swiper](https://github.com/loo41/Omi-Swiper)| Omi + Swiper |\n| [omi-vscode](https://github.com/ZainChen/omi-vscode)| Vscode extension for omi, [Install now!](https://marketplace.visualstudio.com/items?itemName=ZainChen.omi) |\n| [omi-sprite](https://github.com/Tencent/omi/tree/master/packages/omi-sprite)| Web Components, JSX \u548c Canvas \u7684\u5b8c\u7f8e\u878d\u5408|\n| [omi-canvas](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Web Components, JSX \u548c Canvas \u7684\u5b8c\u7f8e\u878d\u5408|\n| [omi-devtools](https://github.com/f/omi-devtools)| \u8c37\u6b4c\u6d4f\u89c8\u5668\u5f00\u53d1\u5de5\u5177\u6269\u5c55|\n| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| \u9879\u76ee\u811a\u624b\u67b6\u5de5\u5177\uff0c\u5404\u79cd\u6a21\u677f\u4efb\u4f60\u9009\u3002 |\n| [omi-ex](https://github.com/Tencent/omi/tree/master/packages/omi-ex)| Omi.js \u6269\u5c55(TypeScript) |\n| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi \u548c [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) \u5b8c\u7f8e\u7ed3\u5408. \u8ba9 css3 transform \u5728\u4f60\u7684 Omi\u9879\u76ee\u4e2d\u53d8\u5f97\u8d85\u7ea7\u7b80\u5355.|\n| [omi-tap](https://github.com/Tencent/omi/releases/tag/v4.0.24)| Omi \u539f\u751f\u652f\u6301 tap \u4e8b\u4ef6\uff08omi v4.0.24+\uff09|\n| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)|Omi \u5b98\u65b9\u624b\u52bf\u5e93|\n| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)|\u4e1d\u822c\u987a\u6ed1\u7684\u89e6\u6478\u8fd0\u52a8|\n| [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md)|\u9884\u6e32\u67d3\u9aa8\u67b6\u5c4f|\n|[omi-i18n](https://github.com/i18next/omi-i18n)| Omi \u56fd\u9645\u5316\u89e3\u51b3\u65b9\u6848 |\n| [omi-page](https://github.com/Tencent/omi/tree/master/packages/omi-page) | \u57fa\u4e8e [page.js](https://github.com/visionmedia/page.js) \u7684 Omi \u8def\u7531|\n\n## \u4e00\u4e9b\u4f8b\u5b50\n\n* [\u2192 \u4e00\u4e9b Omi \u4f8b\u5b50](https://github.com/Tencent/omi/tree/master/packages/omi/examples)\n* [\u2192 \u4e00\u4e9b Omio \u4f8b\u5b50](https://github.com/Tencent/omi/tree/master/packages/omio/examples)"}});
|
||||
//# sourceMappingURL=6.b671be71.chunk.js.map
|
||||
webpackJsonp([6],{67:function(t,e){t.exports="## Omi \u751f\u6001\n\n[\u2192 Omi \u751f\u6001\u5b66\u4e60\u8def\u7ebf\u56fe](https://github.com/Tencent/omi/tree/master/assets/rm.md)\n\n| **\u9879\u76ee** | **\u63cf\u8ff0** |\n| ------------------------------- | ----------------------------------- |\n| [omip](https://github.com/Tencent/omi/tree/master/packages/omip)| \u76f4\u63a5\u4f7f\u7528 Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f\u6216 H5 SPA\uff01\uff01\uff01|\n| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| \u517c\u5bb9\u8001\u6d4f\u89c8\u5668\u7684 Omi \u7248\u672c(\u652f\u6301\u5230IE8+\u548c\u79fb\u52a8\u7aef\u6d4f\u89c8\u5668)\u3002|\n| [omix](https://github.com/Tencent/omi/tree/master/packages/omix)| \u6781\u5c0f\u5374\u7cbe\u5de7\u7684\u5c0f\u7a0b\u5e8f\u6846\u67b6\u3002|\n| [omi-mp](https://github.com/Tencent/omi/tree/master/packages/omi-mp)| \u901a\u8fc7\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u548c\u751f\u6210 Web \u5355\u9875\u5e94\u7528(H5 SPA)|\n| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi \u5b98\u65b9\u8def\u7531,\u8d85\u7ea7\u5c0f\u7684\u5c3a\u5bf8\uff0c\u53ea\u6709 1KB \u7684 js\u3002[\u2192 DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)|\n| [md2site](https://tencent.github.io/omi/assets/md2site/)| \u7528 markdown \u751f\u6210\u9759\u6001\u7f51\u7ad9\u6587\u6863.|\n| [omi-mvvm](https://github.com/Tencent/omi/blob/master/tutorial/omi-mvvm.cn.md)| MVVM \u738b\u8005\u5f52\u6765, [mappingjs](https://github.com/Tencent/omi/tree/master/packages/mappingjs) \u5f3a\u529b\u52a0\u6301\u3002|\n| [omi-chart](https://github.com/Tencent/omi/tree/master/packages/omi-chart)| \u4e00\u4e2a chart-x \u6807\u7b7e\u641e\u5b9a\u62a5\u8868|\n| [mp-mvvm](https://github.com/Tencent/omi/tree/master/packages/mp-mvvm)| \u5c0f\u7a0b\u5e8f\u63d2\u4e0a MVVM \u7684\u7fc5\u8180, [mappingjs](https://github.com/Tencent/omi/tree/master/packages/mappingjs) \u5f3a\u529b\u52a0\u6301\u3002|\n| [omi-html](https://github.com/Tencent/omi/tree/master/packages/omi-html)| Using [htm](https://github.com/developit/htm) in omi.|\n| [omi-30-seconds](https://github.com/Tencent/omi/tree/master/packages/omi-30-seconds)| 30 \u79d2\u7406\u89e3\u4e00\u6bb5\u6709\u7528\u7684 Omi \u4ee3\u7801\u7247\u6bb5.|\n| [omi-swiper](https://github.com/loo41/Omi-Swiper)| Omi + Swiper |\n| [omi-vscode](https://github.com/ZainChen/omi-vscode)| Vscode extension for omi, [Install now!](https://marketplace.visualstudio.com/items?itemName=ZainChen.omi) |\n| [omi-sprite](https://github.com/Tencent/omi/tree/master/packages/omi-sprite)| Web Components, JSX \u548c Canvas \u7684\u5b8c\u7f8e\u878d\u5408|\n| [omi-canvas](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Web Components, JSX \u548c Canvas \u7684\u5b8c\u7f8e\u878d\u5408|\n| [omi-devtools](https://github.com/f/omi-devtools)| \u8c37\u6b4c\u6d4f\u89c8\u5668\u5f00\u53d1\u5de5\u5177\u6269\u5c55|\n| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| \u9879\u76ee\u811a\u624b\u67b6\u5de5\u5177\uff0c\u5404\u79cd\u6a21\u677f\u4efb\u4f60\u9009\u3002 |\n| [omi-ex](https://github.com/Tencent/omi/tree/master/packages/omi-ex)| Omi.js \u6269\u5c55(TypeScript) |\n| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi \u548c [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) \u5b8c\u7f8e\u7ed3\u5408. \u8ba9 css3 transform \u5728\u4f60\u7684 Omi\u9879\u76ee\u4e2d\u53d8\u5f97\u8d85\u7ea7\u7b80\u5355.|\n| [omi-tap](https://github.com/Tencent/omi/releases/tag/v4.0.24)| Omi \u539f\u751f\u652f\u6301 tap \u4e8b\u4ef6\uff08omi v4.0.24+\uff09|\n| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)|Omi \u5b98\u65b9\u624b\u52bf\u5e93|\n| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)|\u4e1d\u822c\u987a\u6ed1\u7684\u89e6\u6478\u8fd0\u52a8|\n| [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md)|\u9884\u6e32\u67d3\u9aa8\u67b6\u5c4f|\n|[omi-i18n](https://github.com/i18next/omi-i18n)| Omi \u56fd\u9645\u5316\u89e3\u51b3\u65b9\u6848 |\n| [omi-page](https://github.com/Tencent/omi/tree/master/packages/omi-page) | \u57fa\u4e8e [page.js](https://github.com/visionmedia/page.js) \u7684 Omi \u8def\u7531|\n\n## \u4e00\u4e9b\u4f8b\u5b50\n\n* [\u2192 \u4e00\u4e9b Omi \u4f8b\u5b50](https://github.com/Tencent/omi/tree/master/packages/omi/examples)\n* [\u2192 \u4e00\u4e9b Omio \u4f8b\u5b50](https://github.com/Tencent/omi/tree/master/packages/omio/examples)"}});
|
||||
//# sourceMappingURL=6.c4de5d89.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([7],{65:function(n,t){n.exports="## Omip\n\n\u4f7f\u7528 Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f\u6216 H5 SPA\n\n> \u73b0\u5728\uff0cOmi \u4e0d\u4ec5\u4ec5\u53ef\u4ee5\u5f00\u53d1\u684c\u9762 Web\u3001\u79fb\u52a8 H5\uff0c\u8fd8\u53ef\u4ee5\u76f4\u63a5\u5f00\u53d1\u5c0f\u7a0b\u5e8f\uff01\n\n* Write Once, Run Anywhere\n* Learn Once, Write Anywhere\n\n\n\n## Omip \u7279\u6027\n\n* \u4e00\u6b21\u5b66\u4e60\uff0c\u591a\u5904\u5f00\u53d1\uff0c\u4e00\u6b21\u5f00\u53d1\uff0c\u591a\u5904\u8fd0\u884c\n* \u4f7f\u7528 JSX\uff0c\u8868\u8fbe\u80fd\u529b\u548c\u7f16\u7a0b\u4f53\u9a8c\u5927\u4e8e\u6a21\u677f\n* \u652f\u6301\u4f7f\u7528 npm/yarn \u5b89\u88c5\u7ba1\u7406\u7b2c\u4e09\u65b9\u4f9d\u8d56\n* \u652f\u6301\u4f7f\u7528 ES6+\n* \u652f\u6301\u4f7f\u7528 CSS \u9884\u7f16\u8bd1\u5668\n* \u5c0f\u7a0b\u5e8f API \u4f18\u5316\uff0c\u5f02\u6b65 API Promise \u5316\n* \u8d85\u8f7b\u91cf\u7684\u4f9d\u8d56\u5305\uff0c\u987a\u4ece\u5c0f\u7a0b\u5e8f\u6807\u7b7e\u548c\u7ec4\u4ef6\u7684\u8bbe\u8ba1\n\n## \u5feb\u901f\u5f00\u59cb\n\n```bash\nnpm i omi-cli -g\nomi init-p my-app\ncd my-app\nnpm start //\u5f00\u53d1\u5c0f\u7a0b\u5e8f\nnpm run dev:h5 //\u5f00\u53d1 h5\nnpm run build:h5 //\u53d1\u5e03 h5\n```\n> node \u7248\u672c\u8981\u6c42 >= 8\n\n> \u4e5f\u652f\u6301\u4e00\u6761\u547d\u4ee4 `npx omi-cli init-p my-app` (npm v5.2.0+)\n\n\u628a\u5c0f\u7a0b\u5e8f\u76ee\u5f55\u8bbe\u7f6e\u5230 dist \u76ee\u5f55\u5c31\u53ef\u4ee5\u6109\u5feb\u5730\u8c03\u8bd5\u4e86\uff01\n\n\u4e5f\u53ef\u4ee5\u521d\u59cb\u5316 TypeScript \u6a21\u677f\u9879\u76ee:\n\n```js\nomi init-p-ts my-app\n```\n\n> \u4e5f\u652f\u6301\u4e00\u6761\u547d\u4ee4 `npx omi-cli init-p-ts my-app` (npm v5.2.0+)\n\n## \u4ee3\u7801\u793a\u4f8b\n\n```jsx\nimport { WeElement, define } from 'omi'\nimport './index.css'\n\ndefine('page-counter', class extends WeElement {\n config = {\n navigationBarTitleText: 'Counter'\n }\n\n data = {\n count: 1\n }\n\n sub = () => {\n this.data.count--\n this.update()\n }\n\n add = () => {\n this.data.count++\n this.update()\n }\n\n render() {\n return (\n <view>\n <button onClick={this.sub}>-</button>\n <text>{this.data.count}</text>\n <button onClick={this.add}>+</button>\n </view>\n )\n }\n})\n```\n\n## \u6269\u5c55\n\n`this.update` \u65b9\u6cd5\u53ef\u4ee5\u4f20\u9012\u6700\u77ed\u8def\u5f84\uff0c\u8fdb\u884c\u66f4\u65b0\uff0c\u6bd4\u5982\u4e0b\u9762\u4e24\u79cd\u5199\u6cd5\u662f\u7b49\u4ef7\u7684\u3002\n\n```js\nthis.update({\n count: 1\n})\n```\n\n\u7b49\u4ef7\u4e8e:\n\n```js\nthis.data.count = 1\nthis.update()\n```\n\n\u4e5f\u53ef\u4ee5\u548c setData \u4e00\u6837\u4f20\u9012 path:\n\n```js\nthis.update({\n 'list[1].obj.name': 'Omip'\n})\n```\n\n\u7531\u4e8e\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u66f4\u65b0\u662f\u5f02\u6b65\u7684\uff0c\u5982\u679c\u9700\u8981\u83b7\u53d6\u89c6\u56fe\u66f4\u65b0\u540e\u7684\u56de\u8c03\uff0c\u53ef\u4ee5\u4f7f\u7528\u7b2c\u4e8c\u4e2a\u53c2\u6570:\n\n```js\nthis.update({\n 'list[1].obj.name': 'Omip'\n}, () => {\n console.log('\u66f4\u65b0\u5b8c\u6210')\n})\n```\n\n\u6216\u8005\u53ea\u6709\u4e00\u4e2a\u53c2\u6570\uff0c\u4e14\u8be5\u53c2\u6570\u4e3a\u51fd\u6570:\n\n```js\nthis.update(() => {\n console.log('\u66f4\u65b0\u5b8c\u6210')\n})\n```\n\n## \u6ce8\u610f\u4e8b\u9879\n\n\u5728 JSX \u6216\u8005\u4e00\u4e9b\u8981\u4f7f\u7528\u56fe\u7247\u8d44\u6e90\u7684 API\uff0c\u9700\u8981\u4f7f\u7528 import \u6216\u8005 require \u5148\u5bfc\u5165\u56fe\u7247\u518d\u4f7f\u7528\uff0c\u4e0d\u80fd\u76f4\u63a5\u4f7f\u7528\u76f8\u5bf9\u5730\u5740\uff01\n\n\u5982\uff1a\n\n```js\n onShareAppMessage(){\n\t\treturn {\n title: '\u5206\u4eab\u6807\u9898',\n path: '/pages/index/index?id=123',\n imageUrl: require('./share.jpg'),\n success: (res) => {\n console.log(\"\u8f6c\u53d1\u6210\u529f\", res);\n },\n fail: (res) => {\n console.log(\"\u8f6c\u53d1\u5931\u8d25\", res);\n }\n }\n }\n```\n\n\u518d\u6bd4\u5982:\n\n```jsx\nimport src from './my-image.png'\n...\n...\n\n\n render() {\n return (\n <view>\n <image src={src}></image>\n </view>\n )\n }\n...\n...\n\n```\n\n## \u83b7\u53d6\u6700\u65b0\u7684 omip \u7248\u672c\n\n\u4f60\u53ea\u9700\u8981\u91cd\u65b0\u62c9\u53bb\u6a21\u677f\u4fbf\u53ef\u4ee5\u66f4\u65b0\u5230\u6700\u65b0\u7684 omip:\n\n```\nomi init-p my-app\n```\n\n## \u5b9e\u6218\u6848\u4f8b\n\n\n\n\n\n## License\n\nMIT \xa9 dntzhang\n\n#### Open Source Software Licensed Under the MIT License:\n\n[tarojs](https://github.com/NervJS/taro) 1.2.13\nCopyright (c) 2019 O2Team\n"}});
|
||||
//# sourceMappingURL=7.84f1e9ff.chunk.js.map
|
||||
webpackJsonp([7],{66:function(n,t){n.exports="## Omip\n\n\u4f7f\u7528 Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f\u6216 H5 SPA\n\n> \u73b0\u5728\uff0cOmi \u4e0d\u4ec5\u4ec5\u53ef\u4ee5\u5f00\u53d1\u684c\u9762 Web\u3001\u79fb\u52a8 H5\uff0c\u8fd8\u53ef\u4ee5\u76f4\u63a5\u5f00\u53d1\u5c0f\u7a0b\u5e8f\uff01\n\n* Write Once, Run Anywhere\n* Learn Once, Write Anywhere\n\n\n\n## Omip \u7279\u6027\n\n* \u4e00\u6b21\u5b66\u4e60\uff0c\u591a\u5904\u5f00\u53d1\uff0c\u4e00\u6b21\u5f00\u53d1\uff0c\u591a\u5904\u8fd0\u884c\n* \u4f7f\u7528 JSX\uff0c\u8868\u8fbe\u80fd\u529b\u548c\u7f16\u7a0b\u4f53\u9a8c\u5927\u4e8e\u6a21\u677f\n* \u652f\u6301\u4f7f\u7528 npm/yarn \u5b89\u88c5\u7ba1\u7406\u7b2c\u4e09\u65b9\u4f9d\u8d56\n* \u652f\u6301\u4f7f\u7528 ES6+\n* \u652f\u6301\u4f7f\u7528 CSS \u9884\u7f16\u8bd1\u5668\n* \u5c0f\u7a0b\u5e8f API \u4f18\u5316\uff0c\u5f02\u6b65 API Promise \u5316\n* \u8d85\u8f7b\u91cf\u7684\u4f9d\u8d56\u5305\uff0c\u987a\u4ece\u5c0f\u7a0b\u5e8f\u6807\u7b7e\u548c\u7ec4\u4ef6\u7684\u8bbe\u8ba1\n\n## \u5feb\u901f\u5f00\u59cb\n\n```bash\nnpm i omi-cli -g\nomi init-p my-app\ncd my-app\nnpm start //\u5f00\u53d1\u5c0f\u7a0b\u5e8f\nnpm run dev:h5 //\u5f00\u53d1 h5\nnpm run build:h5 //\u53d1\u5e03 h5\n```\n> node \u7248\u672c\u8981\u6c42 >= 8\n\n> \u4e5f\u652f\u6301\u4e00\u6761\u547d\u4ee4 `npx omi-cli init-p my-app` (npm v5.2.0+)\n\n\u628a\u5c0f\u7a0b\u5e8f\u76ee\u5f55\u8bbe\u7f6e\u5230 dist \u76ee\u5f55\u5c31\u53ef\u4ee5\u6109\u5feb\u5730\u8c03\u8bd5\u4e86\uff01\n\n\u4e5f\u53ef\u4ee5\u521d\u59cb\u5316 TypeScript \u6a21\u677f\u9879\u76ee:\n\n```js\nomi init-p-ts my-app\n```\n\n> \u4e5f\u652f\u6301\u4e00\u6761\u547d\u4ee4 `npx omi-cli init-p-ts my-app` (npm v5.2.0+)\n\n## \u4ee3\u7801\u793a\u4f8b\n\n```jsx\nimport { WeElement, define } from 'omi'\nimport './index.css'\n\ndefine('page-counter', class extends WeElement {\n config = {\n navigationBarTitleText: 'Counter'\n }\n\n data = {\n count: 1\n }\n\n sub = () => {\n this.data.count--\n this.update()\n }\n\n add = () => {\n this.data.count++\n this.update()\n }\n\n render() {\n return (\n <view>\n <button onClick={this.sub}>-</button>\n <text>{this.data.count}</text>\n <button onClick={this.add}>+</button>\n </view>\n )\n }\n})\n```\n\n## \u6269\u5c55\n\n`this.update` \u65b9\u6cd5\u53ef\u4ee5\u4f20\u9012\u6700\u77ed\u8def\u5f84\uff0c\u8fdb\u884c\u66f4\u65b0\uff0c\u6bd4\u5982\u4e0b\u9762\u4e24\u79cd\u5199\u6cd5\u662f\u7b49\u4ef7\u7684\u3002\n\n```js\nthis.update({\n count: 1\n})\n```\n\n\u7b49\u4ef7\u4e8e:\n\n```js\nthis.data.count = 1\nthis.update()\n```\n\n\u4e5f\u53ef\u4ee5\u548c setData \u4e00\u6837\u4f20\u9012 path:\n\n```js\nthis.update({\n 'list[1].obj.name': 'Omip'\n})\n```\n\n\u7531\u4e8e\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u66f4\u65b0\u662f\u5f02\u6b65\u7684\uff0c\u5982\u679c\u9700\u8981\u83b7\u53d6\u89c6\u56fe\u66f4\u65b0\u540e\u7684\u56de\u8c03\uff0c\u53ef\u4ee5\u4f7f\u7528\u7b2c\u4e8c\u4e2a\u53c2\u6570:\n\n```js\nthis.update({\n 'list[1].obj.name': 'Omip'\n}, () => {\n console.log('\u66f4\u65b0\u5b8c\u6210')\n})\n```\n\n\u6216\u8005\u53ea\u6709\u4e00\u4e2a\u53c2\u6570\uff0c\u4e14\u8be5\u53c2\u6570\u4e3a\u51fd\u6570:\n\n```js\nthis.update(() => {\n console.log('\u66f4\u65b0\u5b8c\u6210')\n})\n```\n\n## \u6ce8\u610f\u4e8b\u9879\n\n\u5728 JSX \u6216\u8005\u4e00\u4e9b\u8981\u4f7f\u7528\u56fe\u7247\u8d44\u6e90\u7684 API\uff0c\u9700\u8981\u4f7f\u7528 import \u6216\u8005 require \u5148\u5bfc\u5165\u56fe\u7247\u518d\u4f7f\u7528\uff0c\u4e0d\u80fd\u76f4\u63a5\u4f7f\u7528\u76f8\u5bf9\u5730\u5740\uff01\n\n\u5982\uff1a\n\n```js\n onShareAppMessage(){\n\t\treturn {\n title: '\u5206\u4eab\u6807\u9898',\n path: '/pages/index/index?id=123',\n imageUrl: require('./share.jpg'),\n success: (res) => {\n console.log(\"\u8f6c\u53d1\u6210\u529f\", res);\n },\n fail: (res) => {\n console.log(\"\u8f6c\u53d1\u5931\u8d25\", res);\n }\n }\n }\n```\n\n\u518d\u6bd4\u5982:\n\n```jsx\nimport src from './my-image.png'\n...\n...\n\n\n render() {\n return (\n <view>\n <image src={src}></image>\n </view>\n )\n }\n...\n...\n\n```\n\n## \u83b7\u53d6\u6700\u65b0\u7684 omip \u7248\u672c\n\n\u4f60\u53ea\u9700\u8981\u91cd\u65b0\u62c9\u53bb\u6a21\u677f\u4fbf\u53ef\u4ee5\u66f4\u65b0\u5230\u6700\u65b0\u7684 omip:\n\n```\nomi init-p my-app\n```\n\n## \u5b9e\u6218\u6848\u4f8b\n\n\n\n\n\n## License\n\nMIT \xa9 dntzhang\n\n#### Open Source Software Licensed Under the MIT License:\n\n[tarojs](https://github.com/NervJS/taro) 1.2.13\nCopyright (c) 2019 O2Team\n"}});
|
||||
//# sourceMappingURL=7.ca30d11d.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([8],{64:function(n,e){n.exports="# Omim\n\n[Omi](https://github.com/Tencent/omi) \u6253\u9020\u7684 Material Design \u6846\u67b6\u65e0\u5173\u6807\u51c6\u7ec4\u4ef6\uff0c\u4efb\u610f\u6846\u67b6\u90fd\u53ef\u4ee5\u4f7f\u7528\u3002\n\n\n\n## \u7279\u6027\n\n* \u4f7f\u7528\u6807\u51c6 Web Components \u7684 Custom Elements \u6e32\u67d3 \n* \u4efb\u610f\u6846\u67b6\u90fd\u53ef\u4ee5\u4f7f\u7528\u8fd9\u4e9b\u7ec4\u4ef6(\u6bd4\u5982 Omi, React, Vue and Angular)\n* \u540c\u65f6\u652f\u6301 JSX \u548c \u539f\u751f HTML \u6807\u7b7e\u7684\u4f7f\u7528\u65b9\u5f0f \n* \u6bcf\u4e2a\u7ec4\u4ef6\u53ef\u4ee5\u5355\u72ec\u4f7f\u7528\n* \u8d85\u7ea7\u5bb9\u6613\u66f4\u6362\u4e3b\u9898\u989c\u8272\u3001\u5b57\u4f53\u548c\u5706\u89d2\n* \u6269\u5c55\u4e86 HTML \u80fd\u529b\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u5b57\u7b26\u4e32 `'0'` \u6216\u8005\u5b57\u7b26\u4e32 `'false'` \u4f20\u9012 false \u7ed9\u5143\u7d20\n\n## \u4f7f\u7528\u6307\u5357\n\n### \u901a\u8fc7 script\n\n```html\n<script src=\"https://unpkg.com/omi\"><\/script>\n<script src=\"https://unpkg.com/@omim/core@latest/button/index.js\"><\/script>\n\n<m-button>I am button</m-button>\n```\n\n### \u901a\u8fc7 npm\n\n``` bash\nnpm install @omim/core\n```\n\nThen:\n\n```js\nimport '@omim/core/button'\n```\n\n\u7136\u540e\u5728\u4efb\u610f\u6846\u67b6\u4e2d\u4f7f\u7528\uff0c\u6bd4\u5982 Omi, React, Vue or Angular:\n\n``` html\n<m-button>I am button</m-button>\n```\n\nIt can also be used in pure js:\n\n```js\nvar button = document.createElement('m-button')\nbutton.innerHTML = 'I am button'\ndocument.body.append(button)\nbutton.addEventListener('click', function () {\n console.log('Clicked!')\n})\n\n//or\n//document.body.innerHTML = '<m-button>I am button</m-button>'\n```\n\n## \u66f4\u6539\u4e3b\u9898\n\n```js\ndocument.body.style.setProperty('--mdc-theme-primary', 'red')\ndocument.body.style.setProperty('--mdc-theme-secondary', 'blue')\ndocument.body.style.setProperty('--mdc-theme-error', 'yellow')\n```\n\n\u6240\u6709\u914d\u7f6e\u5982\u4e0b:\n\n```css\n--mdc-theme-primary: #0072d9;\n--mdc-theme-secondary: #2170b8;\n--mdc-theme-error: #f5222d;\n--mdc-theme-surface: #ffffff;\n--mdc-theme-on-primary: #ffffff;\n--mdc-theme-on-secondary: #ffffff;\n--mdc-theme-on-error: #ffffff;\n--mdc-theme-on-surface: #000000;\n--mdc-theme-background: #ffffff;\n--mdc-shape-small-component-radius: 4px;\n--mdc-shape-medium-component-radius: 4px;\n--mdc-shape-large-component-radius: 0px;\n--mdc-typography--font-family: Roboto, sans-serif;\n```\n\n## HTML \u6269\u5c55 \n\n\u5f53\u9ed8\u8ba4\u503c\u4e3a true\uff0c\u9700\u8981\u4f20\u9012 false \u7ed9 element \u7684\u65f6\u5019\uff0c\u4ee5\u524d\u662f\u5386\u53f2\u96be\u9898\uff0cOmi \u5b8c\u7f8e\u89e3\u51b3\u4e86\u8fd9\u4e00\u70b9\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u5b57\u7b26\u4e32 `'0'` \u6216\u8005 \u5b57\u7b26\u4e32 `'false'` \u6765\u8bbe\u7f6e\u3002\n\n```js\ndefine('my-element', class extends WeElement {\n static defaultProps = {\n show: true\n }\n\n static propTypes = {\n show: Boolean\n }\n\n render(props) {\n ...\n ...\n }\n})\n```\n\nUse:\n\n```html\n<my-element show=\"false\"></my-element>\n```\n\nor\n\n```html\n<my-element show=\"0\"></my-element>\n```\n\n## \u8d21\u732e\n\n### \u4e00\u4e9b\u547d\u4ee4\n\nBuild \u7ec4\u4ef6:\n\n```bash\nnpm run build -- component-name\n```\n\nBuild \u6240\u6709\u7ec4\u4ef6:\n\n```bash\nnpm run build-all\n```\n\nBuild \u4f8b\u5b50:\n\n```bash\nnpm start demo-name\n```\n\n\u53d1\u5e03:\n\n```bash\nnpm publish --access public\n```\n\n## \u76f8\u5173\u94fe\u63a5\n\n* [material.io docs](https://material.io/develop/web/components/buttons/) \n* [material.io demo](https://material-components.github.io/material-components-web-catalog/#/) \n* [material-theme-builder](https://material-theme-builder.glitch.me/)\n* [material-components-web](https://github.com/material-components/material-components-web)\n"}});
|
||||
//# sourceMappingURL=8.3ca68a2f.chunk.js.map
|
||||
webpackJsonp([8],{65:function(n,e){n.exports="# Omim\n\n[Omi](https://github.com/Tencent/omi) \u6253\u9020\u7684 Material Design \u6846\u67b6\u65e0\u5173\u6807\u51c6\u7ec4\u4ef6\uff0c\u4efb\u610f\u6846\u67b6\u90fd\u53ef\u4ee5\u4f7f\u7528\u3002\n\n\n\n## \u7279\u6027\n\n* \u4f7f\u7528\u6807\u51c6 Web Components \u7684 Custom Elements \u6e32\u67d3 \n* \u4efb\u610f\u6846\u67b6\u90fd\u53ef\u4ee5\u4f7f\u7528\u8fd9\u4e9b\u7ec4\u4ef6(\u6bd4\u5982 Omi, React, Vue and Angular)\n* \u540c\u65f6\u652f\u6301 JSX \u548c \u539f\u751f HTML \u6807\u7b7e\u7684\u4f7f\u7528\u65b9\u5f0f \n* \u6bcf\u4e2a\u7ec4\u4ef6\u53ef\u4ee5\u5355\u72ec\u4f7f\u7528\n* \u8d85\u7ea7\u5bb9\u6613\u66f4\u6362\u4e3b\u9898\u989c\u8272\u3001\u5b57\u4f53\u548c\u5706\u89d2\n* \u6269\u5c55\u4e86 HTML \u80fd\u529b\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u5b57\u7b26\u4e32 `'0'` \u6216\u8005\u5b57\u7b26\u4e32 `'false'` \u4f20\u9012 false \u7ed9\u5143\u7d20\n\n## \u4f7f\u7528\u6307\u5357\n\n### \u901a\u8fc7 script\n\n```html\n<script src=\"https://unpkg.com/omi\"><\/script>\n<script src=\"https://unpkg.com/@omim/core@latest/button/index.js\"><\/script>\n\n<m-button>I am button</m-button>\n```\n\n### \u901a\u8fc7 npm\n\n``` bash\nnpm install @omim/core\n```\n\nThen:\n\n```js\nimport '@omim/core/button'\n```\n\n\u7136\u540e\u5728\u4efb\u610f\u6846\u67b6\u4e2d\u4f7f\u7528\uff0c\u6bd4\u5982 Omi, React, Vue or Angular:\n\n``` html\n<m-button>I am button</m-button>\n```\n\nIt can also be used in pure js:\n\n```js\nvar button = document.createElement('m-button')\nbutton.innerHTML = 'I am button'\ndocument.body.append(button)\nbutton.addEventListener('click', function () {\n console.log('Clicked!')\n})\n\n//or\n//document.body.innerHTML = '<m-button>I am button</m-button>'\n```\n\n## \u66f4\u6539\u4e3b\u9898\n\n```js\ndocument.body.style.setProperty('--mdc-theme-primary', 'red')\ndocument.body.style.setProperty('--mdc-theme-secondary', 'blue')\ndocument.body.style.setProperty('--mdc-theme-error', 'yellow')\n```\n\n\u6240\u6709\u914d\u7f6e\u5982\u4e0b:\n\n```css\n--mdc-theme-primary: #0072d9;\n--mdc-theme-secondary: #2170b8;\n--mdc-theme-error: #f5222d;\n--mdc-theme-surface: #ffffff;\n--mdc-theme-on-primary: #ffffff;\n--mdc-theme-on-secondary: #ffffff;\n--mdc-theme-on-error: #ffffff;\n--mdc-theme-on-surface: #000000;\n--mdc-theme-background: #ffffff;\n--mdc-shape-small-component-radius: 4px;\n--mdc-shape-medium-component-radius: 4px;\n--mdc-shape-large-component-radius: 0px;\n--mdc-typography--font-family: Roboto, sans-serif;\n```\n\n## HTML \u6269\u5c55 \n\n\u5f53\u9ed8\u8ba4\u503c\u4e3a true\uff0c\u9700\u8981\u4f20\u9012 false \u7ed9 element \u7684\u65f6\u5019\uff0c\u4ee5\u524d\u662f\u5386\u53f2\u96be\u9898\uff0cOmi \u5b8c\u7f8e\u89e3\u51b3\u4e86\u8fd9\u4e00\u70b9\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u5b57\u7b26\u4e32 `'0'` \u6216\u8005 \u5b57\u7b26\u4e32 `'false'` \u6765\u8bbe\u7f6e\u3002\n\n```js\ndefine('my-element', class extends WeElement {\n static defaultProps = {\n show: true\n }\n\n static propTypes = {\n show: Boolean\n }\n\n render(props) {\n ...\n ...\n }\n})\n```\n\nUse:\n\n```html\n<my-element show=\"false\"></my-element>\n```\n\nor\n\n```html\n<my-element show=\"0\"></my-element>\n```\n\n## \u8d21\u732e\n\n### \u4e00\u4e9b\u547d\u4ee4\n\nBuild \u7ec4\u4ef6:\n\n```bash\nnpm run build -- component-name\n```\n\nBuild \u6240\u6709\u7ec4\u4ef6:\n\n```bash\nnpm run build-all\n```\n\nBuild \u4f8b\u5b50:\n\n```bash\nnpm start demo-name\n```\n\n\u53d1\u5e03:\n\n```bash\nnpm publish --access public\n```\n\n## \u76f8\u5173\u94fe\u63a5\n\n* [material.io docs](https://material.io/develop/web/components/buttons/) \n* [material.io demo](https://material-components.github.io/material-components-web-catalog/#/) \n* [material-theme-builder](https://material-theme-builder.glitch.me/)\n* [material-components-web](https://github.com/material-components/material-components-web)\n"}});
|
||||
//# sourceMappingURL=8.d8f052f0.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -26,12 +26,12 @@ const config = {
|
|||
{
|
||||
title: '其他',
|
||||
list: [
|
||||
{ name: 'Omim', md: 'omim' },
|
||||
{ name: 'Omim', md: 'omim' },,
|
||||
{ name: 'Kbone 多端开发', md: 'kbone' },
|
||||
{ name: '路由', md: 'router' },
|
||||
{ name: '服务端渲染', md: 'ssr' },
|
||||
{ name: '生态与例子', md: 'other' },
|
||||
{ name: 'Mps', md: 'mps' },
|
||||
{ name: 'Omip 多端开发', md: 'omip' }
|
||||
{ name: 'Mps', md: 'mps' }
|
||||
]
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
# omi-kbone
|
||||
|
||||
<p align="center"><img src="https://tencent.github.io/omi/assets/snake.jpg" alt="omi-kbone" width="200"/></p>
|
||||
|
||||
使用 omi + [kbone](https://github.com/wechat-miniprogram/kbone) 多端开发(小程序和Web)的贪吃蛇游戏。
|
||||
|
||||
## 一套语法多端运行
|
||||
|
||||
主界面:
|
||||
|
||||
```jsx
|
||||
import { define, h, rpx } from 'omio'
|
||||
import '../game'
|
||||
import './_index.css'
|
||||
|
||||
define('my-index', ({ store }) => (
|
||||
<div class="container">
|
||||
<h1>OMI SNAKE</h1>
|
||||
|
||||
<my-game></my-game>
|
||||
|
||||
<div class="ctrl">
|
||||
<div class="btn cm-btn cm-btn-dir up" onClick={store.turnUp}><i></i><em></em><span>Up</span></div>
|
||||
<div class="btn cm-btn cm-btn-dir down" onClick={store.turnDown}><i></i><em></em><span>Down</span></div>
|
||||
<div class="btn cm-btn cm-btn-dir left" onClick={store.turnLeft}><i></i><em></em><span >Left</span></div>
|
||||
<div class="btn cm-btn cm-btn-dir right" onClick={store.turnRight}><i></i><em></em><span >Right</span></div>
|
||||
<div class="btn cm-btn space" onClick={store.toggleSpeed}><i></i><span >加速/减速</span></div>
|
||||
<div class="btn reset small" onClick={store.reset}><i ></i><span >Reset</span></div>
|
||||
<div class="btn pp small" onClick={store.pauseOrPlay}><i></i><span >{store.data.paused ? 'Play' : 'Pause'}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
), {
|
||||
useSelf: ['paused'],
|
||||
css: ("undefined" != typeof wx && wx.getSystemInfoSync) ? '' : rpx(require('./_index.css'))
|
||||
})
|
||||
```
|
||||
|
||||
游戏界面:
|
||||
|
||||
```jsx
|
||||
import { define, h, rpx } from 'omio'
|
||||
import './_index.css'
|
||||
|
||||
define('my-game', _ => (
|
||||
<div class="game">
|
||||
{_.store.data.map.map(row => {
|
||||
return <p>
|
||||
{row.map(col => {
|
||||
if (col) {
|
||||
return <b class='s'></b>
|
||||
}
|
||||
return <b></b>
|
||||
})}
|
||||
</p>
|
||||
})}
|
||||
</div>
|
||||
), {
|
||||
use: ['map'],
|
||||
css: ("undefined" != typeof wx && wx.getSystemInfoSync) ? '' : rpx(require('./_index.css'))
|
||||
})
|
||||
```
|
||||
|
||||
## 快速开始
|
||||
|
||||
``` bash
|
||||
npx omi-cli init-kbone my-app
|
||||
cd my-app
|
||||
npm run mp //开发小程序
|
||||
npm run web //开发 web
|
||||
npm run build //发布 web
|
||||
```
|
||||
|
||||
## 目录说明
|
||||
|
||||
```
|
||||
├─ build
|
||||
│ ├─ mp //微信开发者工具指向的目录，用于生产环境
|
||||
│ ├─ web //web 编译出的文件，用于生产环境
|
||||
├─ config
|
||||
├─ public
|
||||
├─ scripts
|
||||
├─ src
|
||||
│ ├─ assets
|
||||
│ ├─ components //存放所有页面的组件
|
||||
│ ├─ models //存放所有模型
|
||||
│ ├─ stores //存放页面的 store
|
||||
│ ├─ log.js //入口文件，会 build 成 log.html
|
||||
│ └─ index.js //入口文件，会 build 成 index.html
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
* 不要使用 bindtap，使用 onClick
|
||||
* 图片请使用 cdn 地址或者 base64
|
||||
* 如果要兼容 web，请用 HTML 和 CSS 标签，比如用 div，不用 view 等
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Loading…
Reference in New Issue