Taro Design
一個(gè)簡(jiǎn)單易用，方便擴(kuò)展和集成的移動(dòng)端頁(yè)面編輯器
特點(diǎn)
- 發(fā)布到npm市場(chǎng)，可以很方便的將他集成到你的項(xiàng)目中。
- 你可以方便的編寫(xiě)一個(gè)組件在這個(gè)編輯器中運(yùn)行，或者將你現(xiàn)有的組件經(jīng)過(guò)簡(jiǎn)單修改運(yùn)行在編輯器中。
- 編輯后的數(shù)據(jù)同時(shí)支持小程序、H5、React Native，需在Taro3的項(xiàng)目中使用。
- 組件樣式遵循以React Native樣式為基礎(chǔ)的Flex布局，可以同時(shí)給設(shè)計(jì)師和開(kāi)發(fā)人員使用。
- 導(dǎo)出為React組件后，可以繼續(xù)進(jìn)行二次開(kāi)發(fā)。
- 模板市場(chǎng)給你提供了存儲(chǔ)和使用模板的功能，你可以通過(guò)公開(kāi)的模板快速創(chuàng)建頁(yè)面，你也可以根據(jù)自己的需求創(chuàng)建模板。
運(yùn)行原理
你編輯的后的數(shù)據(jù)以json的方式運(yùn)行和存儲(chǔ)，下面的示例將一個(gè)text組件嵌套在一個(gè)view組件的json。
[
{
"child": [
{
"style": {},
"text": "文本內(nèi)容",
"nodeName": "text",
"key": "2e0l1-19tg00",
"child": []
}
],
"style": {},
"nodeName": "view",
"key": "2e0l1VzIiw00"
}
]
對(duì)應(yīng)的JSX代碼如下，這些組件并不是原生的Taro組件，二十經(jīng)過(guò)封裝的，所以你看到下面的Text組件的文本并不是這樣：<Text>文本內(nèi)容<Text>，而是將文本內(nèi)容賦值在其text屬性上，其他組件的結(jié)構(gòu)也大體如此。
<View>
<Text text='文本內(nèi)容' />
</View>
在線體驗(yàn)
點(diǎn)擊前往在線地址
在線模板現(xiàn)在未開(kāi)放注冊(cè)賬號(hào)以及管理功能，請(qǐng)使用下面的賬號(hào)密碼進(jìn)行體驗(yàn)。
- 用戶名：admin
- 密碼：123456
GitHub地址：https://github.com/ShaoGongBra/taro-design
快捷鍵支持
ctrl + z 撤銷(xiāo)操作
ctrl + shift + z 恢復(fù)操作
ctrl + c 復(fù)制節(jié)點(diǎn)
ctrl + v 粘貼節(jié)點(diǎn)
delete 刪除節(jié)點(diǎn)
基本用法
yarn add taro-design
- 如果你的依賴(lài)庫(kù)里沒(méi)有下列組件，請(qǐng)?zhí)砑?/li>
yarn add classnames
- 添加配置
h5: {
esnextModules: [
'taro-design'
]
}
- 編輯器使用示例
import React from 'react'
import { Design } from 'taro-design/design'
import { TopView } from 'taro-design'
export default () => {
return <TopView>
<Design
// 默認(rèn)數(shù)據(jù)節(jié)點(diǎn)
defaultNodes={[]}
// 發(fā)生編輯時(shí)觸發(fā)的事件 你可以返回一個(gè)Promise對(duì)象 將會(huì)顯示一個(gè)正在保存的loading
onChange={nodes => {}}
// 點(diǎn)擊保存按鈕時(shí)觸發(fā)的事件，當(dāng)你配置了這個(gè)選項(xiàng)才會(huì)出現(xiàn)保存按鈕 你可以返回一個(gè)Promise對(duì)象 將會(huì)顯示一個(gè)正在保存的loading
onSave={nodes => {}}
// 開(kāi)啟模板 默認(rèn)開(kāi)啟
templateOpen
// 開(kāi)啟導(dǎo)出 默認(rèn)開(kāi)啟
exportOpen
// 應(yīng)用在最外層的樣式 你也可以通過(guò).taro-design控制樣式
style={{ }}
/>
</TopView>
}
- 渲染模式使用示例
import React from 'react'
import { TopView, Create } from 'taro-design'
export default () => {
return <TopView>
<Create nodes={[]} />
</TopView>
}
- 全局樣式
為了和rn端保持樣式一致，你需要在你的全局樣式代碼中加入如下的樣式。
下面的全局樣式可能會(huì)導(dǎo)致你已經(jīng)存在的項(xiàng)目樣式錯(cuò)亂，你暫時(shí)需要自行調(diào)試，建議在新項(xiàng)目中使用。
/*postcss-pxtransform rn eject enable*/
view,
page,
.taro_page,
taro-view-core {
display: flex;
flex-direction: column;
position: relative;
border-style: solid;
border-width: 0;
}
input,
textarea,
taro-view-core,
view {
box-sizing: border-box;
}
taro-view-core,
taro-text-core {
line-height: 1;
}
taro-text-core {
font-size: 28px;
color: #333;
}
.taro_page taro-image-core {
width: auto;
height: auto;
}
.taro_page .taro-video-container {
position: relative;
}
/*postcss-pxtransform rn eject disable*/
因?yàn)闃邮礁采w問(wèn)題，你需要在你的index.html 的 body后面插入下面的樣式
taro-view-core {
display: flex;
flex-direction: column;
}
導(dǎo)出到其他項(xiàng)目中運(yùn)行
Taro H5端使用index.html中的js代碼片段控制了rem單位的基礎(chǔ)值的變換，如果你在后端中沒(méi)有這個(gè)控制，你可以將config配置中的designWidth設(shè)置為375然后進(jìn)行打包(這個(gè)值默認(rèn)為750)。
你可能需要將Taro3升級(jí)到較新的版本，舊版本對(duì)這個(gè)配置支持不完整。
designWidth: 375
更多用法
把自己的組件放在TaroDesign中運(yùn)行
你可以簡(jiǎn)單的開(kāi)發(fā)一個(gè)組件，通過(guò)TaroDesign提供的注冊(cè)函數(shù)，實(shí)現(xiàn)在其中運(yùn)行，包括編輯器和運(yùn)行時(shí)。
自定義圖標(biāo)庫(kù)
系統(tǒng)內(nèi)置的圖標(biāo)庫(kù)包含了一些常見(jiàn)的圖標(biāo) 點(diǎn)擊查看圖標(biāo)，如果你需要添加新的圖標(biāo)庫(kù)請(qǐng)看這。
基礎(chǔ)組件
這里面導(dǎo)出了一些常用組件。你可以將他們導(dǎo)入到你的項(xiàng)目中使用
import { TopView, PullView, Modal, Icon, Button, Loading, ScrollView, KeyboardAvoiding } from 'taro-design'
基礎(chǔ)函數(shù)
項(xiàng)目引用了taro-tools這個(gè)依賴(lài)，這里面集成了多個(gè)常用函數(shù)，包含請(qǐng)求、日期、顏色、對(duì)象、字符串、表單驗(yàn)證、事件系統(tǒng)等，你可以直接導(dǎo)入到你的項(xiàng)目中使用。
import { request, searchQuick, setRequestConfig, dateToStr, dateDiff, colorToRgb, deepCopy, verify, event, ... } from 'taro-tools'
