微信小程序的学习（微信开发者工具）

微信小程序的学习（微信开发者工具）

缓存优化

如果我们返回的数据量过于大了，可以使用微信的缓存来优化

首先在我们定义请求的函数getList，在函数内部调用wx.setStorageSync来将数据存储本地，存储的数据要携带时间信息：

//把接口的数据存起来
wx.setStorageSync(<要存储的数据名称>, { time: Date.now(), data: <需要存储的数据> })
//例如：
wx.setStorageSync('listData', { time: Date.now(), data: this.list })

在页面的onLoad函数中需要提出存储的数据，对时间进行判断：

  onLoad: function (options) {
    // 提取存储的数据
    const listData = wx.getStorageSync('listData')
    // 判断
    if (!listData) {
      this.getList() // 没有存储的数据，就需要定义一个发送请求的函数去获取数据
    } else {
      if (Date.now() - listData.time > 1000 * 10) {
        // 过期，重新发送请求
        this.getList()  // 数据过期，再次发送请求
      } else {
        // 数据获取成功，可以直接读取之前存储的数据
        this.listData = listData.data
        this.setData({
          listData
        })
      }
    }
  },

接口封装

使用传统的wx.request来请求接口，难免会遇到回调地狱的问题，在请求回来一个接口的时候去请求另一个接口，所以需要对请求进行一个封装，在项目新建一个request的文件夹用于封装，在该文件夹下创建index.js文件，书写下列代码：

// 同时发送异步代码的次数
let ajaxTimes = 0
export const request = (params) => {
  // 如果需要添加一些需要验证token的请求接口，可以补充下列几行的代码
  let header={...params.header}
  // 如果接口携带含有home的字样就是需要验证token的
  if(params.url.includes("/home/")){
    // 在请求头添加Authorization，value的值为wx.setStorageSync保存好的token，需要与后端联系
    header["Authorization"]=wx.getStorageSync("token");
  }

  ajaxTimes++
  // 显示一个加载中的效果
  wx.showToast({
    title: '加载中',
    icon: 'loading',
    duration: 2000
  })
  // 定义公共的url
  const baseUrl = <这里书写你需要请求的url的地址>
  return new Promise((res, rej) => {
    wx.request({
      ...params,
      header,
      url: baseUrl + params.url,
      success: (result) => {
        res(result.data.message)
      },
      fail: (err) => {
        rej(err)
      },
      complete: () => {
        ajaxTimes--
        if (ajaxTimes === 0) {
          wx.hideLoading()
        }
      }
    })
  })
}

使用方法

定义好请求的方法之后，需要引入刚刚写好的函数，调用即可：

// 例如
//引入封装异步请求的js代码
import { request } from '../../request/index.js'
getLists() {
	request({
 		url: '/list'  // 这里书写的是请求的地址
	}).then((res) => {
  		  this.setData({
      		list = res.data.message // 保存数据
   		})
	})
}

如果希望使用async，await的话，我们需要勾选小程序的es6转es5，同时需要下载一个代码，代码地址：<regenerator/runtime.js at main · facebook/regenerator (github.com)>，复制js代码，在项目创建lib文件夹，在该文件夹创建runtime文件夹，在改文件夹下创建runtime.js文件，将代码地址的代码复制粘贴到该文件夹下即可，有的版本会自己es7转es5，即可以不需要该js文件，使用方法：

//引入封装异步请求的js代码
import { request } from '../../request/index.js'
import regeneratorRuntime from '../../lib/runtime/runtime'

async getLists() {
 const res = await	request({
 		url: '/list'  // 这里书写的是请求的地址
	})
 // 这里可以判断返回的code，这里就直接获取返回的数据了
  this.setData({
      list = res // 保存数据
   })
}

自定义组件Tabs

在项目中往往会遇到类似于底部tabbar的效果，只不过位于顶部区域，使用自定义的Tabs配合插槽实现，该模块可以学习到插槽，自定义事件，我们需要在项目的components文件夹下创建Tabs自定义组件

在Tabs.js文件夹下书写接收的数据信息：

// components/Tabs/Tabs.js
Component({
  properties: {
    tabs: {
      type: Array,
      value: []
    }
  },
  methods: {
    handItemTap(e) {
      const { index } = e.currentTarget.dataset
      this.triggerEvent('tabsItemChange', { index })
    }
  }
})

Tabs.wxml的文件代码：

<view class="tabs">
  <view class="tabs_title">
    <view 
      class="title_item {{item.isActive?'active':''}}" 
      wx:for="{{tabs}}" 
      wx:key="id"
      bindtap='handItemTap'
      data-index="{{index}}"
      >
      {{item.value}}</view>
  </view>
  <view class="tabs_content">
    <slot></slot>
  </view>
</view>

Tabs.wxss样式参考代码：

