微信小程序--API

小程序API分类 

异步API：通常接受一个object类型参数 例如 wx:request({})

同步API：约定以Sync结尾 例如 wx:setStorageSync()

事件监听API：约定以on开头 例如 wx:onAppHide()

异步API

支持callback 或者 Promise 两种调用方式

1.当接口参数 Object 对象中不包含 success/fail/complete 时默认返回Promise

2.部分接口 如request ， uploadFile 本身就有返回值，因此不支持Promise风格的调用方式，他们

的promisify 需要开发者自行封装

发起网络请求获取服务器的数据，需要使用 wx.request() 接口 API

网络请求

wx.request 请求的域名必须在微信公众平台进行配置，如果使用 wx.request 请求未配置的域名，

在控制台会有相应的报错。

跳过域名的校验的开发

1. 在微信开发者工具中，点击详情按钮，切换到本地详情，将 不校验合法域名、web-view (业务

域名)、TLS版本以及HTTPS证书 勾选上

2. 在真机上，需要点击胶囊区域的分析按钮，在弹框中选择 开发调试，重启小程序后即可

注意事项 ： 这两种方式只适用于开发者工具、小程序的开发版和小 程序的体验版，项目上线前

必须在小程序管理平台进行合法域名的配置

界面交互-loading 提示框

小程序提供了一些用于界面交互的 API，例如： loading 提示框、消息提示框、模态对话框等 API

loading 提示框常配合网络请求来使用，用于增加用户体验，对应的 API 有两个：

1.wx.showLoading() 显示 loading 提示框

wx.showLoading({
    //显示提示的内容,提示内容不易过长，不会自动换行，多出来的部分会自动隐藏
    title：''，
    // 是否展示透明蒙层，放置触摸穿透(true,展示蒙层，不会点击再次触发）
    mask：'true',

})

2.wx.hideLoading() 关闭 loading 提示框

可写在complete回调函数里

注：两者必须配对使用

界面交互-模态对话框-消息提示框

1. wx.showModal() ：模态对话框，常用于询问用户是否执行一些操作

例如：询问用户是否退出登录、是否删除该商品

2. wx.showToast() ：消息提示框，根据用户的某些操作来告知操作的结果

例如：退出成功给用户提示，提示删除成功等

// 点击删除
async handleDel () {
    // showModel 显示模态对话框
    const {confirm} = await wx.showModel({
        title:'提示',
        content:'是否删除该商品',
    })
    
    if(confirm) {
    // showToast 消息提示框
        wx.showToast({
            title:'删除成功'
            icon：'none',
            duration:2000
        })
        
    }else {
      wx.showToast({
          title:'取消删除'
          icon：'error',
          duration:2000
        })
    }

}

本地存储

同步 

存储：wx.setStorageSync()

获取：wx.getStorageSync()

删除：wx.removeStorageSync()

清空：wx.clearStorageSync()

异步

存储：wx.setStorage()

获取：wx.getStorage()

删除：wx.removeStorage()

清空：wx.clearStorage()

