update site
This commit is contained in:
dntzhang
parent
2cd64d6848
commit
35bfac8549
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
|
|
@ -313,7 +313,7 @@ Store 是 Omi 内置的中心化数据仓库，他解决和提供了下面问题
|
|||
* 组件树数据共享
|
||||
* 数据变更按需更新依赖的组件
|
||||
|
||||
|
||||
|
||||
|
||||
## 一段代码完全上手 Store
|
||||
|
||||
|
|
|
|||
|
|
@ -1,29 +1,33 @@
|
|||
{
|
||||
"cn.css": "static/css/cn.fb9dfd08.css",
|
||||
"cn.css.map": "static/css/cn.fb9dfd08.css.map",
|
||||
"cn.js": "static/js/cn.c2df92c5.js",
|
||||
"cn.js.map": "static/js/cn.c2df92c5.js.map",
|
||||
"cn.js": "static/js/cn.66c8fd2d.js",
|
||||
"cn.js.map": "static/js/cn.66c8fd2d.js.map",
|
||||
"index.css": "static/css/index.fb9dfd08.css",
|
||||
"index.css.map": "static/css/index.fb9dfd08.css.map",
|
||||
"index.js": "static/js/index.40cf028e.js",
|
||||
"index.js.map": "static/js/index.40cf028e.js.map",
|
||||
"static/js/0.4fae56d4.chunk.js": "static/js/0.4fae56d4.chunk.js",
|
||||
"static/js/0.4fae56d4.chunk.js.map": "static/js/0.4fae56d4.chunk.js.map",
|
||||
"static/js/1.5b2c547c.chunk.js": "static/js/1.5b2c547c.chunk.js",
|
||||
"static/js/1.5b2c547c.chunk.js.map": "static/js/1.5b2c547c.chunk.js.map",
|
||||
"static/js/2.d2ee7bd8.chunk.js": "static/js/2.d2ee7bd8.chunk.js",
|
||||
"static/js/2.d2ee7bd8.chunk.js.map": "static/js/2.d2ee7bd8.chunk.js.map",
|
||||
"static/js/3.7d9f2518.chunk.js": "static/js/3.7d9f2518.chunk.js",
|
||||
"static/js/3.7d9f2518.chunk.js.map": "static/js/3.7d9f2518.chunk.js.map",
|
||||
"static/js/4.5bad72c7.chunk.js": "static/js/4.5bad72c7.chunk.js",
|
||||
"static/js/4.5bad72c7.chunk.js.map": "static/js/4.5bad72c7.chunk.js.map",
|
||||
"static/js/5.ffd78873.chunk.js": "static/js/5.ffd78873.chunk.js",
|
||||
"static/js/5.ffd78873.chunk.js.map": "static/js/5.ffd78873.chunk.js.map",
|
||||
"static/js/6.539a9bf7.chunk.js": "static/js/6.539a9bf7.chunk.js",
|
||||
"static/js/6.539a9bf7.chunk.js.map": "static/js/6.539a9bf7.chunk.js.map",
|
||||
"static/js/7.33a9f639.chunk.js": "static/js/7.33a9f639.chunk.js",
|
||||
"static/js/7.33a9f639.chunk.js.map": "static/js/7.33a9f639.chunk.js.map",
|
||||
"static/js/8.f319ee2b.chunk.js": "static/js/8.f319ee2b.chunk.js",
|
||||
"static/js/8.f319ee2b.chunk.js.map": "static/js/8.f319ee2b.chunk.js.map",
|
||||
"index.js": "static/js/index.dba89e5a.js",
|
||||
"index.js.map": "static/js/index.dba89e5a.js.map",
|
||||
"static/js/0.a994eb0b.chunk.js": "static/js/0.a994eb0b.chunk.js",
|
||||
"static/js/0.a994eb0b.chunk.js.map": "static/js/0.a994eb0b.chunk.js.map",
|
||||
"static/js/1.db450a01.chunk.js": "static/js/1.db450a01.chunk.js",
|
||||
"static/js/1.db450a01.chunk.js.map": "static/js/1.db450a01.chunk.js.map",
|
||||
"static/js/10.7e4bc22f.chunk.js": "static/js/10.7e4bc22f.chunk.js",
|
||||
"static/js/10.7e4bc22f.chunk.js.map": "static/js/10.7e4bc22f.chunk.js.map",
|
||||
"static/js/2.ff152848.chunk.js": "static/js/2.ff152848.chunk.js",
|
||||
"static/js/2.ff152848.chunk.js.map": "static/js/2.ff152848.chunk.js.map",
|
||||
"static/js/3.0800b9b9.chunk.js": "static/js/3.0800b9b9.chunk.js",
|
||||
"static/js/3.0800b9b9.chunk.js.map": "static/js/3.0800b9b9.chunk.js.map",
|
||||
"static/js/4.3157e545.chunk.js": "static/js/4.3157e545.chunk.js",
|
||||
"static/js/4.3157e545.chunk.js.map": "static/js/4.3157e545.chunk.js.map",
|
||||
"static/js/5.7cdcd60b.chunk.js": "static/js/5.7cdcd60b.chunk.js",
|
||||
"static/js/5.7cdcd60b.chunk.js.map": "static/js/5.7cdcd60b.chunk.js.map",
|
||||
"static/js/6.060e1d01.chunk.js": "static/js/6.060e1d01.chunk.js",
|
||||
"static/js/6.060e1d01.chunk.js.map": "static/js/6.060e1d01.chunk.js.map",
|
||||
"static/js/7.dde840bf.chunk.js": "static/js/7.dde840bf.chunk.js",
|
||||
"static/js/7.dde840bf.chunk.js.map": "static/js/7.dde840bf.chunk.js.map",
|
||||
"static/js/8.c2b0d064.chunk.js": "static/js/8.c2b0d064.chunk.js",
|
||||
"static/js/8.c2b0d064.chunk.js.map": "static/js/8.c2b0d064.chunk.js.map",
|
||||
"static/js/9.175ae5a5.chunk.js": "static/js/9.175ae5a5.chunk.js",
|
||||
"static/js/9.175ae5a5.chunk.js.map": "static/js/9.175ae5a5.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.fb9dfd08.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.c2df92c5.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.fb9dfd08.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.66c8fd2d.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.fb9dfd08.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.40cf028e.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.fb9dfd08.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.dba89e5a.js"></script></body></html>
|
||||
|
|
@ -1 +1 @@
|
|||
"use strict";var precacheConfig=[["./cn.html","81230f8fb179dcd1591be63d1bca0fe1"],["./index.html","1607e35a6d2ebe7e32f6a80bc3ad1d12"],["./static/css/cn.fb9dfd08.css","956b8f005795c2569d823cddbc15d24c"],["./static/css/index.fb9dfd08.css","414d16d757eb45e170251798229d649f"],["./static/js/0.4fae56d4.chunk.js","e358b80566ee913cc9d62767ad5d105a"],["./static/js/1.5b2c547c.chunk.js","62fccc36b2065a0e8678c8369709980e"],["./static/js/2.d2ee7bd8.chunk.js","e95a513f986dff6eecc3929bb1d69a20"],["./static/js/3.7d9f2518.chunk.js","e4f524aae21fcda0cb0f38be4f107562"],["./static/js/4.5bad72c7.chunk.js","5286b3297b414ba8e09adb69329ab3a7"],["./static/js/5.ffd78873.chunk.js","9847c328f2420ef85a6786de55707e8d"],["./static/js/6.539a9bf7.chunk.js","f114c5f8fd771609610a11b98c26a99a"],["./static/js/7.33a9f639.chunk.js","bf70aaf16600ef5e7bda1a93c4e6b87a"],["./static/js/8.f319ee2b.chunk.js","4dd9bfab6adf9be63335585457623b3c"],["./static/js/cn.c2df92c5.js","734c0dfd4666174985193d5f962a7bbf"],["./static/js/index.40cf028e.js","8d7f61a5f91b329c743bbb818a2f152b"],["./static/media/omi-logo2019.923166c3.svg","923166c362dce831a15c447b19a622f9"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(t){return t.redirected?("body"in t?Promise.resolve(t.body):t.blob()).then(function(e){return new Response(e,{headers:t.headers,status:t.status,statusText:t.statusText})}):Promise.resolve(t)},createCacheKey=function(e,t,n,a){var r=new URL(e);return a&&r.pathname.match(a)||(r.search+=(r.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),r.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,n){var t=new URL(e);return t.hash="",t.search=t.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(t){return n.every(function(e){return!e.test(t[0])})}).map(function(e){return e.join("=")}).join("&"),t.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],a=new URL(t,self.location),r=createCacheKey(a,hashParamName,n,/\.\w{8}\./);return[a.toString(),r]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(a){return setOfCachedUrls(a).then(function(n){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t){if(!n.has(t)){var e=new Request(t,{credentials:"same-origin"});return fetch(e).then(function(e){if(!e.ok)throw new Error("Request for "+t+" returned a response with status "+e.status);return cleanResponse(e).then(function(e){return a.put(t,e)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var n=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(t){return t.keys().then(function(e){return Promise.all(e.map(function(e){if(!n.has(e.url))return t.delete(e)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(t){if("GET"===t.request.method){var e,n=stripIgnoredUrlParameters(t.request.url,ignoreUrlParametersMatching),a="index.html";(e=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,a),e=urlsToCacheKeys.has(n));var r="./index.html";!e&&"navigate"===t.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],t.request.url)&&(n=new URL(r,self.location).toString(),e=urlsToCacheKeys.has(n)),e&&t.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(e){return console.warn('Couldn\'t serve response for "%s" from cache: %O',t.request.url,e),fetch(t.request)}))}});
|
||||
"use strict";var precacheConfig=[["./cn.html","bf0d309a62d9d36ff38f1482edb4cf8c"],["./index.html","28de017b422f496c16d063c37f86ed5f"],["./static/css/cn.fb9dfd08.css","956b8f005795c2569d823cddbc15d24c"],["./static/css/index.fb9dfd08.css","414d16d757eb45e170251798229d649f"],["./static/js/0.a994eb0b.chunk.js","d5351c9dc986f42aa7d1a5b2cd9a5a12"],["./static/js/1.db450a01.chunk.js","981dbcf911585bfa7ef8afe00cd44f6b"],["./static/js/10.7e4bc22f.chunk.js","e3ff2a946966e056cadd553f808f1f56"],["./static/js/2.ff152848.chunk.js","ee38ceb9c9b512c748dfbc651418d3f8"],["./static/js/3.0800b9b9.chunk.js","7ed32b66ab65f67d62eb45792d528f54"],["./static/js/4.3157e545.chunk.js","f6f30e7685d16f24de31e43121713851"],["./static/js/5.7cdcd60b.chunk.js","1af798a7a1d7c4d91a304b7f4f730a89"],["./static/js/6.060e1d01.chunk.js","e36581a9f9956c6b92dc2be45d3b4a68"],["./static/js/7.dde840bf.chunk.js","a6dfe18aa4f0ed5e6e5d1f332c1b6c1f"],["./static/js/8.c2b0d064.chunk.js","177e3c685d828a5f5c65dc08f647fd5a"],["./static/js/9.175ae5a5.chunk.js","295e4c3ece429ee4733f45a9a09cd282"],["./static/js/cn.66c8fd2d.js","0c3463f93ddbd3c735702d6501ad4f82"],["./static/js/index.dba89e5a.js","8e228afa01fe2a7cabf629053f4a31b5"],["./static/media/omi-logo2019.923166c3.svg","923166c362dce831a15c447b19a622f9"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(t){return t.redirected?("body"in t?Promise.resolve(t.body):t.blob()).then(function(e){return new Response(e,{headers:t.headers,status:t.status,statusText:t.statusText})}):Promise.resolve(t)},createCacheKey=function(e,t,n,a){var c=new URL(e);return a&&c.pathname.match(a)||(c.search+=(c.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),c.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,n){var t=new URL(e);return t.hash="",t.search=t.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(t){return n.every(function(e){return!e.test(t[0])})}).map(function(e){return e.join("=")}).join("&"),t.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],a=new URL(t,self.location),c=createCacheKey(a,hashParamName,n,/\.\w{8}\./);return[a.toString(),c]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(a){return setOfCachedUrls(a).then(function(n){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t){if(!n.has(t)){var e=new Request(t,{credentials:"same-origin"});return fetch(e).then(function(e){if(!e.ok)throw new Error("Request for "+t+" returned a response with status "+e.status);return cleanResponse(e).then(function(e){return a.put(t,e)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var n=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(t){return t.keys().then(function(e){return Promise.all(e.map(function(e){if(!n.has(e.url))return t.delete(e)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(t){if("GET"===t.request.method){var e,n=stripIgnoredUrlParameters(t.request.url,ignoreUrlParametersMatching),a="index.html";(e=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,a),e=urlsToCacheKeys.has(n));var c="./index.html";!e&&"navigate"===t.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],t.request.url)&&(n=new URL(c,self.location).toString(),e=urlsToCacheKeys.has(n)),e&&t.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(e){return console.warn('Couldn\'t serve response for "%s" from cache: %O',t.request.url,e),fetch(t.request)}))}});
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
webpackJsonp([0],{44:function(n,t){n.exports="## Store \u662f\u4ec0\u4e48\uff1f\n\nStore \u662f Omi \u5185\u7f6e\u7684\u4e2d\u5fc3\u5316\u6570\u636e\u4ed3\u5e93\uff0c\u4ed6\u89e3\u51b3\u548c\u63d0\u4f9b\u4e86\u4e0b\u9762\u95ee\u9898\u548c\u80fd\u529b\uff1a\n\n* \u7ec4\u4ef6\u6811\u6570\u636e\u5171\u4eab\n* \u6570\u636e\u53d8\u66f4\u6309\u9700\u66f4\u65b0\u4f9d\u8d56\u7684\u7ec4\u4ef6\n\n\n\n## \u4e00\u6bb5\u4ee3\u7801\u5b8c\u5168\u4e0a\u624b Store\n\n```jsx\nimport { render, WeElement, define } from '../../src/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* \u901a\u8fc7 `static use` \u58f0\u660e\u4f9d\u8d56\u7684 path\n* `store` \u901a\u8fc7 render \u7684\u7b2c\u4e09\u4e2a\u53c2\u6570\u4ece\u6839\u8282\u70b9\u6ce8\u5165\u5230\u6240\u6709\u7ec4\u4ef6\u3002\n\n\u4e0b\u9762\u4e3e\u4e00\u4e2a\u590d\u6742\u7684 `use` \u4f8b\u5b50\uff1a\n\n```jsx\nstatic use = [\n 'count', //\u76f4\u63a5\u5b57\u7b26\u4e32\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use[0] \u8bbf\u95ee\n 'arr[0]', //\u4e5f\u652f\u6301 path\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use[1] \u8bbf\u95ee\n //\u652f\u6301 json\n {\n //alias\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.reverseMotto \u8bbf\u95ee\n reverseMotto: [\n 'motto', //path\n target => target.split('').reverse().join('') //computed\n ]\n },\n { name: 'arr[1]' }, //{ alias: path }\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.name \u8bbf\u95ee\n {\n //alias\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.fullName \u8bbf\u95ee\n fullName: [\n ['userInfo.firstName', 'userInfo.lastName'], //path array\n (firstName, lastName) => firstName + lastName //computed\n ]\n },\n]\n```\n\n\u4e0b\u9762\u770b\u770b JSX \u4e2d\u4f7f\u7528:\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\n\u5982\u679c\u4e0d\u5e26\u6709 alias \uff0c\u4f60\u4e5f\u53ef\u4ee5\u76f4\u63a5\u901a\u8fc7 `this.store.data.xxx` \u8bbf\u95ee\u3002\n\n\n\u5f53 `store.data` \u53d1\u751f\u53d8\u5316\uff0c\u4f9d\u8d56\u53d8\u66f4\u6570\u636e\u7684\u7ec4\u4ef6\u4f1a\u8fdb\u884c\u66f4\u65b0\uff0c\u4e3e\u4f8b\u8bf4\u660e Path \u547d\u4e2d\u89c4\u5219:\n\n| Proxy Path(\u7531\u6570\u636e\u66f4\u6539\u4ea7\u751f) | static use \u4e2d\u7684 path | \u662f\u5426\u66f4\u65b0 |\n| ---------- | ---------- | -------- |\n| abc | abc | \u66f4\u65b0 |\n| abc[1] | abc | \u66f4\u65b0 |\n| abc.a | abc | \u66f4\u65b0 |\n| abc | abc.a | \u4e0d\u66f4\u65b0 |\n| abc | abc[1] | \u4e0d\u66f4\u65b0 |\n| abc | abc[1].c | \u4e0d\u66f4\u65b0 |\n| abc.b | abc.b | \u66f4\u65b0 |\n\n\u4ee5\u4e0a\u53ea\u8981\u547d\u4e2d\u4e00\u4e2a\u6761\u4ef6\u5c31\u53ef\u4ee5\u8fdb\u884c\u66f4\u65b0\uff01\n\n\u603b\u7ed3\uff1a \u53ea\u8981\u6ce8\u5165\u7ec4\u4ef6\u7684 path \u7b49\u4e8e use \u91cc\u58f0\u660e \u6216\u8005\u5728 use \u91cc\u58f0\u660e\u7684\u5176\u4e2d path \u5b50\u8282\u70b9\u4e0b\u5c31\u4f1a\u8fdb\u884c\u66f4\u65b0\uff01"}});
|
||||
//# sourceMappingURL=0.4fae56d4.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([0],{46:function(n,t){n.exports="## Store \u662f\u4ec0\u4e48\uff1f\n\nStore \u662f Omi \u5185\u7f6e\u7684\u4e2d\u5fc3\u5316\u6570\u636e\u4ed3\u5e93\uff0c\u4ed6\u89e3\u51b3\u548c\u63d0\u4f9b\u4e86\u4e0b\u9762\u95ee\u9898\u548c\u80fd\u529b\uff1a\n\n* \u7ec4\u4ef6\u6811\u6570\u636e\u5171\u4eab\n* \u6570\u636e\u53d8\u66f4\u6309\u9700\u66f4\u65b0\u4f9d\u8d56\u7684\u7ec4\u4ef6\n\n\n\n## \u4e00\u6bb5\u4ee3\u7801\u5b8c\u5168\u4e0a\u624b Store\n\n```jsx\nimport { render, WeElement, define } from '../../src/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* \u901a\u8fc7 `static use` \u58f0\u660e\u4f9d\u8d56\u7684 path\n* `store` \u901a\u8fc7 render \u7684\u7b2c\u4e09\u4e2a\u53c2\u6570\u4ece\u6839\u8282\u70b9\u6ce8\u5165\u5230\u6240\u6709\u7ec4\u4ef6\u3002\n\n\u4e0b\u9762\u4e3e\u4e00\u4e2a\u590d\u6742\u7684 `use` \u4f8b\u5b50\uff1a\n\n```jsx\nstatic use = [\n 'count', //\u76f4\u63a5\u5b57\u7b26\u4e32\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use[0] \u8bbf\u95ee\n 'arr[0]', //\u4e5f\u652f\u6301 path\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use[1] \u8bbf\u95ee\n //\u652f\u6301 json\n {\n //alias\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.reverseMotto \u8bbf\u95ee\n reverseMotto: [\n 'motto', //path\n target => target.split('').reverse().join('') //computed\n ]\n },\n { name: 'arr[1]' }, //{ alias: path }\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.name \u8bbf\u95ee\n {\n //alias\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.fullName \u8bbf\u95ee\n fullName: [\n ['userInfo.firstName', 'userInfo.lastName'], //path array\n (firstName, lastName) => firstName + lastName //computed\n ]\n },\n]\n```\n\n\u4e0b\u9762\u770b\u770b JSX \u4e2d\u4f7f\u7528:\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\n\u5982\u679c\u4e0d\u5e26\u6709 alias \uff0c\u4f60\u4e5f\u53ef\u4ee5\u76f4\u63a5\u901a\u8fc7 `this.store.data.xxx` \u8bbf\u95ee\u3002\n\n\n\u5f53 `store.data` \u53d1\u751f\u53d8\u5316\uff0c\u4f9d\u8d56\u53d8\u66f4\u6570\u636e\u7684\u7ec4\u4ef6\u4f1a\u8fdb\u884c\u66f4\u65b0\uff0c\u4e3e\u4f8b\u8bf4\u660e Path \u547d\u4e2d\u89c4\u5219:\n\n| Proxy Path(\u7531\u6570\u636e\u66f4\u6539\u4ea7\u751f) | static use \u4e2d\u7684 path | \u662f\u5426\u66f4\u65b0 |\n| ---------- | ---------- | -------- |\n| abc | abc | \u66f4\u65b0 |\n| abc[1] | abc | \u66f4\u65b0 |\n| abc.a | abc | \u66f4\u65b0 |\n| abc | abc.a | \u4e0d\u66f4\u65b0 |\n| abc | abc[1] | \u4e0d\u66f4\u65b0 |\n| abc | abc[1].c | \u4e0d\u66f4\u65b0 |\n| abc.b | abc.b | \u66f4\u65b0 |\n\n\u4ee5\u4e0a\u53ea\u8981\u547d\u4e2d\u4e00\u4e2a\u6761\u4ef6\u5c31\u53ef\u4ee5\u8fdb\u884c\u66f4\u65b0\uff01\n\n\u603b\u7ed3\uff1a \u53ea\u8981\u6ce8\u5165\u7ec4\u4ef6\u7684 path \u7b49\u4e8e use \u91cc\u58f0\u660e \u6216\u8005\u5728 use \u91cc\u58f0\u660e\u7684\u5176\u4e2d path \u5b50\u8282\u70b9\u4e0b\u5c31\u4f1a\u8fdb\u884c\u66f4\u65b0\uff01"}});
|
||||
//# sourceMappingURL=0.a994eb0b.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([1],{45: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-first-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-first-element myObj={{ name: 'world' }}></my-first-element>\n```\n\n\u4f60\u53ef\u4ee5\u901a\u8fc7\u9759\u6001\u5c5e\u6027 `static defaultProps` \u6765\u8bbe\u7f6e\u9ed8\u8ba4\u503c:\n\n```js\ndefine('my-first-element', class extends WeElement {\n static defaultProps = {\n\t\tname: 'Omi',\n\t\tmyAge: 18\n\t}\n\n render(props) {\n return (\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\n )\n }\n})\n```"}});
|
||||
//# sourceMappingURL=1.db450a01.chunk.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["../static/js/1.db450a01.chunk.js","docs/zh-cn/props.md"],"names":["webpackJsonp","45","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/1.db450a01.chunk.js","sourcesContent":["webpackJsonp([1],{\n\n/***/ 45:\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-first-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-first-element myObj={{ name: 'world' }}></my-first-element>\\n```\\n\\n你可以通过静态属性 `static defaultProps` 来设置默认值:\\n\\n```js\\ndefine('my-first-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n\\t}\\n\\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/1.db450a01.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-first-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-first-element myObj={{ name: 'world' }}></my-first-element>\\n```\\n\\n你可以通过静态属性 `static defaultProps` 来设置默认值:\\n\\n```js\\ndefine('my-first-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n\\t}\\n\\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/props.md\n// module id = 45\n// module chunks = 1"],"sourceRoot":""}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([10],{36:function(n,o){n.exports=""}});
|
||||
//# sourceMappingURL=10.7e4bc22f.chunk.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["../static/js/10.7e4bc22f.chunk.js","docs/en/ecosystem.md"],"names":["webpackJsonp","36","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/10.7e4bc22f.chunk.js","sourcesContent":["webpackJsonp([10],{\n\n/***/ 36:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/10.7e4bc22f.chunk.js","module.exports = \"\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/ecosystem.md\n// module id = 36\n// module chunks = 10"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([1],{43: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=1.5b2c547c.chunk.js.map
|
||||
webpackJsonp([2],{44: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=2.ff152848.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([2],{42: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## \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, h, 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 h(\n 'div',\n null,\n h(\n 'button',\n { onClick: this.sub },\n '-'\n ),\n h(\n 'span',\n null,\n this.data.count\n ),\n h(\n 'button',\n { onClick: this.add },\n '+'\n )\n )\n }\n })\n\n render(h('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\u4e0a\u9762\u4f7f\u7528\u7684\u662f hyperscript \u7684\u65b9\u5f0f\u6765\u4e66\u5199 HTML \u7ed3\u6784\uff0c\u7528 ES5 \u4e66\u5199 JS \uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 JSX \u548c ES2015+ \u6765\u66ff\u4ee3\u5b83\u4eec\u3002\n\n\n```jsx {9-12}\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=2.d2ee7bd8.chunk.js.map
|
||||
webpackJsonp([3],{43: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## \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, h, 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 h(\n 'div',\n null,\n h(\n 'button',\n { onClick: this.sub },\n '-'\n ),\n h(\n 'span',\n null,\n this.data.count\n ),\n h(\n 'button',\n { onClick: this.add },\n '+'\n )\n )\n }\n })\n\n render(h('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\u4e0a\u9762\u4f7f\u7528\u7684\u662f hyperscript \u7684\u65b9\u5f0f\u6765\u4e66\u5199 HTML \u7ed3\u6784\uff0c\u7528 ES5 \u4e66\u5199 JS \uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 JSX \u548c ES2015+ \u6765\u66ff\u4ee3\u5b83\u4eec\u3002\n\n\n```jsx {9-12}\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=3.0800b9b9.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([3],{41: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|\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\nCli \u81ea\u52a8\u521b\u5efa\u7684\u9879\u76ee\u811a\u624b\u67b6\u662f\u57fa\u4e8e\u5355\u9875\u7684 create-react-app \u6539\u9020\u6210\u591a\u9875\u7684\uff0c\u6709\u914d\u7f6e\u65b9\u9762\u7684\u95ee\u9898\u53ef\u4ee5\u67e5\u770b [create-react-app \u7528\u6237\u6307\u5357](https://facebook.github.io/create-react-app/docs/getting-started)\u3002'}});
|
||||
//# sourceMappingURL=3.7d9f2518.chunk.js.map
|
||||
webpackJsonp([4],{42: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|\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\nCli \u81ea\u52a8\u521b\u5efa\u7684\u9879\u76ee\u811a\u624b\u67b6\u662f\u57fa\u4e8e\u5355\u9875\u7684 create-react-app \u6539\u9020\u6210\u591a\u9875\u7684\uff0c\u6709\u914d\u7f6e\u65b9\u9762\u7684\u95ee\u9898\u53ef\u4ee5\u67e5\u770b [create-react-app \u7528\u6237\u6307\u5357](https://facebook.github.io/create-react-app/docs/getting-started)\u3002'}});
|
||||
//# sourceMappingURL=4.3157e545.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
|||
webpackJsonp([4],{40:function(n,o){n.exports=""}});
|
||||
//# sourceMappingURL=4.5bad72c7.chunk.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":["../static/js/4.5bad72c7.chunk.js","docs/zh-cn/ecosystem.md"],"names":["webpackJsonp","40","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/4.5bad72c7.chunk.js","sourcesContent":["webpackJsonp([4],{\n\n/***/ 40:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/4.5bad72c7.chunk.js","module.exports = \"\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/ecosystem.md\n// module id = 40\n// module chunks = 4"],"sourceRoot":""}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([5],{41:function(n,e){n.exports="## Event\n\n```js\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```js\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```js\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=5.7cdcd60b.chunk.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["../static/js/5.7cdcd60b.chunk.js","docs/zh-cn/event.md"],"names":["webpackJsonp","41","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/5.7cdcd60b.chunk.js","sourcesContent":["webpackJsonp([5],{\n\n/***/ 41:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Event\\n\\n```js\\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```js\\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```js\\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/5.7cdcd60b.chunk.js","module.exports = \"## Event\\n\\n```js\\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```js\\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```js\\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 = 41\n// module chunks = 5"],"sourceRoot":""}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([6],{40:function(n,o){n.exports=""}});
|
||||
//# sourceMappingURL=6.060e1d01.chunk.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["../static/js/6.060e1d01.chunk.js","docs/zh-cn/ecosystem.md"],"names":["webpackJsonp","40","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/6.060e1d01.chunk.js","sourcesContent":["webpackJsonp([6],{\n\n/***/ 40:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/6.060e1d01.chunk.js","module.exports = \"\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/ecosystem.md\n// module id = 40\n// module chunks = 6"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([5],{39:function(n,t){n.exports="## Store \u662f\u4ec0\u4e48\uff1f\n\nStore \u662f Omi \u5185\u7f6e\u7684\u4e2d\u5fc3\u5316\u6570\u636e\u4ed3\u5e93\uff0c\u4ed6\u89e3\u51b3\u548c\u63d0\u4f9b\u4e86\u4e0b\u9762\u95ee\u9898\u548c\u80fd\u529b\uff1a\n\n* \u7ec4\u4ef6\u6811\u6570\u636e\u5171\u4eab\n* \u6570\u636e\u53d8\u66f4\u6309\u9700\u66f4\u65b0\u4f9d\u8d56\u7684\u7ec4\u4ef6\n\n\n\n## \u4e00\u6bb5\u4ee3\u7801\u5b8c\u5168\u4e0a\u624b Store\n\n```jsx\nimport { render, WeElement, define } from '../../src/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* \u901a\u8fc7 `static use` \u58f0\u660e\u4f9d\u8d56\u7684 path\n* `store` \u901a\u8fc7 render \u7684\u7b2c\u4e09\u4e2a\u53c2\u6570\u4ece\u6839\u8282\u70b9\u6ce8\u5165\u5230\u6240\u6709\u7ec4\u4ef6\u3002\n\n\u4e0b\u9762\u4e3e\u4e00\u4e2a\u590d\u6742\u7684 `use` \u4f8b\u5b50\uff1a\n\n```jsx\nstatic use = [\n 'count', //\u76f4\u63a5\u5b57\u7b26\u4e32\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use[0] \u8bbf\u95ee\n 'arr[0]', //\u4e5f\u652f\u6301 path\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use[1] \u8bbf\u95ee\n //\u652f\u6301 json\n {\n //alias\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.reverseMotto \u8bbf\u95ee\n reverseMotto: [\n 'motto', //path\n target => target.split('').reverse().join('') //computed\n ]\n },\n { name: 'arr[1]' }, //{ alias: path }\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.name \u8bbf\u95ee\n {\n //alias\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.fullName \u8bbf\u95ee\n fullName: [\n ['userInfo.firstName', 'userInfo.lastName'], //path array\n (firstName, lastName) => firstName + lastName //computed\n ]\n },\n]\n```\n\n\u4e0b\u9762\u770b\u770b JSX \u4e2d\u4f7f\u7528:\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\n\u5982\u679c\u4e0d\u5e26\u6709 alias \uff0c\u4f60\u4e5f\u53ef\u4ee5\u76f4\u63a5\u901a\u8fc7 `this.store.data.xxx` \u8bbf\u95ee\u3002"}});
|
||||
//# sourceMappingURL=5.ffd78873.chunk.js.map
|
||||
webpackJsonp([7],{39:function(n,t){n.exports="## Store \u662f\u4ec0\u4e48\uff1f\n\nStore \u662f Omi \u5185\u7f6e\u7684\u4e2d\u5fc3\u5316\u6570\u636e\u4ed3\u5e93\uff0c\u4ed6\u89e3\u51b3\u548c\u63d0\u4f9b\u4e86\u4e0b\u9762\u95ee\u9898\u548c\u80fd\u529b\uff1a\n\n* \u7ec4\u4ef6\u6811\u6570\u636e\u5171\u4eab\n* \u6570\u636e\u53d8\u66f4\u6309\u9700\u66f4\u65b0\u4f9d\u8d56\u7684\u7ec4\u4ef6\n\n\n\n## \u4e00\u6bb5\u4ee3\u7801\u5b8c\u5168\u4e0a\u624b Store\n\n```jsx\nimport { render, WeElement, define } from '../../src/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* \u901a\u8fc7 `static use` \u58f0\u660e\u4f9d\u8d56\u7684 path\n* `store` \u901a\u8fc7 render \u7684\u7b2c\u4e09\u4e2a\u53c2\u6570\u4ece\u6839\u8282\u70b9\u6ce8\u5165\u5230\u6240\u6709\u7ec4\u4ef6\u3002\n\n\u4e0b\u9762\u4e3e\u4e00\u4e2a\u590d\u6742\u7684 `use` \u4f8b\u5b50\uff1a\n\n```jsx\nstatic use = [\n 'count', //\u76f4\u63a5\u5b57\u7b26\u4e32\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use[0] \u8bbf\u95ee\n 'arr[0]', //\u4e5f\u652f\u6301 path\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use[1] \u8bbf\u95ee\n //\u652f\u6301 json\n {\n //alias\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.reverseMotto \u8bbf\u95ee\n reverseMotto: [\n 'motto', //path\n target => target.split('').reverse().join('') //computed\n ]\n },\n { name: 'arr[1]' }, //{ alias: path }\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.name \u8bbf\u95ee\n {\n //alias\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.fullName \u8bbf\u95ee\n fullName: [\n ['userInfo.firstName', 'userInfo.lastName'], //path array\n (firstName, lastName) => firstName + lastName //computed\n ]\n },\n]\n```\n\n\u4e0b\u9762\u770b\u770b JSX \u4e2d\u4f7f\u7528:\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\n\u5982\u679c\u4e0d\u5e26\u6709 alias \uff0c\u4f60\u4e5f\u53ef\u4ee5\u76f4\u63a5\u901a\u8fc7 `this.store.data.xxx` \u8bbf\u95ee\u3002"}});
|
||||
//# sourceMappingURL=7.dde840bf.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([6],{38: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## \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, h, 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 h(\n 'div',\n null,\n h(\n 'button',\n { onClick: this.sub },\n '-'\n ),\n h(\n 'span',\n null,\n this.data.count\n ),\n h(\n 'button',\n { onClick: this.add },\n '+'\n )\n )\n }\n })\n\n render(h('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\u4e0a\u9762\u4f7f\u7528\u7684\u662f hyperscript \u7684\u65b9\u5f0f\u6765\u4e66\u5199 HTML \u7ed3\u6784\uff0c\u7528 ES5 \u4e66\u5199 JS \uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 JSX \u548c ES2015+ \u6765\u66ff\u4ee3\u5b83\u4eec\u3002\n\n\n```jsx {9-12}\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=6.539a9bf7.chunk.js.map
|
||||
webpackJsonp([8],{38: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## \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, h, 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 h(\n 'div',\n null,\n h(\n 'button',\n { onClick: this.sub },\n '-'\n ),\n h(\n 'span',\n null,\n this.data.count\n ),\n h(\n 'button',\n { onClick: this.add },\n '+'\n )\n )\n }\n })\n\n render(h('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\u4e0a\u9762\u4f7f\u7528\u7684\u662f hyperscript \u7684\u65b9\u5f0f\u6765\u4e66\u5199 HTML \u7ed3\u6784\uff0c\u7528 ES5 \u4e66\u5199 JS \uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 JSX \u548c ES2015+ \u6765\u66ff\u4ee3\u5b83\u4eec\u3002\n\n\n```jsx {9-12}\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=8.c2b0d064.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
|||
webpackJsonp([8],{36:function(n,o){n.exports=""}});
|
||||
//# sourceMappingURL=8.f319ee2b.chunk.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":["../static/js/8.f319ee2b.chunk.js","docs/en/ecosystem.md"],"names":["webpackJsonp","36","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/8.f319ee2b.chunk.js","sourcesContent":["webpackJsonp([8],{\n\n/***/ 36:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/8.f319ee2b.chunk.js","module.exports = \"\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/ecosystem.md\n// module id = 36\n// module chunks = 8"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([7],{37: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```\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```\nnpm i omio\n```\n\n## CLI\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` 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\nCLI\'s auto-created project scaffolding is based on a single-page create-react-app to be converted into a multi-page one, with configuration issues to see [create-react-app user guide](https://facebook.github.io/create-react-app/docs/getting-started)'}});
|
||||
//# sourceMappingURL=7.33a9f639.chunk.js.map
|
||||
webpackJsonp([9],{37: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```\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```\nnpm i omio\n```\n\n## CLI\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` 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\nCLI\'s auto-created project scaffolding is based on a single-page create-react-app to be converted into a multi-page one, with configuration issues to see [create-react-app user guide](https://facebook.github.io/create-react-app/docs/getting-started)'}});
|
||||
//# sourceMappingURL=9.175ae5a5.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -5,7 +5,7 @@ Store 是 Omi 内置的中心化数据仓库，他解决和提供了下面问题
|
|||
* 组件树数据共享
|
||||
* 数据变更按需更新依赖的组件
|
||||
|
||||
|
||||
|
||||
|
||||
## 一段代码完全上手 Store
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue