基于 Designable 开发 Taro小程序前端页面可视化搭建工具

目录介绍

├─ packages
  ├─ taroify-formily: 组件库
  ├─ taroify-formily-demo: demo例子
  ├─ taroify-formily-designable: 页面可视化搭建设计器

预览地址

Github

可视化设计器（体积很大，注意流量，最好用PC打开） https://miku01.cn/taroifyDesignable/index.html

demo H5（按 F12 切换设备仿真） https://miku01.cn/taroifyDemo/index.html#/pages/index/index

项目启动

依赖安装 根目录下

npm i -g yarn lerna ts-node @tarojs/cli@3.5.0-beta.6
lerna bootstrap

物料组件库打包 taroify-formily 目录下

yarn build

Taro Demo运行 taroify-formily-demo 目录下 编译微信小程序或淘宝(支付宝)小程序、h5

yarn dev:weapp

yarn dev:alipay

yarn dev:h5

taroify-formily-demo/src/pages/index/jsonSchema.json 可以替换 PC端可视化设计器 中编辑好的json

可视化设计器启动 taroify-formily-designable 目录下 taroify-formily-designable/start.js 中可修改 Taro Demo 地址

yarn start

介绍文章

目前组件比较少，如有需要上生产建议按自身业务搭一套

0前端可视化搭建与designable 1物料组件库、协议和渲染器、designable设计器 2Taro小程序H5渲染JSONSchema 3事件系统(开坑中) 4数组组件(开坑中)

待优化

• 输入框字体在H5中的大小