Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序与用户交互

微信小程序与用户交互

作者头像
小小咸鱼YwY
发布于 2020-06-19 07:58:08
发布于 2020-06-19 07:58:08
1.5K00
代码可运行
举报
文章被收录于专栏:python-爬虫python-爬虫
运行总次数:0
代码可运行

微信小程序与用户交互

一.显示消息提示框

wx.showToast({属性名:属性值})

自定义一个提示框,时间到了会自动关闭

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
wx.showToast({

    title:"成功",  //必填

    icon: 'success',//图标只支持"success"、"loading" 

    image: '/images/tan.png',//自定义图标的本地路径,image 的优先级高于 icon

    duration: 2000,//提示的延迟时间,单位毫秒,默认:1500 

    mask: false,//是否显示透明蒙层,防止触摸穿透,默认:false 

    success:function(){}, //接口调用成功的回调函数

    fail:function(){}, //接口调用失败的回调函数

    complete:function(){} //接口调用结束的回调函数(调用成功、失败都会执行)

})

wx.showLoading({属性名:属性值})

显示Loading提示框,不会自动关闭,需主动调用 wx.hideLoading 才能关闭提示框

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
wx.showLoading({
  title: '加载中',
})
setTimeout(function () {
  wx.hideLoading()
}, 2000)

属性

类型

默认值

必填

说明

title

string

提示的内容

mask

boolean

false

是否显示透明蒙层,防止触摸穿透

success

function

接口调用成功的回调函数

fail

function

接口调用失败的回调函数

complete

function

接口调用结束的回调函数(调用成功、失败都会执行)

wx.hideLoading({属性名:属性值})

隐藏 loading 提示框

属性

类型

默认值

必填

说明

success

function

接口调用成功的回调函数

fail

function

接口调用失败的回调函数

complete

function

接口调用结束的回调函数(调用成功、失败都会执行)

二.类似html中confirm

wx.showModal({属性名:属性值})

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

属性

类型

默认值

必填

说明

title

string

提示的标题

content

string

提示的内容

showCancel

boolean

true

是否显示取消按钮

cancelText

string

'取消'

取消按钮的文字,最多 4 个字符

cancelColor

string

#000000

取消按钮的文字颜色,必须是 16 进制格式的颜色字符串

confirmText

string

'确定'

确认按钮的文字,最多 4 个字符

confirmColor

string

#576B95

确认按钮的文字颜色,必须是 16 进制格式的颜色字符串

success

function

接口调用成功的回调函数

fail

function

接口调用失败的回调函数

complete

function

接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

Object res

属性

类型

说明

最低版本

confirm

boolean

为 true 时,表示用户点击了确定按钮

cancel

boolean

为 true 时,表示用户点击了取消(用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭)

1.1.0

三.显示操作菜单

wx.showActionSheet({属性名:属性值})

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
wx.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success (res) {
    console.log(res.tapIndex)
  },
  fail (res) {
    console.log(res.errMsg)
  }
})

属性

类型

默认值

必填

说明

itemList

Array.

按钮的文字数组,数组长度最大为 6

itemColor

string

#000000

按钮的文字颜色

success

function

接口调用成功的回调函数

fail

function

接口调用失败的回调函数

complete

function

接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

参数

Object res

属性

类型

说明

tapIndex

number

用户点击的按钮序号,从上到下的顺序,从0开始

注意

  • Android 6.7.2 以下版本,点击取消或蒙层时,回调 fail, errMsg 为 "fail cancel";
  • Android 6.7.2 及以上版本 和 iOS 点击蒙层不会关闭模态弹窗,所以尽量避免使用「取消」分支中实现业务逻辑
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-09-26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【愚公系列】《微信小程序与云开发从入门到实践》032-界面交互相关API的使用
在数字化时代,微信小程序作为一种新兴的应用形态,凭借其轻便、易用的特性,迅速成为了各类企业和开发者的重要工具。为了提升用户体验,微信小程序提供了丰富的界面交互API,使开发者能够更灵活地设计和实现各种交互效果。
愚公搬代码
2025/01/23
2750
uni-app入门教程(6)接口的扩展应用
本文主要介绍了接口的扩展应用:设备相关的接口包括获取系统信息、网络状态、拨打电话、扫码等;导航栏的动态设置;下拉刷新和上拉加载更多的实现;用条件编译实现小程序、APP等多端兼容;提示框、Loading、模态弹窗等的交互反馈。
cutercorley
2021/01/05
1.4K0
uni-app入门教程(6)接口的扩展应用
微信小程序权限接口
  部分接口需要经过用户授权统一才能调用。我们把这些接口按使用范围分成多个scope,用户选择对scope进行授权,当授权给一个scope之后,其对应的所有接口都可以直接使用,此类接口调用时:
