微信小程序51~60-EW帮帮网

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" />

在这里插入图片描述

微信小程序51~60