Taro Design
一個簡單易用，方便擴展和集成的移動端頁面編輯器
特點
- 發布到npm市場，可以很方便的將他集成到你的項目中。
- 你可以方便的編寫一個組件在這個編輯器中運行，或者將你現有的組件經過簡單修改運行在編輯器中。
- 編輯后的數據同時支持小程序、H5、React Native，需在Taro3的項目中使用。
- 組件樣式遵循以React Native樣式為基礎的Flex布局，可以同時給設計師和開發人員使用。
- 導出為React組件后，可以繼續進行二次開發。
- 模板市場給你提供了存儲和使用模板的功能，你可以通過公開的模板快速創建頁面，你也可以根據自己的需求創建模板。
運行原理
你編輯的后的數據以json的方式運行和存儲，下面的示例將一個text組件嵌套在一個view組件的json。
[
{
"child": [
{
"style": {},
"text": "文本內容",
"nodeName": "text",
"key": "2e0l1-19tg00",
"child": []
}
],
"style": {},
"nodeName": "view",
"key": "2e0l1VzIiw00"
}
]
對應的JSX代碼如下，這些組件并不是原生的Taro組件，二十經過封裝的，所以你看到下面的Text組件的文本并不是這樣：<Text>文本內容<Text>，而是將文本內容賦值在其text屬性上，其他組件的結構也大體如此。
<View>
<Text text='文本內容' />
</View>
在線體驗
點擊前往在線地址
在線模板現在未開放注冊賬號以及管理功能，請使用下面的賬號密碼進行體驗。
- 用戶名：admin
- 密碼：123456
GitHub地址：https://github.com/ShaoGongBra/taro-design
快捷鍵支持
ctrl + z 撤銷操作
ctrl + shift + z 恢復操作
ctrl + c 復制節點
ctrl + v 粘貼節點
delete 刪除節點
基本用法
yarn add taro-design
- 如果你的依賴庫里沒有下列組件，請添加
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
// 默認數據節點
defaultNodes={[]}
// 發生編輯時觸發的事件 你可以返回一個Promise對象 將會顯示一個正在保存的loading
onChange={nodes => {}}
// 點擊保存按鈕時觸發的事件，當你配置了這個選項才會出現保存按鈕 你可以返回一個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端保持樣式一致，你需要在你的全局樣式代碼中加入如下的樣式。
下面的全局樣式可能會導致你已經存在的項目樣式錯亂，你暫時需要自行調試，建議在新項目中使用。
/*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中運行
你可以簡單的開發一個組件，通過TaroDesign提供的注冊函數，實現在其中運行，包括編輯器和運行時。
自定義圖標庫
系統內置的圖標庫包含了一些常見的圖標 點擊查看圖標，如果你需要添加新的圖標庫請看這。
基礎組件
這里面導出了一些常用組件。你可以將他們導入到你的項目中使用
import { TopView, PullView, Modal, Icon, Button, Loading, ScrollView, KeyboardAvoiding } from 'taro-design'
基礎函數
項目引用了taro-tools這個依賴，這里面集成了多個常用函數，包含請求、日期、顏色、對象、字符串、表單驗證、事件系統等，你可以直接導入到你的項目中使用。
import { request, searchQuick, setRequestConfig, dateToStr, dateDiff, colorToRgb, deepCopy, verify, event, ... } from 'taro-tools'
