微信小程序请求实现与封装指南

一、小程序网络请求实现

微信小程序发起网络请求需使用 wx.request 方法。以下是使用示例：

wx.request({
  url: 'test.php', // 示例接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json'
  },
  success(res) {
    console.log(res.data);
  }
});

请求错误处理

当小程序请求出现以下错误时，需在小程序后台进行相应设置：

勾选不校验合法域名：在详情页面勾选后，允许请求接口域名不校验。

域名配置：上线前需将域名预先添加至小程序后台，并确保协议为 https。

二、小程序请求封装

为了统一管理接口，建议对接口进行封装处理：

创建配置文件：在 http 文件夹下创建 env.js，配置不同环境的接口地址：

module.exports = {
  dev: {
    baseUrl: 'http://localhost:3000'
  },
  test: {
    baseUrl: 'http://www.test.com'
  },
  prod: {
    baseUrl: 'https://api.it120.cc'
  }
};

封装请求逻辑：在 request.js 中实现 wx.request 的二次封装：

const { baseUrl } = require('./env.js').prod;
const subDomain = 'xxx';
module.exports = {
  request(url, method, data, isSubDomain) {
    wx.showLoading({
      title: '加载中'
    });
    
    const _url = `${baseUrl}/${isSubDomain ? subDomain : ''}${url}`;
    wx.request({
      url: _url,
      data,
      method,
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success(res) {
        const { code } = res.data;
        if (code === 0) {
          resolve(res.data);
          wx.hideLoading();
        } else {
          wx.showToast({
            title: '数据错误'
          });
        }
      },
      fail() {
        reject('接口错误');
      }
    });
  }
};

业务接口封装：在 api.js 中按业务需求封装具体接口：

const { request } = require('./request.js');
module.exports = {
  getBanner() {
    return request('', 'GET', {}, true);
  },
  getGoodsList() {
    return request('goods/list', 'GET', {}, true);
  },
  addGoodsFav(goodsId, token) {
    return request('goods/favor', 'POST', { goodsId, token }, true);
  }
};

使用说明

在需要使用的 JS 文件中引入接口：

const { getBanner } = require('../../http/api.js');
onShow(() => {
  getBanner().then(res => {
    console.log(res);
  });
});

以上方法可帮助开发者高效管理小程序接口，提升维护效率。

上一篇：微信小程序搜索功能

下一篇：微信小程序路由和生命周期

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！