小程序学习之界面API（一）

最新推荐文章于 2024-03-13 03:00:00 发布
最新推荐文章于 2024-03-13 03:00:00 发布
阅读量541 收藏 1
点赞数
分类专栏： 微信小程序

1.交互反馈

1.1 消息提示框

1）显示消息提示框

使用wx.showToast(OBJECT)显示消息提示框，参数说明如下：

icon的有效值如下：

  • success：icon的默认值，用于显示成功的图标，title文本最多显示7个汉字长度
  • loading：显示加载图标
  • none：不显示图标，title文本最多可显示两行

示例代码如下：

wx.showToast({
    title: '',
    icon: '',
    image: '',
    duration: 0,
    mask: true,
    success: function(res) {},
    fail: function(res) {},
    complete: function(res) {},
  })

2）关闭消息提示框

虽然消息提示框可在指定时间后自动消失，但小程序也可使用wx.hideToast()提前关闭消息提示框

1.2 加载提示框

1）显示加载提示框

使用wx.showLoading(OBJECT)显示加载提示框，参数说明如下：

示例代码如下：

 wx.showLoading({
      title: '',
      mask: true,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })

2）关闭加载提示框

使用wx.hideLoading()关闭加载提示框，示例代码如下：

setTimeout(function(){
  wx.hideLoading()
},2000)     //两秒内关闭提示框

1.3 模态弹窗

使用wx.showModal(OBJECT)显示模态弹窗，参数说明如下：

success()返回参数说明如下：

示例代码：

wx.showModal({
     title: '',
     content: '',
     showCancel: true,   //决定是否有“取消”按钮
     cancelText: '',
     cancelColor: '',
     confirmText: '',
     confirmColor: '',
     success: function(res) {},
     fail: function(res) {},
     complete: function(res) {},
   })

1.4 操作菜单

使用wx.showActionSheet(OBJECT)先是从底部浮出来的操作菜单，参数说明如下：

success()返回参数说明如下：

示例代码格式：

wx.showActionSheet({
     itemList: [],
     itemColor: '',
     success: function(res) {},
     fail: function(res) {},
     complete: function(res) {},
   })

2.导航条设置

2.1 当前页面标题设置

使用wx.setNavigationBarTitle(OBJECT)动态设置当前页面的标题，参数说明如下：

示例代码如下：

wx.setNavigationBarTitle({
     title: '',
     success: function(res) {},
     fail: function(res) {},
     complete: function(res) {},
   })

2.2 导航条加载动画

小程序分别使用wx.showNavigationBarLoading()和wx.hideNavigationBarLoading()在当前页面显示或隐藏导航条加载动画。

2.3 导航条颜色设置

使用wx.setNavigationBarColor(OBJECT)设置导航条颜色，参数说明如下：

animation.timingFunc的有效值如下：

示例代码如下：

wx.setNavigationBarColor({
     frontColor: '#ffffff',
     backgroundColor: '#ff0000',
     animation: {
       duration:400,
       timingFunc:'easeIn'
     },
     success: function(res) {},
     fail: function(res) {},
     complete: function(res) {},
   })

3.tarBar设置

3.1 tabBar标记

1）设置tabBar标记

使用wx.setTabBarBadge(OBJECT)为tabBar某一项的右上角添加文本，参数说明如下：

示例代码如下：

 wx.setTabBarBadge({
      index: 0,
      text: '',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })

2）移除tabBar标记

使用wx.removeTabBarBadge(OBJECT)移除tabBar某一项右上角文本，参数说明如下：

示例代码如下：

wx.removeTabBarBadge({
     index: 0,
     success: function(res) {},
     fail: function(res) {},
     complete: function(res) {},
   })

3.2 tabBar红点

1）显示tabBar红点

使用wx.showTabBarRedDot(OBJECT)显示tabBar某一项的右上角的红点，参数说明如下：

2）隐藏tabBar红点

使用wx.hideTabBarRedDot(OBJECT)隐藏tabBar某一项右上角的红点，参数说明如下：

3.3 onTabItemTap()

在小程序中，单击tabBar中的任一tab都会触发onTabItemTap(item)，示例代码如下：

onTabItemTap(item){
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  }

3.4 设置tabBar样式

1）设置tabBar整体样式

使用wx.setTabBarStyle(OBJECT)动态设置tabBar的整体样式，参数说明如下：

