微信小程序常用api_小程序api-优快云博客

本文链接：https://blog.youkuaiyun.com/pauline_/article/details/111304754

小程序API分为如下3大类

1.事件监听API

特点:以on开头,用来监听某些事件的触发
举例:wx.onWindowResize(function callback)监听窗口尺寸变化的事件

2.同步API

特点1:以Sync结尾的API都是同步API
特点2:同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出错误
举例:wx.setStorageSync('key','value')向本地存储中写入内容

3.异步API

特点:类似于jQuery中的$.ajax(options)函数,需要通过success、fail、complete接收调用的结果
举例:wx.request()发起网络数据请求,通过success回调函数接受数据

小程序中常用的事件
类型	绑定方式	事件描述
tap	bindtap或bind:tap	手指触摸后马上离开,类似于HTML中的click事件
input	bindinput或bind:input	文本框的输入事件
change	bindchange或bind:change	状态改变时触发

事件对象的属性列表
属性	类型	说明
type	Srting	事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件,当前变化的触摸点信息的数组

target和currentTarget:target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件

点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层的tap事件处理函数,此时,对于外层的组件来说

e.target指向的是触发事件的源头组件,因此,e.target是触发冒泡事件的内部组件
e.currentTarget指向的是当前正在触发事件的那个组件,因此,e.currentTarget是当前的外层组件

可以调用this.setData(dataObject)方法,给页面data中的数据重新赋值

事件传参:小程序中的事件传参比较特殊,不能在绑定事件的同事为事件处理函数传递参数,例如:下面的代码不能正常工作

<button type="primary" bindtap='btnHandler(123)'>事件传参</button>

可以为组件提供data-*自定义属性传参,其中*代表的是参数的名字,实例代码如下:

<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>

最终:

info会被解析为参数的名字
数值2会被解析为参数的值

在事件处理函数中,通过event.target.dataset.参数名即可获取到具体参数的值,示例代码如下:

btnHandler(event){
//dataset 是一个对象 包含了所有通过data-*传递过来的参数项
    console.log(event.target.datastr)
    //通过 dataset 可以访问到具体参数的值
    console.log(event.target.dataset.info)
}

通过input事件来响应文本框的输入事件:

通过bindinput,可以为文本框绑定输入事件:

<input bindinput="inputHandler"><input>

在页面的.js文件中定义事件处理函数

inputHandler(e){
    //e.detail.value 是变化过后 文本框最新的值
    console.log(e.detail.value)
    }

wx:if

在小程序中,使用wx:if="{{condtion}}" 来判断是否需要渲染该代码块:

<view wx:if="{{condtion}}">True</view>

也可以用wx:elif和wx:else来添加else判断:

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>

block标签(类似vue中的tempate)不会被渲染出来

<block wx:if="{{true}}">
    <view>view1</view>
    <view>view2</view>
</block>

在小程序中直接使用hidden="{{condition}}"也能控制元素的显示与隐藏

<view hidden="{{condtion}}">条件为true隐藏 条件为false显示</view>

if和hidden的对比

运行方式不同

wx:if 以动态创建和移除元素的方式控制元素的展示与隐藏
hidden 以切换样式的方式(display:none/block),控制元素显示与隐藏

使用建议

频繁切换时,建议使用hidden
控制条件复杂时,建议使用wx:if 搭配wx:elif wx:else 进行展示与隐藏的切换

循环 wx:for

通过wx:for 可以根据指定的数组循环渲染重复的组件结构语法示例如下

<view wx:for="{{array}}">
    索引是: {{index}} 当前项是:{{item}}
</view>

收订指定索引和当前项的变量名

使用wx:for-index可以指定当前循环项的索引的变量名
使用wx:for-item 可以指定当前项的变量名

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
    索引是: {{idx}} 当前项是:{{itemName}}
</view>

wx:key

类似Vue列表渲染中的:key 提高渲染效率

//data 数据
data:{
userList:[
    {id:1,name: 'zs'},
    {id:2,name: 'ls'},
    {id:3,name: 'ww'},
]}

//wxml结构
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

导航到tabBar页面

tabBar页面指的是被配置为tabBar的页面,在使用<navigator>组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性,其中:

url表示要跳转的页面的地址,必须以/开头
open-type表示跳转方式必须为switchTab

<navigator url='/pages/message/message' open-type='switchTab'>导航到消息页面</navigator>

导航到非tabBar页面

非tabBar页面指的是没有被配置为tabBar的页面,在使用<navigator>组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性,其中:

url表示要跳转的页面的地址,必须以/开头
open-type表示跳转方式必须为navigate

<navigator url='/pages/message/message' open-type='navigate'>导航到消息页面</navigator>

非tabBar页面可以不用写open-type属性

调用wx.switchTab(Object object)方法可以跳转到tabBar页面

object参数对象属性列表
属性	类型	是否必选	说明
url	string	是	需要跳转的tabBar页面,路径不能带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数(成功,失败都执行)

导航到非tabBar页面

调用wx.navigateTo(Object object)方法可以跳转到非tabBar页面

object参数对象属性列表
属性	类型	是否必选	说明
url	string	是	需要跳转的非tabBar页面,路径不能带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数(成功,失败都执行)

后退导航

如果要后退到上一页面或多级页面则需要指定open-type属性和delta属性

open-type的值必须是navigateBack 表示要进行后退导航
delta的值必须是数字表示要后退的层级

<navigator open-type='navigateBack' delta='1'>返回上一页</navigator>

只是后退到上一页面可以省略delta属性

调用wx.navigateBack(object object)方法可以返回上一页或多级页面

声明式导航传参

navigator组件的url属性用来指定将要跳转到的页面的路径同时,路径后面还可以携带参数

参数与路径之间使用 ? 分割
参数键与参数值用 = 相连
不同参数用 & 分割

<navigator url='/pages/info/info?name=zs&age=20'>跳转到info页面<navigator>

编程式导航传参

调用 wx.navigateTo(object object)方法跳转页面时也可以携带参数

//页面结构
<button bindtap='gotoInfo>跳转到info页面</buoon>

//通过编程式导航 跳转到info页面 并携带参数
gotoInfo(){
    wx.navigateTo({
        url:'pages/info/info?name=ls&gender=男'
    })
   }

在onLoad中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数可以直接在onLoad事件中直接获取到

onLoad:function(options){
    //options就是导航传递过来的参数对象
    console.log(options)
}

停止下拉刷新的效果

当处理完下拉刷新后下拉刷新的loading效果会一直显示不会主动消失所以需要手动隐藏loading效果此时调用wx.stopPullDownRefresh()

启用下拉刷新

全局开启下拉刷新
- 在 app.json 的 window 节点中 , 将 enablePullDownRefresh 设置为 true
局部开启下拉刷新
- 在页面的.json 配置文件中 , 将 enablePullDownRefresh 设置为 true

监听用户下拉动作---下拉刷新

通过onPullDownRefresh: function(){

}

通过onReachBottom()函数即可监听当前页面的上拉触底事件

wx.setNavigationBarTitle(object object) 动态设置当前页面的标题

只能在onReady() 页面初次渲染完成时调用

wx.showToast(object object) 提示框

获取当前设备信息

wx.getSystemInfoSync()