Taro Design 移动端页面编辑器

Taro Design

一个简单易用,方便扩展和集成的移动端页面编辑器

Taro Design 移动端页面编辑器_第1张图片

特点

  • 发布到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属性上,其他组件的结构也大体如此。


  

在线体验

点击前往在线地址
在线模板现在未开放注册账号以及管理功能,请使用下面的账号密码进行体验。

  • 用户名: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 
     {}}
      // 点击保存按钮时触发的事件,当你配置了这个选项才会出现保存按钮 你可以返回一个Promise对象 将会显示一个正在保存的loading
      onSave={nodes => {}}
      // 开启模板 默认开启
      templateOpen
      // 开启导出 默认开启
      exportOpen
      // 应用在最外层的样式 你也可以通过.taro-design控制样式
      style={{ }}
    />
  
}
  • 渲染模式使用示例
import React from 'react'
import { TopView, Create } from 'taro-design'

export default () => {
  return 
    
  
}
  • 全局样式

为了和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'

你可能感兴趣的