page({
// 存储
// 如果存储的是对象类型数据，不需要使用JSON.stringify 和 JSON.parse 进行转化
    setStorage () {
        wx.setStorageSync('本地存储中指定key','需要存储的数据value') // 同步

        wx.setStorage({key:'num',data:1}) // 异步
        wx.setStorage({key:'obj',data:{name:'jerry',age:18}) // 异步
    }
// 获取
    getStorage () {
        const key =  wx.getStorageSync('key') //同步
        console.log(key)

        const key =  wx.getStorage({key:'num'}) // 异步
        
    }
//  删除
    removeStorage () {
    // 从本地移除指定的key的数据和内容
        wx.removeStorageSync('key') //同步

        wx.removeStorage({key:'num'}) // 异步
    }
// 清空
    clearStorage () {
        wx.clearStorageSync() //同步

        wx.removeStorage() // 异步
    }
})

路由与通信

 1. 声明式导航

navigator 组件

绑定属性open-type 

navigate：保留当前页面，跳转到某个页面，但不能跳转到tabbar页面

redirect：关闭当前页面，跳转到某个页面，但不能跳转到tabbar页面

switchTab：跳转到tabbar页面。并关闭其他所有的非tabbar页面

reLaunch：关闭所有页面，跳转到某个页面

navigateBack：关闭当前页面，返回上一页面或多级页面

注：url 后可参数，参数与路径之间用？隔开，参数键与参数值用=相连，不同参数，用&分割

2. 编程式导航

使用小程序提供的 API  

wx.navigateTo ({})：保留当前页面，跳转到某个页面，但不能跳转到tabbar页面

wx.redirectTo ({})：关闭当前页面，跳转到某个页面，但不能跳转到tabbar页面

wx.switchTab({})：跳转到tabbar页面。路径后不能带参数

wx.reLaunch({})：关闭所有页面，跳转到某个页面

wx.navigateBack({})：关闭当前页面，返回上一页面或多级页面

注：url 后参数与路径之间用？隔开，参数键与参数值用=相连，不同参数，用&分割

例如: path?key=value&key2=value2 参数需要在跳转到的页面的 onLoad 钩子函数中通过形参进

行接收

页面处理函数

上拉加载是小程序中常见的一种加载方式，当用户滑动页面到底部时，会自动加载更多的内容，以便用户继续浏览

小程序中实现上拉加载的方式

1. 在app.json 或者 page.json 在配置距离页面底部距离：onReachBottomDistance；默认 50px

2.在页面js中定义onReachBottom事件监听用户上拉加载

.json 文件

{
  "usingComponents": {},
  "onReachBottomDistance":50
}
.js 文件
Page({
    // 监听用户加载
   onReachBottom(){
    // 上拉加载后具体操作
    ......
   }
})

下拉刷新是小程序中常见的一种刷新方式，当用户下拉页面时，页面也会自动刷新，以便用户获取最新的内容

小程序中实现上拉加载更多的方式：

1.在app.json或者page.json中开启允许下拉，同时可以配置窗口、loading样式等

2.在页面.js中定义onPullDownRefresh事件监听用户下拉刷新

.json 文件

{
  "usingComponents": {},
  "onReachBottomDistance":50，
  // 设置同意下拉刷新
  "enablePullDownfresh":true
}
.js 文件
Page({
    // 监听用户下拉刷新
   onPullDownRefresh(){
    // 下拉刷新后具体操作
    ......

    // 在下拉刷新后 loading效果可能弹不回去
    if（条件判断）{
       wx.stopPullDownRefresh()
    }
   }
})

scroll-view 

使用 scroll-view 实现上拉加载更多和下拉刷新功能

.wxml 页面

<scroll-view 
  scroll-y 
  class="scroll-y"
  lower-threshold="100"  // 上拉触发事件的条件 
  bindscrolltolower="getMore" // 上拉触发绑定的监听事件
  enable-back-to-top  // 回到顶部
  refresher-enabled // 开启下拉刷新
  refresher-default-style="black" // 刷新高亮点颜色
  bindrefresherrefresh="handleRefresh" // 绑定下拉刷新的监听事件
  refresher-triggered="{{isTriggered}}" // 刷新状态 是否允许弹回去 false是允许
  >
 <view wx:for="{{numList}}" wx:key="*this">{{item}}</view>
</scroll-view>

.js 文件

Page({
  data: {
    numList:[1,2,3],
    isTriggered:false
  },
  // 上拉触发事件
  getMore(){
    // 开启数据加载
    wx.showLoading({
      title: '数据加载中...',
    })
    setTimeout(()=>{
      // 获取数组的最后一项
      const lastNum = this.data.numList[this.data.numList.length - 1]
      // 定义需要追加的元素
      const newArr = [lastNum + 1,lastNum + 2 ,lastNum + 3]
      this.setData({
        numList:[...this.data.numList,...newArr]
      })
      wx.hideLoading()
    },1000)
  },
  // 下拉刷新
  handleRefresh(){
    wx.showToast({
      title: '下拉刷新...',
    })
    this.setData({
      numList:[1,2,3],
      isTriggered:false
    })

  }
})