目录
一、小程序通用模块
我们在项目过程中，会频繁使用一些Api，在utils中封装通用模块，以便项目后期调用
一、消息提示模块封装
1.wx.showToast()
wx.showToast() 消息提示框，是在小程序中频繁使⽤的⼀个⼩程序 API ，⽤来给进⾏消息提示。
1.1、消息弹出框的基本使用
在App.js文件中
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 = toast1.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>// components/goods-list/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
// 列表标题
title: {
type: String,
value: ''
},
// 传递的列表数据
list: {
type: Array,
value: []
}
},
/**
* 组件的初始数据
*/
data: {},
/**
* 组件的方法列表
*/
methods: {}
})
//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>
扫一扫
423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
