原生脚本应用巡游

注意：此插件基于MaterialShowcase for IOS和TapTargetView for Android。

安装

tns plugin add nativescript-app-tour-updated

用法

<Label id="feat1" text="Feature 1"></Label>
<Label id="feat2" text="Feature 2"></Label>
<Button text="start" tap="{{ startTour }}"></Button>

startTour(){

    const stops: TourStop[] = [
        {
            view: this.page.getViewById("feat1"),
            title: 'Feature 1',
            description: "Feature 1 Description",
            dismissable: true
        },
        {
            view: this.page.getViewById("feat2"),
            title: 'Feature 2',
            description: 'Feature 2 Description',
            outerCircleColor: 'orange',
            rippleColor: 'black'
        }
    ];

    const handlers: TourEvents = {
        finish() {
            console.log('Tour finished');
        },
        onStep(lastStopIndex) {
            console.log('User stepped', lastStopIndex);
        },
        onCancel(lastStopIndex) {
            console.log('User cancelled', lastStopIndex);
        }
    }

    this.tour = new AppTour(stops, handlers);
    this.tour.show();
}

更多信息请查看示例项目。

Angular

在Angular中，您可以使用@ViewChild装饰器获取目标视图的引用，如下所示：

<Label #feat1 text="Feature 1"></Label>
<Label #feat2 text="Feature 2"></Label>
<Button text="start" tap="{{ startTour }}"></Button>

@ViewChild('feat1') feat1: ElementRef;
@ViewChild('feat2') feat2: ElementRef;

startTour(){

    const stops: TourStop[] = [
        {
            view: this.feat1.nativeElement,
            title: 'Feature 1',
            description: "Feature 1 Description",
            dismissable: true
        },
        {
            view: this.feat2.nativeElement,
            title: 'Feature 2',
            description: 'Feature 2 Description',
            outerCircleColor: 'orange',
            rippleColor: 'black'
        }
    ];

    const handlers: TourEvents = {
        finish() {
            console.log('Tour finished');
        },
        onStep(lastStopIndex) {
            console.log('User stepped', lastStopIndex);
        },
        onCancel(lastStopIndex) {
            console.log('User cancelled', lastStopIndex);
        }
    }

    this.tour = new AppTour(stops, handlers);
    this.tour.show();
}

API

TourStop

参数	描述	类型	默认值
view (必需)	原生视图引用	视图	无
title	停止标题	字符串	title
titleTextSize	标题文本大小	数字	25
titleTextColor	标题文本颜色	字符串	白色
description	停止描述	字符串	description
descriptionTextSize	描述文本大小	数字	20
descriptionTextColor	描述文本颜色	字符串	白色
outerCircleOpacity	外部圆背景不透明度	数字	0.96
outerCircleColor	外部圆背景颜色	字符串	黑色
innerCircleColor	围绕目标视图的圆背景颜色	字符串	白色
rippleColor (仅限iOS)	目标圆涟漪颜色	字符串	白色
innerCircleRadius	围绕目标视图的圆半径	数字	50
dismissable	是否可以通过点击目标视图外部取消巡游	布尔值	false

AppTour

方法	描述
构造函数	AppTour(stops)
show()	开始巡游
reset()	重置巡游以便再次播放

巡游事件

此插件有3个事件：finish(): void => 当巡游完成时触发；onStep(lastStepIndex): void => 每当点击目标时触发一次；onCancel(lastStepIndex): void => 当用户通过点击外部取消可取消的巡游时触发

默认值

注意：如果您在所有停止点中使用相同的配置（颜色、大小等），请使用AppTour默认属性进行自定义，该属性基本上是一个TourStop :+1: 。

下一步

[x] 添加事件。
[ ] 为TourStop添加更多选项。

贡献

如果您想帮助改进此插件，您可以考虑将其视为自己的，并随意提交PRs :)

获取帮助

请使用github issues严格用于报告错误或请求新功能。

联系

Twitter: hamdiwanis
Email: [email protected]