微信小程序综合训练--花店小程序通用模块、网络请求封装笔记和首页渲染（3）

App({

//页面显示生命周期函数，每打开页面就会调用一次
  onShow(){
    wx.showToast({
      title: '消息提示框',
      // 提示图标：默认成功（一个对勾）
      // error：(失败) loading(加载)  none（不显示图标）
      icon:'success',
      duration:2000,
      // 是否显示透明蒙层
      mask:true

 }
    })
        })

但是为了减少了代码冗余，更高效的编写代码，我们需要将这些 API 封装成公共⽅法。

1.2、封装模块

1.在utils文件夹中新建一个extendApI.js文件，

2.创建⼀个 toast ⽅法对 wx.showToast() ⽅法进⾏封装，

3.使用箭头函数；

const toast= ({title='消息提示框',

icon='success',

duration=2000,

mask=true} ={}) =>{

  wx.showToast({

    title,

    icon,

    duration,

    mask

  })

}

4.局部暴露toast方法

export { toast }

但是如果有很多的.js⽂件，都需要调⽤toast⽅法，每次使⽤都需要导⼊toast再调⽤，效率会很低，所以我们可以将toast⽅法挂载到wx全局对象上。

5、全局挂载toast（）方法

 wx.toast = toast

1.3、调用

在app.js中调用

import { modal } from '/utils/extendApi'

不传参数的局部导入 modal()

不传入参数的全局挂载方法wx.modal（）

二、模块对话框封装

1.wx.showModal（）

wx.showModal是微信自带的组件，用于向⽤户询问是否执⾏⼀些操作。

1.1、模块对话框的基本使用

wx.showModal(
// 提示的标题
 title: '提示', 
// 提示的内容
content: '您确定执⾏该操作吗？', 
 confirmColor: '#f3514f',
//接⼝调⽤结束的回调函数（调⽤成功、失败都会执⾏）
complete({ confirm, cancel }) {
confirm && console.log('点击了确定')
cancel && console.log('点击了取消')

}
 })

1.2、封装模块

在app.js中编写模块对话框，在extendApi.js中进行封装，封装的新方法为modal，新建 modal ⽅法
调⽤该⽅法时，传递对象作为参数，对象的参数和 wx.showModal() 参数⼀致。

4. 通过new关键字构建一个promise对象，封装的 modal ⽅法的内部通过 Promise 返回⽤户执⾏的操作，都通过 resolve 为用户点击确认框的结果。