别团等shy哥发育
2023/02/25
2.8K0
微信小程序权限接口
微信小程序快速入门开发指南(二)
微信小程序的程序语法格式类似json格式,服务器也要采用结果以json的形式返回给小程序,这种格式需要对特殊字符进行编码,如下举例一个json字符串。
初九之潜龙勿用
2024/06/20
1720
微信小程序快速入门开发指南(二)
微信小程序获取用户收货地址与指纹验证接口(安卓和iphone)
wx.chooseAddress(Object object)获取用户收货地址,此接口调用的是微信的收货地址。微信收货地址不同于微信设置的省和市地址,它默认是不存在的。在某个小程序中,当用户第一次调用wx.chooseAddress(Object object)接口时,会被要求填写微信收货地址;当用户第二次访问wx.chooseAddress(Object object)接口时,则可以看到自己以前填写的收货地址。这里说的第二次可以是不同的小程序,例如用户在访问A小程序时填写了微信收货地址,则用户在访问带有wx.chooseAddress(Object object)接口的B或者C小程序时都可以看到以前填写的微信收货地址。
别团等shy哥发育
2023/02/25
2.5K0
微信小程序获取用户收货地址与指纹验证接口(安卓和iphone)
群用户通过微信小程序可以更好地协作了
  今天,小程序向开发者开放了群ID的接口能力。简单地说,就是当你把小程序分享在群聊中,被点击后开发者可获取群ID和群名称,也方便更好地针对群场景提供个性化服务。不同的群有各自的群ID,那么这个新能力开发者该怎么使用? 群用户间可以更好地协作 大家都知道,小程序可以方便地在群聊中分享,但开发者难以识别不同用户的点击路径。 现在,通过最新的接口能力,开发者可以通过群ID判断用户是否来自同一个微信群,同一个群内的用户之间可以更好地使用小程序进行协作,例如共同编辑文档、协同合作、共同点餐等等。 提供更个性化的服
ytkah
2018/03/06
1.5K0
微信小程序常用组件
https://developers.weixin.qq.com/miniprogram/dev/component/map.html
wsuo
2020/09/22
9980
微信小程序开发之多图片上传+服务端接收
  业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存。
追逐时光者
2019/08/28
2.2K0
微信小程序开发之多图片上传+服务端接收
微信小程序地图与位置相关操作
map组件的两个属性longitude和latitude表示当前地图中心的经度和纬度,和当前用户所在位置的经度和纬度是不同概念,无直接关系。例如,某然在广东省东菀市,但是可以打开北京天安门为中心的一幅地图,map的longitude和latitude是用来控制地图中心的参数,并不是用户实时的地理位置。
别团等shy哥发育
2023/02/25
2.7K0
微信小程序地图与位置相关操作
微信小程序展示弹窗的几种方式
https://img-blog.csdnimg.cn/20200824143538219.gif#pic_center
peng_tianyu
2022/12/15
5.4K0
微信小程序展示弹窗的几种方式
微信小程序发起请求
一.示例代码 wx.request({ url: 'test.php', // 仅为示例,并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success(res) { console.log(res.data) } }) 注意:如果进行本地测试请在右上角详情>本地设置>不校验合法性打钩 二.参数 微信官方解释 参数 属性
小小咸鱼YwY
2020/06/19
8920
微信小程序视频基本操作
  小程序提供了wx.createVideoContext(string id,Object this)、wx.chooseVideo(Object object)、wx.saveVideoToPhotosAlbum(Object object)等接口对手机视频进行操作。
别团等shy哥发育
2023/02/25
2.8K0
微信小程序视频基本操作
微信小程序获取用户信息(wx.getUserInfo)
微信小程序获取用户信息API:wx.getUserInfo(Object object)
德顺
2019/11/13
2.5K0
微信小程序获取用户信息(wx.getUserInfo)
10-微信小程序 图片 相机 二维码 动画相关API(实现选择相册、拍照、录像、动画)
10-微信小程序 图片 相机 二维码 动画相关API(实现选择相册、拍照、录像、动画)
度假的小鱼
2023/11/30
3960
10-微信小程序 图片 相机 二维码 动画相关API(实现选择相册、拍照、录像、动画)
小程序开发-页面事件之上拉触底实战案例
在实现这个小程序实战案例的过程中,我们遵循了以下六个核心步骤。这些步骤不仅涵盖了基础的开发流程,还融入了一些优化技巧,以提升用户体验和性能。
小白的大数据之旅
2025/01/10
1100
小程序开发-页面事件之上拉触底实战案例
微信小程序-常用弹窗
showToast showModal showLoading showActionSheet 页面结构文件: <!--index.wxml--> <button bindtap="onShowToast">showToast</button> <button bindtap="onShowLoading">showLoading</button> <button bindtap="onShowModal">showModal</button> <button bindtap="onShow
程序员NEO
2023/05/22
5750
微信小程序-常用弹窗
微信小程序路由跳转
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
小小咸鱼YwY
2020/06/19
1.3K0
小程序拍摄或者在相册中选择图片
wx.chooseImage(Object object) :从本地相册选择图片或使用相机拍照。
德顺
2019/11/13
6470
如何在小程序中实现文件上传下载
在如何实现小程序登录鉴权这篇文章中,我们实现了小程序的wx.request请求操作,除了request之外,小程序还有文件下载wx.downloadFile和文件上传wx.uploadFile请求接口。那么这两个请求如何使用呢?请看本篇文章。
六个六
2018/11/13
23.4K4
如何在小程序中实现文件上传下载
小程序的各种弹窗(微信小程序弹窗怎么关)
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/125413.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/02
4.3K0
相关推荐
【愚公系列】《微信小程序与云开发从入门到实践》032-界面交互相关API的使用
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档