QuickApp TS

示例

简介

这一部分主要是展示可以有哪些新的写法，这样说是因为旧的写法也完全是兼容的，因为快应用的写法其实属性都用的字符串，所以即使写tsx文件，仍然使用字符串作标签的属性当然也是没问题的。

组件的写法

组件的话，有两个改变，一个是使用class的语法，还有一个是把原来template标签拿到类里面用jsx来写。

所以一个最基本的页面组件可以写成这样：

class Main implements QuickApp.IPageComponent
{
    template()
    {
        return (
            <div>
                <text>hi</text>
            </div>
        );
    }
}

export default Main;

然后最基本的自定义组件写成这样：

class TodoItem implements QuickApp.IComponent
{
    template()
    {
        return (
            <div>
                <text>todo item!</text>
            </div>
        );
    }
}

export default TodoItem;

区别就是实现的接口不一样：IPageComponent和IComponent，这样做是因为，快应用里面有两种组件，一种是页面级的，一种就是一般的那种，它们能使用的数据模型不同，所以这里也做成两种接口。但其实其它好像没有什么区别了就。。

资源的引入

样式

资源的引入采用一致的import语法，就和写其它代码一样的。

样式的话，那个起的名字，比如这个里面的styles，是可以随便起的，现在暂时没有用到它：

import styles from "./main.less";

最后翻译之后会在ux文件里面变成：

<style src="./main.less" lang="less"></style>

后缀名是重要的，如果是css的话，生成的标签里面不会有lang="css"，没什么关系。但用less的话，是根据后缀在生成的标签里面加上lang的。

组件

组件的引入就和引入一个js文件一样。路径也是按照惯例，如果不是相对路径，那默认是在node_modules里面的。

比如：

import TodoItem from "./todo-item";

会变成：

<import src="./todo-item.ux" name="todo-item"></import>

然而比如：

import TodoItem from "todo-item/todo-item";

会变成：

<import src="../node_modules/todo-item/todo-item.ux" name="todo-item"></import>

有多少个../就看引用TodoItem的文件在哪儿了。。这里只是一个例子。

成员访问

成员访问的话，快应用里面，定义在private或者props里面的字段，访问用的是this，这样其实不好类型提示和检查的。所以新的写法里面，采取更直观的做法，就是，定义成什么样，就怎么样访问，比如：

成员访问

右键然后在新标签页里面打开图片，可以看得更清晰。

事件绑定

事件绑定其实写法和成员访问差不多，比如：

class Main implements QuickApp.IPageComponent
{
    template()
    {
        return (
            <div>
                <text onclick={this.handleClick}>hi</text>
            </div>
        );
    }

    handleClick(e: QuickApp.ClickEvent)
    {
        console.log(e);
    }
}

export default Main;

参数传递

参数传递，不用像快应用里面，定义props用的驼峰，传参数却要用连字符连接。就直接定义的时候什么名字，传参数的时候就什么名字。

指令

if和show保留，没有采取三元运算符。主要是for指令可以用map了，这样提示和检查会好一些：

class Main implements QuickApp.IPageComponent
{
    private = {
        cities: [
            { name: "北京", showSpots: true, spots: [{ name: "胡同" }] },
            { name: "北京", showSpots: true, spots: [{ name: "香山" }] }
        ],
        showCityList: true
    }
    template()
    {
        return (
            <div class="main-page">
                <div class="city" if={this.private.showCityList === true}>
                    {
                        this.private.cities.map(city => (
                            <block>
                                <text>城市：{city.name}</text>
                                <block if={city.showSpots}>
                                    {
                                        city.spots.map(spot => (
                                            <text>景点：{spot.name}</text>
                                        ))
                                    }
                                </block>
                            </block>
                        ))
                    }
                </div>
            </div>
        );
    }
}

export default Main;

然后就翻译成了：

<template>
    <div class="main-page">
        <div class="city" if="{{showCityList === true}}">
            <block for="city in cities">
                <block>
                    <text>城市：{{city.name}}</text>
                    <block if="{{city.showSpots}}">
                        <block for="spot in city.spots">
                            <text>景点：{{spot.name}}</text>
                        </block>
                    </block>
                </block>
            </block>
        </div>
    </div>
</template>

<script>
    export { default } from "./index.js";
</script>

这个主要是跳转方便多了，因为原来那样都是字符串，嵌套多了，都不好找是在遍历哪个数组了或者是什么的属性。。

← 功能