.tabs_title {
  display: flex;
}
.title_item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 15rpx 0;
}
.active {
  color: var(--themeColor);
  border-bottom: 5rpx solid currentColor;
}

这样我们的自定义组件就做好了，我们只需要在使用他的地方，引入，导入数据，绑定自定义事件即可

引入自定义组件，我们需要在使用到该自定义组件的index.json文件下加入代码：

  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
  }

我们需要创建好数据进行导入，在使用该组件的index.js文件下的data创建数据：

  data: {
    tabs: [
      {
        id: 0,
        value: '综合',
        isActive: true
      },
      {
        id: 1,
        value: '销量',
        isActive: false
      },
      {
        id: 2,
        value: '价格',
        isActive: false
      }
    ]
  },

在使用该组件的index.wxml文件下使用自定义组件：

<Tabs tabs="{{tabs}}" bindtabsItemChange="tabsItemChange">
  <block wx:if="{{tabs[0].isActive}}">1</block>
  <block wx:elif="{{tabs[1].isActive}}">2</block>
  <block wx:else>3</block>
</Tabs>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8eghE3it-1652202498607)(https://img1.imgtp.com/2022/05/10/hR7EKYnd.png)]

绑定自定义事件，由自定义组件传递事件需要接收执行，所以还需要在index.js文件添加需要执行的函数：

  tabsItemChange(e) {
    const { index } = e.detail
    let { tabs } = this.data
    tabs.forEach((v, i) => {
      if (i === index) {
        v.isActive = true
      } else {
        v.isActive = false
      }
    }),
      this.setData({
        tabs
      })
  },

只需要在不同的block标签书写响应的代码即可

页面滚动条触底

当我们在做列表的时候，肯定会遇到页面滚动条触底的事件，我们需要知道服务器返回的总条数通过计算，再结合周期函数处理：

// 定义默认数据
  QueryParams: {
    query: '', // 参数
    id: '', // id
    pagenum: 1, // 页码
    pagesize: 10 // 每页展示的数据
  },
// 总页数
totalPages: 1,
 
// 在我们获取列表的数据的时候需要保存好total
getList(){
    ... // 这里省略获取数据，详情见上方的接口封装和使用方法
	const total = res.total
	// 计算总页数
	this.totalPages = Math.ceil(total / this.QueryParams.pagesize)
    // 保存好数据
    this.setData({
      list: [...this.data.list, ...res.lists] // this.data.list是原有的数组，我们需要解构添加数据，res.lists是接口返回的数据，同样需要解构
    })
    // 关闭下拉刷新的窗口，如果没有调佣下拉刷新的窗口直接关闭也不会报错
    wx.stopPullDownRefresh()
}

  // 页面滚动条触底事件
  onReachBottom() {
    if (this.QueryParams.pagenum >= this.totalPages) {
      wx.showToast({
        title: '没有下一页数据了'
      })
    } else {
      this.QueryParams.pagenum++  // 页码数++
      this.getList() // 重新发送请求
    }
  },

下拉刷新

需要开启下拉刷新，我们需要在组件的index.json文件添加开启下拉刷新的代码：

  "enablePullDownRefresh":true,
  "backgroundTextStyle": "dark" // 这里是选择刷新的样式，两种：dark/light

在页面的生命周期函数进行下拉刷新的逻辑书写：

  // 下拉刷新事件
  onPullDownRefresh() {
    //重置数组
    this.setData({
      list: []
    })
    //重置页码
    this.QueryParams.pagenum = 1
    //发送请求
    this.getList()
  }

点击轮播图预览

在需要点击轮播图进行预览的时候就需要调用wx.previewImage的Api，需要给遍历循环的轮播添加点击事件：

// 在index.wxml中给轮播添加点击事假
  <swiper autoplay circular indicator-dots>
    <swiper-item wx:for="{{goodsPics}}" wx:key="picsId" bindtap='handlePrevewImage' data-url='{{item.pics}}'>
      <image mode="widthFix" src="{{item.pics}}"></image>
    </swiper-item>
  </swiper>

在index.js书写代码：

//全局对象
GoodsInfo: [],
    
// 在我们获取到的数据的同时，将数据写入全局的对象

//点击轮播图预览
  handlePrevewImage(e) {
    //构建要预览的图片数组
    const urls = this.GoodsInfo.map((v) => v.pics) // 遍历得到的数据，将图片的地址筛选出来
    //接收传递传递过来的图片url
    const current = e.currentTarget.dataset.url
    wx.previewImage({
      current,
      urls
    })
  }

页面参数的获取

onShow不同于onLoad无法在形参上接收options参数，如果我们需要参数，我们可以获取页面栈，该长度最长为10个页面，在onShow调用函数：

  onShow() {
    let pages = getCurrentPages() //页面栈
    // 数组中索引最大的就是当前页面，里面包含了传入过来的数据
    let currentPages = pages[pages.length - 1]
    const { type } = currentPages.options
  },