update site
This commit is contained in:
dntzhang
parent
a6c6979c34
commit
b0ebeca5b5
|
|
@ -1,71 +1,75 @@
|
|||
{
|
||||
"cn.css": "static/css/cn.4dd07f49.css",
|
||||
"cn.css.map": "static/css/cn.4dd07f49.css.map",
|
||||
"cn.js": "static/js/cn.8d84e04f.js",
|
||||
"cn.js.map": "static/js/cn.8d84e04f.js.map",
|
||||
"cn.js": "static/js/cn.ac61e6ce.js",
|
||||
"cn.js.map": "static/js/cn.ac61e6ce.js.map",
|
||||
"index.css": "static/css/index.4dd07f49.css",
|
||||
"index.css.map": "static/css/index.4dd07f49.css.map",
|
||||
"index.js": "static/js/index.1fbfd61e.js",
|
||||
"index.js.map": "static/js/index.1fbfd61e.js.map",
|
||||
"static/js/0.f770eb0e.chunk.js": "static/js/0.f770eb0e.chunk.js",
|
||||
"static/js/0.f770eb0e.chunk.js.map": "static/js/0.f770eb0e.chunk.js.map",
|
||||
"static/js/1.0d025b66.chunk.js": "static/js/1.0d025b66.chunk.js",
|
||||
"static/js/1.0d025b66.chunk.js.map": "static/js/1.0d025b66.chunk.js.map",
|
||||
"static/js/10.e6acfca5.chunk.js": "static/js/10.e6acfca5.chunk.js",
|
||||
"static/js/10.e6acfca5.chunk.js.map": "static/js/10.e6acfca5.chunk.js.map",
|
||||
"static/js/11.94470037.chunk.js": "static/js/11.94470037.chunk.js",
|
||||
"static/js/11.94470037.chunk.js.map": "static/js/11.94470037.chunk.js.map",
|
||||
"static/js/12.1551e567.chunk.js": "static/js/12.1551e567.chunk.js",
|
||||
"static/js/12.1551e567.chunk.js.map": "static/js/12.1551e567.chunk.js.map",
|
||||
"static/js/13.a7923ed9.chunk.js": "static/js/13.a7923ed9.chunk.js",
|
||||
"static/js/13.a7923ed9.chunk.js.map": "static/js/13.a7923ed9.chunk.js.map",
|
||||
"static/js/14.84f14bf7.chunk.js": "static/js/14.84f14bf7.chunk.js",
|
||||
"static/js/14.84f14bf7.chunk.js.map": "static/js/14.84f14bf7.chunk.js.map",
|
||||
"static/js/15.e34c03c9.chunk.js": "static/js/15.e34c03c9.chunk.js",
|
||||
"static/js/15.e34c03c9.chunk.js.map": "static/js/15.e34c03c9.chunk.js.map",
|
||||
"static/js/16.48415b29.chunk.js": "static/js/16.48415b29.chunk.js",
|
||||
"static/js/16.48415b29.chunk.js.map": "static/js/16.48415b29.chunk.js.map",
|
||||
"static/js/17.d859539c.chunk.js": "static/js/17.d859539c.chunk.js",
|
||||
"static/js/17.d859539c.chunk.js.map": "static/js/17.d859539c.chunk.js.map",
|
||||
"static/js/18.44386d31.chunk.js": "static/js/18.44386d31.chunk.js",
|
||||
"static/js/18.44386d31.chunk.js.map": "static/js/18.44386d31.chunk.js.map",
|
||||
"static/js/19.50bd4319.chunk.js": "static/js/19.50bd4319.chunk.js",
|
||||
"static/js/19.50bd4319.chunk.js.map": "static/js/19.50bd4319.chunk.js.map",
|
||||
"static/js/2.9632a8c5.chunk.js": "static/js/2.9632a8c5.chunk.js",
|
||||
"static/js/2.9632a8c5.chunk.js.map": "static/js/2.9632a8c5.chunk.js.map",
|
||||
"static/js/20.579215c0.chunk.js": "static/js/20.579215c0.chunk.js",
|
||||
"static/js/20.579215c0.chunk.js.map": "static/js/20.579215c0.chunk.js.map",
|
||||
"static/js/21.0b7ceb91.chunk.js": "static/js/21.0b7ceb91.chunk.js",
|
||||
"static/js/21.0b7ceb91.chunk.js.map": "static/js/21.0b7ceb91.chunk.js.map",
|
||||
"static/js/22.7cadae94.chunk.js": "static/js/22.7cadae94.chunk.js",
|
||||
"static/js/22.7cadae94.chunk.js.map": "static/js/22.7cadae94.chunk.js.map",
|
||||
"static/js/23.b1e284bd.chunk.js": "static/js/23.b1e284bd.chunk.js",
|
||||
"static/js/23.b1e284bd.chunk.js.map": "static/js/23.b1e284bd.chunk.js.map",
|
||||
"static/js/24.d0714382.chunk.js": "static/js/24.d0714382.chunk.js",
|
||||
"static/js/24.d0714382.chunk.js.map": "static/js/24.d0714382.chunk.js.map",
|
||||
"static/js/25.204510ac.chunk.js": "static/js/25.204510ac.chunk.js",
|
||||
"static/js/25.204510ac.chunk.js.map": "static/js/25.204510ac.chunk.js.map",
|
||||
"static/js/26.d3e0fb29.chunk.js": "static/js/26.d3e0fb29.chunk.js",
|
||||
"static/js/26.d3e0fb29.chunk.js.map": "static/js/26.d3e0fb29.chunk.js.map",
|
||||
"static/js/27.cd58c5d2.chunk.js": "static/js/27.cd58c5d2.chunk.js",
|
||||
"static/js/27.cd58c5d2.chunk.js.map": "static/js/27.cd58c5d2.chunk.js.map",
|
||||
"static/js/28.3ca205f6.chunk.js": "static/js/28.3ca205f6.chunk.js",
|
||||
"static/js/28.3ca205f6.chunk.js.map": "static/js/28.3ca205f6.chunk.js.map",
|
||||
"static/js/29.18dc7b40.chunk.js": "static/js/29.18dc7b40.chunk.js",
|
||||
"static/js/29.18dc7b40.chunk.js.map": "static/js/29.18dc7b40.chunk.js.map",
|
||||
"static/js/3.1c5042fb.chunk.js": "static/js/3.1c5042fb.chunk.js",
|
||||
"static/js/3.1c5042fb.chunk.js.map": "static/js/3.1c5042fb.chunk.js.map",
|
||||
"static/js/4.74864855.chunk.js": "static/js/4.74864855.chunk.js",
|
||||
"static/js/4.74864855.chunk.js.map": "static/js/4.74864855.chunk.js.map",
|
||||
"static/js/5.051f31bf.chunk.js": "static/js/5.051f31bf.chunk.js",
|
||||
"static/js/5.051f31bf.chunk.js.map": "static/js/5.051f31bf.chunk.js.map",
|
||||
"static/js/6.412e09ae.chunk.js": "static/js/6.412e09ae.chunk.js",
|
||||
"static/js/6.412e09ae.chunk.js.map": "static/js/6.412e09ae.chunk.js.map",
|
||||
"static/js/7.df2bc85a.chunk.js": "static/js/7.df2bc85a.chunk.js",
|
||||
"static/js/7.df2bc85a.chunk.js.map": "static/js/7.df2bc85a.chunk.js.map",
|
||||
"static/js/8.06eeaa91.chunk.js": "static/js/8.06eeaa91.chunk.js",
|
||||
"static/js/8.06eeaa91.chunk.js.map": "static/js/8.06eeaa91.chunk.js.map",
|
||||
"static/js/9.c60ec43c.chunk.js": "static/js/9.c60ec43c.chunk.js",
|
||||
"static/js/9.c60ec43c.chunk.js.map": "static/js/9.c60ec43c.chunk.js.map",
|
||||
"index.js": "static/js/index.b0a09b3e.js",
|
||||
"index.js.map": "static/js/index.b0a09b3e.js.map",
|
||||
"static/js/0.f6b49677.chunk.js": "static/js/0.f6b49677.chunk.js",
|
||||
"static/js/0.f6b49677.chunk.js.map": "static/js/0.f6b49677.chunk.js.map",
|
||||
"static/js/1.08295283.chunk.js": "static/js/1.08295283.chunk.js",
|
||||
"static/js/1.08295283.chunk.js.map": "static/js/1.08295283.chunk.js.map",
|
||||
"static/js/10.27f188c7.chunk.js": "static/js/10.27f188c7.chunk.js",
|
||||
"static/js/10.27f188c7.chunk.js.map": "static/js/10.27f188c7.chunk.js.map",
|
||||
"static/js/11.1885c8ec.chunk.js": "static/js/11.1885c8ec.chunk.js",
|
||||
"static/js/11.1885c8ec.chunk.js.map": "static/js/11.1885c8ec.chunk.js.map",
|
||||
"static/js/12.99cfd40d.chunk.js": "static/js/12.99cfd40d.chunk.js",
|
||||
"static/js/12.99cfd40d.chunk.js.map": "static/js/12.99cfd40d.chunk.js.map",
|
||||
"static/js/13.5d70a745.chunk.js": "static/js/13.5d70a745.chunk.js",
|
||||
"static/js/13.5d70a745.chunk.js.map": "static/js/13.5d70a745.chunk.js.map",
|
||||
"static/js/14.4ee71391.chunk.js": "static/js/14.4ee71391.chunk.js",
|
||||
"static/js/14.4ee71391.chunk.js.map": "static/js/14.4ee71391.chunk.js.map",
|
||||
"static/js/15.e804bc91.chunk.js": "static/js/15.e804bc91.chunk.js",
|
||||
"static/js/15.e804bc91.chunk.js.map": "static/js/15.e804bc91.chunk.js.map",
|
||||
"static/js/16.e084ed27.chunk.js": "static/js/16.e084ed27.chunk.js",
|
||||
"static/js/16.e084ed27.chunk.js.map": "static/js/16.e084ed27.chunk.js.map",
|
||||
"static/js/17.22f52fae.chunk.js": "static/js/17.22f52fae.chunk.js",
|
||||
"static/js/17.22f52fae.chunk.js.map": "static/js/17.22f52fae.chunk.js.map",
|
||||
"static/js/18.730eeb3b.chunk.js": "static/js/18.730eeb3b.chunk.js",
|
||||
"static/js/18.730eeb3b.chunk.js.map": "static/js/18.730eeb3b.chunk.js.map",
|
||||
"static/js/19.e37070eb.chunk.js": "static/js/19.e37070eb.chunk.js",
|
||||
"static/js/19.e37070eb.chunk.js.map": "static/js/19.e37070eb.chunk.js.map",
|
||||
"static/js/2.82aa1247.chunk.js": "static/js/2.82aa1247.chunk.js",
|
||||
"static/js/2.82aa1247.chunk.js.map": "static/js/2.82aa1247.chunk.js.map",
|
||||
"static/js/20.7729a37c.chunk.js": "static/js/20.7729a37c.chunk.js",
|
||||
"static/js/20.7729a37c.chunk.js.map": "static/js/20.7729a37c.chunk.js.map",
|
||||
"static/js/21.4551715a.chunk.js": "static/js/21.4551715a.chunk.js",
|
||||
"static/js/21.4551715a.chunk.js.map": "static/js/21.4551715a.chunk.js.map",
|
||||
"static/js/22.de295c38.chunk.js": "static/js/22.de295c38.chunk.js",
|
||||
"static/js/22.de295c38.chunk.js.map": "static/js/22.de295c38.chunk.js.map",
|
||||
"static/js/23.1f4e3bc1.chunk.js": "static/js/23.1f4e3bc1.chunk.js",
|
||||
"static/js/23.1f4e3bc1.chunk.js.map": "static/js/23.1f4e3bc1.chunk.js.map",
|
||||
"static/js/24.d7ad68dc.chunk.js": "static/js/24.d7ad68dc.chunk.js",
|
||||
"static/js/24.d7ad68dc.chunk.js.map": "static/js/24.d7ad68dc.chunk.js.map",
|
||||
"static/js/25.734c7748.chunk.js": "static/js/25.734c7748.chunk.js",
|
||||
"static/js/25.734c7748.chunk.js.map": "static/js/25.734c7748.chunk.js.map",
|
||||
"static/js/26.ef88d36f.chunk.js": "static/js/26.ef88d36f.chunk.js",
|
||||
"static/js/26.ef88d36f.chunk.js.map": "static/js/26.ef88d36f.chunk.js.map",
|
||||
"static/js/27.e12ca944.chunk.js": "static/js/27.e12ca944.chunk.js",
|
||||
"static/js/27.e12ca944.chunk.js.map": "static/js/27.e12ca944.chunk.js.map",
|
||||
"static/js/28.23d63cad.chunk.js": "static/js/28.23d63cad.chunk.js",
|
||||
"static/js/28.23d63cad.chunk.js.map": "static/js/28.23d63cad.chunk.js.map",
|
||||
"static/js/29.fcb31596.chunk.js": "static/js/29.fcb31596.chunk.js",
|
||||
"static/js/29.fcb31596.chunk.js.map": "static/js/29.fcb31596.chunk.js.map",
|
||||
"static/js/3.d4de73a3.chunk.js": "static/js/3.d4de73a3.chunk.js",
|
||||
"static/js/3.d4de73a3.chunk.js.map": "static/js/3.d4de73a3.chunk.js.map",
|
||||
"static/js/30.4ac661da.chunk.js": "static/js/30.4ac661da.chunk.js",
|
||||
"static/js/30.4ac661da.chunk.js.map": "static/js/30.4ac661da.chunk.js.map",
|
||||
"static/js/31.55b81de7.chunk.js": "static/js/31.55b81de7.chunk.js",
|
||||
"static/js/31.55b81de7.chunk.js.map": "static/js/31.55b81de7.chunk.js.map",
|
||||
"static/js/4.4af8cac5.chunk.js": "static/js/4.4af8cac5.chunk.js",
|
||||
"static/js/4.4af8cac5.chunk.js.map": "static/js/4.4af8cac5.chunk.js.map",
|
||||
"static/js/5.11c3842c.chunk.js": "static/js/5.11c3842c.chunk.js",
|
||||
"static/js/5.11c3842c.chunk.js.map": "static/js/5.11c3842c.chunk.js.map",
|
||||
"static/js/6.0c7fe731.chunk.js": "static/js/6.0c7fe731.chunk.js",
|
||||
"static/js/6.0c7fe731.chunk.js.map": "static/js/6.0c7fe731.chunk.js.map",
|
||||
"static/js/7.106d7946.chunk.js": "static/js/7.106d7946.chunk.js",
|
||||
"static/js/7.106d7946.chunk.js.map": "static/js/7.106d7946.chunk.js.map",
|
||||
"static/js/8.0cfd753d.chunk.js": "static/js/8.0cfd753d.chunk.js",
|
||||
"static/js/8.0cfd753d.chunk.js.map": "static/js/8.0cfd753d.chunk.js.map",
|
||||
"static/js/9.d1aba1bc.chunk.js": "static/js/9.d1aba1bc.chunk.js",
|
||||
"static/js/9.d1aba1bc.chunk.js.map": "static/js/9.d1aba1bc.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 - Next Front End 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.8d84e04f.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 - Next Front End 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.ac61e6ce.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 - Next Front End 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.1fbfd61e.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 - Next Front End 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.b0a09b3e.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([0],{70: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\u5ffd\u7565 attributes\uff0c\u5f3a\u884c\u66f4\u65b0:\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\u590d props\n this.props.show = false\n //\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```"}});
|
||||
//# sourceMappingURL=0.f6b49677.chunk.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["../static/js/0.f6b49677.chunk.js","docs/zh-cn/update.md"],"names":["webpackJsonp","70","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/0.f6b49677.chunk.js","sourcesContent":["webpackJsonp([0],{\n\n/***/ 70:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\\n## Update\\n\\n`update` 方法是内置的重要核心方法，用于更新组件自身。比如:\\n\\n```js\\nthis.update()\\n```\\n\\n也可以传递参数，决定是否忽略 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 //忽略 attributes\\n this.update(true)\\n //触发事件，可以通过这个更改外部的状态变量来保持一致性，但是外面的组件不用再更新\\n this.fire('close')\\n}\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/0.f6b49677.chunk.js","module.exports = \"\\n## Update\\n\\n`update` 方法是内置的重要核心方法，用于更新组件自身。比如:\\n\\n```js\\nthis.update()\\n```\\n\\n也可以传递参数，决定是否忽略 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 //忽略 attributes\\n this.update(true)\\n //触发事件，可以通过这个更改外部的状态变量来保持一致性，但是外面的组件不用再更新\\n this.fire('close')\\n}\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/update.md\n// module id = 70\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
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([10],{60: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 |\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.27f188c7.chunk.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["../static/js/10.27f188c7.chunk.js","docs/zh-cn/lifecycle.md"],"names":["webpackJsonp","60","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/10.27f188c7.chunk.js","sourcesContent":["webpackJsonp([10],{\n\n/***/ 60:\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` | 父元素重新渲染触发 |\\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.27f188c7.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` | 父元素重新渲染触发 |\\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 = 60\n// module chunks = 10"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([10],{58: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=10.e6acfca5.chunk.js.map
|
||||
webpackJsonp([11],{59: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.1885c8ec.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([11],{57:function(n,t){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\u4e0b\u4e00\u4ee3\u524d\u7aef\u6846\u67b6\uff0c\u57fa\u4e8e Web Components \u8bbe\u8ba1\uff0c\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## \u4e00\u4e2a HTML \u5b8c\u5168\u4e0a\u624b\n\n\u4e0b\u9762\u8fd9\u4e2a\u9875\u9762\u4e0d\u9700\u8981\u4efb\u4f55\u6784\u5efa\u5de5\u5177\u5c31\u53ef\u4ee5\u6267\u884c:\n\n```html\n<script src="https://unpkg.com/omi"><\/script>\n<script>\n const { define, WeElement, html, render } = Omi\n\n define(\'my-counter\', class extends WeElement {\n install() {\n this.data.count = 1\n this.sub = this.sub.bind(this)\n this.add = this.add.bind(this)\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 html`\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 render(html`<my-counter />`, \'body\')\n<\/script>\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* [\u70b9\u51fb\u8fd9\u91cc\u770b\u6267\u884c\u7ed3\u679c](https://tencent.github.io/omi/assets/omi.html)\n\n\u4f60\u53ef\u4ee5\u4f7f\u7528 JSX \u548c ES2015+ \u6765\u4e66\u5199\u81ea\u5b9a\u4e49\u5143\u7d20:\n\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\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\u606d\u559c\u4f60\uff01'}});
|
||||
//# sourceMappingURL=11.94470037.chunk.js.map
|
||||
webpackJsonp([12],{58:function(n,t){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\u4e0b\u4e00\u4ee3\u524d\u7aef\u6846\u67b6\uff0c\u57fa\u4e8e Web Components \u8bbe\u8ba1\uff0c\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## \u4e00\u4e2a HTML \u5b8c\u5168\u4e0a\u624b\n\n\u4e0b\u9762\u8fd9\u4e2a\u9875\u9762\u4e0d\u9700\u8981\u4efb\u4f55\u6784\u5efa\u5de5\u5177\u5c31\u53ef\u4ee5\u6267\u884c:\n\n```html\n<script src="https://unpkg.com/omi"><\/script>\n<script>\n const { define, WeElement, html, render } = Omi\n\n define(\'my-counter\', class extends WeElement {\n install() {\n this.data.count = 1\n this.sub = this.sub.bind(this)\n this.add = this.add.bind(this)\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 html`\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 render(html`<my-counter />`, \'body\')\n<\/script>\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* [\u70b9\u51fb\u8fd9\u91cc\u770b\u6267\u884c\u7ed3\u679c](https://tencent.github.io/omi/assets/omi.html)\n\n\u4f60\u53ef\u4ee5\u4f7f\u7528 JSX \u548c ES2015+ \u6765\u4e66\u5199\u81ea\u5b9a\u4e49\u5143\u7d20:\n\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\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\u606d\u559c\u4f60\uff01'}});
|
||||
//# sourceMappingURL=12.99cfd40d.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([12],{56: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|\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|MVVM \u6a21\u677f(omi-cli v3.0.22+)|`omi init-mvvm my-app` |MVVM \u6a21\u677f|\n'}});
|
||||
//# sourceMappingURL=12.1551e567.chunk.js.map
|
||||
webpackJsonp([13],{57: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|\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|MVVM \u6a21\u677f(omi-cli v3.0.22+)|`omi init-mvvm my-app` |MVVM \u6a21\u677f|\n'}});
|
||||
//# sourceMappingURL=13.5d70a745.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([13],{55: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=13.a7923ed9.chunk.js.map
|
||||
webpackJsonp([14],{56: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=14.4ee71391.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/13.a7923ed9.chunk.js","docs/zh-cn/event.md"],"names":["webpackJsonp","55","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/13.a7923ed9.chunk.js","sourcesContent":["webpackJsonp([13],{\n\n/***/ 55:\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/13.a7923ed9.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 = 55\n// module chunks = 13"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/14.4ee71391.chunk.js","docs/zh-cn/event.md"],"names":["webpackJsonp","56","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/14.4ee71391.chunk.js","sourcesContent":["webpackJsonp([14],{\n\n/***/ 56:\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/14.4ee71391.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 = 56\n// module chunks = 14"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([14],{54: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=14.84f14bf7.chunk.js.map
|
||||
webpackJsonp([15],{55: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=15.e804bc91.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/14.84f14bf7.chunk.js","docs/zh-cn/css.md"],"names":["webpackJsonp","54","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/14.84f14bf7.chunk.js","sourcesContent":["webpackJsonp([14],{\n\n/***/ 54:\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/14.84f14bf7.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 = 54\n// module chunks = 14"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/15.e804bc91.chunk.js","docs/zh-cn/css.md"],"names":["webpackJsonp","55","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/15.e804bc91.chunk.js","sourcesContent":["webpackJsonp([15],{\n\n/***/ 55:\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/15.e804bc91.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 = 55\n// module chunks = 15"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([15],{53: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=15.e34c03c9.chunk.js.map
|
||||
webpackJsonp([16],{54: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=16.e084ed27.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/15.e34c03c9.chunk.js","docs/zh-cn/class.md"],"names":["webpackJsonp","53","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/15.e34c03c9.chunk.js","sourcesContent":["webpackJsonp([15],{\n\n/***/ 53:\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/15.e34c03c9.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 = 53\n// module chunks = 15"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/16.e084ed27.chunk.js","docs/zh-cn/class.md"],"names":["webpackJsonp","54","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/16.e084ed27.chunk.js","sourcesContent":["webpackJsonp([16],{\n\n/***/ 54:\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/16.e084ed27.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 = 54\n// module chunks = 16"],"sourceRoot":""}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([17],{53: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 and force 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 //ignore attributes\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```"}});
|
||||
//# sourceMappingURL=17.22f52fae.chunk.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["../static/js/17.22f52fae.chunk.js","docs/en/update.md"],"names":["webpackJsonp","53","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/17.22f52fae.chunk.js","sourcesContent":["webpackJsonp([17],{\n\n/***/ 53:\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 and force 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 //ignore attributes\\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/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/17.22f52fae.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 and force 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 //ignore attributes\\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\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/update.md\n// module id = 53\n// module chunks = 17"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([16],{52:function(n,e){n.exports="## What's Store?\n\nStore is Omi's built-in centralized data warehouse, which solves and provides the following problems and capabilities:\n\n* Component Tree Data Sharing\n* Data Change Updates Dependent Components on Demand\n\n\n\n## A piece of code is completely ready for Store\n\n```jsx\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-counter', class extends WeElement {\n static use = [\n { count: 'count' }\n ]\n\n add = () => this.store.add()\n sub = () => this.store.sub()\n\n addIfOdd = () => {\n if (this.use.count % 2 !== 0) {\n this.store.add()\n }\n }\n\n addAsync = () => {\n setTimeout(() => this.store.add(), 1000)\n }\n\n render() {\n return (\n <p>\n Clicked: {this.use.count} times\n {' '}\n <button onClick={this.add}>+</button>\n {' '}\n <button onClick={this.sub}>-</button>\n {' '}\n <button onClick={this.addIfOdd}>\n Add if odd\n </button>\n {' '}\n <button onClick={this.addAsync}>\n Add async\n </button>\n </p>\n )\n }\n})\n\nrender(<my-counter />, 'body', {\n data: {\n count: 0\n },\n sub() {\n this.data.count--\n },\n add() {\n this.data.count++\n },\n})\n```\n\n* Declare a dependent path by `static use'.\n* `store` injects all components from the root node through the third parameter of render.\n\nHere is a complicated example of `use'.\n\nData of store:\n\n```json\n{\n count: 0,\n arr: ['china', 'tencent'],\n motto: 'I love omi.',\n userInfo: {\n firstName: 'dnt',\n lastName: 'zhang',\n age: 18\n }\n}\n```\n\nStatic use:\n\n```jsx\nstatic use = [\n 'count', //Direct string, accessible through this.use[0] \n 'arr[0]', //It also supports path, which is accessible through this.use[1]\n //Support JSON\n {\n //Alias, accessible through this.use.reverseMotto\n reverseMotto: [\n 'motto', //path\n target => target.split('').reverse().join('') //computed\n ]\n },\n { name: 'arr[1]' }, //{ alias: path }\uff0caccessible through this.use.name\n {\n //alias\uff0caccessible through this.use.fullName\n fullName: [\n ['userInfo.firstName', 'userInfo.lastName'], //path array\n (firstName, lastName) => firstName + lastName //computed\n ]\n },\n]\n```\n\nLet's look at the use of JSX:\n\n```jsx\n...\n...\nrender() {\n return (\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.use[0]}</span>\n <button onClick={this.add}>+</button>\n <div>\n <span>{this.use[1]}</span>\n <button onClick={this.rename}>rename</button>\n </div>\n <div>{this.use.reverseMotto}</div><button onClick={this.changeMotto}>change motto</button>\n <div>{this.use.name}</div>\n <div>{this.use[3]}</div>\n <div>\n {this.use.fullName}\n <button onClick={this.changeFirstName}>change first name</button>\n </div>\n </div>\n )\n}\n...\n...\n```\n\nWithout alias, you can also access it directly through `this.store.data.xxx'.\n\n### Path hit rule\n\n| Proxy Path | path in static use | update |\n| ---------- | ---------- | -------- |\n| abc | abc | true |\n| abc[1] | abc | true |\n| abc.a | abc | true |\n| abc | abc.a | false |\n| abc | abc[1] | false |\n| abc | abc[1].c | false |\n| abc.b | abc.b | true |\n\nThe above can be updated by hitting only one condition!\n\nSummary: As long as the path of the injected component is equal to that declared in use or under one of the path sub-nodes declared in use, it will be updated!\n\n### Destructuring assignment\n\n```jsx\nimport { define, WeElement } from 'omi'\nimport '../my-list'\n\ndefine('my-sidebar', class extends WeElement {\n static css = require('./_index.css')\n\n static use = [\n 'menus',\n 'sideBarShow',\n 'lan'\n ]\n\n render() {\n const [menus, sideBarShow, lan] = this.use\n\n return (\n <div class={`list${sideBarShow ? ' show' : ''}`}>\n {menus[lan].map((menu, index) => (\n <my-list menu={menu} index={index} />\n ))}\n </div>\n )\n }\n})\n```\n\nHere is an example of using the ES2015+ Grammar `const [xx, xxx] = xxxx` for fast assignment.\n\n\n## initUse\n\nIf you don't want the same components to have the same dependencies, you can use `initUse' to achieve dynamic use:\n\n```js\ninitUse() {\n return [\n 'a.b',\n 'c[1].d',\n `e.f.${xxx}.d[${index}]`\n ]\n}\n```\n\nVery flexible!\n"}});
|
||||
//# sourceMappingURL=16.48415b29.chunk.js.map
|
||||
webpackJsonp([18],{52:function(n,e){n.exports="## What's Store?\n\nStore is Omi's built-in centralized data warehouse, which solves and provides the following problems and capabilities:\n\n* Component Tree Data Sharing\n* Data Change Updates Dependent Components on Demand\n\n\n\n## A piece of code is completely ready for Store\n\n```jsx\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-counter', class extends WeElement {\n static use = [\n { count: 'count' }\n ]\n\n add = () => this.store.add()\n sub = () => this.store.sub()\n\n addIfOdd = () => {\n if (this.use.count % 2 !== 0) {\n this.store.add()\n }\n }\n\n addAsync = () => {\n setTimeout(() => this.store.add(), 1000)\n }\n\n render() {\n return (\n <p>\n Clicked: {this.use.count} times\n {' '}\n <button onClick={this.add}>+</button>\n {' '}\n <button onClick={this.sub}>-</button>\n {' '}\n <button onClick={this.addIfOdd}>\n Add if odd\n </button>\n {' '}\n <button onClick={this.addAsync}>\n Add async\n </button>\n </p>\n )\n }\n})\n\nrender(<my-counter />, 'body', {\n data: {\n count: 0\n },\n sub() {\n this.data.count--\n },\n add() {\n this.data.count++\n },\n})\n```\n\n* Declare a dependent path by `static use'.\n* `store` injects all components from the root node through the third parameter of render.\n\nHere is a complicated example of `use'.\n\nData of store:\n\n```json\n{\n count: 0,\n arr: ['china', 'tencent'],\n motto: 'I love omi.',\n userInfo: {\n firstName: 'dnt',\n lastName: 'zhang',\n age: 18\n }\n}\n```\n\nStatic use:\n\n```jsx\nstatic use = [\n 'count', //Direct string, accessible through this.use[0] \n 'arr[0]', //It also supports path, which is accessible through this.use[1]\n //Support JSON\n {\n //Alias, accessible through this.use.reverseMotto\n reverseMotto: [\n 'motto', //path\n target => target.split('').reverse().join('') //computed\n ]\n },\n { name: 'arr[1]' }, //{ alias: path }\uff0caccessible through this.use.name\n {\n //alias\uff0caccessible through this.use.fullName\n fullName: [\n ['userInfo.firstName', 'userInfo.lastName'], //path array\n (firstName, lastName) => firstName + lastName //computed\n ]\n },\n]\n```\n\nLet's look at the use of JSX:\n\n```jsx\n...\n...\nrender() {\n return (\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.use[0]}</span>\n <button onClick={this.add}>+</button>\n <div>\n <span>{this.use[1]}</span>\n <button onClick={this.rename}>rename</button>\n </div>\n <div>{this.use.reverseMotto}</div><button onClick={this.changeMotto}>change motto</button>\n <div>{this.use.name}</div>\n <div>{this.use[3]}</div>\n <div>\n {this.use.fullName}\n <button onClick={this.changeFirstName}>change first name</button>\n </div>\n </div>\n )\n}\n...\n...\n```\n\nWithout alias, you can also access it directly through `this.store.data.xxx'.\n\n### Path hit rule\n\n| Proxy Path | path in static use | update |\n| ---------- | ---------- | -------- |\n| abc | abc | true |\n| abc[1] | abc | true |\n| abc.a | abc | true |\n| abc | abc.a | false |\n| abc | abc[1] | false |\n| abc | abc[1].c | false |\n| abc.b | abc.b | true |\n\nThe above can be updated by hitting only one condition!\n\nSummary: As long as the path of the injected component is equal to that declared in use or under one of the path sub-nodes declared in use, it will be updated!\n\n### Destructuring assignment\n\n```jsx\nimport { define, WeElement } from 'omi'\nimport '../my-list'\n\ndefine('my-sidebar', class extends WeElement {\n static css = require('./_index.css')\n\n static use = [\n 'menus',\n 'sideBarShow',\n 'lan'\n ]\n\n render() {\n const [menus, sideBarShow, lan] = this.use\n\n return (\n <div class={`list${sideBarShow ? ' show' : ''}`}>\n {menus[lan].map((menu, index) => (\n <my-list menu={menu} index={index} />\n ))}\n </div>\n )\n }\n})\n```\n\nHere is an example of using the ES2015+ Grammar `const [xx, xxx] = xxxx` for fast assignment.\n\n\n## initUse\n\nIf you don't want the same components to have the same dependencies, you can use `initUse' to achieve dynamic use:\n\n```js\ninitUse() {\n return [\n 'a.b',\n 'c[1].d',\n `e.f.${xxx}.d[${index}]`\n ]\n}\n```\n\nVery flexible!\n"}});
|
||||
//# sourceMappingURL=18.730eeb3b.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([17],{51: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-s 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=17.d859539c.chunk.js.map
|
||||
webpackJsonp([19],{51: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-s 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=19.e37070eb.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([1],{67: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-s 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=1.0d025b66.chunk.js.map
|
||||
webpackJsonp([2],{68: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-s 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.82aa1247.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([18],{50:function(n,e){n.exports="# omi-router\n\nomi-router is a router plugin of [Omi](http://omijs.org), 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 static observe = true\n\n data = { tag: 'my-home' }\n\n install() {\n\n route('/', () => {\n this.data.tag = 'my-home'\n })\n\n route('/about', (evt) => {\n console.log(evt.query)\n this.data.tag = 'my-about'\n })\n\n route('/user-list', () => {\n this.data.tag = 'user-list'\n })\n\n route('/user/:name/category/:category', (evt) => {\n this.data.tag = 'my-user'\n this.data.params = evt.params\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=18.44386d31.chunk.js.map
|
||||
webpackJsonp([20],{50:function(n,e){n.exports="# omi-router\n\nomi-router is a router plugin of [Omi](http://omijs.org), 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 static observe = true\n\n data = { tag: 'my-home' }\n\n install() {\n\n route('/', () => {\n this.data.tag = 'my-home'\n })\n\n route('/about', (evt) => {\n console.log(evt.query)\n this.data.tag = 'my-about'\n })\n\n route('/user-list', () => {\n this.data.tag = 'user-list'\n })\n\n route('/user/:name/category/:category', (evt) => {\n this.data.tag = 'my-user'\n this.data.params = evt.params\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=20.7729a37c.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([19],{49: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=19.50bd4319.chunk.js.map
|
||||
webpackJsonp([21],{49: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=21.4551715a.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/19.50bd4319.chunk.js","docs/en/ref.md"],"names":["webpackJsonp","49","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/19.50bd4319.chunk.js","sourcesContent":["webpackJsonp([19],{\n\n/***/ 49:\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/19.50bd4319.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 = 49\n// module chunks = 19"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/21.4551715a.chunk.js","docs/en/ref.md"],"names":["webpackJsonp","49","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/21.4551715a.chunk.js","sourcesContent":["webpackJsonp([21],{\n\n/***/ 49:\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/21.4551715a.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 = 49\n// module chunks = 21"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([20],{48:function(e,n){e.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```"}});
|
||||
//# sourceMappingURL=20.579215c0.chunk.js.map
|
||||
webpackJsonp([22],{48:function(e,n){e.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```"}});
|
||||
//# sourceMappingURL=22.de295c38.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/20.579215c0.chunk.js","docs/en/props.md"],"names":["webpackJsonp","48","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/20.579215c0.chunk.js","sourcesContent":["webpackJsonp([20],{\n\n/***/ 48:\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/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/20.579215c0.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\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/props.md\n// module id = 48\n// module chunks = 20"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/22.de295c38.chunk.js","docs/en/props.md"],"names":["webpackJsonp","48","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/22.de295c38.chunk.js","sourcesContent":["webpackJsonp([22],{\n\n/***/ 48:\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/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/22.de295c38.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\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/props.md\n// module id = 48\n// module chunks = 22"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([21],{47: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=21.0b7ceb91.chunk.js.map
|
||||
webpackJsonp([23],{47: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=23.1f4e3bc1.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([22],{46: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=22.7cadae94.chunk.js.map
|
||||
webpackJsonp([24],{46: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=24.d7ad68dc.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([23],{45: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 |\n\nFor example:\n\n```js\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-timer', class extends WeElement {\n static observe = true\n\n data = {\n seconds: 0\n }\n\n tick() {\n this.data.seconds++\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=23.b1e284bd.chunk.js.map
|
||||
webpackJsonp([25],{45: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 |\n\nFor example:\n\n```js\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-timer', class extends WeElement {\n static observe = true\n\n data = {\n seconds: 0\n }\n\n tick() {\n this.data.seconds++\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=25.734c7748.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/23.b1e284bd.chunk.js","docs/en/lifecycle.md"],"names":["webpackJsonp","45","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/23.b1e284bd.chunk.js","sourcesContent":["webpackJsonp([23],{\n\n/***/ 45:\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 |\\n\\nFor example:\\n\\n```js\\nimport { render, WeElement, define } from 'omi'\\n\\ndefine('my-timer', class extends WeElement {\\n static observe = true\\n\\n data = {\\n seconds: 0\\n }\\n\\n tick() {\\n this.data.seconds++\\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/23.b1e284bd.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 |\\n\\nFor example:\\n\\n```js\\nimport { render, WeElement, define } from 'omi'\\n\\ndefine('my-timer', class extends WeElement {\\n static observe = true\\n\\n data = {\\n seconds: 0\\n }\\n\\n tick() {\\n this.data.seconds++\\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 = 45\n// module chunks = 23"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/25.734c7748.chunk.js","docs/en/lifecycle.md"],"names":["webpackJsonp","45","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/25.734c7748.chunk.js","sourcesContent":["webpackJsonp([25],{\n\n/***/ 45:\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 |\\n\\nFor example:\\n\\n```js\\nimport { render, WeElement, define } from 'omi'\\n\\ndefine('my-timer', class extends WeElement {\\n static observe = true\\n\\n data = {\\n seconds: 0\\n }\\n\\n tick() {\\n this.data.seconds++\\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/25.734c7748.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 |\\n\\nFor example:\\n\\n```js\\nimport { render, WeElement, define } from 'omi'\\n\\ndefine('my-timer', class extends WeElement {\\n static observe = true\\n\\n data = {\\n seconds: 0\\n }\\n\\n tick() {\\n this.data.seconds++\\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 = 45\n// module chunks = 25"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([24],{44: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=24.d0714382.chunk.js.map
|
||||
webpackJsonp([26],{44: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=26.ef88d36f.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([25],{43:function(n,t){n.exports="## What's Omi \uff1f\n\nOmi (pronounced /\u02c8om\u026a/) is next front end framework base on Web Component. 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\nThis page demonstrates using Omi **with no build tooling**:\n\n```html\n<script src=\"https://unpkg.com/omi\"><\/script>\n<script>\n const { define, WeElement, html, render } = Omi\n\n define('my-counter', class extends WeElement {\n install() {\n this.data.count = 1\n this.sub = this.sub.bind(this)\n this.add = this.add.bind(this)\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 html`\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 render(html`<my-counter />`, 'body')\n<\/script>\n```\n\nYou can also use `like-button` tag directly in HTML\uff1a\n\n```jsx\n<body>\n <my-counter></my-counter>\n</body>\n```\n\n- [Online Demo!](https://tencent.github.io/omi/assets/omi.html)\n\nYou can use JSX and ES2015+ to write the element:\n\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\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\n\nCongratulations!"}});
|
||||
//# sourceMappingURL=25.204510ac.chunk.js.map
|
||||
webpackJsonp([27],{43:function(n,t){n.exports="## What's Omi \uff1f\n\nOmi (pronounced /\u02c8om\u026a/) is next front end framework base on Web Component. 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\nThis page demonstrates using Omi **with no build tooling**:\n\n```html\n<script src=\"https://unpkg.com/omi\"><\/script>\n<script>\n const { define, WeElement, html, render } = Omi\n\n define('my-counter', class extends WeElement {\n install() {\n this.data.count = 1\n this.sub = this.sub.bind(this)\n this.add = this.add.bind(this)\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 html`\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 render(html`<my-counter />`, 'body')\n<\/script>\n```\n\nYou can also use `like-button` tag directly in HTML\uff1a\n\n```jsx\n<body>\n <my-counter></my-counter>\n</body>\n```\n\n- [Online Demo!](https://tencent.github.io/omi/assets/omi.html)\n\nYou can use JSX and ES2015+ to write the element:\n\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\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\n\nCongratulations!"}});
|
||||
//# sourceMappingURL=27.e12ca944.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([26],{42: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|\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|MVVM Template(omi-cli v3.0.22+)|`omi init-mvvm my-app` |MVVM template.|\n'}});
|
||||
//# sourceMappingURL=26.d3e0fb29.chunk.js.map
|
||||
webpackJsonp([28],{42: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|\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|MVVM Template(omi-cli v3.0.22+)|`omi init-mvvm my-app` |MVVM template.|\n'}});
|
||||
//# sourceMappingURL=28.23d63cad.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([27],{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=27.cd58c5d2.chunk.js.map
|
||||
webpackJsonp([29],{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=29.fcb31596.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/27.cd58c5d2.chunk.js","docs/en/event.md"],"names":["webpackJsonp","41","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/27.cd58c5d2.chunk.js","sourcesContent":["webpackJsonp([27],{\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/27.cd58c5d2.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 = 27"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/29.fcb31596.chunk.js","docs/en/event.md"],"names":["webpackJsonp","41","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/29.fcb31596.chunk.js","sourcesContent":["webpackJsonp([29],{\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/29.fcb31596.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 = 29"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([2],{66:function(n,e){n.exports="# omi-router\n\nomi-router \u662f [Omi](http://omijs.org) \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 static observe = true\n\n data = { tag: 'my-home' }\n\n install() {\n\n route('/', () => {\n this.data.tag = 'my-home'\n })\n\n route('/about', (evt) => {\n console.log(evt.query)\n this.data.tag = 'my-about'\n })\n\n route('/user-list', () => {\n this.data.tag = 'user-list'\n })\n\n route('/user/:name/category/:category', (evt) => {\n this.data.tag = 'my-user'\n this.data.params = evt.params\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=2.9632a8c5.chunk.js.map
|
||||
webpackJsonp([3],{67:function(n,e){n.exports="# omi-router\n\nomi-router \u662f [Omi](http://omijs.org) \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 static observe = true\n\n data = { tag: 'my-home' }\n\n install() {\n\n route('/', () => {\n this.data.tag = 'my-home'\n })\n\n route('/about', (evt) => {\n console.log(evt.query)\n this.data.tag = 'my-about'\n })\n\n route('/user-list', () => {\n this.data.tag = 'user-list'\n })\n\n route('/user/:name/category/:category', (evt) => {\n this.data.tag = 'my-user'\n this.data.params = evt.params\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.d4de73a3.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([28],{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=28.3ca205f6.chunk.js.map
|
||||
webpackJsonp([30],{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=30.4ac661da.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/28.3ca205f6.chunk.js","docs/en/css.md"],"names":["webpackJsonp","40","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/28.3ca205f6.chunk.js","sourcesContent":["webpackJsonp([28],{\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/28.3ca205f6.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 = 28"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/30.4ac661da.chunk.js","docs/en/css.md"],"names":["webpackJsonp","40","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/30.4ac661da.chunk.js","sourcesContent":["webpackJsonp([30],{\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/30.4ac661da.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 = 30"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([29],{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=29.18dc7b40.chunk.js.map
|
||||
webpackJsonp([31],{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=31.55b81de7.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/29.18dc7b40.chunk.js","docs/en/class.md"],"names":["webpackJsonp","39","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/29.18dc7b40.chunk.js","sourcesContent":["webpackJsonp([29],{\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/29.18dc7b40.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 = 29"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/31.55b81de7.chunk.js","docs/en/class.md"],"names":["webpackJsonp","39","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/31.55b81de7.chunk.js","sourcesContent":["webpackJsonp([31],{\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/31.55b81de7.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 = 31"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([3],{65: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=3.1c5042fb.chunk.js.map
|
||||
webpackJsonp([4],{66: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.4af8cac5.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/3.1c5042fb.chunk.js","docs/zh-cn/ref.md"],"names":["webpackJsonp","65","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/3.1c5042fb.chunk.js","sourcesContent":["webpackJsonp([3],{\n\n/***/ 65:\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/3.1c5042fb.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 = 65\n// module chunks = 3"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/4.4af8cac5.chunk.js","docs/zh-cn/ref.md"],"names":["webpackJsonp","66","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/4.4af8cac5.chunk.js","sourcesContent":["webpackJsonp([4],{\n\n/***/ 66:\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.4af8cac5.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 = 66\n// module chunks = 4"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([4],{64: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```"}});
|
||||
//# sourceMappingURL=4.74864855.chunk.js.map
|
||||
webpackJsonp([5],{65: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```"}});
|
||||
//# sourceMappingURL=5.11c3842c.chunk.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../static/js/4.74864855.chunk.js","docs/zh-cn/props.md"],"names":["webpackJsonp","64","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/4.74864855.chunk.js","sourcesContent":["webpackJsonp([4],{\n\n/***/ 64:\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});\n\n\n// WEBPACK FOOTER //\n// static/js/4.74864855.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// WEBPACK FOOTER\n// ./src/docs/zh-cn/props.md\n// module id = 64\n// module chunks = 4"],"sourceRoot":""}
|
||||
{"version":3,"sources":["../static/js/5.11c3842c.chunk.js","docs/zh-cn/props.md"],"names":["webpackJsonp","65","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/5.11c3842c.chunk.js","sourcesContent":["webpackJsonp([5],{\n\n/***/ 65:\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});\n\n\n// WEBPACK FOOTER //\n// static/js/5.11c3842c.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// WEBPACK FOOTER\n// ./src/docs/zh-cn/props.md\n// module id = 65\n// module chunks = 5"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([5],{63: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=5.051f31bf.chunk.js.map
|
||||
webpackJsonp([6],{64: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.0c7fe731.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([6],{62: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=6.412e09ae.chunk.js.map
|
||||
webpackJsonp([7],{63: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.106d7946.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([7],{61: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=7.df2bc85a.chunk.js.map
|
||||
webpackJsonp([8],{62: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.0cfd753d.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
|||
webpackJsonp([9],{59: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 |\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=9.c60ec43c.chunk.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":["../static/js/9.c60ec43c.chunk.js","docs/zh-cn/lifecycle.md"],"names":["webpackJsonp","59","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/9.c60ec43c.chunk.js","sourcesContent":["webpackJsonp([9],{\n\n/***/ 59:\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` | 父元素重新渲染触发 |\\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/9.c60ec43c.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` | 父元素重新渲染触发 |\\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 = 59\n// module chunks = 9"],"sourceRoot":""}
|
||||
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
|
|
@ -15,6 +15,7 @@ const config = {
|
|||
{ name: 'Props', md: 'props' },
|
||||
{ name: '事件', md: 'event' },
|
||||
{ name: '生命周期', md: 'lifecycle' },
|
||||
{ name: 'Update', md: 'update' },
|
||||
{ name: 'Ref', md: 'ref' },
|
||||
{ name: 'Class', md: 'class' },
|
||||
{ name: 'Store', md: 'store' },
|
||||
|
|
@ -48,6 +49,7 @@ const config = {
|
|||
{ name: 'Props', md: 'props' },
|
||||
{ name: 'Event', md: 'event' },
|
||||
{ name: 'Lifecycle', md: 'lifecycle' },
|
||||
{ name: 'Update', md: 'update' },
|
||||
{ name: 'Ref', md: 'ref' },
|
||||
{ name: 'Class', md: 'class' },
|
||||
{ name: 'Store', md: 'store' },
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
|
||||
## Update
|
||||
|
||||
`update` method is an important built-in core method for updating components themselves. For example:
|
||||
|
||||
```js
|
||||
this.update()
|
||||
```
|
||||
|
||||
You can also pass parameters to decide whether to ignore attributes and force updates:
|
||||
|
||||
```js
|
||||
this.update(true)
|
||||
```
|
||||
|
||||
For 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.
|
||||
|
||||
```js
|
||||
onMaskClick = ()=> {
|
||||
//change props
|
||||
this.props.show = false
|
||||
//ignore attributes
|
||||
this.update(true)
|
||||
//trigger events, which can be used to change external state variables to maintain consistency, but external components need not be updated
|
||||
this.fire('close')
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
|
||||
## Update
|
||||
|
||||
`update` 方法是内置的重要核心方法，用于更新组件自身。比如:
|
||||
|
||||
```js
|
||||
this.update()
|
||||
```
|
||||
|
||||
也可以传递参数，决定是否忽略 attributes，强行更新:
|
||||
|
||||
```js
|
||||
this.update(true)
|
||||
```
|
||||
|
||||
举个场景，比如点击弹出层的 mask 关闭弹出，在 react 中需要传递给父组件，让父组件更新，而 Omi 推崇自更新，这样 diff 的区域更小。
|
||||
|
||||
```js
|
||||
onMaskClick = ()=> {
|
||||
//修复 props
|
||||
this.props.show = false
|
||||
//忽略 attributes
|
||||
this.update(true)
|
||||
//触发事件，可以通过这个更改外部的状态变量来保持一致性，但是外面的组件不用再更新
|
||||
this.fire('close')
|
||||
}
|
||||
```
|
||||
Loading…
Reference in New Issue