omis - update site
This commit is contained in:
dntzhang
parent
edc7ef22e4
commit
4c5b74b253
|
|
@ -1,26 +0,0 @@
|
|||
## Class
|
||||
|
||||
Omi has two built-in class methods `extractClass` and `classNames`.
|
||||
|
||||
```js
|
||||
import { classNames, extractClass } from 'omi'
|
||||
|
||||
define('my-element', class extends WeElement {
|
||||
render(props) {
|
||||
//extractClass will take out this class/className from props and merge the other classNames to obj
|
||||
const cls = extractClass(props, 'o-my-class', {
|
||||
'other-class': true,
|
||||
'other-class-b': this.xxx === 1
|
||||
})
|
||||
|
||||
return (
|
||||
<div {...cls} {...props}>
|
||||
Test
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
The `classNames` is the same as [classnames](https://github.com/JedWatson/classnames) of [npm](https://www.npmjs.com/package/classnames).
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
## Lifecycle
|
||||
|
||||
| Lifecycle method | When it gets called |
|
||||
| ---------------- | -------------------------------------------- |
|
||||
| `install` | before the component gets mounted to the DOM |
|
||||
| `installed` | after the component gets mounted to the DOM |
|
||||
| `uninstall` | prior to removal from the DOM |
|
||||
| `beforeUpdate` | before update |
|
||||
| `updated` | after update |
|
||||
| `beforeRender` | before `render()` |
|
||||
| `receiveProps` | parent element re-render will trigger it |
|
||||
|
||||
For example:
|
||||
|
||||
```js
|
||||
import { render, WeElement, define } from 'omi'
|
||||
|
||||
define('my-timer', class extends WeElement {
|
||||
static observe = true
|
||||
|
||||
data = {
|
||||
seconds: 0
|
||||
}
|
||||
|
||||
tick() {
|
||||
this.data.seconds++
|
||||
}
|
||||
|
||||
install() {
|
||||
this.interval = setInterval(() => this.tick(), 1000)
|
||||
}
|
||||
|
||||
uninstall() {
|
||||
clearInterval(this.interval)
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>Seconds: {this.data.seconds}</div>
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-timer />, 'body')
|
||||
```
|
||||
|
|
@ -1,154 +0,0 @@
|
|||
# Omim
|
||||
|
||||
Cross-Frameworks components, powered by Material Design and [Omi](https://github.com/Tencent/omi).
|
||||
|
||||
* [DOCS & REPL](https://tencent.github.io/omi/packages/omim/docs/build/index.html)
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
* Render by Custom Elements of Web Components
|
||||
* Any framework can use the components, such as Omi, React, Vue and Angular
|
||||
* Support both JSX and native HTML elements
|
||||
* Each element can be used independently
|
||||
* Super easy to change theme colors, fonts and rounded corners
|
||||
* Extended HTML capabilities, you can pass false attributes to elements through string `'0'` or string `'flase'`
|
||||
|
||||
## Usage
|
||||
|
||||
### Via script
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/omi"></script>
|
||||
<script src="https://unpkg.com/@omim/core@latest/button/index.js"></script>
|
||||
|
||||
<m-button>I am button</m-button>
|
||||
```
|
||||
|
||||
### Via npm
|
||||
|
||||
``` bash
|
||||
npm install @omim/core
|
||||
```
|
||||
|
||||
Then:
|
||||
|
||||
```js
|
||||
import '@omim/core/button'
|
||||
```
|
||||
|
||||
Then use the element in Omi, React, Vue or Angular:
|
||||
|
||||
``` html
|
||||
<m-button>I am button</m-button>
|
||||
```
|
||||
|
||||
It can also be used in pure js:
|
||||
|
||||
```js
|
||||
var button = document.createElement('m-button')
|
||||
button.innerHTML = 'I am button'
|
||||
document.body.append(button)
|
||||
button.addEventListener('click', function () {
|
||||
console.log('Clicked!')
|
||||
})
|
||||
|
||||
//or
|
||||
//document.body.innerHTML = '<m-button>I am button</m-button>'
|
||||
```
|
||||
|
||||
## Change Theme
|
||||
|
||||
```js
|
||||
document.body.style.setProperty('--mdc-theme-primary', 'red')
|
||||
document.body.style.setProperty('--mdc-theme-secondary', 'blue')
|
||||
document.body.style.setProperty('--mdc-shape-small-component-radius', '2px')
|
||||
```
|
||||
|
||||
All the config:
|
||||
|
||||
```
|
||||
--mdc-theme-primary: #0072d9;
|
||||
--mdc-theme-secondary: #2170b8;
|
||||
--mdc-theme-error: #f5222d;
|
||||
--mdc-theme-surface: #ffffff;
|
||||
--mdc-theme-on-primary: #ffffff;
|
||||
--mdc-theme-on-secondary: #ffffff;
|
||||
--mdc-theme-on-error: #ffffff;
|
||||
--mdc-theme-on-surface: #000000;
|
||||
--mdc-theme-background: #ffffff;
|
||||
--mdc-shape-small-component-radius: 4px;
|
||||
--mdc-shape-medium-component-radius: 4px;
|
||||
--mdc-shape-large-component-radius: 0px;
|
||||
--mdc-typography--font-family: Roboto, sans-serif;
|
||||
```
|
||||
|
||||
## HTML Extention
|
||||
|
||||
You can set boolean prop to false from markup by 0 or false string.
|
||||
|
||||
```js
|
||||
define('my-element', class extends WeElement {
|
||||
static defaultProps = {
|
||||
show: true
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
show: Boolean
|
||||
}
|
||||
|
||||
render(props) {
|
||||
...
|
||||
...
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Use:
|
||||
|
||||
```html
|
||||
<my-element show="false"></my-element>
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```html
|
||||
<my-element show="0"></my-element>
|
||||
```
|
||||
|
||||
## Contribution
|
||||
|
||||
### CMD
|
||||
|
||||
Build component:
|
||||
|
||||
```bash
|
||||
npm run build -- component-name
|
||||
```
|
||||
|
||||
Build all components:
|
||||
|
||||
```bash
|
||||
npm run build-all
|
||||
```
|
||||
|
||||
Build demo:
|
||||
|
||||
```bash
|
||||
npm start demo-name
|
||||
```
|
||||
|
||||
Publish:
|
||||
|
||||
```bash
|
||||
npm publish --access public
|
||||
```
|
||||
|
||||
### Links
|
||||
|
||||
* [material.io docs](https://material.io/develop/web/components/buttons/)
|
||||
* [material.io demo](https://material-components.github.io/material-components-web-catalog/#/)
|
||||
* [material-theme-builder](https://material-theme-builder.glitch.me/)
|
||||
* [material-components-web](https://github.com/material-components/material-components-web)
|
||||
* [material-icons](https://material.io/tools/icons/?style=baseline)
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
## Ecosystem of Omi
|
||||
|
||||
| **Project** | **Description** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omip](https://github.com/Tencent/omi/tree/master/packages/omip)| 直接使用 Omi 开发小程序或 H5 SPA！！！|
|
||||
| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| Omi for old browsers(IE8+ and mobile browsers).|
|
||||
| [omix](https://github.com/Tencent/omi/tree/master/packages/omix)| Tiny size mini programe framework.|
|
||||
| [omi-chart](https://github.com/Tencent/omi/tree/master/packages/omi-chart)| Simple HTML5 Charts using chart-x tag.|
|
||||
| [md2site](https://tencent.github.io/omi/assets/md2site/)| Static Site Generator with markdown powered by Omio.|
|
||||
| [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.|
|
||||
| [omi-html](https://github.com/Tencent/omi/tree/master/packages/omi-html)| Using [htm](https://github.com/developit/htm) in omi.|
|
||||
| [omi-30-seconds](https://github.com/Tencent/omi/tree/master/packages/omi-30-seconds)| Useful Omi snippets that you can understand in 30 seconds.|
|
||||
| [omi-canvas](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Perfect fusion of web components, jsx and canvas.|
|
||||
| [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)|
|
||||
| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi official router in 1KB js. [→ DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/) |
|
||||
| [omi-devtools](https://github.com/f/omi-devtools)| Browser DevTools extension |
|
||||
| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| Project scaffolding |
|
||||
| [omi-swiper](https://github.com/loo41/Omi-Swiper)| Omi + Swiper |
|
||||
| [omi-vscode](https://github.com/ZainChen/omi-vscode)| Vscode extension for omi, [Install now!](https://marketplace.visualstudio.com/items?itemName=ZainChen.omi) |
|
||||
| [omi-ex](https://github.com/Tencent/omi/tree/master/packages/omi-ex)| Omi.js extension(TypeScript) |
|
||||
| [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.|
|
||||
| [omi-tap](https://github.com/Tencent/omi/releases/tag/v4.0.24)| Native tap event support(omi v4.0.24+）|
|
||||
| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)|Support touch and gesture events in your Omi project.|
|
||||
| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)|Smooth scrolling, rotation, pull to refresh and any motion for the web.|
|
||||
| [omi-use](https://github.com/Tencent/omi/blob/master/docs/main-concepts.md#use)|React hooks like API|
|
||||
| [omi-native](https://github.com/Tencent/omi/tree/master/packages/omi-native)|Render web components to native|
|
||||
|[omi-i18n](https://github.com/i18next/omi-i18n)| Internationalization solution for omi.js using i18next ecosystem |
|
||||
| [omi-page](https://github.com/Tencent/omi/tree/master/packages/omi-page) |Tiny client-side router by [page](https://github.com/visionmedia/page.js)|
|
||||
|
||||
## Examples
|
||||
|
||||
* [→ Omi Examples](https://github.com/Tencent/omi/tree/master/packages/omi/examples)
|
||||
* [→ Omio Examples](https://github.com/Tencent/omi/tree/master/packages/omio/examples)
|
||||
|
|
@ -1,139 +0,0 @@
|
|||
# omi-router
|
||||
|
||||
omi-router is a router plugin of [Omi](http://omijs.org), and it is lightweight, easy and powerful to use. It is a solution to build Omi's SPA(Single Page Application).
|
||||
|
||||
[→ DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)
|
||||
|
||||
The advantage of SPA is very clear.
|
||||
|
||||
* No refresh to load a content
|
||||
* No refresh to previous/forward page
|
||||
* Shareable link (Other can see the same page as you see)
|
||||
* No blank page and transmission animation
|
||||
* Reusable resource (If multi-page, same resource shold be loaded multi times)
|
||||
|
||||
Yes, there are many advantages. Let's do it.
|
||||
|
||||
## Install
|
||||
|
||||
### NPM
|
||||
|
||||
```js
|
||||
npm install omi-router
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
//You can visit route in the global context.
|
||||
import 'omi-router'
|
||||
import { define, WeElement, render } from 'omi'
|
||||
import './about'
|
||||
import './home'
|
||||
import './user'
|
||||
import './user-list'
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
static observe = true
|
||||
|
||||
data = { tag: 'my-home' }
|
||||
|
||||
install() {
|
||||
|
||||
route('/', () => {
|
||||
this.data.tag = 'my-home'
|
||||
})
|
||||
|
||||
route('/about', (evt) => {
|
||||
console.log(evt.query)
|
||||
this.data.tag = 'my-about'
|
||||
})
|
||||
|
||||
route('/user-list', () => {
|
||||
this.data.tag = 'user-list'
|
||||
})
|
||||
|
||||
route('/user/:name/category/:category', (evt) => {
|
||||
this.data.tag = 'my-user'
|
||||
this.data.params = evt.params
|
||||
})
|
||||
|
||||
route('*', function () {
|
||||
console.log('not found')
|
||||
})
|
||||
|
||||
route.before = (evt) => {
|
||||
console.log('before')
|
||||
//prevent route when return false
|
||||
//return false
|
||||
}
|
||||
|
||||
route.after = (evt) => {
|
||||
console.log('after')
|
||||
}
|
||||
}
|
||||
|
||||
onClick = () => {
|
||||
route.to('/user/vorshen/category/html')
|
||||
}
|
||||
|
||||
render(props, data) {
|
||||
return (
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="#/" >Home</a></li>
|
||||
<li><a href="#/about" >About</a></li>
|
||||
<li><a href="#/user-list" >UserList</a></li>
|
||||
<li><a href="#/about?name=dntzhang&age=18" >About Dntzhang</a></li>
|
||||
</ul>
|
||||
<div id="view">
|
||||
<data.tag params={data.params} />
|
||||
</div>
|
||||
<div><button onClick={this.onClick}>Test route.to</button></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, "#container")
|
||||
```
|
||||
|
||||
## Match
|
||||
|
||||
| Rule | Path | route.params |
|
||||
|---------|------|--------|
|
||||
| /user/:name | /user/dntzhang | `{ name: 'dntzhang' }` |
|
||||
| /user/:name/category/:category | /user/dntzhang/category/js | `{ name: 'dntzhang', category: 'js' }` |
|
||||
|
||||
Note: If hash is empty, it will be automatically recognized as `/` 。
|
||||
|
||||
## With Query Parameter
|
||||
|
||||
```html
|
||||
<li><a href="#/about?name=dntzhang&age=18" >About</a></li>
|
||||
```
|
||||
|
||||
```js
|
||||
route('/about', (evt) => {
|
||||
//output { name: 'dntzhang', age : '18' } when click the tag above
|
||||
console.log(evt.query)
|
||||
})
|
||||
```
|
||||
|
||||
## With Data
|
||||
|
||||
```js
|
||||
route.to('/about',(evt) => {
|
||||
//{ a: 1 }
|
||||
console.log(evt.data)
|
||||
})
|
||||
route.to('/about', { a: 1 })
|
||||
```
|
||||
|
||||
## Links
|
||||
|
||||
* [DEMO](https://tencent.github.io/omi/packages/omi-router/examples/simple/)
|
||||
* [Source](https://github.com/Tencent/omi/tree/master/packages/omi-router/examples/simple)
|
||||
|
||||
## License
|
||||
This content is released under the [MIT](http://opensource.org/licenses/MIT) License.
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
## Server-Side Rendering
|
||||
|
||||
Server-Side Rendering(SSR) has two advantages:
|
||||
|
||||
* Be friendly to SEO
|
||||
* Faster First Screen Display Time
|
||||
|
||||
Server-side rendering (SSR) also has drawbacks, such as increasing server-side overhead. Developers can weigh whether to use SSR or pre-render directly with [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md). Pre-rendering does not require additional server-side overhead and generates skeleton screen directly at the time of construction, so there is no dynamic data content. SSR can return HTML generated by dynamic data, and also the serialization data can be returned with HTML.
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
$ npm i omi-cli -g # install cli
|
||||
$ omi init-s my-app # init project
|
||||
$ cd my-app
|
||||
$ npm start # develop
|
||||
$ npm run build # release
|
||||
```
|
||||
|
||||
## Principle
|
||||
|
||||
Define component:
|
||||
|
||||
```jsx
|
||||
import { WeElement, define } from 'omio'
|
||||
|
||||
define('my-element', class extends WeElement {
|
||||
install() {
|
||||
this.data = { liked: false }
|
||||
}
|
||||
|
||||
static css = 'button{ color: red; }'
|
||||
|
||||
render() {
|
||||
if (this.data.liked) {
|
||||
return 'You liked this.'
|
||||
}
|
||||
|
||||
return <button onClick={() => {
|
||||
this.data.liked = true
|
||||
this.update()
|
||||
}} >Like</button>
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Note that omio is used here, SSR can only use omio, not omi, because OMI is web components, node can not render web components.
|
||||
|
||||
> Both OMI and omio projects must use omio for SSR
|
||||
|
||||
Start a node server:
|
||||
|
||||
```jsx
|
||||
var express = require('express')
|
||||
var app = express()
|
||||
var Omi = require('omio')
|
||||
require('./my-element')
|
||||
|
||||
app.get('/', function (req, res) {
|
||||
const obj = Omi.renderToString(<my-element />)
|
||||
res.end(`<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Omi SSR</title>
|
||||
${toString(obj.css)}
|
||||
</head>
|
||||
<body>${obj.html}</body>
|
||||
</html>`)
|
||||
})
|
||||
|
||||
function toString(css){
|
||||
return (
|
||||
css.map(style => {
|
||||
return `<style id="${style.id}">${style.css}</style>`
|
||||
}
|
||||
))
|
||||
)
|
||||
}
|
||||
|
||||
app.listen(3000)
|
||||
```
|
||||
|
||||
Rendering HTML structure:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Omi SSR</title>
|
||||
<style type="text/css" id="_ss0">button[_ss0]{color:red;}</style>
|
||||
</head>
|
||||
<body><button _ss0>Like</button></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Preview:
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
## Class
|
||||
|
||||
Omi 有内置的两个 class 方法 `classNames` 和 `extractClass`：
|
||||
|
||||
```js
|
||||
import { classNames, extractClass } from 'omi'
|
||||
|
||||
define('my-element', class extends WeElement {
|
||||
render(props) {
|
||||
//extractClass 会取出 props 的 class 或 className 属性并与其他 classNames 合并在一起
|
||||
const cls = extractClass(props, 'o-my-class', {
|
||||
'other-class': true,
|
||||
'other-class-b': this.xxx === 1
|
||||
})
|
||||
|
||||
return (
|
||||
<div {...cls} {...props}>
|
||||
Test
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
上面的 `classNames` 和 npm 上的 [classNames](https://www.npmjs.com/package/classnames) 是一样的。
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
|
||||
### 生命周期
|
||||
|
||||
| Lifecycle method | When it gets called |
|
||||
| ---------------- | -------------------------------------------- |
|
||||
| `install` | 准备插入到文档 |
|
||||
| `installed` | 插入到文档之后 |
|
||||
| `uninstall` | 从文档中移除 |
|
||||
| `beforeUpdate` | update 之前 |
|
||||
| `updated` | update 之后 |
|
||||
| `beforeRender` | `render()` 之前 |
|
||||
| `receiveProps` | 父元素重新渲染触发 |
|
||||
|
||||
举个例子:
|
||||
|
||||
```js
|
||||
import { render, WeElement, define } from 'omi'
|
||||
|
||||
define('my-timer', class extends WeElement {
|
||||
data = {
|
||||
seconds: 0
|
||||
}
|
||||
|
||||
tick() {
|
||||
this.data.seconds++
|
||||
this.update()
|
||||
}
|
||||
|
||||
install() {
|
||||
this.interval = setInterval(() => this.tick(), 1000)
|
||||
}
|
||||
|
||||
uninstall() {
|
||||
clearInterval(this.interval)
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>Seconds: {this.data.seconds}</div>
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-timer />, 'body')
|
||||
```
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
## mps
|
||||
|
||||
> 原生小程序插上 JSX 和 Less 的翅膀，**mp + sweet**
|
||||
|
||||
mps 是什么？为什么需要 mps？先列举几个现状:
|
||||
|
||||
* 目前小程序开发使用最多的技术依然是原生小程序
|
||||
* 原生小程序的 API 在不断完善和进化中
|
||||
* JSX 是表达能力和编程体验最好的 UI 表达式
|
||||
* JSX 可以表达一切想表达的 UI 结构也就能够描述任意 WXML
|
||||
|
||||
所以，就有了 mps，**mp + sweet**。 让开发者直接在原生小程序使用 JSX 写 WXML，用 Less 写 WXSS，实时编译，实时预览。
|
||||
|
||||
|
||||
|
||||
- JSX 代替 WXML 书写结构，精简高效
|
||||
- 对原生小程序零入侵
|
||||
- 支持 JS 和 TS
|
||||
- 实时编译，实时预览
|
||||
- 输出 WXML 自动美化
|
||||
|
||||
## 效果预览
|
||||
|
||||
|
||||
|
||||
## 立即开始
|
||||
|
||||
```bash
|
||||
$ npm i omi-cli -g
|
||||
$ omi init-mps my-app
|
||||
$ cd my-app
|
||||
$ npm start
|
||||
```
|
||||
|
||||
接着把小程序目录设置为 my-app 目录便可以愉快地开始开发调试了！
|
||||
|
||||
> `npx omi-cli init-mps my-app` 也支持(npm v5.2.0+)
|
||||
|
||||
生成的目录和官方的模板一致，只不过多了 JSX 文件，只需要修改 JSX 文件就会实时修改 WXML。
|
||||
|
||||
也支持 typescript:
|
||||
|
||||
```bash
|
||||
$ omi init-mps-ts my-app
|
||||
```
|
||||
|
||||
其他命令一样。
|
||||
|
||||
> `npx omi-cli init-mps-ts my-app` 也支持(npm v5.2.0+)
|
||||
|
||||
## JSX vs WXML
|
||||
|
||||
这里是一个真实的案例说明 JSX 的精巧高效的表达能力:
|
||||
|
||||
编译前的 JSX:
|
||||
|
||||
```jsx
|
||||
<view class='pre language-jsx'>
|
||||
<view class='code'>
|
||||
{tks.map(tk => {
|
||||
return tk.type === 'tag' ? <text class={'token ' + tk.type}>{
|
||||
tk.content.map(stk => {
|
||||
return stk.deep ? stk.content.map(sstk => {
|
||||
return <text class={'token ' + sstk.type}>{sstk.content || sstk}</text>
|
||||
}) : <text class={'token ' + stk.type}>{stk.content || stk}</text>
|
||||
})}</text> : <text class={'token ' + tk.type}>{tk.content || tk}</text>
|
||||
})}
|
||||
</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
编译后 WXML:
|
||||
|
||||
```jsx
|
||||
<view class="pre language-jsx">
|
||||
<view class="code">
|
||||
<block wx:for="{{tks}}" wx:for-item="tk" wx:for-index="_anonIdx4">
|
||||
<block wx:if="{{tk.type === 'tag'}}"
|
||||
><text class="{{'token ' + tk.type}}"
|
||||
><block
|
||||
wx:for="{{tk.content}}"
|
||||
wx:for-item="stk"
|
||||
wx:for-index="_anonIdx2"
|
||||
><block wx:if="{{stk.deep}}"
|
||||
><text
|
||||
class="{{'token ' + sstk.type}}"
|
||||
wx:for="{{stk.content}}"
|
||||
wx:for-item="sstk"
|
||||
wx:for-index="_anonIdx3"
|
||||
>{{sstk.content || sstk}}</text
|
||||
>
|
||||
</block>
|
||||
<block wx:else
|
||||
><text class="{{'token ' + stk.type}}"
|
||||
>{{stk.content || stk}}</text
|
||||
>
|
||||
</block>
|
||||
</block>
|
||||
</text>
|
||||
</block>
|
||||
<block wx:else
|
||||
><text class="{{'token ' + tk.type}}">{{tk.content || tk}}</text>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
## 老项目使用 mps
|
||||
|
||||
拷贝以下文件到小程序根目录:
|
||||
|
||||
* _scripts 目录所有文件
|
||||
* package.json
|
||||
* gulpfile.js
|
||||
|
||||
设置 project.config.json 里的 packOptions.ignore 忽略以上的文件，然后:
|
||||
|
||||
``` bash
|
||||
$ npm install
|
||||
$ npm start
|
||||
```
|
||||
|
||||
## mps 约定
|
||||
|
||||
公共的 less 文件必须放在 common-less 目录，@import 使用的时候不需要写路径。
|
||||
|
||||
## 推荐搭配
|
||||
|
||||
既然用了原生小程序的方案，所有可以轻松使用 mps + [omix](https://github.com/Tencent/omi/tree/master/packages/omix) 搭配一起使用。
|
||||
|
||||
欢迎使用 mps 大幅提高开发效率，Have fun!
|
||||
|
|
@ -1,151 +0,0 @@
|
|||
# Omim
|
||||
|
||||
[Omi](https://github.com/Tencent/omi) 打造的 Material Design 框架无关标准组件，任意框架都可以使用。
|
||||
|
||||
|
||||
|
||||
## 特性
|
||||
|
||||
* 使用标准 Web Components 的 Custom Elements 渲染
|
||||
* 任意框架都可以使用这些组件(比如 Omi, React, Vue and Angular)
|
||||
* 同时支持 JSX 和 原生 HTML 标签的使用方式
|
||||
* 每个组件可以单独使用
|
||||
* 超级容易更换主题颜色、字体和圆角
|
||||
* 扩展了 HTML 能力，你可以通过字符串 `'0'` 或者字符串 `'false'` 传递 false 给元素
|
||||
|
||||
## 使用指南
|
||||
|
||||
### 通过 script
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/omi"></script>
|
||||
<script src="https://unpkg.com/@omim/core@latest/button/index.js"></script>
|
||||
|
||||
<m-button>I am button</m-button>
|
||||
```
|
||||
|
||||
### 通过 npm
|
||||
|
||||
``` bash
|
||||
npm install @omim/core
|
||||
```
|
||||
|
||||
Then:
|
||||
|
||||
```js
|
||||
import '@omim/core/button'
|
||||
```
|
||||
|
||||
然后在任意框架中使用，比如 Omi, React, Vue or Angular:
|
||||
|
||||
``` html
|
||||
<m-button>I am button</m-button>
|
||||
```
|
||||
|
||||
It can also be used in pure js:
|
||||
|
||||
```js
|
||||
var button = document.createElement('m-button')
|
||||
button.innerHTML = 'I am button'
|
||||
document.body.append(button)
|
||||
button.addEventListener('click', function () {
|
||||
console.log('Clicked!')
|
||||
})
|
||||
|
||||
//or
|
||||
//document.body.innerHTML = '<m-button>I am button</m-button>'
|
||||
```
|
||||
|
||||
## 更改主题
|
||||
|
||||
```js
|
||||
document.body.style.setProperty('--mdc-theme-primary', 'red')
|
||||
document.body.style.setProperty('--mdc-theme-secondary', 'blue')
|
||||
document.body.style.setProperty('--mdc-theme-error', 'yellow')
|
||||
```
|
||||
|
||||
所有配置如下:
|
||||
|
||||
```css
|
||||
--mdc-theme-primary: #0072d9;
|
||||
--mdc-theme-secondary: #2170b8;
|
||||
--mdc-theme-error: #f5222d;
|
||||
--mdc-theme-surface: #ffffff;
|
||||
--mdc-theme-on-primary: #ffffff;
|
||||
--mdc-theme-on-secondary: #ffffff;
|
||||
--mdc-theme-on-error: #ffffff;
|
||||
--mdc-theme-on-surface: #000000;
|
||||
--mdc-theme-background: #ffffff;
|
||||
--mdc-shape-small-component-radius: 4px;
|
||||
--mdc-shape-medium-component-radius: 4px;
|
||||
--mdc-shape-large-component-radius: 0px;
|
||||
--mdc-typography--font-family: Roboto, sans-serif;
|
||||
```
|
||||
|
||||
## HTML 扩展
|
||||
|
||||
当默认值为 true，需要传递 false 给 element 的时候，以前是历史难题，Omi 完美解决了这一点，你可以通过字符串 `'0'` 或者 字符串 `'false'` 来设置。
|
||||
|
||||
```js
|
||||
define('my-element', class extends WeElement {
|
||||
static defaultProps = {
|
||||
show: true
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
show: Boolean
|
||||
}
|
||||
|
||||
render(props) {
|
||||
...
|
||||
...
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Use:
|
||||
|
||||
```html
|
||||
<my-element show="false"></my-element>
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```html
|
||||
<my-element show="0"></my-element>
|
||||
```
|
||||
|
||||
## 贡献
|
||||
|
||||
### 一些命令
|
||||
|
||||
Build 组件:
|
||||
|
||||
```bash
|
||||
npm run build -- component-name
|
||||
```
|
||||
|
||||
Build 所有组件:
|
||||
|
||||
```bash
|
||||
npm run build-all
|
||||
```
|
||||
|
||||
Build 例子:
|
||||
|
||||
```bash
|
||||
npm start demo-name
|
||||
```
|
||||
|
||||
发布:
|
||||
|
||||
```bash
|
||||
npm publish --access public
|
||||
```
|
||||
|
||||
## 相关链接
|
||||
|
||||
* [material.io docs](https://material.io/develop/web/components/buttons/)
|
||||
* [material.io demo](https://material-components.github.io/material-components-web-catalog/#/)
|
||||
* [material-theme-builder](https://material-theme-builder.glitch.me/)
|
||||
* [material-components-web](https://github.com/material-components/material-components-web)
|
||||
|
|
@ -1,189 +0,0 @@
|
|||
## Omip
|
||||
|
||||
使用 Omi 开发小程序或 H5 SPA
|
||||
|
||||
> 现在，Omi 不仅仅可以开发桌面 Web、移动 H5，还可以直接开发小程序！
|
||||
|
||||
* Write Once, Run Anywhere
|
||||
* Learn Once, Write Anywhere
|
||||
|
||||
|
||||
|
||||
## Omip 特性
|
||||
|
||||
* 一次学习，多处开发，一次开发，多处运行
|
||||
* 使用 JSX，表达能力和编程体验大于模板
|
||||
* 支持使用 npm/yarn 安装管理第三方依赖
|
||||
* 支持使用 ES6+
|
||||
* 支持使用 CSS 预编译器
|
||||
* 小程序 API 优化，异步 API Promise 化
|
||||
* 超轻量的依赖包，顺从小程序标签和组件的设计
|
||||
|
||||
## 快速开始
|
||||
|
||||
```bash
|
||||
npm i omi-cli -g
|
||||
omi init-p my-app
|
||||
cd my-app
|
||||
npm start //开发小程序
|
||||
npm run dev:h5 //开发 h5
|
||||
npm run build:h5 //发布 h5
|
||||
```
|
||||
> node 版本要求 >= 8
|
||||
|
||||
> 也支持一条命令 `npx omi-cli init-p my-app` (npm v5.2.0+)
|
||||
|
||||
把小程序目录设置到 dist 目录就可以愉快地调试了！
|
||||
|
||||
也可以初始化 TypeScript 模板项目:
|
||||
|
||||
```js
|
||||
omi init-p-ts my-app
|
||||
```
|
||||
|
||||
> 也支持一条命令 `npx omi-cli init-p-ts my-app` (npm v5.2.0+)
|
||||
|
||||
## 代码示例
|
||||
|
||||
```jsx
|
||||
import { WeElement, define } from 'omi'
|
||||
import './index.css'
|
||||
|
||||
define('page-counter', class extends WeElement {
|
||||
config = {
|
||||
navigationBarTitleText: 'Counter'
|
||||
}
|
||||
|
||||
data = {
|
||||
count: 1
|
||||
}
|
||||
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
this.update()
|
||||
}
|
||||
|
||||
add = () => {
|
||||
this.data.count++
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<view>
|
||||
<button onClick={this.sub}>-</button>
|
||||
<text>{this.data.count}</text>
|
||||
<button onClick={this.add}>+</button>
|
||||
</view>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 扩展
|
||||
|
||||
`this.update` 方法可以传递最短路径，进行更新，比如下面两种写法是等价的。
|
||||
|
||||
```js
|
||||
this.update({
|
||||
count: 1
|
||||
})
|
||||
```
|
||||
|
||||
等价于:
|
||||
|
||||
```js
|
||||
this.data.count = 1
|
||||
this.update()
|
||||
```
|
||||
|
||||
也可以和 setData 一样传递 path:
|
||||
|
||||
```js
|
||||
this.update({
|
||||
'list[1].obj.name': 'Omip'
|
||||
})
|
||||
```
|
||||
|
||||
由于小程序视图更新是异步的，如果需要获取视图更新后的回调，可以使用第二个参数:
|
||||
|
||||
```js
|
||||
this.update({
|
||||
'list[1].obj.name': 'Omip'
|
||||
}, () => {
|
||||
console.log('更新完成')
|
||||
})
|
||||
```
|
||||
|
||||
或者只有一个参数，且该参数为函数:
|
||||
|
||||
```js
|
||||
this.update(() => {
|
||||
console.log('更新完成')
|
||||
})
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
在 JSX 或者一些要使用图片资源的 API，需要使用 import 或者 require 先导入图片再使用，不能直接使用相对地址！
|
||||
|
||||
如：
|
||||
|
||||
```js
|
||||
onShareAppMessage(){
|
||||
return {
|
||||
title: '分享标题',
|
||||
path: '/pages/index/index?id=123',
|
||||
imageUrl: require('./share.jpg'),
|
||||
success: (res) => {
|
||||
console.log("转发成功", res);
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log("转发失败", res);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
再比如:
|
||||
|
||||
```jsx
|
||||
import src from './my-image.png'
|
||||
...
|
||||
...
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<view>
|
||||
<image src={src}></image>
|
||||
</view>
|
||||
)
|
||||
}
|
||||
...
|
||||
...
|
||||
|
||||
```
|
||||
|
||||
## 获取最新的 omip 版本
|
||||
|
||||
你只需要重新拉去模板便可以更新到最新的 omip:
|
||||
|
||||
```
|
||||
omi init-p my-app
|
||||
```
|
||||
|
||||
## 实战案例
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
|
||||
MIT © dntzhang
|
||||
|
||||
#### Open Source Software Licensed Under the MIT License:
|
||||
|
||||
[tarojs](https://github.com/NervJS/taro) 1.2.13
|
||||
Copyright (c) 2019 O2Team
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
## Omi 生态
|
||||
|
||||
[→ Omi 生态学习路线图](https://github.com/Tencent/omi/tree/master/assets/rm.md)
|
||||
|
||||
| **项目** | **描述** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omip](https://github.com/Tencent/omi/tree/master/packages/omip)| 直接使用 Omi 开发小程序或 H5 SPA！！！|
|
||||
| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| 兼容老浏览器的 Omi 版本(支持到IE8+和移动端浏览器)。|
|
||||
| [omix](https://github.com/Tencent/omi/tree/master/packages/omix)| 极小却精巧的小程序框架。|
|
||||
| [omi-mp](https://github.com/Tencent/omi/tree/master/packages/omi-mp)| 通过微信小程序开发和生成 Web 单页应用(H5 SPA)|
|
||||
| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi 官方路由,超级小的尺寸，只有 1KB 的 js。[→ DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)|
|
||||
| [md2site](https://tencent.github.io/omi/assets/md2site/)| 用 markdown 生成静态网站文档.|
|
||||
| [omi-mvvm](https://github.com/Tencent/omi/blob/master/tutorial/omi-mvvm.cn.md)| MVVM 王者归来, [mappingjs](https://github.com/Tencent/omi/tree/master/packages/mappingjs) 强力加持。|
|
||||
| [omi-chart](https://github.com/Tencent/omi/tree/master/packages/omi-chart)| 一个 chart-x 标签搞定报表|
|
||||
| [mp-mvvm](https://github.com/Tencent/omi/tree/master/packages/mp-mvvm)| 小程序插上 MVVM 的翅膀, [mappingjs](https://github.com/Tencent/omi/tree/master/packages/mappingjs) 强力加持。|
|
||||
| [omi-html](https://github.com/Tencent/omi/tree/master/packages/omi-html)| Using [htm](https://github.com/developit/htm) in omi.|
|
||||
| [omi-30-seconds](https://github.com/Tencent/omi/tree/master/packages/omi-30-seconds)| 30 秒理解一段有用的 Omi 代码片段.|
|
||||
| [omi-swiper](https://github.com/loo41/Omi-Swiper)| Omi + Swiper |
|
||||
| [omi-vscode](https://github.com/ZainChen/omi-vscode)| Vscode extension for omi, [Install now!](https://marketplace.visualstudio.com/items?itemName=ZainChen.omi) |
|
||||
| [omi-sprite](https://github.com/Tencent/omi/tree/master/packages/omi-sprite)| Web Components, JSX 和 Canvas 的完美融合|
|
||||
| [omi-canvas](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Web Components, JSX 和 Canvas 的完美融合|
|
||||
| [omi-devtools](https://github.com/f/omi-devtools)| 谷歌浏览器开发工具扩展|
|
||||
| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| 项目脚手架工具，各种模板任你选。 |
|
||||
| [omi-ex](https://github.com/Tencent/omi/tree/master/packages/omi-ex)| Omi.js 扩展(TypeScript) |
|
||||
| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi 和 [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) 完美结合. 让 css3 transform 在你的 Omi项目中变得超级简单.|
|
||||
| [omi-tap](https://github.com/Tencent/omi/releases/tag/v4.0.24)| Omi 原生支持 tap 事件（omi v4.0.24+）|
|
||||
| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)|Omi 官方手势库|
|
||||
| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)|丝般顺滑的触摸运动|
|
||||
| [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md)|预渲染骨架屏|
|
||||
|[omi-i18n](https://github.com/i18next/omi-i18n)| Omi 国际化解决方案 |
|
||||
| [omi-page](https://github.com/Tencent/omi/tree/master/packages/omi-page) | 基于 [page.js](https://github.com/visionmedia/page.js) 的 Omi 路由|
|
||||
|
||||
## 一些例子
|
||||
|
||||
* [→ 一些 Omi 例子](https://github.com/Tencent/omi/tree/master/packages/omi/examples)
|
||||
* [→ 一些 Omio 例子](https://github.com/Tencent/omi/tree/master/packages/omio/examples)
|
||||
|
|
@ -1,139 +0,0 @@
|
|||
# omi-router
|
||||
|
||||
omi-router 是 [Omi](http://omijs.org) 专属的router插件，文件尺寸轻量，使用简便，功能强大。用于Omi制作Web单页应用的首选解决方案。
|
||||
|
||||
[→ DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)
|
||||
|
||||
单页的好处也是非常明显:
|
||||
|
||||
* 无刷新加载页面内容
|
||||
* 无刷新前进和后退页面
|
||||
* 路由中的某个链接的传播和分享（别人看到的和你一样的状态）
|
||||
* 转场动画（a标签跳转不仅要白屏，而且没有转场动画）
|
||||
* 资源复用（单页中的许多资源一定是可以共用的，最典型的比如omi.js，如果不是单页的话，你需要加载多次）
|
||||
|
||||
好了，好处这么多，看看怎么安装使用吧~~
|
||||
|
||||
## 安装
|
||||
|
||||
### NPM
|
||||
|
||||
```js
|
||||
npm install omi-router
|
||||
```
|
||||
|
||||
## 开始
|
||||
|
||||
```js
|
||||
//你可以在全局访问到 route
|
||||
import 'omi-router'
|
||||
import { define, WeElement, render } from 'omi'
|
||||
import './about'
|
||||
import './home'
|
||||
import './user'
|
||||
import './user-list'
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
static observe = true
|
||||
|
||||
data = { tag: 'my-home' }
|
||||
|
||||
install() {
|
||||
|
||||
route('/', () => {
|
||||
this.data.tag = 'my-home'
|
||||
})
|
||||
|
||||
route('/about', (evt) => {
|
||||
console.log(evt.query)
|
||||
this.data.tag = 'my-about'
|
||||
})
|
||||
|
||||
route('/user-list', () => {
|
||||
this.data.tag = 'user-list'
|
||||
})
|
||||
|
||||
route('/user/:name/category/:category', (evt) => {
|
||||
this.data.tag = 'my-user'
|
||||
this.data.params = evt.params
|
||||
})
|
||||
|
||||
route('*', function () {
|
||||
console.log('not found')
|
||||
})
|
||||
|
||||
route.before = (evt) => {
|
||||
console.log('before')
|
||||
//prevent route when return false
|
||||
//return false
|
||||
}
|
||||
|
||||
route.after = (evt) => {
|
||||
console.log('after')
|
||||
}
|
||||
}
|
||||
|
||||
onClick = () => {
|
||||
route.to('/user/vorshen/category/html')
|
||||
}
|
||||
|
||||
render(props, data) {
|
||||
return (
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="#/" >Home</a></li>
|
||||
<li><a href="#/about" >About</a></li>
|
||||
<li><a href="#/user-list" >UserList</a></li>
|
||||
<li><a href="#/about?name=dntzhang&age=18" >About Dntzhang</a></li>
|
||||
</ul>
|
||||
<div id="view">
|
||||
<data.tag params={data.params} />
|
||||
</div>
|
||||
<div><button onClick={this.onClick}>Test route.to</button></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, "#container")
|
||||
```
|
||||
|
||||
## 动态匹配
|
||||
|
||||
| 模式 | 匹配路径 | route.params |
|
||||
|---------|------|--------|
|
||||
| /user/:name | /user/dntzhang | `{ name: 'dntzhang' }` |
|
||||
| /user/:name/category/:category | /user/dntzhang/category/js | `{ name: 'dntzhang', category: 'js' }` |
|
||||
|
||||
注意： 如果 hash 为空，会自动被识别为 `/`。
|
||||
|
||||
## 另一种携带查询参数方法
|
||||
|
||||
```html
|
||||
<li><a href="#/about?name=dntzhang&age=18" >About</a></li>
|
||||
```
|
||||
|
||||
```js
|
||||
route('/about', (evt) => {
|
||||
//点击上面的标签会输出 { name: 'dntzhang', age : '18' }
|
||||
console.log(evt.query)
|
||||
})
|
||||
```
|
||||
|
||||
## 携带 JSON Data
|
||||
|
||||
```js
|
||||
route.to('/about',(evt) => {
|
||||
//{ a: 1 }
|
||||
console.log(evt.data)
|
||||
})
|
||||
route.to('/about', { a: 1 })
|
||||
```
|
||||
|
||||
### 地址
|
||||
|
||||
* [在线演示地址](https://tencent.github.io/omi/packages/omi-router/examples/simple/)
|
||||
* [源码地址](https://github.com/Tencent/omi/tree/master/packages/omi-router/examples/simple)
|
||||
|
||||
## License
|
||||
This content is released under the [MIT](http://opensource.org/licenses/MIT) License.
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
## 服务器端渲染
|
||||
|
||||
服务器端渲染英文叫 Server-Side Rendering，简称 SSR，有两大优势:
|
||||
|
||||
* 对 SEO 友好
|
||||
* 更快的首屏展示时间
|
||||
|
||||
用服务器端渲染 (SSR) 也有缺点，比如增加服务器端开销。开发者可以自行权衡是否使用 SSR，或者直接使用 [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md) 预渲染，预渲染不需要服务器端额外的开销，直接在构建时候无头浏览器生成骨架屏，所以也就没有动态数据内容，而 SSR 可以返回动态数据生成的HTML，还可以把数据序列化与 HTML 一同返回。
|
||||
|
||||
## 快速使用
|
||||
|
||||
```bash
|
||||
$ npm i omi-cli -g # 全局安装 cli
|
||||
$ omi init-s my-app # 初始化项目
|
||||
$ cd my-app
|
||||
$ npm start # 开发
|
||||
$ npm run build # 发布
|
||||
```
|
||||
|
||||
## 原理解析
|
||||
|
||||
定义组件：
|
||||
|
||||
```jsx
|
||||
import { WeElement, define } from 'omio'
|
||||
|
||||
define('my-element', class extends WeElement {
|
||||
install() {
|
||||
this.data = { liked: false }
|
||||
}
|
||||
|
||||
static css = 'button{ color: red; }'
|
||||
|
||||
render() {
|
||||
if (this.data.liked) {
|
||||
return 'You liked this.'
|
||||
}
|
||||
|
||||
return <button onClick={() => {
|
||||
this.data.liked = true
|
||||
this.update()
|
||||
}} >Like</button>
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
注意这里使用了 omio，SSR 只能使用 omio，而不能使用 omi，因为 omi 是 web components，node 无法渲染 web components。
|
||||
|
||||
> omi 和 omio 项目都必须使用 omio 进行 SSR
|
||||
|
||||
起个 node 服务器:
|
||||
|
||||
```jsx
|
||||
var express = require('express')
|
||||
var app = express()
|
||||
var Omi = require('omio')
|
||||
require('./my-element')
|
||||
|
||||
app.get('/', function (req, res) {
|
||||
const obj = Omi.renderToString(<my-element />)
|
||||
res.end(`<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Omi SSR</title>
|
||||
${toString(obj.css)}
|
||||
</head>
|
||||
<body>${obj.html}</body>
|
||||
</html>`)
|
||||
})
|
||||
|
||||
function toString(css){
|
||||
return (
|
||||
css.map(style => {
|
||||
return `<style id="${style.id}">${style.css}</style>`
|
||||
}
|
||||
))
|
||||
)
|
||||
}
|
||||
|
||||
app.listen(3000)
|
||||
```
|
||||
|
||||
直出的 HTML 结构:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Omi SSR</title>
|
||||
<style type="text/css" id="_ss0">button[_ss0]{color:red;}</style>
|
||||
</head>
|
||||
<body><button _ss0>Like</button></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
显示效果:
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue