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'