小程序开发 常用 API

常用API

wx.navigateTo (页面跳转)

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

参数
Object object

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
events	Object		否	页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性	类型	说明
eventChannel	EventChannel	和被打开页面进行通信

案例

wxml

<view class="container">
  <button bindtap="tiao">点击跳转</button>
</view>

js

Page({
  // 跳转事件
  tiao(){
  //	跳转到logs页面
    wx.navigateTo({
      url:'/pages/logs/logs'
    })
  }
})

页面效果
点击前

点击按钮后

wx.setStorageSync（本地存储）

参数
string key
本地缓存中指定的 key

any data
需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象

案例

wxml

<view class="container">
  <button bindtap="cun">点击存储</button>
</view>

js

Page({
  // 存储
  cun(){
    wx.setStorageSync('num',555)
  }
})

页面效果
点击前


点击后

wx.getStorageSync （获取本地存储）

参数

string key
本地缓存中指定的 key
返回值
any data
key对应的内容

案例

wxml

<view class="container">
  <button bindtap="qu">点击存储</button>
</view>

js

Page({
  // 存储
  qu(){
    const num = wx.getStorageSync('num')
    console.log(num)
  }
})

页面效果
点击前


点击后

wx.showModal（模态对话框）

显示模态对话框

参数

Object object

属性	类型	默认值	必填	说明
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

属性	类型	说明	最低版本
content	string	editable 为 true 时，用户输入的文本
confirm	boolean	为 true 时，表示用户点击了确定按钮
cancel	boolean	为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）	1.1.0

案例

wxml

<view class="container">
  <button bindtap="mtk">点击跳转</button>
</view>

js

Page({
  // 模态框
  mtk(){
    wx.showModal({
      title: "提示",
      content: "您是否要删除",
      success: (res) => {
        console.log(res)
      }
    })
  }
})

页面效果
点击前


点击后

点击后（确认选项）

点击后（取消选项）

wx.previewImage（图片放大效果）

在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

参数

Object object

属性	类型	默认值	必填	说明	最低版本
urls	Array.		是	需要预览的图片链接列表。2.2.3 起支持云文件ID。
showmenu	boolean	true	否	是否显示长按菜单	2.13.0
current	string	urls 的第一张	否	当前显示图片的链接
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

案例

wxml

<view class="container">
  <button bindtap="tp">点击跳转</button>
</view>

js

Page({
  data:{
    imgs:[
      'https://img0.baidu.com/it/u=3155998395,3600507640&fm=26&fmt=auto&gp=0.jpg',
      'https://img2.baidu.com/it/u=3947572783,1476163811&fm=26&fmt=auto&gp=0.jpg',
      'https://img2.baidu.com/it/u=1704219071,3761829583&fm=26&fmt=auto&gp=0.jpg',
    ]
  },
  mtk(){
    wx.previewImage({
      // 显示第几张图片
      current: this.data.imgs[0],
      // 图片组
      urls: this.data.imgs
    })
  }
})

页面效果
点击前

点击后

wx.navigateBack（回退页面）

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

参数

Object object

属性	类型	默认值	必填	说明
delta	number	1	否	返回的页面数，如果 delta 大于现有页面数，则返回到首页。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

案例

index页面

<view class="container">
  <navigator url="/pages/logs/logs">跳转页面</navigator>
</view>

logs页面

<view class="container log-list">
  我是logs页
  <button bindtap="ht">回退</button>
</view>

logs.js

Page({
  ht(){
    wx.navigateBack({
      delta: 1, // 回退前 delta(默认为1) 页面
    })
  }
})

页面效果
index页面

跳转到 lofs 页

点击后

总结

本篇文章主要讲述了一些在项目中常用的 API 和他们的各种属性