示例代码如下：

wx.setTabBarStyle({
     color: '',
     selectedColor: '',
     backgroundColor: '',
     borderStyle: '',
     success: function(res) {},
     fail: function(res) {},
     complete: function(res) {},
   })

2）设置tabBar单项样式

使用wx.setTabBarItem(OBJECT)动态设置tabBar某一项的内容，参数说明如下：

示例代码如下：

wx.setTabBarItem({
     index: 0,
     text: '',
     iconPath: '',
     selectedIconPath: '',
     success: function(res) {},
     fail: function(res) {},
     complete: function(res) {},
   })

3.5 显示与隐藏tabBar

1）显示tabBar

使用wx.showTabBar(OBJECT)显示tabBar，参数说明如下：

2）隐藏tabBar

使用wx.hideTabBar(OBJECT)隐藏tabBar，参数说明如下：

综合应用示例代码：

<!--wxml-->
<view class="title">3.tabBar设置</view>
<view class="demo-box">
  <view class="title">1)右上角文本设置</view>
  <button type="primary" size="mini" bindtap="setText">添加文本</button>
  <button type="primary" size="mini" bindtap="removeText">取消文本</button>
</view>
<view class="demo-box">
  <view class="title">2)右上角红点设置</view>
  <button type="primary" size="mini" bindtap="showRedDot">添加红点</button>
  <button type="primary" size="mini" bindtap="hideRedDot">取消红点</button>
</view>
<view class="demo-box">
  <view class="title">3)tabBar样式设置</view>
  <button type="primary" size="mini" bindtap="setBarStyle">整体设置</button>
  <button type="primary" size="mini" bindtap="setColor">单项设置</button>
  <button type="primary" size="mini" bindtap="resetBarStyle">还原设置</button>
</view>
<view class="demo-box">
  <view class="title">4)tabBar的显示与隐藏</view>
  <button type="primary" size="mini" bindtap="showTabBar">显示tabBar</button>
  <button type="primary" size="mini" bindtap="hideTabBar">隐藏tabBar</button>
</view>

/*wxss*/
button{
  margin: 10rpx;
}

//js
//js
Page({
  //设置文本
  setText:function(){
    wx.setTabBarBadge({
      index: 1,
      text: '99',
    })
  },
  //取消文本
  removeText:function(){
    wx.removeTabBarBadge({
      index: 1,
    })
  },
  //显示红点
  showRedDot:function(){
    wx.showTabBarRedDot({
      index: 1,
    })
  },
  //隐藏红点
  hideRedDot:function(){
    wx.hideTabBarRedDot({
      index: 1,
    })
  },
  //设置整体样式
  setBarStyle:function(){
    wx.setTabBarStyle({
      color: '#ff0000',
      selectedColor: '#0000ff',
    })
  },
  //设置单项样式
  setColor:function(){
    wx.setTabBarItem({
      index: 1,
      text: 'tabBar例题',
      iconPath: '/icons/index.png',
      selectedIconPath: '/icons/index_selected.png',
    })
  },
  //还原tabBar样式
  resetBarStyle:function(){
    wx.setTabBarItem({
      index: 1,
      text: 'tabBar例题',
      iconPath: "/icons/zujian.png",
      selectedIconPath:"/icons/zujian_selected.png",
    })
    wx.setTabBarStyle({
      color:"#000000",
      selectedColor:"#laad19"
    })
  },
  //显示tabBar
  showTabBar:function(){
    wx.showTabBar({})
  },
  //隐藏tabBar
  hideTabBar:function(){
    wx.hideTabBar({ })
  }
})

4.页面导航

4.1 跳转到新页面

使用wx.navigateTo(OBJECT)保留当前页面，并在当前页面上方打开应用内指定的新页面。在这种打开方式下可单击新页面左上角返回按钮或使用wx.navigateBack()接口返回到原页面。参数说明如下：

示例代码如下：

wx.navigateTo({
      url: 'test?id=123',  //表示跳转到test页面，并且带参数id=123
    })


//test页面
Page({
  onLoad:function(option){
      console.log(option.id)  //在跳转的test页面可以通过onLoad()函数获得参数值
   }
})

ps：小程序规定页面路径最多只能打开10层

4.2 返回指定页面

使用wx.navigateBack(OBJECT)关闭当前页面，返回上一页面或多级页面，参数说明如下：

