update site

This commit is contained in:
dntzhang 2019-03-17 17:09:47 +08:00
parent 8eafe7f0b6
commit c0f47dd3d3
53 changed files with 188 additions and 120 deletions

View File

@ -1,49 +1,49 @@
{
"cn.css": "static/css/cn.fb9dfd08.css",
"cn.css.map": "static/css/cn.fb9dfd08.css.map",
"cn.js": "static/js/cn.1f028279.js",
"cn.js.map": "static/js/cn.1f028279.js.map",
"cn.js": "static/js/cn.05d9601f.js",
"cn.js.map": "static/js/cn.05d9601f.js.map",
"index.css": "static/css/index.fb9dfd08.css",
"index.css.map": "static/css/index.fb9dfd08.css.map",
"index.js": "static/js/index.b2322cbe.js",
"index.js.map": "static/js/index.b2322cbe.js.map",
"static/js/0.866b4ccc.chunk.js": "static/js/0.866b4ccc.chunk.js",
"static/js/0.866b4ccc.chunk.js.map": "static/js/0.866b4ccc.chunk.js.map",
"static/js/1.2b64577b.chunk.js": "static/js/1.2b64577b.chunk.js",
"static/js/1.2b64577b.chunk.js.map": "static/js/1.2b64577b.chunk.js.map",
"static/js/10.33e0aa8b.chunk.js": "static/js/10.33e0aa8b.chunk.js",
"static/js/10.33e0aa8b.chunk.js.map": "static/js/10.33e0aa8b.chunk.js.map",
"static/js/11.ff2f1329.chunk.js": "static/js/11.ff2f1329.chunk.js",
"static/js/11.ff2f1329.chunk.js.map": "static/js/11.ff2f1329.chunk.js.map",
"static/js/12.779e8783.chunk.js": "static/js/12.779e8783.chunk.js",
"static/js/12.779e8783.chunk.js.map": "static/js/12.779e8783.chunk.js.map",
"static/js/13.49534664.chunk.js": "static/js/13.49534664.chunk.js",
"static/js/13.49534664.chunk.js.map": "static/js/13.49534664.chunk.js.map",
"static/js/14.c4d30476.chunk.js": "static/js/14.c4d30476.chunk.js",
"static/js/14.c4d30476.chunk.js.map": "static/js/14.c4d30476.chunk.js.map",
"static/js/15.4c44fa6d.chunk.js": "static/js/15.4c44fa6d.chunk.js",
"static/js/15.4c44fa6d.chunk.js.map": "static/js/15.4c44fa6d.chunk.js.map",
"static/js/16.8533414e.chunk.js": "static/js/16.8533414e.chunk.js",
"static/js/16.8533414e.chunk.js.map": "static/js/16.8533414e.chunk.js.map",
"static/js/17.77887e0a.chunk.js": "static/js/17.77887e0a.chunk.js",
"static/js/17.77887e0a.chunk.js.map": "static/js/17.77887e0a.chunk.js.map",
"static/js/18.65ee5e6c.chunk.js": "static/js/18.65ee5e6c.chunk.js",
"static/js/18.65ee5e6c.chunk.js.map": "static/js/18.65ee5e6c.chunk.js.map",
"static/js/2.e0c5c7a4.chunk.js": "static/js/2.e0c5c7a4.chunk.js",
"static/js/2.e0c5c7a4.chunk.js.map": "static/js/2.e0c5c7a4.chunk.js.map",
"static/js/3.5b820f99.chunk.js": "static/js/3.5b820f99.chunk.js",
"static/js/3.5b820f99.chunk.js.map": "static/js/3.5b820f99.chunk.js.map",
"static/js/4.8d6cbea7.chunk.js": "static/js/4.8d6cbea7.chunk.js",
"static/js/4.8d6cbea7.chunk.js.map": "static/js/4.8d6cbea7.chunk.js.map",
"static/js/5.ff688ba4.chunk.js": "static/js/5.ff688ba4.chunk.js",
"static/js/5.ff688ba4.chunk.js.map": "static/js/5.ff688ba4.chunk.js.map",
"static/js/6.29d99d13.chunk.js": "static/js/6.29d99d13.chunk.js",
"static/js/6.29d99d13.chunk.js.map": "static/js/6.29d99d13.chunk.js.map",
"static/js/7.2ddc5cff.chunk.js": "static/js/7.2ddc5cff.chunk.js",
"static/js/7.2ddc5cff.chunk.js.map": "static/js/7.2ddc5cff.chunk.js.map",
"static/js/8.30b41efe.chunk.js": "static/js/8.30b41efe.chunk.js",
"static/js/8.30b41efe.chunk.js.map": "static/js/8.30b41efe.chunk.js.map",
"static/js/9.e11f9f30.chunk.js": "static/js/9.e11f9f30.chunk.js",
"static/js/9.e11f9f30.chunk.js.map": "static/js/9.e11f9f30.chunk.js.map",
"index.js": "static/js/index.3288619f.js",
"index.js.map": "static/js/index.3288619f.js.map",
"static/js/0.f567cc72.chunk.js": "static/js/0.f567cc72.chunk.js",
"static/js/0.f567cc72.chunk.js.map": "static/js/0.f567cc72.chunk.js.map",
"static/js/1.558ccb83.chunk.js": "static/js/1.558ccb83.chunk.js",
"static/js/1.558ccb83.chunk.js.map": "static/js/1.558ccb83.chunk.js.map",
"static/js/10.6fd7021c.chunk.js": "static/js/10.6fd7021c.chunk.js",
"static/js/10.6fd7021c.chunk.js.map": "static/js/10.6fd7021c.chunk.js.map",
"static/js/11.d89c3da3.chunk.js": "static/js/11.d89c3da3.chunk.js",
"static/js/11.d89c3da3.chunk.js.map": "static/js/11.d89c3da3.chunk.js.map",
"static/js/12.b315c503.chunk.js": "static/js/12.b315c503.chunk.js",
"static/js/12.b315c503.chunk.js.map": "static/js/12.b315c503.chunk.js.map",
"static/js/13.2d61bcaa.chunk.js": "static/js/13.2d61bcaa.chunk.js",
"static/js/13.2d61bcaa.chunk.js.map": "static/js/13.2d61bcaa.chunk.js.map",
"static/js/14.ffd1b762.chunk.js": "static/js/14.ffd1b762.chunk.js",
"static/js/14.ffd1b762.chunk.js.map": "static/js/14.ffd1b762.chunk.js.map",
"static/js/15.96c68a2d.chunk.js": "static/js/15.96c68a2d.chunk.js",
"static/js/15.96c68a2d.chunk.js.map": "static/js/15.96c68a2d.chunk.js.map",
"static/js/16.adc3616f.chunk.js": "static/js/16.adc3616f.chunk.js",
"static/js/16.adc3616f.chunk.js.map": "static/js/16.adc3616f.chunk.js.map",
"static/js/17.eee2a496.chunk.js": "static/js/17.eee2a496.chunk.js",
"static/js/17.eee2a496.chunk.js.map": "static/js/17.eee2a496.chunk.js.map",
"static/js/18.78af457c.chunk.js": "static/js/18.78af457c.chunk.js",
"static/js/18.78af457c.chunk.js.map": "static/js/18.78af457c.chunk.js.map",
"static/js/2.c1dc8aff.chunk.js": "static/js/2.c1dc8aff.chunk.js",
"static/js/2.c1dc8aff.chunk.js.map": "static/js/2.c1dc8aff.chunk.js.map",
"static/js/3.1911dfb9.chunk.js": "static/js/3.1911dfb9.chunk.js",
"static/js/3.1911dfb9.chunk.js.map": "static/js/3.1911dfb9.chunk.js.map",
"static/js/4.0b40eebc.chunk.js": "static/js/4.0b40eebc.chunk.js",
"static/js/4.0b40eebc.chunk.js.map": "static/js/4.0b40eebc.chunk.js.map",
"static/js/5.802e0a01.chunk.js": "static/js/5.802e0a01.chunk.js",
"static/js/5.802e0a01.chunk.js.map": "static/js/5.802e0a01.chunk.js.map",
"static/js/6.847b6a15.chunk.js": "static/js/6.847b6a15.chunk.js",
"static/js/6.847b6a15.chunk.js.map": "static/js/6.847b6a15.chunk.js.map",
"static/js/7.e2e272f5.chunk.js": "static/js/7.e2e272f5.chunk.js",
"static/js/7.e2e272f5.chunk.js.map": "static/js/7.e2e272f5.chunk.js.map",
"static/js/8.1a683bff.chunk.js": "static/js/8.1a683bff.chunk.js",
"static/js/8.1a683bff.chunk.js.map": "static/js/8.1a683bff.chunk.js.map",
"static/js/9.99421bc7.chunk.js": "static/js/9.99421bc7.chunk.js",
"static/js/9.99421bc7.chunk.js.map": "static/js/9.99421bc7.chunk.js.map",
"static/media/omi-logo2019.svg": "static/media/omi-logo2019.923166c3.svg"
}

