Taro Design
一個簡單易用啊易，方便擴展和集成的移動端頁面編輯器
特點
- 發(fā)布到npm市場，可以很方便的將他集成到你的項目中饮睬。
- 你可以方便的編寫一個組件在這個編輯器中運行租谈，或者將你現(xiàn)有的組件經(jīng)過簡單修改運行在編輯器中。
- 編輯后的數(shù)據(jù)同時支持小程序、H5割去、React Native窟却，需在Taro3的項目中使用。
- 組件樣式遵循以React Native樣式為基礎的Flex布局呻逆，可以同時給設計師和開發(fā)人員使用夸赫。
- 導出為React組件后，可以繼續(xù)進行二次開發(fā)咖城。
- 模板市場給你提供了存儲和使用模板的功能茬腿，你可以通過公開的模板快速創(chuàng)建頁面，你也可以根據(jù)自己的需求創(chuàng)建模板宜雀。
運行原理
你編輯的后的數(shù)據(jù)以json的方式運行和存儲切平，下面的示例將一個text組件嵌套在一個view組件的json。
[
{
"child": [
{
"style": {},
"text": "文本內容",
"nodeName": "text",
"key": "2e0l1-19tg00",
"child": []
}
],
"style": {},
"nodeName": "view",
"key": "2e0l1VzIiw00"
}
]
對應的JSX代碼如下辐董，這些組件并不是原生的Taro組件揭绑，二十經(jīng)過封裝的，所以你看到下面的Text組件的文本并不是這樣：<Text>文本內容<Text>郎哭，而是將文本內容賦值在其text屬性上他匪，其他組件的結構也大體如此。
<View>
<Text text='文本內容' />
</View>
在線體驗
點擊前往在線地址
在線模板現(xiàn)在未開放注冊賬號以及管理功能夸研，請使用下面的賬號密碼進行體驗邦蜜。
- 用戶名：admin
- 密碼：123456
GitHub地址：https://github.com/ShaoGongBra/taro-design
快捷鍵支持
ctrl + z 撤銷操作
ctrl + shift + z 恢復操作
ctrl + c 復制節(jié)點
ctrl + v 粘貼節(jié)點
delete 刪除節(jié)點
基本用法
yarn add taro-design
- 如果你的依賴庫里沒有下列組件，請?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
// 默認數(shù)據(jù)節(jié)點
defaultNodes={[]}
// 發(fā)生編輯時觸發(fā)的事件 你可以返回一個Promise對象 將會顯示一個正在保存的loading
onChange={nodes => {}}
// 點擊保存按鈕時觸發(fā)的事件亥至，當你配置了這個選項才會出現(xiàn)保存按鈕 你可以返回一個Promise對象 將會顯示一個正在保存的loading
onSave={nodes => {}}
// 開啟模板 默認開啟
templateOpen
// 開啟導出 默認開啟
exportOpen
// 應用在最外層的樣式 你也可以通過.taro-design控制樣式
style={{ }}
/>
</TopView>
}
- 渲染模式使用示例
import React from 'react'
import { TopView, Create } from 'taro-design'
export default () => {
return <TopView>
<Create nodes={[]} />
</TopView>
}
- 全局樣式
為了和rn端保持樣式一致悼沈，你需要在你的全局樣式代碼中加入如下的樣式。
下面的全局樣式可能會導致你已經(jī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*/
因為樣式覆蓋問題茶敏，你需要在你的index.html 的 body后面插入下面的樣式
taro-view-core {
display: flex;
flex-direction: column;
}
導出到其他項目中運行
Taro H5端使用index.html中的js代碼片段控制了rem單位的基礎值的變換壤靶，如果你在后端中沒有這個控制，你可以將config配置中的designWidth設置為375然后進行打包(這個值默認為750)惊搏。
你可能需要將Taro3升級到較新的版本贮乳，舊版本對這個配置支持不完整。
designWidth: 375
更多用法
把自己的組件放在TaroDesign中運行
你可以簡單的開發(fā)一個組件恬惯，通過TaroDesign提供的注冊函數(shù)向拆，實現(xiàn)在其中運行，包括編輯器和運行時酪耳。
自定義圖標庫
系統(tǒng)內置的圖標庫包含了一些常見的圖標 點擊查看圖標浓恳，如果你需要添加新的圖標庫請看這。
基礎組件
這里面導出了一些常用組件。你可以將他們導入到你的項目中使用
import { TopView, PullView, Modal, Icon, Button, Loading, ScrollView, KeyboardAvoiding } from 'taro-design'
基礎函數(shù)
項目引用了taro-tools這個依賴颈将，這里面集成了多個常用函數(shù)梢夯，包含請求、日期吆鹤、顏色厨疙、對象洲守、字符串疑务、表單驗證、事件系統(tǒng)等梗醇，你可以直接導入到你的項目中使用知允。
import { request, searchQuick, setRequestConfig, dateToStr, dateDiff, colorToRgb, deepCopy, verify, event, ... } from 'taro-tools'
