通用魔法值 API

下一次更新($nextTick)

等待下一次渲染刷新的工具方法：当你在 AIP 中更改状态时，原生渲染的更新会异步生效，如果更改状态后需要依赖相应渲染内容生效再进行的后续操作可由$nextTick包裹。

例子：

<div aip-state="{a:1, b:1}">
    <div>{{ a }}</div>
    <div (click)="$nextTick(() => {console.log(1);a=a+1;});console.log(2);a=a+1;">
        click count a
    </div>
</div>

如上所示，点击click count a后a会先打印 2 再打印 1

详细接口：

$nextTick(
    sideEffect: Function, // 异步更新的副作用函数
)

全局链接($openLink)

你可以使用魔法值$openLink('url_schema')进行链接跳转，包括外部页面、小程序、拨打电话等通用 URL Schema。

例子：

<div (click)="$openLink('https://itunes.apple.com/us/app/your-app')">Jump</div>

锚点跳转($anchorScroll)

你可以使用魔法值$anchorScroll('#id')，根据元素 id 属性定位到指定元素，使页面滚动将这个元素置于视窗的相应位置。注意：iOS H5 不支持 behavior=smooth，原生渲染不支持 inline 选项

详细接口：

$anchorScroll(
    id: string, // 需要滚动的元素的 id
    scrollIntoViewOptions?: ScrollIntoViewOptions
)

interface ScrollIntoViewOptions {
    behavior: 'auto' | 'smooth'; //'smooth'表示带动画
    block: 'start' | 'center' | 'end'; // 纵向对齐方式
    inline: 'start' | 'center' | 'end'; // 横向对齐方式
}

例子：

<div aip-state="{showDialog: false}">
    <aip-button
        width="375"
        height="100"
        content="锚定"
        text_style="color:white;font-size:32rpx;"
        btn_style="background-color:rgb(22, 93, 255);border:0;padding:15rpx;border-radius:20rpx;"
        (click)="$anchorScroll('content')"
    ></aip-button>
    <div>标题</div>
    <div id="content">正文</div>
</div>

全局请求($request)

你可以使用魔法值$request进行 AJAX 请求

例子：

<div (click)="$request({url: 'https://www.example.com/blog/1'})">Request</div>

详细接口：

$request(
    payload: {
        // http 请求服务地址
        url: string;
        // "GET" | "POST" | "DELETE" | "PUT"，缺省则为默认的'GET'
        method？: string;
        // http request body 中内容，object
        body?: Record<string, any>;
        // url 地址中参数 object
        params?: Record<string, any>;
        // 请求头
        header?: Record<string, any>;
    },
    callback?: ({
        httpCode: number; // http 状态码
        header: Record<string, any>; // response header
        response?: any; // server 返回数据
    }) => void
)

定时器($timer)

你可以使用魔法值$timer进行定时的逻辑执行。

例子：

<div aip-state="{count: 0}" aip-init="$timer(() => { count+=1 }, 1000, () => count>10)">
    {{count}}
</div>

详细接口：

$timer = (
    callback: (...args: any[]) => void, // 定时执行的回调
    ms: number, // 执行间隔、单位毫秒
    stopCondition?: (...args: any[]) => boolean, // 定时器停止条件（缺省则不停止）
) => void

参数说明：

• callback：必填，定时执行的回调
• ms：必填，执行间隔（单位毫秒）
• stopCondition：定时器停止条件（缺省则不停止）
  • 类型为函数，需要返回 true/false
  • 每次 callback 执行完后会在当前元素上下文运行停止条件函数，如果运行结果为 true 则停止定时器，否则继续运行。

全局事件

提供事件机制支持全局通信

魔法值	功能	使用定义	参数	备注
$on	注册事件	$on(name: string, callback: (value: object) => void)	name: 事件名称 callback: 回调，接收回传值	可注册多个同名事件，触发时会依次触发
$emit	触发事件	$emit(name: string, value: object)	name: 事件名称 value：回传值
$off	卸载事件	$off(name: string, callback: (value: object) => void)	name: 事件名称 callback: 回调	卸载事件的回调必须与注册事件的回调引用一致

官方事件

• 表单提交： $emit('form-submit', { id: 'formid' })

• 表单清空：$emit('form-reset', { id: 'formid' })

若不指定 id 则所有表单均会触发