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

关于taro:Taro-Design-移动端页面编辑器

Taro Design

一个简略易用，不便扩大和集成的挪动端页面编辑器

特点

运行原理

在线体验

快捷键反对

根本用法

导出到其余我的项目中运行

更多用法

把本人的组件放在TaroDesign中运行

自定义图标库

根底组件

根底函数