【微信小程序开发小白零基础入门】微信小程序界面API详解学习笔记【建议收藏】

已于 2023-05-31 11:49:49 修改
阅读量2k 收藏 33
点赞数 4
分类专栏： 微信小程序开发小白零基础入门 文章标签： 1024程序员节 移动开发 javascript 微信小程序 小程序
于 2021-10-24 14:15:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44967475/article/details/120930021
版权

【微信小程序开发小白零基础入门】微信小程序界面API【建议收藏】

文章目录

一、 交互反馈

1. 消息提示框

小程序使用wx.showToast(OBJECT)显示消息提示框，OBJECT参数说明如表所示
参数类型必填说明
titleString是提示的内容
iconString否图标，有效值“success", “loading”, “none”
imageString否自定义图标的本地路径，image的优先级高于icon(最低版本1.1.0)
durationNumber否提示的延迟时间，单位毫秒，默认:1500
maskBoolean否是否显示透明蒙层，防止触摸穿透，默认:false
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功与否都会执行)

1.1.1 显示消息提示框

icon有效值说明如下： 、success：icon默认值，用于显示成功图标，title文本最多显示 7 个汉字长度； 2、loading：显示加载图标，此时 title 文本最多显示 7 个汉字长度； 3、none：不显示图标，此时 title 文本最多可显示两行（最低版本1.9.0）。

在这里插入图片描述

