[小程序开发] API

一、介绍

        小程序提供的API几乎都挂载在wx对象下，wx对象实际上就是小程序的宿主环境微信所提供的全局对象。

二、分类

        1、异步API：通常都接受一个object类型的参数，例如：wx.request({})

• 当接口参数Object对象中不包含success/fail/complete时将默认返回Promise。
• 部分接口如request，uploadFile本身就有返回值，因此不支持Promise风格的调用方法，它们的promisify需要开发者自行封装。

        2、同步API：约定以Sync结尾，例如：wx.setStorageSync()

        3、事件监听API：约定以on开头，例如：wx.onAppHide()

三、wx.request()接口API

        发起网络请求获取服务器的数据。

        wx.request请求的域名必须在微信公众平台进行配置，如果使用wx.requset请求未配置的域名，在控制台会有相应的报错。

 wx.request({
            // url接口地址
          url: '地址',
            //   method请求方式
            method:"GET",
            // data请求参数
            data:{},
            // header请求头
            header:{},
            // API调用成功以后，执行的回调
            success:(res)=>{
            //   console.log(res)
                if(res.data.statusCode===200){
                    this.setData({
                        list:res.data.data
                    })
                }
            },
             // API调用失败以后，执行的回调
            fail:(err)=>{
                console.log(err)
            },
             // API调用不管成功或失败以后，执行的回调
            complete:(res)=>{
                // console.log(res)

                // 关掉loading提示框
                wx.hideLoading()
            }
        })

四、 loading提示框 

       wx.showLoading()显示loading提示框

       wx.hideLoading()关闭loading提示框

wx.showLoading()和wx.hideLoading()必须成对使用。 

 // 显示loading提示框
        wx.showLoading({
            // 用来显示提示的内容，提示的内容不会自动换行
          title: '正在加载中...',
        //   是否展示透明蒙层，防止触摸穿透
          mask:true
        })

 // 关掉loading提示框
                wx.hideLoading()

五、消息提示框

        wx.showModal()：模态对话框，常用于询问用户是否执行一些操作。例：询问用户是否退出登录、是否删除该商品等。

        wx.showToast()：消息提示框，根据用户的某些操作来告知操作的结果。例：退出成功给用户提示，提示删除成功等。 

// 删除商品
    async delHandler(){

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

    }

六、本地存储

        1、同步API（以Sync结尾）

                存储：wx.setStorageSync()

                获取：wx.getStorageSync()

                删除：wx.removeStorageSync()

                清空：wx.clearStorageSync()

setStorage(){
        // 同步APIwx.setStorageSync,第一个参数：本地存储中指定的key；第二个参数：需要存储的数据
        wx.setStorageSync('num',1)
        // 在小程序中，如果存储的是对象类型数据，不需要使用JSON.stringify和JSON.parse进行转换，直接进行存储和获取即可
        wx.setStorageSync('obj',{name:'tom',age:10})
        
    },

    // 获取本地存储的数据
   getStorage(){
        // 同步API,从本地存储的数据中，获取指定key的数据内容
        const num=wx.getStorageSync('num')
        const obj=wx.getStorageSync('obj')
        console.log(num)
        console.log(obj)
    },

    // 删除本地存储的数据
    removeStorage(){
         // 同步API,从本地存储的数据中，移除指定key的数据内容
        wx.removeStorageSync('num')

    },

    // 清空本地存储的全部数据
    clearStorage(){
         // 同步API,清空本地存储的全部数据
        wx.clearStorageSync()
    }

        2、异步API

                存储：wx.setStorage()

                获取：wx.getStorage()

                删除：wx.removeStorage()

                清空：wx.clearStorage()

setStorage(){
       
        // 异步API
        wx.setStorage({
            key:"num",
            data:1
        })
        wx.setStorage({
            key:"obj",
            data:{name:"jerry",age:18}
        })

    },

    // 获取本地存储的数据
    async getStorage(){
       
        // 异步API
        const {data}=await wx.getStorage({
            key:"obj"
        })
        console.log(data)
    },

    // 删除本地存储的数据
    removeStorage(){
        
        // 异步API
        wx.removeStorage({
            key:"num"
        })
    },

    // 清空本地存储的全部数据
    clearStorage(){
        
        // 异步API
        wx.clearStorage()
    }

对象类型的数据，可以直接进行存储获取，无需使用JSON,stringify()、JSON.parse()转换。

 七、路由和通信

        1、实现页面的跳转

• 声明式导航：navigator组件
• 编程式导航：使用小程序提供的API

        wx.navigatTo():保留当前页面，跳转到应用内的某个页面，但是不能跳到tabber页面。

        wx.redirectTo():关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabber页面。

        wx.switchTab():跳转到tabBar页面，路径后不能带参数。

        wx.reLaunch():关闭所有页面，打开到应用内的某个页面。

        wx.navigateBack():关闭当前页面，返回上一页面或多级页面。

     navigateTo(){
        // 保留当前页面，跳转到应用中其他页面，不能跳转到tabBar页面
       wx.navigateTo({
        //  url: '/pages/list/list',
        //  传递参数
         url:'/pages/list/list?id=1&name=tom'
       })
    },
    redirectTo(){
        wx.redirectTo({
        // 关闭当前页面，跳转到应用中其他页面，不能跳转到tabBar页面
          url: '/pages/list/list',
        })
    },
    switchTab(){
        // 跳转到tabBar页面，不能跳转到非tabBar页面，路径后面不能传递参数
        wx.switchTab({
          url: '/pages/cate/cate',
        })
    },
    reLauch(){
        // 关闭所有的页面，然后跳转到应用中某一个页面
        wx.reLaunch({
          url: '/pages/list/list',
        })
    },
    navigateBack(){
        // 关闭当前页面，返回上一页面或多级页面。
        wx.navigateBack({
            // delta返回页面级数，可省略         
            delta:1   
        })
    }

编程式导航API路径后可以带参数，参数与路径之间用？分隔，参数键与参数值用=相连，不同参数用&分隔。参数需要在跳转到的页面的onLoad钩子函数中通过形参进行接收。

 八、上拉加载

        当用户滑动到页面底部时，会自动加载更多的内容，以便用户继续浏览。

        在app.json或page.json中配置页面底部距离：onReachBottomDistance，默认50px。

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

九、下拉刷新

        当用户下拉页面时，页面会自动刷新，以便用户获取最新的内容。

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

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

十、scroll—view

        实现更多上拉加载和下拉刷新功能。

<!-- scroll-view实现上拉加载 -->
<scroll-view
	scroll-y
	class="scroll-y"
	
	lower-threshold="100"
	bindscrolltolower="getMore"
	enable-back-to-top="true"

>
	<view wx:for="{{numList}}" wx:key="*this">{{item}}</view>
</scroll-view>

<!-- scroll-view实现下拉刷新 -->
<scroll-view
	scroll-y
	class="scroll-y"

	refresher-enabled="true"
	refresher-default-style="black"
	refresher-background="#f7f7f8"
	bindrefresherrefresh="refreshHandler"
	refresher-triggered="{{isTriggered}}"


>
	<view wx:for="{{numList}}" wx:key="*this">{{item}}</view>
</scroll-view>