微信小程序开发案例教程-项目九 交互API与设备API.pptx

微信小程序

开发案例教程

主讲人:

全书目录

项目九

交互API与设备API

项目导读

在微信小程序中，交互API主要用于在小程序页面显示消息提示框或信息确认弹窗等，从而增强小程序的交互感，提高用户的使用体验；设备API涉及扫码、剪贴板、网络、屏幕、电量、联系人等，通过设备API可以获取小程序的设备信息或对设备信息进行调整。本项目将带领大家学习交互API与设备API的相关知识和使用方法。

知识目标

掌握常用交互API的相关知识。

掌握常用设备API的相关知识。

技能目标

善于发现问题，敢于正视问题，勇于解决问题。

学习目标

素质目标

能够使用交互API实现消息提示、信息确认、菜单选择、页面滚动等交互功能。

能够使用设备API实现扫码、剪贴板、获取网络状态、屏幕常亮等功能。

2

项目目录

1

任务一

交互API

（1）消息提示框

（2）模态对话框

（3）操作菜单

任务描述

（1）首先带领大家学习常用交互API的相关知识

（2）使用交互API实现“家电商城”微信小程序首页的一键回到顶部功能

一、消息提示框

微信小程序使用wx.showToastAPI显示消息提示框，帮助用户了解事件执行的进度。wx.showToastAPI传入一个object类型的参数，参数支持success、fail和complete3个回调函数。

一、消息提示框

wx.showToastAPI参数支持的属性

属性

类型

必填

说明

title

string

是

提示内容

icon

string

否

提示图标，可选值有success（默认，成功）、error（失败）、loading（加载）、none（不显示）

image

string

否

自定义图标的本地路径（image的优先级高于icon）

duration

number

否

提示框的显示时长，默认为1500，单位为毫秒

mask

boolean

否

是否显示透明蒙层，防止屏幕误触操作，默认为false

一、消息提示框

wx.showToastAPI的示例代码。

wx.showToast({

title:成功,

duration:2000,

mask:true

})

不同类型的消息提示框

一、消息提示框

如果要提前关闭消息提示框，可调用wx.hideToastAPI，该API传入一个object类型的参数，参数常用的属性有success、fail和complete3个回调函数。

还可以使用wx.showLoadingAPI显示加载类型的消息提示框，该API传入一个object类型的参数，参数支持的属性包括title（必填属性）、duration、mask，以及success、fail和complete3个回调函数。

小贴士

wx.showLoadingAPI常用在需要耗费一定时间的操作前，然后在操作的complete回调函数中调用wx.hideLoadingAPI关闭消息提示框。此外，若同时调用wx.showToast和wx.showLoadingAPI，只会显示后调用API的消息提示框。

wx.showLoadingAPI常用在那些操作里？

二、模态对话框

微信小程序使用wx.showModalAPI显示模态对话框，向用户展示一些重要的提示或进行信息确认等，以获取用户的反馈。

wx.showModalAPI传入一个object类型的参数，参数支持success、fail和complete3个回调函数。

二、模态对话框

wx.showModalAPI参数支持的属性

属性

类型

必填

说明

title

string

否

标题

content

string

否

提示内容

showCancel

boolean

否

是否显示取消按钮，默认为true

cancelText

string

否

取消按钮的文字，最多4个字符，默认为“取消”

cancelColor

string

否

取消按钮的文字颜色，默认为“#000000”

confirmText

string

否

确认按钮的文字，最多4个字符，默认为“确定”

confirmColor

string

否

确认按钮的文字颜色，默认为“#576b95”

editable

boolean

否

是否显示输入框，默认为false

placeholderText

string

否

当输入框为空时的提示内容（须设置editable属性的值为true）

二、模态对话框

二、模态对话框

wx.showModalAPI参数支持的属性

属性

类型

必填

说明

title

string

否

标题

content

string

否

提示内容

showCancel

boolean

否

是否显示取消按