<s id="mvh2b"><strike id="mvh2b"><u id="mvh2b"></u></strike></s>
    1. <rp id="mvh2b"></rp>

      当前位置:首页 > IT教程

      微信小程序常用api

      时间:2021-08-11 14:52:04来源:金橙教程网 作者:admin8 阅读:57次 [手机版]
       

      小程序api

      小程序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事件
      inputbindinput或bind:input文本框的输入事件
      changebindchange或bind:change状态改变时触发
      事件对象的属性列表
      属性类型说明
      typeSrting事件类型
      timeStampInteger

      页面打开到触发事件所经过的毫秒数

      targetObject触发事件的组件的一些属性值集合
      currentTargetObject当前组件的一些属性值集合
      detailObject额外的信息
      touchesArray触摸事件,当前停留在屏幕中的触摸点信息的数组
      changedTouchesArray触摸事件,当前变化的触摸点信息的数组

      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事件来响应文本框的输入事件:

      1. 通过bindinput,可以为文本框绑定输入事件:
      <input bindinput="inputHandler"><input>
      1. 在页面的.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参数对象属性列表
      属性类型是否必选说明
      urlString需要跳转的tabBar页面,路径不能带参数
      successfunction接口调用成功的回调函数
      failfunction接口调用失败的回调函数
      completefunction接口调用结束的回调函数(成功,失败都执行)

      导航到非tabBar页面

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

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

      后退导航

      如果要后退到上一页面或多级页面 则需要指定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()

      相关阅读

      微信怎么开通微店 微信免费开通微店图文教程

      开通微店成为了2014年最热门话题之一,不少商家企业都想乘这移动电商趋势在微店有一番作为。这样就致使了不少人都看重了微信,微信作

      电脑出现无法定位程序输入点于动态链接库该怎么办?

      不知道大家在打开启动电脑上的一些软件时,是否有弹出过这样的错误提示框,而且你又是如何去解决它的呢,下面我来说下无法定位程序输入

      程序设计模式————编程模式

      设计模式的分类 创建型模式&#xff0c;共五种&#xff1a;工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。 结构型模式

      微信小程序实现城市搜索功能(付源码)

      文章目录 效果图功能简介项目结构代码citysearch.wxmlcit

      十个程序员必备的网站推荐和较出名的国外程序员论坛

      十个程序员必备的网站推荐&#xff1a; 程序员的工作和日常生

      分享到:

      IT相关

      程序相关

      推荐文章

      热门文章

      东北老女人嫖老头视频_无遮挡H肉动漫视频在线观看_欧美牲交a欧美牲交aⅴ另类_狼人乱码无限2021芒果