举例理解delta：

4.3 当前页面重定向

使用wx.redirectTo(OBJECT)关闭当前页面，重定向到应用内的某个页面，参数说明如下：

示例代码如下：

wx.redirectTo({
      url: 'test?id=1',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
  })

ps：此时无法返回打开前的原页面

4.4 重启页面

使用wx.reLaunch(OBJECT)关闭所有页面，重新打开到应用内的某个页面，参数说明如下：

示例代码如下：

wx.reLaunch({
      url: 'test?id=',
    })

4.5 切换tabBar页面

使用wx.switchTab(OBJECT)跳转到指定的tabBar页面，并关闭其他页面，参数说明如下：

示例代码如下：

wx.switchTab({
      url: '/index',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })

ps：使用这个切换的页面是在app.json的tabBar属性中声明过的页面

6.页面位置

使用wx.pageScrollTo(OBJECT)将页面滚动到目标位置，参数说明如下：

示例代码如下：

wx.pageScrollTo({
      scrollTop: 0,
      duration: 0,
    })

综合应用：

316页

8.下拉刷新

8.1 监听下拉刷新

在Page()中定义了onPullDownRefresh()函数用于监听当前页面的用户下拉刷新事件，示例代码如下：

onPullDownRefresh:function(){
    console.log('正在下拉刷新')
  }

测试时可在json文件中配置，相关代码如下：

{
   "enablePullDownRefresh":true,
}

8.2 开始下拉刷新

使用wx.startPullDownRefresh(OBJECT)触发下拉刷新动画，效果与用户手动刷新一致，参数说明如下：

示例代码如下：

wx.startPullDownRefresh({
    success: function(res) {},
    fail: function(res) {},
    complete: function(res) {},
  })

8.3 停止下拉刷新

使用wx.stopPullDownRefresh()停止当前页面的下拉刷新，示例代码如下：

Page({
   onPullDownRefresh:function(){   //当其监听并处理完数据后可使用该接口停止下拉刷新动作
     wx.stopPullDownRefresh()
   }
})

 

