mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2025-12-10 18:03:01 +00:00
375 lines
10 KiB
Plaintext
375 lines
10 KiB
Plaintext
{
|
||
// 本例是一个比较复杂的，带有循环和条件渲染的，以及有各种事件处理函数的页面
|
||
version: '1.0.0',
|
||
componentsMap: [
|
||
{
|
||
componentName: 'View',
|
||
package: 'rax-view',
|
||
version: '^1.0.0',
|
||
destructuring: false,
|
||
exportName: 'View',
|
||
},
|
||
{
|
||
componentName: 'Text',
|
||
package: 'rax-text',
|
||
version: '^1.0.0',
|
||
destructuring: false,
|
||
exportName: 'Text',
|
||
},
|
||
{
|
||
componentName: 'Image',
|
||
package: 'rax-image',
|
||
version: '^1.0.0',
|
||
destructuring: false,
|
||
exportName: 'Image',
|
||
},
|
||
{
|
||
componentName: 'Page',
|
||
package: 'rax-view',
|
||
version: '^1.0.0',
|
||
destructuring: false,
|
||
exportName: 'Page',
|
||
},
|
||
],
|
||
componentsTree: [
|
||
{
|
||
componentName: 'Page',
|
||
fileName: 'home',
|
||
meta: {
|
||
router: '/',
|
||
},
|
||
state: {
|
||
clickCount: 0,
|
||
user: { name: '张三', age: 18, avatar: 'https://gw.alicdn.com/tfs/TB1Ui9BMkY2gK0jSZFgXXc5OFXa-50-50.png' },
|
||
orders: [
|
||
{
|
||
title: '【小米智能生活】米家扫地机器人家用全自动扫拖一体机拖地吸尘器',
|
||
price: 1799,
|
||
coverUrl: 'https://gw.alicdn.com/tfs/TB1dGVlRfb2gK0jSZK9XXaEgFXa-258-130.png',
|
||
},
|
||
{
|
||
title: '【限时下单立减】Apple/苹果 iPhone 11 4G全网通智能手机正品苏宁易购官方旗舰店苹果11',
|
||
price: 4999,
|
||
coverUrl: 'https://gw.alicdn.com/tfs/TB18gdJddTfau8jSZFwXXX1mVXa-1298-1202.png',
|
||
},
|
||
],
|
||
},
|
||
props: {},
|
||
lifeCycles: {
|
||
didMount: {
|
||
type: 'JSExpression',
|
||
value: 'function didMount(){\n this.utils.Toast.show(`Hello ${this.state.user.name}!`);\n}',
|
||
},
|
||
willUnmount: {
|
||
type: 'JSExpression',
|
||
value: 'function didMount(){\n this.utils.Toast.show(`Bye, ${this.state.user.name}!`);\n}',
|
||
},
|
||
},
|
||
methods: {
|
||
hello: {
|
||
type: 'JSExpression',
|
||
value: 'function hello(){\n this.utils.Toast.show(`Hello ${this.state.user.name}!`);\n console.log(`Hello ${this.state.user.name}!`); }',
|
||
},
|
||
},
|
||
dataSource: {
|
||
list: [
|
||
{
|
||
id: 'urlParams',
|
||
type: 'urlParams',
|
||
},
|
||
// 示例数据源：https://shs.xxx.com/mock/1458/demo/user
|
||
{
|
||
id: 'user',
|
||
type: 'fetch',
|
||
options: {
|
||
method: 'GET',
|
||
uri: 'https://shs.xxx.com/mock/1458/demo/user',
|
||
isSync: true,
|
||
},
|
||
dataHandler: {
|
||
type: 'JSExpression',
|
||
value: 'function (response) {\nif (!response.success){\n throw new Error(response.message);\n }\n return response.data;\n}',
|
||
},
|
||
},
|
||
// 示例数据源：https://shs.xxx.com/mock/1458/demo/orders
|
||
{
|
||
id: 'orders',
|
||
type: 'fetch',
|
||
options: {
|
||
method: 'GET',
|
||
uri: {
|
||
type: 'JSExpression',
|
||
value: 'this.state.user.ordersApiUri',
|
||
},
|
||
isSync: true,
|
||
},
|
||
dataHandler: {
|
||
type: 'JSExpression',
|
||
value: 'function (response) {\nif (!response.success){\n throw new Error(response.message);\n }\n return response.data.result;\n}',
|
||
},
|
||
},
|
||
],
|
||
dataHandler: {
|
||
type: 'JSExpression',
|
||
value: 'function (dataMap) {\n console.info("All datasources loaded:", dataMap);\n}',
|
||
},
|
||
},
|
||
children: [
|
||
{
|
||
componentName: 'View',
|
||
children: [
|
||
{
|
||
componentName: 'Text',
|
||
props: {},
|
||
children: 'Demo data source logic',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'View',
|
||
children: [
|
||
{
|
||
componentName: 'Text',
|
||
props: {},
|
||
children: '=== User Info: ===',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'View',
|
||
condition: {
|
||
type: 'JSExpression',
|
||
value: 'this.state.user',
|
||
},
|
||
props: {
|
||
style: { flexDirection: 'row' },
|
||
},
|
||
children: [
|
||
{
|
||
componentName: 'Image',
|
||
props: {
|
||
source: {
|
||
uri: {
|
||
type: 'JSExpression',
|
||
value: 'this.state.user.avatar',
|
||
},
|
||
},
|
||
style: {
|
||
width: '32px',
|
||
height: '32px',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
componentName: 'View',
|
||
props: {
|
||
onClick: {
|
||
type: 'JSExpression',
|
||
value: 'this.hello',
|
||
},
|
||
},
|
||
children: [
|
||
{
|
||
componentName: 'Text',
|
||
children: {
|
||
type: 'JSExpression',
|
||
value: 'this.state.user.name',
|
||
},
|
||
},
|
||
{
|
||
componentName: 'Text',
|
||
children: [
|
||
{
|
||
type: 'JSExpression',
|
||
value: 'this.state.user.age',
|
||
},
|
||
'岁',
|
||
],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'View',
|
||
children: [
|
||
{
|
||
componentName: 'Text',
|
||
props: {},
|
||
children: '=== Orders: ===',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'View',
|
||
loop: {
|
||
type: 'JSExpression',
|
||
value: 'this.state.orders',
|
||
},
|
||
loopArgs: ['order', 'index'],
|
||
props: {
|
||
style: { flexDirection: 'row' },
|
||
onClick: {
|
||
type: 'JSExpression',
|
||
value: 'function(){ this.utils.recordEvent(`CLICK_ORDER`, this.order.title) }',
|
||
},
|
||
},
|
||
children: [
|
||
{
|
||
componentName: 'View',
|
||
children: [
|
||
{
|
||
componentName: 'Image',
|
||
props: {
|
||
source: {
|
||
uri: {
|
||
type: 'JSExpression',
|
||
value: 'this.order.coverUrl',
|
||
},
|
||
},
|
||
style: {
|
||
width: '80px',
|
||
height: '60px',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'View',
|
||
children: [
|
||
{
|
||
componentName: 'Text',
|
||
children: {
|
||
type: 'JSExpression',
|
||
value: 'this.order.title',
|
||
},
|
||
},
|
||
{
|
||
componentName: 'Text',
|
||
children: {
|
||
type: 'JSExpression',
|
||
value: 'this.utils.formatPrice(this.order.price, "元")',
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'View',
|
||
props: {
|
||
onClick: {
|
||
type: 'JSExpression',
|
||
value: 'function (){ this.setState({ clickCount: this.state.clickCount + 1 }) }',
|
||
},
|
||
},
|
||
children: [
|
||
{
|
||
componentName: 'Text',
|
||
children: [
|
||
'点击次数：',
|
||
{
|
||
type: 'JSExpression',
|
||
value: 'this.state.clickCount',
|
||
},
|
||
'(点击加 1)',
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'View',
|
||
children: [
|
||
{
|
||
componentName: 'Text',
|
||
props: {},
|
||
children: '操作提示：',
|
||
},
|
||
{
|
||
componentName: 'Text',
|
||
props: {},
|
||
children: '1. 点击会员名，可以弹出 Toast "Hello xxx!"',
|
||
},
|
||
{
|
||
componentName: 'Text',
|
||
props: {},
|
||
children: '2. 点击订单，会记录点击的订单信息，并弹出 Toast 提示',
|
||
},
|
||
{
|
||
componentName: 'Text',
|
||
props: {},
|
||
children: '3. 最下面的【点击次数】，点一次应该加 1',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
utils: [
|
||
// 可以直接定义一个函数
|
||
{
|
||
name: 'formatPrice',
|
||
type: 'function',
|
||
content: {
|
||
type: 'JSExpression',
|
||
value: 'function formatPrice(price, unit) { return Number(price).toFixed(2) + unit; }',
|
||
},
|
||
},
|
||
// 在 utils 里面也可以用 this 访问当前上下文:
|
||
{
|
||
name: 'recordEvent',
|
||
type: 'function',
|
||
content: {
|
||
type: 'JSExpression',
|
||
value: 'function recordEvent(eventName, eventDetail) { \n this.utils.Toast.show(`[EVENT]: ${eventName} ${eventDetail}`);\n console.log(`[EVENT]: ${eventName} (detail: %o) (user: %o)`, eventDetail, this.state.user); }',
|
||
},
|
||
},
|
||
// 也可以直接从 npm 包引入 (下例等价于 `import moment from 'moment';`)
|
||
{
|
||
name: 'moment',
|
||
type: 'npm',
|
||
content: {
|
||
package: 'moment',
|
||
version: '*',
|
||
exportName: 'moment',
|
||
},
|
||
},
|
||
// 可以引入子目录（下例等价于 `import clone from 'lodash/clone';`)
|
||
{
|
||
name: 'clone',
|
||
type: 'npm',
|
||
content: {
|
||
package: 'lodash',
|
||
version: '*',
|
||
exportName: 'clone',
|
||
destructuring: false,
|
||
main: '/clone',
|
||
},
|
||
},
|
||
{
|
||
name: 'Toast',
|
||
type: 'npm',
|
||
content: {
|
||
package: 'universal-toast',
|
||
version: '^1.2.0',
|
||
exportName: 'Toast', // TODO: 这个 exportName 是否可以省略？省略后默认是上一层的 name？
|
||
},
|
||
},
|
||
],
|
||
css: 'page,body{\n width: 750rpx;\n overflow-x: hidden;\n}',
|
||
config: {
|
||
sdkVersion: '1.0.3',
|
||
historyMode: 'hash',
|
||
targetRootID: 'root',
|
||
},
|
||
meta: {
|
||
name: 'Rax App Demo',
|
||
git_group: 'demo-group',
|
||
project_name: 'demo-project',
|
||
description: '这是一个示例应用',
|
||
spma: 'spmademo',
|
||
creator: '张三',
|
||
},
|
||
}
|