支付宝小程序 UI·新手引导-ETC 步骤
本示例展示新手接入 ETC 的相关操作步骤。
使用说明
本示例为纯客户端代码，可直接在模拟器和在真机预览。
更多详情请参见 代码市场。
使用指南
安装
在 IDE 安装以下依赖
npm i mashi-open-snippets --save注册
在 JSON 中引入组件路径
{
"usingComponents": {
"move-demo": "mashi-open-snippets/es/etc-novice-guide/index"
}}调用
分别在 AXML、JS、ACSS 中输入以下代码
<view class="etc-novice-guide-page" style="background-image:url({{bgImage}})">
<etc-confirm ref="savePopRef" title="{{confirmData.title}}" subTitle="{{confirmData.subTitle}}" cancelButtonText="{{confirmData.cancelButtonText}}" confirmButtonText="{{confirmData.confirmButtonText}}" onClose="onPopClose" onCancel="onPopCancel" onConfirm="onPopConfirm"></etc-confirm>
<!-- 动画 -->
<block a:if="{{showLottie === 0}}">
<view class="etc-novice-guide-lottie1-out">
<lottie id="lottie-step1" class="etc-novice-guide-lottie1" path="https://gw.alipayobjects.com/os/basement_prod/955552a7-4d63-462b-8905-89ce48c81dd7.json" speed="1.0" autoplay="{{true}}" repeatCount="-1" />
</view>
</block>
<block a:elif="{{showLottie === 1}}">
<view class="etc-novice-guide-lottie2-out">
<lottie id="lottie-step2" class="etc-novice-guide-lottie2" path="https://gw.alipayobjects.com/os/basement_prod/1874be4f-1945-4e60-91ad-c58487e69dbd.json" speed="1.0" autoplay="{{true}}" repeatCount="-1" />
</view>
</block>
<block a:else>
<view class="etc-novice-guide-lottie3-out">
<lottie id="lottie-step3" class="etc-novice-guide-lottie3" path="https://gw.alipayobjects.com/os/basement_prod/7728bce8-1dc5-4a51-a729-f9decbe3fbec.json" speed="1.0" autoplay="{{true}}" repeatCount="-1" />
</view>
</block>
<view>
<etc-novice-guide ref="saveRef" data="{{item1}}" onClickStep="onClickStep" onClickBottomText="onClickBottomText" onConfirm="onConfirm"/>
</view>
</view>Page({
data: {
bgImage1: 'https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*i9lcQI-9VEQAAAAAAAAAAABkARQnAQ',
bgImage2: 'https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*xEPYS5KvzGEAAAAAAAAAAABkARQnAQ',
bgImage: '',
showLottie: 0,
confirmData: {
title: '确认设备已固定',
subTitle: '激活后请勿拆卸移动，否则将失效',
cancelButtonText: '取消',
confirmButtonText: '确认已固定'
},
item1: [
{
title: '车辆熄火，开启手机蓝牙',
subTitle: '避免手机连接车载蓝牙，安卓手机打开GPS定位增强蓝牙型号',
preText: '上一步',
midText: '1/3',
nextText: '下一步',
bottomText: ['我的客服'],
audio: 'https://gw.alipayobjects.com/mdn/industry_l/afts/file/A*xfpQRawS3lwAAAAAAAAAAABkARQnAQ',
},
{
title: '安装ETC设备',
subTitle: '固定后请勿将ETC设备拆下，以免失效',
preText: '上一步',
midText: '2/3',
nextText: '下一步',
bottomText: ['常见问题', "安装指南"],
confirmation: true,
audio: 'https://gw.alipayobjects.com/mdn/industry_l/afts/file/A*fUB-R7T6phMAAAAAAAAAAABkARQnAQ',
},
{
title: '开启ETC设备蓝牙',
subTitle: '芯片卡朝上插入后，按下按钮蓝灯闪烁',
preText: '上一步',
midText: '3/3',
nextText: '立即激活',
bottomText: ['常见问题', "安装指南"],
audio: 'https://gw.alipayobjects.com/mdn/industry_l/afts/file/A*yHDHRL3vAE8AAAAAAAAAAABkARQnAQ',
}
],
},
onLoad() {
// 开始是背景图1
this.setData({
bgImage: this.data.bgImage1
})
},
saveRef(ref) {
this.noticeRef = ref;
},
savePopRef(ref) {
this.popRef = ref;
},
/**
* 返回 step 切换的状态
*/
onClickStep(val) {
console.log('onClickStep:', val)
// 设置背景图
if (val.fromStep === 0 && val.toStep === 1) {
this.setData({
bgImage: this.data.bgImage2
})
}
if (val.fromStep === 1 && val.toStep === 0) {
this.setData({
bgImage: this.data.bgImage1
})
}
// 设置播放的动画
this.setData({
showLottie: val.toStep
})
},
/**
* 点击底部文案
* @param {*} val
*/
onClickBottomText(val) {
console.log('onClickBottomText:', val)
},
/**
* 进行下一步前需要确认
* @param {*} val
*/
onConfirm(val) {
console.log('onConfirm:', val);
// 调用弹出窗组件的显示
this.popRef.handleShow();
},
/**
* 弹出窗关闭
*/
onPopClose(e) {
console.log('onPopClose:', e);
},
/**
* 弹出窗取消
*/
onPopCancel(e) {
console.log('onPopCancel:', e);
},
/**
* 弹出窗确认
*/
onPopConfirm(e) {
console.log('onPopConfirm:', e);
// 调用步骤组件的下一步
this.noticeRef.next();
},
});.etc-novice-guide-page {
display:flex;
flex-direction:column;
justify-content:flex-end;
background-color:rgb(242, 242, 242);
height:100vh;
box-sizing:border-box;
//background-image:url(https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*i9lcQI-9VEQAAAAAAAAAAABkARQnAQ);
background-size:100%;
}
.etc-novice-guide-page-rectangle{
position: absolute;
top:69.28rpx;
left:352rpx;
width:166rpx;
height:103rpx;
}
.etc-novice-guide-page-arrow{
position: absolute;
top:196.96rpx;
left:406.59rpx;
width:70rpx;
height:70rpx;
}
.etc-novice-guide-page-card {
position: absolute;
top:277.28rpx;
left:340rpx;
width:195rpx;
height:140rpx;
}
.etc-novice-guide-lottie1-out {
position:absolute;
top:221rpx;
}
.etc-novice-guide-lottie1 {
width:750rpx;
height:580rpx;
}
.etc-novice-guide-lottie2-out {
position:absolute;
top:139rpx;
}
.etc-novice-guide-lottie2 {
width:750rpx;
height:400rpx;
}
.etc-novice-guide-lottie3-out {
position:absolute;
top:261rpx;
}
.etc-novice-guide-lottie3 {
width:750rpx;
height:516rpx;
}属性
| 属性 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| data | Array | [] | 否 | 接收一个数组，其中 title 属性是主标题；subTitle 是副标题；preText 是上一步按钮的文案；midText 是两个按钮中间的描述性文案；nextText 是下一步按钮的文案；bottomText 接收一个数组，为组件底部文案；confirmation 属性如果存在且为 true，则组件在该页直接点击下一步不会切换，需要外部确认，在组件外部调用组件的 next 方法即可切到下一页；audio 接收一个音频链接，若不传则不会播放音频； |
| onClickStep | Function | () => {} | 否 | 返回 step 切换的状态，返回值形式为 { fromStep: 0, toStep: 1 }，fromStep 为来源页面数组下标，toStep 为前往的数组下标。 |
| onClickBottomText | Function | () => {} | 否 | 点击底部文案返回的状态，返回值形式为 { content: "常见问题", index: 0}，content 为点击的底部文案文字，index 为文案数组的下标。 |
| onConfirm | Function | () => {} | 否 | 当该页面需要外部确认时返回值，返回值为 { index: 1, msg: '该步需要组件外确认，确认后调用组件的 next 方法' }，其中 index 为该页的数组下标。 |
| containerClassName | String | "" | 否 | 容器类名 |