return new Promise((resolve) => {
// 默认的参数
const defaultOpt = {
title: '提示', // 提示的标题
content: '您确定执⾏该操作吗？', // 提示的内容
confirmColor: '#f3514f',
// 接⼝调⽤结束的回调函数（调⽤成功、失败都会执⾏）
complete({ confirm, cancel }) {
confirm && console.log('点击了确定')
cancel && console.log('点击了取消')
 }

}

5.在需要显示模态对话框的时候调⽤ modal ⽅法，并传⼊相关的参数，通过三种调⽤⽅式，
a.通过Object.assign()方法将参数合并，如果用户传递了来了options,就会覆盖默认参数, 第一个空对象参数会被赋值合并后的参数.
b. ... 是扩展运算符，将合并后的参数通过展开运算符赋值wx.showModal对象
c. . 在extendApi.js中局部暴露export { modal } /全局挂载wx.modal =modal

ps：promise的用法 

Promise是一个类，当我们需要给予调用者一个承诺：给回调数据时，就可以创建一个Promise的对象

1.通过new关键字构建一个promise对象,我们需要传入一个回调函数，我们称之为executor,通常会在Executor中确定Promise状态,

2.通过resolve，可以兑现（fulfilled）Promise的状态，我们也可以称之为已决议（resolved）

通过reject，可以拒绝（reject）Promise的状态；

3.在之后我们去调用reject时，已经不会有任何的响应了

例：

const modal = (options = {}) => {
  return new Promise((resolve) => {
    //用户使用modal函数时，使用showModal的默认参数
    const defaultOpt = {
       title: '提示',
      content: '你确定执行该操作吗',
      confirmColor:'#f2524f',
      // 接口调用结束后的回调函数
      complete ({confirm,cancel}){
        confirm && console.log("点击了确定");
        cancel && console.log("点击了取消");

      }

    }

1.3、调用

：在app.js中调用
import { modal } from './utils/extendApi';

import { modal } from './utils/extendApi';

不传参数的局部导入 modal()
不传入参数的全局挂载方法wx.modal()

三、封装本地存储API

在⼩程序中，我们经常需要将⼀些数据存储到本地，⽅便多个⻚⾯的读取使⽤，如：将⽤户的登录状态、⽤户的个⼈信息存储到本地。

⼩程序提供了同步、异步两类 API 来实现本地存储操作。例如: wx.setStorageSync 、 wx.setStorage 等⽅法。

在 utils ⽬录下新建 storage.js ⽂件，在这个文件中进行封装对本地数据进⾏存储、获取、删除、清除的⽅法。

1、异步存储wx.setStorage

//本地异步存储
  asyncSet(){
    wx.setStorage({
      key:'async',
      data:'这是异步存储的数据',
      success(){
        console.log('异步存储');
      }
    })
  },

2、异步获取 wx.getStorage

asyncGet(){
    wx.getStorage({
      key:'async',
      success(res){
       console.log(res);
      }
    })
  },

ps：了解localStorage、sessionStorage、cookie的区别:
(1) 存储的时间有效期不同
(2) 存储的大小不同
（3）作用域不同
(4)与服务端的通信不同

3、不同的storage方法

（1）localStorage本地存储，一条数据大小不超过5M，数量无限制，除非主动删除，否则数据不会被销毁。用于持久化的本地存储。
（2）sessionStorage属于当会话存储，会话结束的时候，sessionStorage中的键值对就会被清空。sessionStorage与localStorage常用的使用方法基本上一样。

二、网络封装请求

1、不同的请求方式区别（get、post....）

请求类型一共8种, 常用的4种： GET/POST/PUT/DELETE

GET请求是用来获取数据的,不对服务器的数据做任何的修改,

PUT请求是向服务器端发送数据,用来修改数据内容。

POST请求与put请求类似,都是向服务端发送数据

DELETE请求用来删除某一行的

区别：1.参数位置：GET请求把参数包含在URL中，POST将参数包含在请求体request body中。

2.GET在浏览器回退时是无害的，而POST会再次提交请求。

3.GET请求只能进行url编码，而POST请求支持多种编码方式。

4.GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

5.GET比POST更不安全，因为参数直接暴露在URL中，所以不能用来传递敏感信息。

2、request方法请求封装

2.1、在request.js中使用了微信自带的请求api wx.request

2.2、将wx.request封装到了一个名为request的函数中

2.3、将函数封装到了一个名为WxRequest的类中，创建一个wxrequest类，通过类的方式进行封装，方便添加新的属性和方法

class WxRequest{
// 默认参数对象
defaults = {
  //请求基地址
  baseURL:'',
  // 服务器接口地址
  url:'',
  // 请求方式
  methods:'GET',
  //请求头：
    header: {
    'Content-type': 'application/json' // 设置数据的交互格式
 },
 //默认超时时间为一分钟
 timeout:100,
}

2.4、定义拦截对象,配置拦截器功能，并能调用请求拦截器和响应拦截器，请求拦截器：请求之前调⽤的函数，⽤来对请求参数进⾏新增和修改。响应拦截器：在响应之后调⽤的函数，⽤来对响应数据做点什么

interceptors = {
  // 请求拦截器
  request:(config) => config,
  // 响应拦截器
  response:(response) => response
}

2.5、创建和初始化类的属性和方法constructor ，params 为用户传入的请求配置项，并且使用Object.assign方法合并默认参数以及传递的请求参数

 constructor(params = {}){
    //使用Object.assign方法合并默认参数以及传递的请求参数
    this.defaults = Object.assign({},this.defaults,params)
  }

2.6、创建request实例方法接受一个对象类型的参数，拼接完整的请求路径，并在发送请求之前调用请求拦截器

 request(options){
    //拼接完整的请求路径
    options.url = this.defaults.baseURL + options.url
    //合并请求参数
    options = {...this.defaults,...options}

    // 再发送请求之前添加1oading
    wx.showLoading({

    })

    // 在发送请求之前调用请求拦截器
    options = this.interceptors.request(options)

    console.log(options);
    return new Promise((resolve,reject)=>{
      wx.request({
        // 使用拓展运算符将request函数传来的对象参数展开
        ...options,
        //当接口调用成功就会触发success回调函数
        success:(res)=>{
          // 不管接口成功还是失败，都需要调用响应拦截器
          // 响应拦截器需要接受服务器响应的数据，然后对数据进行逻辑处理，处理好后进行返回
          // 不管是请求失败还是请求成功，都会将响应的数据传递给响应拦截器
          //这个时候合并参数时，就需要追加一个属性:isSuccess
          //如果属性值为true.说明执行了success同调函数
          const mergetRes = Object.assign({},res,{config:options,isSuccess:true})
          // resolve (res)
          resolve (this.interceptors.response(mergetRes))
        
        },
        // 当接口调用失败时会触发fail回调函数
        fail:(err) => {
          // 如果属性值为false，说明执行了fail回调函数
          const mergetErr = Object.assign({},err,{config:options,
            isSuccess:false})
          // reject(err)
          reject(this.interceptors.response(mergetErr))
        },
        complete:() => {
          wx.hideLoading()
        }
      })
    })
  }

2.7、在request.js暴露get 、 delete 、 post 、 put 4个请求⽅法，并封装调用

//封装GET实例方法
get(url,data={},config={}){
  return this.request(Object.assign({url,data,methods:'GET',config}))
}
//封装POST实例方法
post(url,data={},config={}){
  return this.request(Object.assign({url,data,methods:'POST',config}))
}
//封装PUT
put(url,data={},config={}){
  return this.request(Object.assign({url,data,methods:'PUT',config}))
}
//封装DELETE实例方法
delete(url,data={},config={}){
  return this.request(Object.assign({url,data,methods:'DELETE',config}))
}


// 用来处理并发请求
all(...promise){
  // 通过展开运算符接受传递的参数
  // 展开运算符会将传入的参数
  console.log(promise);
  return Promise.all(promise)

}

2.8、最后对微信wxrequest进行实例化，将WxRequest实例暴露出去，方便在其他文件中进行使用

export default WxRequest

在test.js中

在使用 wx.request 发送网络请求时。

只要成功接收到服务器返回，无论 statusCode 是多少，都会进入 success 回调。开发者根据业务逻辑对返回值进行判断。

在test.js中进行测试，

handler1(){

    wx.request({

      url: 'https://gmall-prod.atguigu.cn/mall-api/index/findBanner',

      method:'GET',

      success:(res) => {

        console.log(res);

        console.log("虽然接口错了，但是也会进入成功回调");

      },

      fail:(err)=> {

        console.log(err);

什么时候会有 fail 回调函数?

-般只有网络出现异常、请求超时等时候，才会走 fail 回调。

例：

handler1(){

    wx.request({

      url: 'https://gmall-prod.atguigu.cn/mall-api/index/findBanner',

      method:'GET',

      timeout:100,

      success:(res) => {

        console.log(res);

        console.log("虽然接口错了，但是也会进入成功回调");

      },

      fail:(err)=> {

        console.log(err);

        console.log("网络超时了，会执行失败回调");

      }

    })

  }

截图如下：

三、页面渲染

发送请求----->拿到数据------>渲染页面：

网络请求是微信小程序中获取数据和与服务器交互的重要方式。微信小程序提供了自己的API来处理网络请求，使得开发者可以轻松地在微信小程序中实现数据的获取和提交

使用wx.request发起GET/POST请求------>

数据的解析,通过JSON.parse()方法将返回的JSON字符串解析成JavaScript对象，然后打印------->

数据的存储:我们需要将获取的数据存储起来，以便在后续的使用中可以直接读取。微信小程序提供了多种存储方式，包括本地存储（wx.setStorageSync()、wx.getStorageSync()）和全局数据存储（app.globalData）---------->

获取数据并解析后，我们通常需要将数据显示在页面上,通过数据绑定的方式将存储在本地的数据myData显示在页面上。

1、获取数据

在实现功能之前，我们需要先获取数据，在获取数据以后，然后进⾏⻚⾯的渲染，同时完成进⾏

功能的开发。

1.1、在api文件夹下的index.js中导⼊封装的⽹络请求模块实例，并使用之前的封装的promise.all方法，并发送请求

import http from '../utils/http'

export const reqIndexData = () => {
  
return instance.all(
    // 轮播数据
    instance.get("/index/findBanner"),
    // 一级分类数据
    instance.get("/index/findCategory1"),
    // 活动宣传
    instance.get("/index/advertisement"),
    // 猜你喜欢
    instance.get("/index/findListGoods"),
    // 人气推荐
    instance.get("/index/findRecommendGoods")
  )
}

1.2、在index文件夹下的index.js中导入接口API，获取首页数据

import {reqIndexData} from '../../api/index'
async getIndexData(){
  const res = await reqIndexData()
  console.log(res);

  // 在获取数据以后，对数据进行赋值
  this.setData({
    bannerList:res[0].data,
    categotyList:res[1].data,
    activeList:res[2].data,
    hotList:res[3].data,
    guessList:res[4].data,
  })
},

// 监听页面加载
onLoad(){
  this.getIndexData()
}
})

2、渲染首页区域

例：渲染猜你喜欢+⼈⽓推荐区域

2.1、在index.wxml中，将数据传递给 goods-list 组件，

<!-- 商品列表 -->
    <goods-list title="猜你喜欢" list="{{guessList}}" ></goods-list>
    <goods-list title="人气推荐" list="{{hotList}}" ></goods-list>

接收⾸⻚传递的 list 数据,在goodlist.js中编写

// components/goods-list/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 列表标题
    title: {
      type: String,
      value: ''
    },

    // 传递的列表数据
    list: {
      type: Array,
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {},

  /**
   * 组件的方法列表
   */
  methods: {}
})

在goodlist.wxml中遍历 goods-item 组件，并在goodcard.js将数据传递给 goods-item 组件...

//components/goods-list/goods-list.wxml
 <!-- 商品列表组件 -->
 <view class="goods_container" wx:if="{{ list.length }}">
 <!-- 标题 -->
<view class="goods_title">{{title}}</view>
 <!-- 列表区域 -->
<view class="goods_card_list">
<goods-card wx:for="{{ list }}" wx:key="id" goodItem="{{ item }}"></goodscard>
</view> 
<!-- 查看更多 -->
<!-- coding -->
</view>

效果图如下：

ps：wx:for / v-for的用法

wx:for定义

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item实现列表渲染

用法：

<!-- 默认item表示其中一项数据 -->

<!-- 默认index表示数据项的索引 -->

<view wx:key='{{index}}' wx:for='{{list}}'>

  {{index}} {{item}}

</view>

定义数据：

data: {list: ['apple', 'orange', 'lemon'eggplant'],}

wx:for-index 给索引起一个别名；wx:for-item 给数据项起一个别名

v-for的四种使用方法分别是：

1.使用v-for循环一个简单的数组

例：

在Vue中使用v-for遍历数组时v-for最常见的一种使用方式。

（1）先在data中定义数组

arr: [1, 2, 3, 4, 5],

（2）在标签中遍历

<p v-for="(item,index) in arr">数值：{{item}}，索引：{{index}}</p>

结果如下：

2.使用v-for循环一个复杂的数组

3.使用v-for循环对象

4.v-for循环一个迭代的数字

例：

<div id="app">

            <!--v-for循环一个简单的数组-->

           <p v-for="item in list">{{item}}</p>

           <P v-for="(item ,i) in list">索引值：{{i}}---每一项：{{item}}</P>

           <!--v-for循环一个复杂的数组-->

           <p v-for="(item,i) in list1">索引值：{{i}}--id：{{item.userid}}---姓名：{{item.username}}</p>

           <!--v-for循环一个对象-->

           <p v-for="(val,key,i) in list2">id：{{val}},name:{{key}},index:{{i}}</p>

           <!--v-for 循环一个迭代数字-->

           <p v-for="count in 10">这是第{{count}}次循环</p>