baked_donut
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css样式大全API
05-24
这是跟据w3c schools网站学习总结的 自己制作的cssAPI，希望对大家有所帮助
微信小程序之登陆界面
12-02
通过以上步骤，我们可以构建出一个完整的微信小程序登录界面，并实现登录后的页面跳转。在实际开发中，还可以根据业务需求扩展更多功能，如第三方登录、验证码验证、记住密码等。微信小程序提供了丰富的API和组件，...
微信小程序学习之路——API界面（一）
创作星球
04-07 687
界面 交互反馈 wx.showToast(Object) 显示消息提示框，Object参数的属性如下: 属性 类型 默认值 必填 说明 最低版本 title string 是 提示的内容 icon string 'success' 否 图标 image string ...
微信小程序tabBar 设置和使用整理
chongyingdi7115的博客
07-06 997
一、从配置文件中设置tabBar app.json配置文件中配置tab的项： "tabBar": { "color": "#000", "selectedColor": "#F69C21", "borderStyle": "black", "ba...
小程序自定义tabbar
醉逍遥neo的博客
05-31 3582
待续 一、官方tabbar 官方文档：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html 二、自定义tabbar 官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
【微信小程序】基础篇 -- 全局配置 -- tabBar（十七）
JMFive的博客
03-02 7423
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第17篇文章;今天开始学习微信小程序的第九天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：底部 tabBar顶部 tabBar。
微信小程序自定义主题颜色【状态栏tab样式同步更改】
m0_73526957的博客
07-14 1869
3.index.wxml中将变量放入Style中。style="{{userColor.homeColor}}"，把变量绑定到了页面顶级元素上。动态切换可以在 userStyle.js 中添加网络请求，通过判断后台返回的用户类型切换不同的颜色，或直接后端返回颜色值。1.创建公共样式userStyle.js文件，通过定义style1和style2来控制全局颜色改变。此功能使用js控制变量 调整颜色值，赋值给css颜色达到切换自定义颜色效果。2.在index.js中引入userColor并放入data中。
微信小程序学习demo：笑话大全；使用聚合数据API
05-04
本项目是一个微信小程序的学习示例，名为“笑话大全”，它利用了聚合数据API来获取并展示各种幽默笑话。 首先，我们来深入了解一下微信小程序的开发环境。微信开发者工具是构建小程序的主要平台，它提供了代码编辑...
微信小程序聊天界面demo
07-27
在这个“微信小程序聊天界面demo”案例中，我们将探讨如何利用微信小程序的开发框架和API来构建一个聊天界面。 1. **微信小程序开发环境搭建**：首先，开发者需要安装微信开发者工具，这是开发微信小程序的基础。...
utf-8.rar_微信小程序API
09-25
标题中的“utf-8.rar_微信小程序API”指的是一个压缩包文件，其主要包含与微信小程序相关的API接口信息。UTF-8是Unicode的一种实现方式，是目前互联网上最常用的字符编码标准，确保了不同语言文字的正确显示。微信小...
微信小程序vant引用 及api封装
08-13
微信小程序是一种轻量级的应用开发框架，由腾讯公司推出，主要应用于移动端，提供了一套自己的开发工具和API接口，使得开发者可以快速构建适用于微信环境的应用。 vant 是一套基于微信小程序的 UI 组件库，它源自 ...
wxtabBar的设置（右上角红点和消息，以及显示与隐藏）
nannan000329的博客
08-20 1005
wxml <view class="title">tabBar设置</view> <view class="demo-box"> <view class="title">1右上角文本设置</view> <button type="primary" size="mini" bindtap="setText">添加文本</button> <button type="primary" size="mini" bindta
微信小程序开发系列（二十九）·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框
最新发布
时光の尘的博客
03-13 3444
小程序提供了一些用于界面交互的 API，例如：loading 提示框、消息提示框、模态对话框等 API。
小程序API能力集成指南——界面交互API汇总
IoT砖家
02-21 1045
显示模态对话框
美化swagger -- 前后端分离的API接口页面
憧憬是碎了满地凉凉的宝石
10-23 825
有时候swagger界面比较难以操作，特别是需要不断切换接口时，点击起来比较麻烦，而且很多人不喜欢swagger界面的样式，这里提供一个用bootstrap渲染的swagger界面 pom.xml加入依赖 <dependency> <groupId>com.github.xiaoymin</groupId> <artifactId>swagger-bootstrap-ui</artifa.
Java界面编程—API
weixin_30919571的博客
11-14 289
Java 的 GUI 提供的对象都存在 java.awt 和 java.swing 两个包中。 awt ：Abstract Window ToolKit（抽象窗口工具包），需要调用本地系统方法实现功能，属重量级控件（跨平台不够强） swing：在 awt 的基础上，建立的一套图形系统，其中提供了更多的组件，并且完全由 java 实现，增强了可移植性，属于轻量级控件（跨平台很好） SWT：Th...
api接口文档视图页面
王兆镇的博客
04-13 891
需要的数据格式 $docslist=[ [ "id"=>0, "title"=>"发送验证码", "method_label"=>"label-primary", "method"=>"get", "route"=>"/api/common/upload", "summary"=>"总结", "body"=>"body" "headerslist"=>[ "name"=>"n
百度webgis-api-自定义样式
东东爱编码博客
09-08 258
文章目录一、加载自定义样式1. 百度自带的样式2. 自己定义的样式3. 代码实现 一、加载自定义样式 1. 百度自带的样式 第一种：登录自己的百度账号，点击特色服务平台，点开个性化地图就能看到一些百度自带的地图模版。 第二种：看到上面那些授权专用，是不是很恶心。找官方demo中引用的资源，找到对应的文件也可以找到自带的样式，关键还没有授权限制。 不知道怎么找？ 找到开发文档菜单，点开找到位置数据可视化MapV GL，点开 找到文档中的demo菜单 选择你想用的地图样式
Android API官方文档 样式和主题
jingweinie的博客
03-30 628
样式和主题样式是指为 View 或窗口指定外观和格式的属性集合。样式可以指定高度、填充、字体颜色、字号、背景色等许多属性。 样式是在与指定布局的 XML 不同的 XML 资源中进行定义。Android 中的样式与网页设计中层叠样式表的原理类似 — 您可以通过它将设计与内容分离。
微信小程序实战：知乎日报API应用与界面设计
微信小程序之知乎日报是一...微信小程序之知乎日报是一个实用的教程，不仅涉及了基础的开发流程，还强调了实际应用场景中遇到的问题解决策略，对于想要深入了解微信小程序开发的开发者来说，是一个不可多得的学习资源。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值