View File

@ -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.1f028279.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.05d9601f.js"></script></body></html>

View File

@ -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.b2322cbe.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.3288619f.js"></script></body></html>

View File

@ -1 +1 @@
"use strict";var precacheConfig=[["./cn.html","807a1756f4a8a7142cf0a4e43906ca9e"],["./index.html","1ec51e46f0db3d8a02710da776199413"],["./static/css/cn.fb9dfd08.css","956b8f005795c2569d823cddbc15d24c"],["./static/css/index.fb9dfd08.css","414d16d757eb45e170251798229d649f"],["./static/js/0.866b4ccc.chunk.js","f671c7bd6b0567fd49e5846ff7f36489"],["./static/js/1.2b64577b.chunk.js","43cddbaaadf1ecc2aef10d4f384ba6c9"],["./static/js/10.33e0aa8b.chunk.js","0d392fd3c9fefd35907b9d7be6e5d68e"],["./static/js/11.ff2f1329.chunk.js","a5016511e9e8bb6ccd9131efdeed0368"],["./static/js/12.779e8783.chunk.js","3838eb23b0f02caf4cb6faf41cf74a10"],["./static/js/13.49534664.chunk.js","355a126b6b0cb6de29cc6e7a506d9b45"],["./static/js/14.c4d30476.chunk.js","da28f490d1743b0f31a9534a6fa7fed1"],["./static/js/15.4c44fa6d.chunk.js","e72aa2f0b22d646c25fb70cd230f5c07"],["./static/js/16.8533414e.chunk.js","2d5f6f80664746b0c99272b89891b79d"],["./static/js/17.77887e0a.chunk.js","c6fc888c012a3e2e77e5a7c7a50224cc"],["./static/js/18.65ee5e6c.chunk.js","f6c63a11e3cef2b9501789305a573f92"],["./static/js/2.e0c5c7a4.chunk.js","05c4a8f0cb4edcda99bddd4e311b5b23"],["./static/js/3.5b820f99.chunk.js","fe0b54d9fa95d77dbc64197b7900d246"],["./static/js/4.8d6cbea7.chunk.js","fa3175bbb59697f771ae472bb0e5e8d1"],["./static/js/5.ff688ba4.chunk.js","2a3b649a932ac499c94379afdbd8d00e"],["./static/js/6.29d99d13.chunk.js","7a79eeef816b16c193dcc456416fe65b"],["./static/js/7.2ddc5cff.chunk.js","4a4082d1266f46108001ed03a7f22e25"],["./static/js/8.30b41efe.chunk.js","6e44c724833786b40f4284e5ff15649a"],["./static/js/9.e11f9f30.chunk.js","0fcd94764693415acbf6789eaa8ac13e"],["./static/js/cn.1f028279.js","9d8729f904cfbb81400362cf4271fd04"],["./static/js/index.b2322cbe.js","07773b3292c24d418bb33dc47ab54d2f"],["./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 c=new URL(e);return"/"===c.pathname.slice(-1)&&(c.pathname+=t),c.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,c,a){var n=new URL(e);return a&&n.pathname.match(a)||(n.search+=(n.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(c)),n.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var c=new URL(t).pathname;return e.some(function(e){return c.match(e)})},stripIgnoredUrlParameters=function(e,c){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 c.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],c=e[1],a=new URL(t,self.location),n=createCacheKey(a,hashParamName,c,/\.\w{8}\./);return[a.toString(),n]}));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(c){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t){if(!c.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 c=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(!c.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,c=stripIgnoredUrlParameters(t.request.url,ignoreUrlParametersMatching),a="index.html";(e=urlsToCacheKeys.has(c))||(c=addDirectoryIndex(c,a),e=urlsToCacheKeys.has(c));var n="./index.html";!e&&"navigate"===t.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],t.request.url)&&(c=new URL(n,self.location).toString(),e=urlsToCacheKeys.has(c)),e&&t.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(c)).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","085c04ddd9a5f595e173bd8af8b5967b"],["./index.html","36f480ff9826fa5463fb2ae48c8e0141"],["./static/css/cn.fb9dfd08.css","956b8f005795c2569d823cddbc15d24c"],["./static/css/index.fb9dfd08.css","414d16d757eb45e170251798229d649f"],["./static/js/0.f567cc72.chunk.js","f3202e1a07b69759148759bce73ac329"],["./static/js/1.558ccb83.chunk.js","c17437d453c11e5aa7814a224b2715f7"],["./static/js/10.6fd7021c.chunk.js","d051f9a9de83b89e089b7066c3eee0c5"],["./static/js/11.d89c3da3.chunk.js","64accb62577f5508865163be3b24921c"],["./static/js/12.b315c503.chunk.js","f7fc8c1d7275b1fad3a40ff24cd32dc7"],["./static/js/13.2d61bcaa.chunk.js","f705603af952b4c679483487dbe34789"],["./static/js/14.ffd1b762.chunk.js","b06a7acf615d915f918d8241cc2ea5d1"],["./static/js/15.96c68a2d.chunk.js","ae64a701e9362a6358295d5bb2c4acea"],["./static/js/16.adc3616f.chunk.js","f37fe4a4612da03454251b418b838b22"],["./static/js/17.eee2a496.chunk.js","0994932ab2707be5edddc2ac50eb154c"],["./static/js/18.78af457c.chunk.js","f9bc7539f5912d68ed3a6dbef2937b0c"],["./static/js/2.c1dc8aff.chunk.js","9b99e5879908c0c3dfbde3040a16fb06"],["./static/js/3.1911dfb9.chunk.js","92c988f90f94d11036b2d9a931cc5e0e"],["./static/js/4.0b40eebc.chunk.js","8c20bf08e38b0f10198ac6d95d17a618"],["./static/js/5.802e0a01.chunk.js","101998b1b594f61aff4fc980c3d5bfbb"],["./static/js/6.847b6a15.chunk.js","4b7137bf928b9afa5751311122f0ca3e"],["./static/js/7.e2e272f5.chunk.js","c0caf6afdff38e89be4438e2db19f963"],["./static/js/8.1a683bff.chunk.js","c53736ff86dfb46f374b3841f69e9ce4"],["./static/js/9.99421bc7.chunk.js","e4a3a356ebd29e2687d32f15136a7009"],["./static/js/cn.05d9601f.js","30c05fdafd4cff4b8f3ac6dfeb14a506"],["./static/js/index.3288619f.js","f35c3b94f6e183deed52644cd4641607"],["./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 c=new URL(e);return"/"===c.pathname.slice(-1)&&(c.pathname+=t),c.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,c,a){var n=new URL(e);return a&&n.pathname.match(a)||(n.search+=(n.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(c)),n.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var c=new URL(t).pathname;return e.some(function(e){return c.match(e)})},stripIgnoredUrlParameters=function(e,c){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 c.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],c=e[1],a=new URL(t,self.location),n=createCacheKey(a,hashParamName,c,/\.\w{8}\./);return[a.toString(),n]}));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(c){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t){if(!c.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 c=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(!c.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,c=stripIgnoredUrlParameters(t.request.url,ignoreUrlParametersMatching),a="index.html";(e=urlsToCacheKeys.has(c))||(c=addDirectoryIndex(c,a),e=urlsToCacheKeys.has(c));var n="./index.html";!e&&"navigate"===t.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],t.request.url)&&(c=new URL(n,self.location).toString(),e=urlsToCacheKeys.has(c)),e&&t.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(c)).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)}))}});

View File

@ -1,2 +1,2 @@
webpackJsonp([0],{54: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![](https://github.com/Tencent/omi/raw/master/assets/store.cn.jpg)\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\u3002\n\nStore \u91cc\u7684 data:\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', //\u76f4\u63a5\u5b57\u7b26\u4e32\uff0c\u53ef\u901a\u8fc7 this.use[0] \u8bbf\u95ee\n 'arr[0]', //\u4e5f\u652f\u6301 path\uff0c\u53ef\u901a\u8fc7 this.use[1] \u8bbf\u95ee\n //\u652f\u6301 json\n {\n //alias\uff0c\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 }\uff0c\u53ef\u901a\u8fc7 this.use.name \u8bbf\u95ee\n {\n //alias\uff0c\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.866b4ccc.chunk.js.map
webpackJsonp([0],{57: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![](https://github.com/Tencent/omi/raw/master/assets/store.cn.jpg)\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\u3002\n\nStore \u91cc\u7684 data:\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', //\u76f4\u63a5\u5b57\u7b26\u4e32\uff0c\u53ef\u901a\u8fc7 this.use[0] \u8bbf\u95ee\n 'arr[0]', //\u4e5f\u652f\u6301 path\uff0c\u53ef\u901a\u8fc7 this.use[1] \u8bbf\u95ee\n //\u652f\u6301 json\n {\n //alias\uff0c\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 }\uff0c\u53ef\u901a\u8fc7 this.use.name \u8bbf\u95ee\n {\n //alias\uff0c\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.f567cc72.chunk.js.map

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
webpackJsonp([1],{53: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=1.2b64577b.chunk.js.map
webpackJsonp([1],{56: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=1.558ccb83.chunk.js.map

View File

@ -1 +1 @@
{"version":3,"sources":["../static/js/1.2b64577b.chunk.js","docs/zh-cn/ref.md"],"names":["webpackJsonp","53","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/1.2b64577b.chunk.js","sourcesContent":["webpackJsonp([1],{\n\n/***/ 53:\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/1.2b64577b.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 = 53\n// module chunks = 1"],"sourceRoot":""}
{"version":3,"sources":["../static/js/1.558ccb83.chunk.js","docs/zh-cn/ref.md"],"names":["webpackJsonp","56","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/1.558ccb83.chunk.js","sourcesContent":["webpackJsonp([1],{\n\n/***/ 56:\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/1.558ccb83.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 = 56\n// module chunks = 1"],"sourceRoot":""}

View File

@ -1,2 +1,2 @@
webpackJsonp([10],{44:function(n,t){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![](https://github.com/Tencent/omi/raw/master/assets/store.jpg)\n\n## A piece of code is completely ready for 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* 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'."}});
//# sourceMappingURL=10.33e0aa8b.chunk.js.map
webpackJsonp([10],{47:function(n,t){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![](https://github.com/Tencent/omi/raw/master/assets/store.jpg)\n\n## A piece of code is completely ready for 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* 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'."}});
//# sourceMappingURL=10.6fd7021c.chunk.js.map

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
webpackJsonp([11],{43: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=11.ff2f1329.chunk.js.map
webpackJsonp([11],{46: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=11.d89c3da3.chunk.js.map

View File

@ -1 +1 @@
{"version":3,"sources":["../static/js/11.ff2f1329.chunk.js","docs/en/ref.md"],"names":["webpackJsonp","43","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/11.ff2f1329.chunk.js","sourcesContent":["webpackJsonp([11],{\n\n/***/ 43:\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/11.ff2f1329.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 = 43\n// module chunks = 11"],"sourceRoot":""}
{"version":3,"sources":["../static/js/11.d89c3da3.chunk.js","docs/en/ref.md"],"names":["webpackJsonp","46","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/11.d89c3da3.chunk.js","sourcesContent":["webpackJsonp([11],{\n\n/***/ 46:\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/11.d89c3da3.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 = 46\n// module chunks = 11"],"sourceRoot":""}

View File

@ -1,2 +1,2 @@
webpackJsonp([12],{42:function(n,e){n.exports="\n## Props\n\nTransfer data to sub elements through props, such as:\n\n```jsx\nimport { WeElement, define, render } from 'omi'\n\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.name}!</h1>\n )\n }\n})\n```\n\nUsing element:\n\n```jsx\n<my-element name=\"world\"></my-first-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-first-element myObj={{ name: 'world' }}></my-first-element>\n```\n\nYou can set the default value by the static default Props property:\n\n```jsx\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=12.779e8783.chunk.js.map
webpackJsonp([12],{45:function(n,e){n.exports="\n## Props\n\nTransfer data to sub elements through props, such as:\n\n```jsx\nimport { WeElement, define, render } from 'omi'\n\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.name}!</h1>\n )\n }\n})\n```\n\nUsing element:\n\n```jsx\n<my-element name=\"world\"></my-first-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-first-element myObj={{ name: 'world' }}></my-first-element>\n```\n\nYou can set the default value by the static default Props property:\n\n```jsx\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=12.b315c503.chunk.js.map

View File

@ -1 +1 @@
{"version":3,"sources":["../static/js/12.779e8783.chunk.js","docs/en/props.md"],"names":["webpackJsonp","42","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/12.779e8783.chunk.js","sourcesContent":["webpackJsonp([12],{\n\n/***/ 42:\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-first-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-first-element myObj={{ name: 'world' }}></my-first-element>\\n```\\n\\nYou can set the default value by the static default Props property:\\n\\n```jsx\\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/12.779e8783.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-first-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-first-element myObj={{ name: 'world' }}></my-first-element>\\n```\\n\\nYou can set the default value by the static default Props property:\\n\\n```jsx\\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/en/props.md\n// module id = 42\n// module chunks = 12"],"sourceRoot":""}
{"version":3,"sources":["../static/js/12.b315c503.chunk.js","docs/en/props.md"],"names":["webpackJsonp","45","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/12.b315c503.chunk.js","sourcesContent":["webpackJsonp([12],{\n\n/***/ 45:\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-first-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-first-element myObj={{ name: 'world' }}></my-first-element>\\n```\\n\\nYou can set the default value by the static default Props property:\\n\\n```jsx\\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/12.b315c503.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-first-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-first-element myObj={{ name: 'world' }}></my-first-element>\\n```\\n\\nYou can set the default value by the static default Props property:\\n\\n```jsx\\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/en/props.md\n// module id = 45\n// module chunks = 12"],"sourceRoot":""}

View File

@ -1,2 +1,2 @@
webpackJsonp([13],{41:function(t,e){t.exports="## Ecosystem of Omi\n\n| **Project** | **Description** |\n| ------------------------------- | ----------------------------------- |\n| [omi-docs](https://github.com/Tencent/omi/blob/master/docs/main-concepts.md)| Omi official documents |\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| [omiu](https://tencent.github.io/omi/packages/omiu/examples/build/index.html)| Omi official UI|\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=13.49534664.chunk.js.map
webpackJsonp([13],{44:function(t,e){t.exports="## Ecosystem of Omi\n\n| **Project** | **Description** |\n| ------------------------------- | ----------------------------------- |\n| [omi-docs](https://github.com/Tencent/omi/blob/master/docs/main-concepts.md)| Omi official documents |\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| [omiu](https://tencent.github.io/omi/packages/omiu/examples/build/index.html)| Omi official UI|\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=13.2d61bcaa.chunk.js.map

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
webpackJsonp([14],{40: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=14.c4d30476.chunk.js.map
webpackJsonp([14],{43: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=14.ffd1b762.chunk.js.map

View File

@ -1 +1 @@
{"version":3,"sources":["../static/js/14.c4d30476.chunk.js","docs/en/lifecycle.md"],"names":["webpackJsonp","40","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/14.c4d30476.chunk.js","sourcesContent":["webpackJsonp([14],{\n\n/***/ 40:\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/14.c4d30476.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 = 40\n// module chunks = 14"],"sourceRoot":""}
{"version":3,"sources":["../static/js/14.ffd1b762.chunk.js","docs/en/lifecycle.md"],"names":["webpackJsonp","43","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/14.ffd1b762.chunk.js","sourcesContent":["webpackJsonp([14],{\n\n/***/ 43:\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/14.ffd1b762.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 = 43\n// module chunks = 14"],"sourceRoot":""}

View File

@ -1,2 +1,2 @@
webpackJsonp([15],{39: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![](https://github.com/Tencent/omi/raw/master/assets/99.jpg)\n\n[\u2192 Online Demo](https://tencent.github.io/omi/packages/omi/examples/99/)"}});
//# sourceMappingURL=15.4c44fa6d.chunk.js.map
webpackJsonp([15],{42: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![](https://github.com/Tencent/omi/raw/master/assets/99.jpg)\n\n[\u2192 Online Demo](https://tencent.github.io/omi/packages/omi/examples/99/)"}});
//# sourceMappingURL=15.96c68a2d.chunk.js.map

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
webpackJsonp([16],{38: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, 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\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\nThe HTML structure is written in hyperscript and JS is written in ES5. You can use JSX and ES2015 + instead.\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=16.8533414e.chunk.js.map
webpackJsonp([16],{41: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, 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\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\nThe HTML structure is written in hyperscript and JS is written in ES5. You can use JSX and ES2015 + instead.\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=16.adc3616f.chunk.js.map

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
webpackJsonp([17],{37: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\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=17.77887e0a.chunk.js.map
webpackJsonp([17],{40: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\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=17.eee2a496.chunk.js.map

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
webpackJsonp([18],{36: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=18.65ee5e6c.chunk.js.map
webpackJsonp([18],{39: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=18.78af457c.chunk.js.map

View File

@ -1 +1 @@
{"version":3,"sources":["../static/js/18.65ee5e6c.chunk.js","docs/en/event.md"],"names":["webpackJsonp","36","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/18.65ee5e6c.chunk.js","sourcesContent":["webpackJsonp([18],{\n\n/***/ 36:\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/18.65ee5e6c.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 = 36\n// module chunks = 18"],"sourceRoot":""}
{"version":3,"sources":["../static/js/18.78af457c.chunk.js","docs/en/event.md"],"names":["webpackJsonp","39","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/18.78af457c.chunk.js","sourcesContent":["webpackJsonp([18],{\n\n/***/ 39:\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/18.78af457c.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 = 39\n// module chunks = 18"],"sourceRoot":""}

View File

@ -1,2 +1,2 @@
webpackJsonp([2],{52: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```jsx\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=2.e0c5c7a4.chunk.js.map
webpackJsonp([2],{55: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```jsx\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=2.c1dc8aff.chunk.js.map

View File

@ -1 +1 @@
{"version":3,"sources":["../static/js/2.e0c5c7a4.chunk.js","docs/zh-cn/props.md"],"names":["webpackJsonp","52","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/2.e0c5c7a4.chunk.js","sourcesContent":["webpackJsonp([2],{\n\n/***/ 52:\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```jsx\\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/2.e0c5c7a4.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```jsx\\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 = 52\n// module chunks = 2"],"sourceRoot":""}
{"version":3,"sources":["../static/js/2.c1dc8aff.chunk.js","docs/zh-cn/props.md"],"names":["webpackJsonp","55","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/2.c1dc8aff.chunk.js","sourcesContent":["webpackJsonp([2],{\n\n/***/ 55:\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```jsx\\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/2.c1dc8aff.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```jsx\\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 = 55\n// module chunks = 2"],"sourceRoot":""}

View File

@ -1,2 +1,2 @@
webpackJsonp([3],{51: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| [omi-docs](https://github.com/Tencent/omi/blob/master/docs/main-concepts.cn.md)| Omi \u5b98\u65b9\u6587\u6863 |\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| [omiu](https://tencent.github.io/omi/packages/omiu/examples/build/zh-cn.html)| Omi \u5b98\u65b9 UI\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=3.5b820f99.chunk.js.map
webpackJsonp([3],{54: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| [omi-docs](https://github.com/Tencent/omi/blob/master/docs/main-concepts.cn.md)| Omi \u5b98\u65b9\u6587\u6863 |\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| [omiu](https://tencent.github.io/omi/packages/omiu/examples/build/zh-cn.html)| Omi \u5b98\u65b9 UI\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=3.1911dfb9.chunk.js.map

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
webpackJsonp([4],{50: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![](https://github.com/Tencent/omi/raw/master/assets/omip-pv.png)\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![](../../assets/omip-douban-list.png)\n\n![](../../assets/omip-douban-detail.png)\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=4.8d6cbea7.chunk.js.map
webpackJsonp([4],{53: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![](https://github.com/Tencent/omi/raw/master/assets/omip-pv.png)\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![](../../assets/omip-douban-list.png)\n\n![](../../assets/omip-douban-detail.png)\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=4.0b40eebc.chunk.js.map

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
webpackJsonp([5],{49: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=5.ff688ba4.chunk.js.map
webpackJsonp([5],{52: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=5.802e0a01.chunk.js.map

View File

@ -1 +1 @@
{"version":3,"sources":["../static/js/5.ff688ba4.chunk.js","docs/zh-cn/lifecycle.md"],"names":["webpackJsonp","49","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/5.ff688ba4.chunk.js","sourcesContent":["webpackJsonp([5],{\n\n/***/ 49:\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/5.ff688ba4.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 = 49\n// module chunks = 5"],"sourceRoot":""}
{"version":3,"sources":["../static/js/5.802e0a01.chunk.js","docs/zh-cn/lifecycle.md"],"names":["webpackJsonp","52","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/5.802e0a01.chunk.js","sourcesContent":["webpackJsonp([5],{\n\n/***/ 52:\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/5.802e0a01.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 = 52\n// module chunks = 5"],"sourceRoot":""}

View File

@ -1,2 +1,2 @@
webpackJsonp([6],{48: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![](https://github.com/Tencent/omi/raw/master/assets/99.jpg)\n\n[\u2192 \u5728\u7ebf\u67e5\u770b](https://tencent.github.io/omi/packages/omi/examples/99/)"}});
//# sourceMappingURL=6.29d99d13.chunk.js.map
webpackJsonp([6],{51: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![](https://github.com/Tencent/omi/raw/master/assets/99.jpg)\n\n[\u2192 \u5728\u7ebf\u67e5\u770b](https://tencent.github.io/omi/packages/omi/examples/99/)"}});
//# sourceMappingURL=6.847b6a15.chunk.js.map

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
webpackJsonp([7],{47: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, 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 {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=7.2ddc5cff.chunk.js.map
webpackJsonp([7],{50: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, 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 {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=7.e2e272f5.chunk.js.map

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
webpackJsonp([8],{46: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=8.30b41efe.chunk.js.map
webpackJsonp([8],{49: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=8.1a683bff.chunk.js.map

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
webpackJsonp([9],{45: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=9.e11f9f30.chunk.js.map
webpackJsonp([9],{48: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=9.99421bc7.chunk.js.map

View File

@ -1 +1 @@
{"version":3,"sources":["../static/js/9.e11f9f30.chunk.js","docs/zh-cn/event.md"],"names":["webpackJsonp","45","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/9.e11f9f30.chunk.js","sourcesContent":["webpackJsonp([9],{\n\n/***/ 45:\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/9.e11f9f30.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 = 45\n// module chunks = 9"],"sourceRoot":""}
{"version":3,"sources":["../static/js/9.99421bc7.chunk.js","docs/zh-cn/event.md"],"names":["webpackJsonp","48","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/9.99421bc7.chunk.js","sourcesContent":["webpackJsonp([9],{\n\n/***/ 48:\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/9.99421bc7.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 = 48\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

View File

@ -4,7 +4,7 @@
margin-left: 260px;
padding: 1px 10px 10px 20px;
color: #24292e;
overflow: hidden;
/* overflow: hidden; */
max-width: 900px;
}

View File

@ -1,4 +1,5 @@
import { define, WeElement } from 'omi'
import '../my-footer'
define('my-content', class extends WeElement {
static css = require('./_index.css')
@ -104,10 +105,13 @@ define('my-content', class extends WeElement {
render() {
return (
<div
class="content" ontouchend={this.touchEnd}
dangerouslySetInnerHTML={{ __html: this.store.data.html }}
/>
<div class="content">
<div
ontouchend={this.touchEnd}
dangerouslySetInnerHTML={{ __html: this.store.data.html }}
/>
<my-footer />
</div>
)
}
})

View File

@ -0,0 +1,14 @@
.ft{
position: relative;
margin-top: 20px
}
.pre{
position: absolute;
left:15px;
}
.next{
position: absolute;
right: 15px;
}

View File

@ -0,0 +1,27 @@
import { define, WeElement } from 'omi'
define('my-footer', class extends WeElement {
static css = require('./_index.css')
static use = [
'position',
'menu'
]
render() {
const [
position,
menus
] = this.use
const pre = this.store.getPre()
const next = this.store.getNext()
console.log(pre,next)
return (
<div class='ft'>
{pre &&<a href={'#/' + pre.md + `?index=${pre.index}&subIndex=${pre.subIndex}`} class='pre'> {pre.name}</a>}
{next &&<a href={'#/' + next.md + `?index=${next.index}&subIndex=${next.subIndex}`} class='next'>{next.name} </a>}
</div>
)
}
})

View File

@ -10,15 +10,38 @@ class Store {
html: '',
sideBarShow: window.innerWidth > 768
}
let id = 0
this.map = {}
this.positionMap = {}
config.menus[this.data.lan].forEach((menu, index) => {
menu.list.forEach((item, subIndex) => {
item.id = id++
item.position = [index, subIndex]
this.map[item.id] = item
item.index = index
item.subIndex = subIndex
this.positionMap[index+'-'+subIndex] = item
})
})
this.preIndex = 0
this.preSubIndex = 0
}
init(){
getNext(){
const item = this.positionMap[this.data.position.join('-')]
if(item){
return this.map[item.id+1]
}
}
getPre(){
const item = this.positionMap[this.data.position.join('-')]
if(item){
return this.map[item.id-1]
}
}
init() {
this.remarkable = new Remarkable({ html: true })
if (location.hash === "") {
this.data.position = [0, 0]
@ -38,14 +61,14 @@ class Store {
}
initRouter() {
const menus = this.data.menus[this.data.lan]
const menus = this.data.menus[this.data.lan]
menus.forEach(item => {
item.list.forEach(subItem => {
route('/' + subItem.md, evt => {
menus[this.preIndex].list[this.preSubIndex].selected = false
this.preIndex = evt.query.index
this.preSubIndex = evt.query.subIndex
this.data.position = [Number(evt.query.index), Number( evt.query.subIndex)]
this.data.position = [Number(evt.query.index), Number(evt.query.subIndex)]
this.data.sideBarShow = false
this.getMarkDown(subItem.md, this.data.lan, m => {