js文件

 data: {

  },
  showToast: function () {
    wx.showToast({
      title: '智慧云工具箱',
      duration: 70000
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

    <view class='demo-box'>
      <view class='title'>(1) 显示消息提示框</view>
      <button type="primary" bindtap="showToast">显示Toast</button>
    </view>

在这里插入图片描述在这里插入图片描述

1.1.2 关闭消息提示框

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

在这里插入图片描述

js文件

  hideToast: function () {
    wx.hideToast()
  },


<font color=#999AAA >json文件
```javascript
{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

    <view class='demo-box'>
      <view class='title'>(2) 关闭消息提示框</view>
      <button type="primary" bindtap="hideToast">关闭Toast</button>
    </view>
  </view>

在这里插入图片描述在这里插入图片描述

2. 加载提示框

2.2.1 显示加载提示框

小程序使用wx.showLoading(OBJECT)显示loading提示框，该接口从基础库 1.1.0 开始支持，低版本需做兼容处理。其OBJECT参数说明如表所示
参数类型必填说明
titleString是提示的内容
maskBoolean否是否显示透明蒙层，防止触摸穿透，默认: false
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功与否都执行)
注：这种提示框不会自动消失，需主动调用 wx.hideLoading 才能关闭提示框。

在这里插入图片描述

js文件

  showLoading: function () {
    wx.showLoading({
      title: '智慧云工具箱！'
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

<view class='demo-box'>
      <view class='title'>(1) 显示加载提示框</view>
      <button type="primary" bindtap="showLoading">显示Loading</button>
    </view>

在这里插入图片描述在这里插入图片描述

2.2.2 关闭加载提示框

小程序使用wx.hideLoading()关闭loading 提示框，该接口从基础库 1.1.0 开始支持，低版本需做兼容处理。

在这里插入图片描述

js文件

  hideLoading: function () {
    wx.hideLoading()
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

<view class='demo-box'>
      <view class='title'>(2) 关闭加载提示框</view>
      <button type="primary" bindtap="hideLoading">关闭Loading</button>
    </view>

在这里插入图片描述在这里插入图片描述

3. 模态弹窗

小程序使用wx.showModal(OBJECT)显示模态弹窗，其OBJECT参数说明如表所示。

参数类型必填说明
titleString是提示的标题
contentString是提示的内容
showCancelBoolean否是否显示取消按钮，默认为true
cancelTextString否取消按钮的文字，默认为"取消"，最多4个字符
cancelColorHexColor否取消按钮的文字颜色，默认为"#000000"
confirmTextString否确定按钮的文字，默认为"确定"，最多4个字符
confirmColorHexColor否确定按钮的文字颜色，默认为"#3CC51F"
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功与否都会执行)

其中success返回参数说明如表所示。

参数类型说明
confirmBoolean为true 时，表示用户点击了确定按钮
cancelBoolean为true时，表示用户点击了取消（用于Android系统区分点击蒙层关闭还是点击取消按钮关闭)

在这里插入图片描述

js文件

  showModal1:function(){
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗（有取消按钮）-智慧云工具箱',
      success: function (res) {
        if (res.confirm) {
          console.log('确定按钮被点击')
        } else if (res.cancel) {
          console.log('取消按钮被点击')
        }
      }
    })
  },
  showModal2: function () {
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗（无取消按钮）-智慧云工具箱',
      showCancel:false
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

 <view class='page-body'>
    <view class='demo-box'>
      <view class='title'>(1)有【取消】按钮的模态弹窗</view>
      <button type="primary" bindtap="showModal1">显示Modal</button>
    </view>
    <view class='demo-box'>
      <view class='title'>(2)无【取消】按钮的模态弹窗</view>
      <button type="primary" bindtap="showModal2">显示Modal</button>
    </view>
  </view>

在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

4. 操作菜单

小程序使用wx.showActionSheet(OBJECT)显示从底部浮出的操作菜单，其OBJECT参数说明如下表所示。
参数类型必填说明
itemListString Array是按钮选项的文字数组，数组长度最大为6个
itemColorHexColor否按钮选项的文字颜色，默认为"#000000"
successFunction否接口调用成功的回调函数，详见返回参数说明
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功与否都执行)
其中success返回参数说明如下表所示。
参数类型说明
taplndexNumber用户点击的按钮，从上到下的顺序，从0开始

在这里插入图片描述

js文件

data: {
  
  },
  showActionSheet: function () {
    wx.showActionSheet({
      itemList: ['智慧云工具箱菜单1', '智慧云工具箱菜单2', '智慧云工具箱菜单3', '智慧云工具箱菜单4', '智慧云工具箱菜单5','智慧云工具箱菜单6'],
      success: function (res) {
        console.log(res.tapIndex)
      },
      fail: function (res) {
        console.log(res.errMsg)
      }
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

    <view class='demo-box'>
      <view class='title'>显示操作菜单</view>
      <button type="primary" bindtap="showActionSheet">显示ActionSheet</button>
    </view>

在这里插入图片描述在这里插入图片描述

二、 导航条设置

2.1 当前页面标题设置

小程序使用wx.setNavigationBarTitle(OBJECT)动态设置当前页面的标题，其OBJECT参数说明如表所示。
参数类型必填说明
titleString是页面标题
successFunction否接口调用成功的回调图数
failFunction否接口调用失败的回调图数
completeFunction否接口调用结束的回调图数(调用成功与否都执行)

在这里插入图片描述

js文件

  data: {
    title:''
  },
  titleInput: function (e) {
    this.setData({title:e.detail.value})
  },
  setTitle: function () {
    let title = this.data.title;
    wx.setNavigationBarTitle({
      title: title
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

<view class='demo-box'>
      <view class='title'>设置导航条标题</view>
      <input type='text' placeholder='请输入自定义的导航条标题' bindinput='titleInput'></input>
      <button type="primary" bindtap="setTitle">设置标题</button>
    </view>

在这里插入图片描述在这里插入图片描述

2.2 导航条加载动画

微信小程序分别使用： 1、wx.showNavigationBarLoading()在当前页面显示导航条加载动画 2、wx.hideNavigationBarLoading()在当前页面隐藏导航条加载动画。

在这里插入图片描述

js文件

 data: {
  
  },
  showLoading: function () {
    wx.showNavigationBarLoading()
  },
  hideLoading: function () {
    wx.hideNavigationBarLoading()
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

 <view class='demo-box'>
      <view class='title'>(1) 显示导航条加载动画</view>
      <button type="primary" bindtap="showLoading">显示加载动画</button>
    </view>
    <view class='demo-box'>
      <view class='title'>(2) 关闭导航条加载动画</view>
      <button type="primary" bindtap="hideLoading">关闭加载动画</button>
    </view>

在这里插入图片描述在这里插入图片描述

在这里插入图片描述在这里插入图片描述

2.3 导航条颜色设置

微信小程序使用wx.setNavigationBarColor(OBJECT)设置导航条颜色，该接口从基础库 1.4.0 开始支持，低版本需做兼容处理。其OBJECT参数说明如表所示。
参数类型必填说明
frontcolorstring是前景颜色值，包括按钮、标题、状态栏的颜色，仅支持#fff和#000000(不支持颇色单词或缩写成#fff的形式)
backgroundcolorstring是背景颜色值。有效值为十六进制颜色
animationObject否动画效果
animation.durationNumber否动画变化时间，默认0，单位:笔秒
animation.timingFunestring否动画变化方式，默认linear
suecessFunction否接口调用成功的回调函数。返回String类型参数errMsg表示调用结果
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功与否都执行)
1、animation.timingFunc有效值如下： 2、linear：动画从头到尾的速度是相同的； 3、easeIn：动画以低速开始； 4、easeOut：动画以低速结束； 5、easeInOut：动画以低速开始和结束。

在这里插入图片描述

js文件

 setColor:function(){
    wx.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#FFF',
      animation: {
        duration: 2000,
        timingFunc: 'easeInOut'
      }
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

 <view class='demo-box'>
      <view class='title'>设置导航条颜色</view>
      <button type="primary" bindtap="setColor">设置颜色</button>
    </view>

在这里插入图片描述在这里插入图片描述

三、 tabBar设置

3.1 tabBar标记

3.1.1 设置tabBar标记

小程序使用wx.setTabBarBadge(OBJECT)为tabBar某一项的右上角添加文本，该接口从基础库 1.9.0 开始支持，低版本需做兼容处理。 其OBJECT 参数说明如表所示。
参数类型必填说明
indlexNumber是tabBar的哪—项，从左边算起，从O开始计数
textString是显示的文本，超过3个字符则显示成“…"
successFunction否接口调用成功的回调函数
failEunction否查接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功与否都执行)

在这里插入图片描述

js文件

  //设置文本
  setText: function () {
    wx.setTabBarBadge({
      index: 1,
      text: '99'
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

    <view class='demo-box'>
      <view class='title'>右上角文本设置</view>
      <button type="primary" size='mini' bindtap="setText">添加文本</button>
    </view>

在这里插入图片描述在这里插入图片描述

3.1.2 移除tabBar标记

小程序使用wx.removeTabBarBadge(OBJECT)移除 tabBar 某一项右上角的文本，该接口从基础库 1.9.0 开始支持，低版本需做兼容处理。
其OBJECT 参数说明如表所示。

参数类型必填说明
indexNumber是tabBar的哪—项,从左边算起，从0开始计数
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（(调用成功与否都执行)

在这里插入图片描述

js文件

  //取消文本
  removeText: function () {
    wx.removeTabBarBadge({
      index: 1
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

    <view class='demo-box'>
      <view class='title'>右上角文本设置</view>
      <button type="primary" size='mini' bindtap="removeText">取消文本</button>
    </view>

在这里插入图片描述在这里插入图片描述

3.2 tabBar红点

3.2.1 显示tabBar红点

小程序使用wx.showTabBarRedDot(OBJECT)显示tabBar某一项的右上角的红点，该接口从基础库 1.9.0 开始支持，低版本需做兼容处理。
其OBJECT 参数说明如表所示。

参数类型必填说明
indexNumber是tabBar的哪—项,从左边算起，从0开始计数
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（(调用成功与否都执行)

在这里插入图片描述

js文件

  //显示红点
  showRedDot: function () {
    wx.showTabBarRedDot({
      index: 1,
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

    <view class='demo-box'>
      <view class='title'>右上角红点设置</view>
      <button type="primary" size='mini' bindtap="showRedDot">添加红点</button>
    </view>

在这里插入图片描述在这里插入图片描述

3.2.2 隐藏tabBar红点

小程序使用wx.hideTabBarRedDot(OBJECT)隐藏tabBar某一项的右上角的红点，该接口从基础库 1.9.0 开始支持，低版本需做兼容处理。 其OBJECT 参数说明如表所示。
参数类型必填说明
indexNumber是tabBar的哪—项,从左边算起，从0开始计数
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（(调用成功与否都执行)

在这里插入图片描述

js文件

  //隐藏红点
  hideRedDot: function () {
    wx.hideTabBarRedDot({
      index: 1,
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

    <view class='demo-box'>
      <view class='title'>右上角红点设置</view>
      <button type="primary" size='mini' bindtap="hideRedDot">取消红点</button>
    </view>

在这里插入图片描述在这里插入图片描述

3.3 onTabItemTap

在小程序中，点击 tabBar中的任一tab时会触发onTabItemTap(item)，该函数从基础库1.9.0开始支持，低版本需做兼容处理

3.4 设置tabBar样式

3.4.1 设置tabBar整体样式

小程序使用wx.setTabBarStyle(OBJECT)动态设置tabBar的整体样式，该接口从基础库 1.9.0 开始支持，低版本需做兼容处理。 其OBJECT 参数说明如表所示。
参数类型说明
colorHexColortab上的文字默认颜色
selectedcolorHexcolortab上的文字选中时的颜色
backgroundColorHexColortab的背景色
borderstyleStringtabbar上边框的颜色，仅支持black/white
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功与否都执行)

在这里插入图片描述

js文件

  //设置tabBar整体样式
  setBarStyle: function () {
    wx.setTabBarStyle({
      color: '#FF0000',
      selectedColor: '#0000FF'
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

    <view class='demo-box'>
      <view class='title'>tabBar样式设置</view>
      <button type="primary" size='mini' bindtap="setBarStyle">整体设置</button>
      <button type="primary" size='mini' bindtap="resetBarStyle">还原</button>
    </view>

在这里插入图片描述在这里插入图片描述

3.4.2 设置tabBar单项样式

小程序使用wx.setTabBarItem(OBJECT)动态设置tabBar某一项的内容，该接口从基础库 1.9.0 开始支持，低版本需做兼容处理。 其OBJECT 参数说明如表所示。
参数类型必填说明
indexNumber是tabBar的哪一项，从左边算起
textString否tab 上按钮文字
iconPathString否图片路径，icon大小限制为40kb，建议尺寸为81px * 81px，当postion为top时，此参数无效，不支持网络图片
selectedlconPathString否选中时的图片路径，icon大小限制为40kb，建议尺寸为81px * 81px，当postion为top 时，此参数无效
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功与否都执行)

在这里插入图片描述

js文件

  //设置tabBar单项样式
  setBarItemStyle: function () {
    wx.setTabBarItem({
      index: 1,
      text: '首页',
      iconPath: 'http://inews.gtimg.com/newsapp_ls/0/14103180726/0',
      selectedIconPath: 'http://inews.gtimg.com/newsapp_ls/0/14103181160/0'
    })
  },
    //还原tabBar样式
  resetBarStyle: function () {
    wx.setTabBarItem({
      index: 1,
      text: 'tabBar例题',
      iconPath: 'http://inews.gtimg.com/newsapp_ls/0/14103182831/0',
      selectedIconPath: 'http://inews.gtimg.com/newsapp_ls/0/14103183127/0'
    })

    wx.setTabBarStyle({
      color: '#000000',
      selectedColor: '#1AAD19'
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

    <view class='demo-box'>
      <view class='title'>tabBar样式设置</view>
      <button type="primary" size='mini' bindtap="setBarItemStyle">单项设置</button>
      <button type="primary" size='mini' bindtap="resetBarStyle">还原</button>
    </view>

在这里插入图片描述在这里插入图片描述

在这里插入图片描述在这里插入图片描述

3.5 tabBar

3.5.1 显示tabBar

小程序使用wx.showTabBar(OBJECT)显示 tabBar，该接口从基础库 1.9.0 开始支持，低版本需做兼容处理。其OBJECT 参数说明如表所示。
参数类型必填说明
animationBoolean否
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数〔调用成功与否都执行)

在这里插入图片描述

js文件

  //显示tabBar
  showTabBar: function () {
    wx.showTabBar({})

  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

    <view class='title'>tabBar的显示与隐藏</view>
      <button type="primary" size='mini' bindtap="showTabBar">显示tabBar</button>
    </view>

在这里插入图片描述在这里插入图片描述

3.5.2 隐藏tabBar

小程序使用wx.hideTabBar(OBJECT)隐藏 tabBar，该接口从基础库1.9.0 开始支持，低版本需做兼容处理。其OBJECT 参数说明如表所示。
参数类型必填说明
animationBoolean否
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数〔调用成功与否都执行)

在这里插入图片描述

js文件

  //隐藏tabBar
  hideTabBar: function () {
    wx.hideTabBar({})
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

     <view class='title'>tabBar的显示与隐藏</view>
         <button type="primary" size='mini' bindtap="hideTabBar">隐藏tabBar</button>
    </view>

在这里插入图片描述在这里插入图片描述

四、 页面导航

4.1 跳转新页面

小程序使用wx.navigateTo(OBJECT)保留当前页面，并在当前页面上方打开应用内指定的新页面。这种打开方式可以点击新页面左上角的返回按钮或使用wx.navigateBack接口返回到原页面。其OBJECT参数说明如表所示。
参数类型必填说明
urlString是需要跳转的应用内非 tabBar的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，多个参数用&分隔;如’path?key=value&key2=value2&…keyN=valueN’
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功与否都会执行)

在这里插入图片描述

js文件

navigateTo: function () {
    wx.navigateTo({
      url: '/pages/zhygjx/new/new',
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

    <view class='demo-box'>
      <view class='title'>(1)wx.navigateTo</view>
      <button type="primary" size='mini' bindtap="navigateTo">跳转新页面</button>
    </view>

在这里插入图片描述在这里插入图片描述

4.2 返回指定页面

小程序使用wx.navigateBack(OBJECT)关闭当前页面，返回上一页面或多级页面。 OBJECT 参数说明如表所示。
参数类型必填说明
deltaNumber1返回的页面数，如果delta大于现有页面数，则返回到首页

在这里插入图片描述

js文件

  navigateBack:function() {
    wx.navigateBack({})
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

    <view class='demo-box'>
      <view class='title'>(2)wx.navigateBack</view>
      <button type="primary" size='mini' bindtap="navigateBack">返回首页</button>
    </view>

在这里插入图片描述在这里插入图片描述

4.3 当前页面重定向

小程序使用wx.redirectTo(OBJECT)关闭当前页面内容，重定向到应用内的某个页面。 OBJECT 参数说明如表所示。
参数类型必填说明
urlString是需要跳转的应用内非tabBar的页面的路径，路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连，不同参数用&分隔;如 ‘path?key=value&key2=value2’
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功与否都执行)

在这里插入图片描述

js文件

  redirectTo: function () {
    wx.redirectTo({
      url: '/pages/zhygjx/new/new',
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

    <view class='demo-box'>
      <view class='title'>(3)wx.redirectTo</view>
      <button type="primary" size='mini' bindtap="redirectTo">当前页面重定向</button>
    </view>

在这里插入图片描述在这里插入图片描述

4.4 重启页面

小程序使用wx.reLaunch(OBJECT)关闭所有页面，重新打开到应用内的某个页面。该接口从基础库 1.1.0 开始支持，低版本需做兼容处理。 其OBJECT 参数说明如表所示。
参数类型必填说明
urlString是―需要跳转的应用内页面路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔;如’path?key=value&key2=value2’，如果跳转的页面路径是tabBar页面则不能带参数
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功与否都执行)

在这里插入图片描述

js文件

  reLaunch:function(){
    wx.reLaunch({
      url: '/pages/zhygjx/new/new',
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

    <view class='demo-box'>
      <view class='title'>(4)wx.reLaunch</view>
      <button type="primary" size='mini' bindtap="reLaunch">重启页面</button>
    </view>

在这里插入图片描述在这里插入图片描述

4.5 切换tabBar页面

小程序使用wx.switchTab(OBJECT)跳转到指定的tabBar页面，并关闭其他页面。 其OBJECT 参数说明如表所示。
参数类型必填说明
urlString是需要跳转的tabBar页面的路径（需在app.,json的tabBar字段定义的页面)，路径后不能带参数
successFunction否接调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功与否都执行)

在这里插入图片描述

js文件

  switchTab: function () {
    wx.switchTab({
      url: '/pages/zhygjx/tabBar/tabBar',
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

    <view class='demo-box'>
      <view class='title'>(5)wx.switchTab</view>
      <button type="primary" size='mini' bindtap="switchTab">切换到tabBar例题页面</button>
    </view>

在这里插入图片描述在这里插入图片描述

五、 动画

 小程序组件拥有animation属性来显示动画，其动画效果实现需要三个步骤：
 （1）创建动画实例；
 （2）通过调用实例的方法来描述动画；
 （3）通过动画实例的export方法导出动画数据传递给组件的animation属性。

5.1 动画实例

小程序使用wx.createAnimation(OBJECT)可以创建一个动画实例animation。 其OBJECT参数说明如表所示。
参数类型必填默认值说明
durationlnteger否400动画持续时间,单位ms
timingFunetionString否“linear”定义动画的效果
delaylnteger否0动画延迟时间，单位ms
transformOriginstring否"50%50%0设置transform-origin
timingFunction 有效值如下： 
1、linear：动画从头到尾的速度是相同的；
2、ease：动画以低速开始，然后加快，在结束前变慢；
3、ease-in：动画以低速开始；
4、ease-in-out：动画以低速开始和结束；
5、ease-out：动画以低速结束；
6、step-start：动画第一帧就跳至结束状态直到结束；
7、step-end：动画一直保持开始状态，最后一帧跳到结束状态。

5.2 动画描述

动画实例可以调用animation对象的相关方法来描述动画，调用结束后会返回自身。 
animation对象的方法可以分为6类，分别用于控制组件的：
1、样式
2、旋转
3、缩放
4、偏移
5、倾斜
6、矩阵变形

5.2.1 控制组件样式的方法

控制组件样式的方法说明如下表所示。
方法参数说明
opacityvalue透明庶，参数范围0~1
backgroundcolorcolor颜色值
widthlength长度值，如果传入Number则默认使用px，可传入其他自定义单位的长度值
heightlength长度值，如果传入 Number则默认使用px，可传入其他自定义单位的长度值
toplength长度值，如果传入Number则默认使用px。可传入其他自定义单位的长度值
leftlength长度值，如果传入Number则默认使用px，可传入其他自定义单位的长度值
bottomlength长度值，如果传入Number则默认使用px，可传入其他自定义单位的长度值
rightlength长度值，如果传入Number则默认使用px。可传入其他自定义单位的长度值

5.2.2 控制组件旋转的方法

控制组件旋转的方法说明如下表所示。
方法参数说明
rotatedegdeg的范围-180~180，从原点顺时针旋转一个deg角度
rotatexdegdeg的范围-180~180，在X轴旋转一个deg角度
rotateYdegdeg的范围-180~180，在Y轴旋转一个deg角度
rotatezdegdeg的范围-180~180，在Z轴旋转一个deg角度
rotatesd(xy,z,deg)同transform-function rotate3d

在这里插入图片描述

js文件

  //旋转
  rotate: function () {
    this.animation.rotate(45).step()
    this.setData({ animation: this.animation.export() })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

      <button type="primary" size='mini' bindtap="rotate">旋转</button>

wxss文件

.animation-view{
  width: 660rpx;
  height: 220rpx;
  background-color: lightgreen;
  margin: 20rpx auto;
  line-height: 220rpx;
}

button{
  margin: 10rpx;
}

在这里插入图片描述在这里插入图片描述

5.2.3 控制组件缩放的方法

控制组件缩放的方法说明如下表所示。
方法参数说明
scalesx.[sy]一个参数时，表示在X轴、Y轴同时缩放sx倍数;两个参数时表示在X轴缩放sx倍数，在Y轴缩放sy倍数
scalexsx在X轴缩放sx倍数
scaleYsy在Y轴缩放sy倍数
scalezsz在Z轴缩放sy倍数
scale3d(sx,sy,sz)在X轴缩放sx倍数，在Y轴缩放sx倍数，在Z轴缩放sz倍数

在这里插入图片描述

js文件

  //缩放
  scale: function () {
    this.animation.scale(0.5).step()
    this.setData({ animation: this.animation.export() })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

      <button type="primary" size='mini' bindtap="scale">缩放</button>

wxss文件

.animation-view{
  width: 660rpx;
  height: 220rpx;
  background-color: lightgreen;
  margin: 20rpx auto;
  line-height: 220rpx;
}

button{
  margin: 10rpx;
}

在这里插入图片描述在这里插入图片描述

5.2.4 控制组件偏移的方法

控制组件偏移的方法说明如下表所示。
方法参数说明
translatetx.[sy]一个参数时，表示在X轴、Y轴同时缩放tx倍数;两个参数时表示在X轴缩放tx倍数，在Y轴缩放sy倍数
translateXtx在X轴缩放tx倍数
translateYty在Y轴缩放ty倍数
translateZtz在Z轴缩放ty倍数
translatesd(tx,ty,tz)在X轴缩放sx倍数，在Y轴缩放tx倍数，在Z轴缩放tz倍数

在这里插入图片描述

js文件

  //偏移
  translate: function () {
    this.animation.translate(100, 50).step()
    this.setData({ animation: this.animation.export() })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

      <button type="primary" size='mini' bindtap="translate">偏移</button>

wxss文件

.animation-view{
  width: 660rpx;
  height: 220rpx;
  background-color: lightgreen;
  margin: 20rpx auto;
  line-height: 220rpx;
}

button{
  margin: 10rpx;
}

在这里插入图片描述在这里插入图片描述

5.2.5 控制组件倾斜的方法

控制组件倾斜的方法说明如下表所示。
方法参数说明
skewax,[ay]参数范围-180~180;一个参数时，Y轴坐标不变，X轴坐标延顺时针倾斜ax度;两个参数时，分别在X轴倾斜ax度，在Y轴倾斜ay度
skewxax参数范围-180~180;Y轴坐标不变，X轴坐标延顺时针倾斜ax度
skewYay参数范围-180~180;X轴坐标不变，Y轴坐标延顺时针倾斜ay度

在这里插入图片描述

js文件

  //倾斜
  skew: function () {
    this.animation.skewX(45).step()
    this.setData({ animation: this.animation.export() })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

      <button type="primary" size='mini' bindtap="skew">倾斜</button>

wxss文件

.animation-view{
  width: 660rpx;
  height: 220rpx;
  background-color: lightgreen;
  margin: 20rpx auto;
  line-height: 220rpx;
}

button{
  margin: 10rpx;
}

在这里插入图片描述在这里插入图片描述

5.2.6 控制组件矩阵变形的方法

控制组件矩阵变形的方法说明如下表所示。
方法参数说明
matrix(a,b,c,d,tx,ty)同transform-function matrix
matrix3d同transform-function matrix3d

在这里插入图片描述

js文件

  //同时动画
  sync: function () {
    this.animation.rotate(45).scale(0.5).translate(100, 50).skewX(45).step()
    this.setData({ animation: this.animation.export() })
  },
  //依次动画
  queue: function () {
    this.animation.rotate(45).step().scale(0.5).step().translate(100, 50).step().skewX(45).step()
    this.setData({ animation: this.animation.export() })
  },
  //还原
  reset: function () {
    this.animation.rotate(0).scale(1).translate(0, 0).skewX(0).step()
    this.setData({ animation: this.animation.export() })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

      <button bindtap="sync">同时动画</button>
      <button bindtap="queue">依次动画</button>
      <button bindtap="reset">还原</button>

wxss文件

.animation-view{
  width: 660rpx;
  height: 220rpx;
  background-color: lightgreen;
  margin: 20rpx auto;
  line-height: 220rpx;
}

button{
  margin: 10rpx;
}

5.3 动画导出

在声明完animation对象并描述了动画方法后，还需要使用export()将该对象导出到组件的animation属性中，方可使得组件进行动画效果。

js文件

//1. 创建animation对象
var animation = wx.createAnimation()
//2. 描述第一个动画
animation.scale(2).step()
//3.导出至组件的动画属性
this.setData({animationData:animation.export()})
//4. 描述第二个动画
animation.rotate(180).step()
//5.导出至组件的动画属性
this.setData({animationData:animation.export()})

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

<view animation="{{animationData}}"></view>

在这里插入图片描述在这里插入图片描述

在这里插入图片描述在这里插入图片描述

在这里插入图片描述在这里插入图片描述

六、 页面位置

小程序使用wx.pageScrollTo(OBJECT)将页面滚动到目标位置，该接口从基础库 1.4.0 开始支持，低版本需做兼容处理。其OBJECT参数说明如表所示。
参数类型必填说明
serollTopNumber是滚动到页面的目标位置(单位px)
durationNumber否滚动动画的时长。默认30oms，单位ms

在这里插入图片描述

js文件

  //回到顶部
  backToTop:function(){
    wx.pageScrollTo({
      scrollTop: 0,
      duration:2000
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

    <view class='demo-box'>
      <view class='title'>wx.pageScrollTo(OBJECT)的用法</view>
      <view class='test'>这是一个高度超过手机屏幕的组件</view>
      <button type="primary" bindtap="backToTop">回到顶部</button>
    </view>

在这里插入图片描述在这里插入图片描述

七、 绘图

7.1 绘制矩形

1. 创建矩形 小程序使用画布对象的rect方法创建矩形，然后使用fill()或stroke()方法在画布上填充实心矩形或描边空心矩形。 
参数解释如下：
x：Number类型，矩形左上角点的x坐标；
y：Number类型，矩形左上角点的y坐标；
width：Number类型，矩形的宽度；
height：Number类型，矩形的高度。

在这里插入图片描述

js文件

 fillRect:function(){
    let ctx = this.ctx;
    ctx.rect(50, 50, 200, 200)
    ctx.setFillStyle('orange')
    ctx.fill()
    ctx.draw()
  },
  strokeRect: function () {
    let ctx = this.ctx;
    ctx.rect(100, 100, 100, 100)
    ctx.setStrokeStyle('purple')
    ctx.stroke()
    ctx.draw()
  },
  clearRect: function () {
    let ctx = this.ctx;
    ctx.clearRect(0, 0, 300, 300)
    ctx.draw()
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //创建画布上下文
    this.ctx = wx.createCanvasContext('myCanvas')
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

<view class='demo-box'>
      <view class='title'>绘制矩形</view>
      <canvas canvas-id='myCanvas' style='border:1rpx solid'></canvas>
      <button type='primary' size='mini' bindtap='fillRect'>填充矩形</button>
      <button type='primary' size='mini' bindtap='strokeRect'>描边矩形</button>
      <button type='primary' size='mini' bindtap='clearRect'>清空画布</button>
    </view>

wxss文件


button{
  margin: 10rpx;
}

在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

7.2 绘制路径

路径（Path）是绘制图形轮廓时画笔留下的轨迹，也可以理解为画笔画出的像素点组成的线条。多个点形成线段或曲线，不同的线段或曲线相连接又形成了各种形状效果。 绘制路径主要有以下4种方法： 1、beginPath()：用于新建一条路径，也是图形绘制的起点。每次调用该方法都会清空之前的绘图轨迹记录，重新开始绘制新的图形。 2、closePath()：该方法用于闭合路径。当执行该方法时会从画笔的当前坐标位置绘制一条线段到初始坐标位置来闭合图形。此方法不是必需的，若画笔的当前坐标位置就是初始坐标位置，则该方法可以省略不写。 3、stroke()：在图形轮廓勾勒完毕后需要执行该方法才能正式将路径渲染到画布上。 4、fill()：可以使用该方法为图形填充颜色，生成实心图形。若并未执行closePath()方法来闭合图形，则在此方法被调用时会自动生成线段连接画笔当前坐标位置和初始坐标位置，形成闭合图形然后再进行填充颜色。

在这里插入图片描述

绘制线段
js文件

 //绘制基本图形
  drawSample: function () {
    let ctx = this.ctx
    //绘制三角形
    ctx.beginPath()
    ctx.moveTo(150, 75)
    ctx.lineTo(225, 225)
    ctx.lineTo(75, 225)
    ctx.closePath()
  },
  //描边路径
  strokePath:function(){
    let ctx = this.ctx
    this.drawSample()
    ctx.setStrokeStyle('red')
    ctx.stroke()
    ctx.draw()
  },
  //填充路径
  fillPath: function () {
    let ctx = this.ctx
    this.drawSample()
    ctx.setFillStyle('blue')
    ctx.fill()
    ctx.draw()
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

 <view class='demo-box'>
      <view class='title'>绘制线段</view>
      <canvas canvas-id='myCanvas' style='border:1rpx solid'></canvas>
      <button type='primary' size='mini' bindtap='strokePath'>描边路径</button>
      <button type='primary' size='mini' bindtap='fillPath'>填充路径</button>
    </view>

wxss文件


button{
  margin: 10rpx;
}

在这里插入图片描述在这里插入图片描述

绘制圆弧

【微信小程序开发小白零基础入门】微信小程序框架【建议收藏】

在这里插入图片描述

js文件

 onLoad: function (options) {
    //创建画布上下文
    const ctx = wx.createCanvasContext('myCanvas')

    //设置填充颜色为黄色
    ctx.setFillStyle('yellow')

    //绘制圆形的脸，并填充为黄色
    ctx.beginPath()
    ctx.arc(150, 150, 80, 0, Math.PI * 2, true)
    ctx.stroke()
    //如果不需要勾勒脸的轮廓，此句可省略
    ctx.fill()

    //设置填充颜色为黑色
    ctx.setFillStyle('black')

    //填充黑色的左眼
    ctx.beginPath()
    ctx.arc(190, 130, 10, 0, Math.PI * 2, true)
    ctx.fill()

    //填充黑色的右眼
    ctx.beginPath()
    ctx.arc(110, 130, 10, 0, Math.PI * 2, true)
    ctx.fill()

    //绘制带有弧度的笑容
    ctx.beginPath()
    ctx.arc(150, 160, 50, 0, Math.PI, false)
    ctx.stroke()

    //全部绘制到画布上
    ctx.draw()
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

<view class='demo-box'>
      <view class='title'>绘制圆弧</view>
      <canvas canvas-id='myCanvas' style='border:1rpx solid'></canvas>
    </view>

在这里插入图片描述

绘制曲线

【微信小程序开发小白零基础入门】微信小程序框架【建议收藏】

在这里插入图片描述

js文件

 onLoad: function (options) {
    //创建画布上下文
    const ctx = wx.createCanvasContext('myCanvas')

    //设置填充颜色为红色
    ctx.setFillStyle('red');

    //三次曲线
    ctx.beginPath();
    ctx.moveTo(90, 55);
    ctx.bezierCurveTo(90, 52, 85, 40, 65, 40);
    ctx.bezierCurveTo(35, 40, 35, 77.5, 35, 77.5);
    ctx.bezierCurveTo(35, 95, 55, 117, 90, 135);
    ctx.bezierCurveTo(125, 117, 145, 95, 145, 77.5);
    ctx.bezierCurveTo(145, 77.5, 145, 40, 115, 40);
    ctx.bezierCurveTo(100, 40, 90, 52, 90, 55);
    ctx.fill();

    //绘制到画布上
    ctx.draw()
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

 <view class='demo-box'>
      <view class='title'>使用三次贝塞尔曲线绘制爱心</view>
      <canvas canvas-id='myCanvas' style='border:1rpx solid'></canvas>
    </view>

在这里插入图片描述

7.3 绘制文本

1、填充文本
2、设置字体大小
3、设置文本基准线
4、设置文本对齐方式
5、设置字体风格

【微信小程序开发小白零基础入门】微信小程序框架【建议收藏】

在这里插入图片描述

js文件

onLoad: function (options) {
    const ctx = wx.createCanvasContext('myCanvas')
    //设置字号
    ctx.setFontSize(40)
    
    //设置文本水平基准线
    ctx.setTextBaseline('bottom')
    //填充文字
    ctx.fillText('你好', 30, 150)

    //设置填充颜色
    ctx.setFillStyle('green')
    //设置文本水平基准线
    ctx.setTextBaseline('top')
    //填充文字
    ctx.fillText('智慧云工具箱', 60, 150)
    ctx.draw()
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

 <view class='demo-box'>
      <view class='title'>绘制文本</view>
      <canvas canvas-id='myCanvas' style='border:1rpx solid'></canvas>
    </view>

在这里插入图片描述

八、 下拉刷新

8.1 监听下拉刷新

小程序在Page中定义了onPullDownRefresh处理函数，用于监听当前页面用户下拉刷新事件。

8.2 开始下拉刷新

小程序使用wx.startPullDownRefresh(OBJECT)触发下拉刷新动画，效果与用户手动下拉刷新一致。该接口从基础库 1.5.0 开始支持，低版本需做兼容处理。 其OBJECT参数说明如表所示。
参数类型必填说明
successFunction否接口调用成功的回调函数。返回String类型参数errMsg表示调用结果
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功与否都执行)

8.3 停止下拉刷新

小程序使用wx.stopPullDownRefresh()停止当前页面下拉刷新。

在这里插入图片描述

js文件

 //开始下拉刷新
  startPullDown:function(){
    wx.startPullDownRefresh({
      success: function (res) {
        console.log(res.errMsg)
      }
    })

  },
  //停止下拉刷新
  stopPullDown: function () {
    wx.stopPullDownRefresh()
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"

}

wxml文件

 <view class='demo-box'>
      <view class='title'>模拟下拉刷新</view>
      <button type='primary' bindtap='startPullDown'>开始下拉</button>
      <button type='primary' bindtap='stopPullDown'>停止下拉</button>
    </view>

wxss文件


button{
  margin: 10rpx;
}

在这里插入图片描述在这里插入图片描述

智慧云工具箱
关注
  • 4
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
微信小程序——小程序的API介绍
hssjsh的博客
09-15 2432
微信小程序——小程序API的基本介绍，以及事件绑定方法
微信小程序API使用大全
01-22
微信小程序中所有API的使用课程
微信小程序的常用API ①
最新发布
2301_76669854的博客
04-18 1781
微信小程序的API是由宿主环境提供的。通俗来说API是一种接口函数，把函数封装起来给开发者使用，这样好多功能都无需开发者去实现，直接调用即可
小程序基础-API
m0_49011098的博客
09-06 1550
单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。​ API 是小程序开发的核心，通过 API 开发者可以获得微信底层封装的高级特性，如网络请求、文件操作、设备信息、地理定位、本地存储等。通过全局函数 getApp 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置。注意：单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。关闭当前页面，跳转到应用内的某个页面。
【小程序】微信小程序常用api的使用，附案例（建议收藏）
11-14 6271
学会使用 微信官方文档 · 小程序 wxapi.js 代码 界面 wxapi.js 代码截图 4.3 wx.uploadFile()上传文件 wxapi.js 案例截图 wxapi.js 代码截图 6- 网络请求 6.1 wx.request() 发起 HTTPS 网络请求 【微信小程序】小程序使用详细教程（建议收藏）
一起学习微信小程序api
promise466的博客
11-15 1792
小程序API 是小程序开发的核心，通过 API 开发者可以获得微信底层封装的高级特性，如网络请求、文件操作、设备信息、地理定位、本地存储等。小程序的 API 以全局对象 wx 为命名空间，格式为 wx.方法名()，可全局调用。接下来我将会介绍几个常用的apiapi的基础、路由、网络请求、界面、用户信息、上传、下载、开放接口介绍之前小编建议，想要掌握小程序api一定要学会阅读去使用！！！
微信小程序学习笔记之登录API与获取用户信息操作图文详解
01-03
本文实例讲述了微信小程序学习笔记之登录API与获取用户信息操作。分享给大家供大家参考，具体如下： 前面介绍了微信小程序跳转页面、传递参数获得数据，这里来分析一下登录API与获取用户信息操作方法。 【小程序...
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
01-03
本文实例讲述了微信小程序学习笔记之表单提交与PHP后台数据交互处理。分享给大家供大家参考，具体如下： 前面一篇结介绍了微信小程序函数定义、页面渲染。这里介绍form表单提交与后台php数据交互处理。 【form表单...
微信小程序学习笔记之函数定义、页面渲染图文详解
12-12
前面一篇介绍了微信小程序目录结构、基本配置。这里再来介绍一下函数定义、页面渲染。 小程序逻辑app.js：定义App函数用来注册一个小程序，包含全局数据和函数，指定小程序的生命周期回调等。整个小程序只有一个 ...
微信小程序学习笔记之目录结构、基本配置图文详解
12-08
本文实例讲述了微信小程序学习笔记之目录结构、基本配置。分享给大家供大家参考，具体如下： 结束了一段时间的学习，开始一段新的学习旅程 —— 微信小程序。现在出去找工作只会PHP、HTML+CSS、JS什么的不够了，...
微信小程序常用API
sdgjah2的博客
11-14 3057
该事件与 App.onUnhandledRejection 的回调时机与参数一致。wx.onPageNotFound(function listener) 监听小程序要打开的页面不存在事件。该事件与 App.onPageNotFound 的回调时机一致。wx.onError(function listener) 监听小程序错误事件。该事件与 App.onError 的回调时机与参数一致。该事件与 App.onThemeChange 的回调时机一致。该事件与 App.onShow 的回调参数一致。
微信小程序开发初学：API - 路由，历经30天
碧海朝天素
03-21 303
关闭所有页面，打开到应用内的某个页面object属性（1）String：需要跳转的应用内页面路径，。如id=123”,})总结上述方法在navigate组件的open-type属性中有提及，作用相同。如跳转到logs页面学好 Python 不论是就业还是做副业赚钱都不错，但要学会 Python 还是要有一个学习规划。最后大家分享一份全套的 Python 学习资料，给那些想学习 Python 的小伙伴们一点帮助！
第一篇：先简单了解一下微信小程序页面结构，怎么创建页面
m0_73991249的博客
02-19 1621
1、下载安装：可以去b站跟着黑马程序员视频步骤，不做过多阐述，就是在第一个windows 642、创建项目打开软件，跟着图片来版本可能不同，样子会有所不同，我懒得按照我的来截图，我用的是黑马程序员的视频截图，但是内容是一样的，图片怎么选你就怎么选就行！记住先“不适用云服务”，不要选别的那些什么【模板】，语言选【基于js】的就行，AppID在这块，链接没用你就按照下面图片来然后就出来了。
微信小程序-页面开发
qq_44715376的博客
01-02 1826
页面开发
小白开发微信小程序22--界面API
hqwest的专栏
03-19 371
微信内置api小程序中的 API 是由宿主环境提供的，通过这些丰富的小程序 API，开发者可以方便的调用微信提供的能力，小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
【微信小程序学习】小程序API
qiaoyangla的博客
05-19 1473
一、API 使用说明 1. 小程序提供了很多实用的方法供开发者使用 2. 小程序全局对象是: wx 3. 所有的 API 都保存在 wx 对象中 二、常用 API 1. 界面交互 a) 显示消息提示框: wx.showToast() b) 显示消息加载框: wx.showLoading() c) 关闭消息提示框: wx.hideToast() d) 关闭消息加载框: wx.hideLoading() 2. 路由跳转 a) wx.navigate...
小程序学习之界面API（一）
baked_donut的博客
03-31 533
1.交互反馈 2.导航条设置 3.tarBar设置 4.页面导航 5.动画 6.页面位置 7.绘图（可单独出去成一块） 8.下拉刷新 285页-355页
全新微信小程序零基础到项目实战1
08-03
本教程是关于微信小程序开发的入门指导课程，适合零基础的学习者。课程内容包括从小程序的基本概念介绍，到实际项目开发的实战经验分享，旨在帮助学员快速掌握微信小程序的开发技能。 在本课程中，学员将学习到如何...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

智慧云工具箱

你的鼓励将是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值