微信小程序51~60

1.界面交互-loading提示框

loading提示框用于增加用户体验，对应的API有两个：

wx.showLoading()显示loading提示框

wx.hideLoading()关闭loading提示框

Page({
getData () {
//显示loading提示框
wx.showLoading({
//提示内容不会自动换行，多出来的内容会被隐藏
title: '数据加载中...',
//展示透明蒙层，防止触摸穿透
mask: true,
}),

复制代码

     wx.request({
         // 接口地址
       url: 'url',
       //接口方式
       method: 'GET',
       //请求参数
       data: {},
       //请求头
       header: {},
       // API调用成功以后，执行的回调，res是服务器响应的数据
       success: (res) => {
           console.log(res);
       },
       // API调用失败以后，执行的回调
       fail: (err) => {
           console.log(err);
       },
       // API不管调用成功还是失败，都会执行执行的回调
       cpmplete: (res) => {
           //隐藏效果，和展示配套使用
           wx.hideLoading()
       }
     })
}

})

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

wx.showModal() :模态对话框，常用于询问用户是否执行一些操作。例如：询问用户是否退出登录，是否删除商品
wx.showToast() :消息提示框，根据用户的某些操作来告知操作的结果。例如：退出成功给用户提示，提示删除成功等。

Page({
async delHandler () {
//shouModal显示模块对话框
const res = await wx.showModal({
title: '提示',
content: '是否删除该商品？'
})
if (confirm) {
wx.showToast({
title: '删除成功',
icon: none,
duration: 2000
})
}else{
wx.showToast({
title: '取消删除',
icon: error,
duration: 2000
})
}
}
})

3.本地存储

使用API将数据存储在用户的设备上，以便小程序运行时和下次启动时快速地读取这些数据

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

同步API

复制代码

Page({
  
    //将数据存储到本地
    setStorage (){
        wx.setStorageSync('num', 1)
        wx.setStorageSync( 'obj', {name: 'tom', age: 10 })
    },
    
    //获取存储到本地的数据
    getStorage (){
        const num = wx.getStorageSync('num')
        const obj = wx.getStorageSync('obj')
        console.log(num)
        console.log(obj);
    },
    //删除本地存储的数据
    removeStorage () {
        wx.removeStorageSync('num')
    },
    //清空本地存储的全部数据
    clearStorage () {
        wx.clearStorageSync()
    }
 })

异步API

复制代码

Page({
    //将数据存储到本地
    setStorage (){
        //异步
        wx.setStorage({
            key: 'num',
            data: 1
        }),
        wx.setStorage({
            key: 'obj',
            data: { name: 'jerry', age:18 }
        })
    },
    
    //获取存储到本地的数据
    getStorage (){
        //异步
        const { data } = await wx.getStorage({
            key: 'obj'
        })
        console.log(data);

    },
    //删除本地存储的数据
    removeStorage () {
        //异步
        wx.removeStorage({
          key: 'num'
        })
    },
    //清空本地存储的全部数据
    clearStorage () {
        //异步
        wx.clearStorage()
    }
 })

4.路由与通信

实现页面跳转的方式

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

路径后可以带参数，参数与路径之间使用？分隔，参数键与参数值用 = 相连，不同参数用 & 分隔，例如: path?key=value&key2=value2
参数需要在跳转到的页面的 onLoad 钩子函数中通过形参进行接收

wx.switchTab()方法路径后面不能带参数

5.页面处理函数-上拉加载

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

实现方式：

在app.json或者page.json中配置距离页面底部的距离：onReachBottomDistance; 默认 50px
在页面.js中定义onReachBottomDistance事件监听用户上拉加载
复制代码
```
"onReachBottomDistance": 100
```
Page({
data: {
numList: [1, 2, 3, 4]
},
// 监听用户上拉加载
onReachBottom () {
// console.log('监听用户上拉加载');
const addList = this.data.numList[this.data.numList.length - 1]
const newList = [addList + 1, addList + 2, addList + 3]
this.setData({
numList : [...this.data.numList, ...newList]
})
}
})

6.页面处理函数-下拉刷新

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

实现方式：

在app.json或者page.json中开启允许下拉，同时可以配置窗口、loading样式等
在页面.js中定义onPullDownRefresh事件监听用户下拉刷新

{
"usingComponents": {},
"onReachBottomDistance": 100,
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle":"light"
}

onPullDownRefresh () {
this.setData({
newList: [1, 2, 3]
})
//为了使完成下拉后loading效果回弹
if(this.data.numList.length === 3) {
wx.stopPullDownRefresh()
}
}

7.增强 scroll-view

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

复制代码

<scroll-view 
    scroll-y 
    class="scroll-y"

    lower-threshold="100"
    bindscrolltolower="getMore"
    enable-back-to-top="true"

    refresher-enabled
    refresher-default-style="black"
    refresher-background="#f7f7f8"
    bindrefresherrefresh="refreshHnadler"
    refresher-triggered="{{isTriggered}}"
>
    <view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>
</scroll-view>

8.自定义组件-创建和注册组件

小程序目前已经支持组件化开发，可以将页面中的功能模块抽取成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。

开发中常见的组件有两种：

公共组件：将页面内的功能模块抽取成自定义组件，以便在不同的页面中重复使用
页面组件：将复杂的页面拆分成多个低耦合的模块，有助于代码维护

建议一个组件一个文件夹

公共组件：

放在项目根目录的components文件夹中

公共组件进行全局注册：在app.json文件中配置usingComponents进行注册，注册后可以在任意页面使用

页面组件：

放在对应页面的目录下

页面组件进行局部注册：在页面的json中配置usingComponents进行注册，注册后只能在当前页面使用

在usingComponents进行组件注册时，需要提供自定义组件的组件名和自定义组件文件路径

在将组件注册好以后，直接将自定义组件的组件名当成组件标签名使用即可。

复制代码

"usingComponents": {
        "custom-checkbox" : "./components/custom-checkbox/custom-checkbox"
    }

9.组件的数据以及方法

组件的数据以及方法需要在组件.js的Component方法中进行定义，Component创建自定义组件

data：定义组件的内部数据
methods：在组件中事件处理程序需要写到methods中才行

10.组件的属性

控制文本信息以及文本显示的位置

Properties是指组件的对外属性，主要用来接收组件使用者传递给组件内部的数据，和data一同用于组件的模板渲染

复制代码

<custom-checkbox label="我已阅读并同意 用户协议和隐私协议 " position="right" />