微信小程序封装网络数据请求

最新推荐文章于 2025-08-31 01:47:38 发布

原创最新推荐文章于 2025-08-31 01:47:38 发布 · 601 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

微信小程序专栏收录该内容

8 篇文章

订阅专栏

本文档详细介绍了如何在微信小程序中封装网络数据请求，包括创建api文件夹，编写http.js、home.js等文件，以及在各文件中实现请求函数。通过示例展示了在home.js中导出查询商品的接口，并在index.js中调用该接口获取数据，最后在index.wxml和index.wxss中渲染页面。这个教程帮助开发者理解并实现微信小程序的数据请求和页面渲染流程。

微信小程序封装网络数据请求

在app文件夹下创建http.js、home.js、index.js（可以自定义）文件

在app文件夹下的文件http.js中

/**
 * url
 * method
 * header
 * data
 * timeout
 */

const timeout = 5000
const baseURL = 'http://localhost:3000'

export default function ({
  url = '',
  data = '',
  method = 'GET',
  header = {
    'content-type': 'application/json'
  },
  // 图标
  isLoading = false,
  ...options
}) {
  return new Promise((resolve, reject) => {
    if(isLoading) wx.showLoading({
      title: '加载中...',
    })
    wx.request({
      url: baseURL + url,
      data,
      header,
      timeout,
      ...options,
      success: (res) => {
        if (res.statusCode === 200 || res.statusCode === 201) return resolve(res.data)
      },
      fail: (err) => {
        reject(err)
      },
      complete:() => wx.hideLoading()
    })
  })
}

在需要使用的地方进行导入即可使用

在app文件夹下的文件home.js中（这里的后台数据是我自己的，需要的留言）

import http from './http'

// 查询商品
export const queryGoods = (data) => http({
  url:'/home/queryGoods',
  data,
  isLoading:true
})

统一导出
- 在app文件夹下的文件index.js中
```
export * from './home'
```

在需要的地方进行导入

在页面index中的index.js中

import {queryGoods} from '../../api/index'

Page({
  data: {
   goods:[]
  },
  onLoad() {
    this.queryGoods()
  },
  async queryGoods() {
    const {data} = await queryGoods({
      type:'pop',
      page:10
    })
    // console.log(goods);
    this.setData({goods:data})
  }
})

这个时候就可以看到调试器中的AppData数据已经请求过来了，可以进行页面的渲染了。

页面的渲染

在页面index中的index.wxml中

<view class="goods-list">
  <view class="goods" wx:for="{{goods}}" wx:key="index">
    <image src="{{item.show.img}}" mode="widthFix"></image>
    <view class="title">{{item.title}}</view>
  </view>
</view>

在页面index中的index.wxss中

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.goods {
  width: 45%;
}
.goods image {
  width: 100%;
  border-radius: 20rpx;
}
.title {
  padding: 0 5rpx;
  overflow: hidden;
  white-space: nowrap;
  line-height: 60rpx;
  text-overflow: ellipsis;
  font-size: 24rpx;
}