- 云开发入门
重磅打造的小程序学习路径课,从微信小程序到微信云开发体系化的学习,带来更加顺畅的学习体验。
2021-11-19 - 微信小程序中网络请求的封装与优化实践
前言 微信小程序是一款轻量级的应用平台,提供了丰富的API和组件来帮助开发者快速构建应用。在进行微信小程序开发时,网络请求同样是不可或缺的环节。为了提高开发效率和代码质量,我们可以封装一些网络请求方法,以便在多个页面中复用,并且可以统一处理错误信息等问题。本文将介绍如何在微信小程序中封装网络请求方法。 正文内容 1、封装 wx.request 请求: 在小程序项目的根目录创建 utils 目录,在目录下创建 request.js 文件,编写以下代码: [代码]// 全局请求封装 const base_url = 'http://localhost:996'; export default (params) => { let url = params.url; let method = params.method || "GET"; let data = params.data || {}; let header = {}; if (method == "POST") { header = { 'content-type': 'application/json' }; } // 获取本地token const token = wx.getStorageSync("token"); if (token) { header['Authorization'] = 'Bearer ' + token; } return new Promise((resolve, reject) => { wx.request({ url: base_url + url, method: method, header: header, data: data, success(response) { const res = response.data; if (res.statusCode == 200) { resolve(res); } else { wx.clearStorageSync(); switch (res.statusCode) { case 401: wx.showModal({ title: "提示", content: "请登录", showCancel: false, success(res) { setTimeout(() => { wx.navigateTo({ url: "/pages/login/index", }); }, 1000); }, }); break; case 404: wx.showToast({ title: '请求地址不存在...', duration: 2000, }); break; default: wx.showToast({ title: '请重试...', duration: 2000, }); break; } } }, fail(err) { console.log(err); if (err.errMsg.indexOf('request:fail') !== -1) { wx.showToast({ title: '网络异常', icon: "error", duration: 2000 }); } else { wx.showToast({ title: '未知异常', duration: 2000 }); } reject(err); }, complete() { wx.hideLoading(); wx.hideToast(); } }); }).catch((e) => {}); }; [代码] 2、封装对应的 api 文件 在实际项目中,我们也会根据上述请求,封装对应的 api,所以,在根目录下创建 api 文件夹,里面放与项目相关的 api: [代码]// 引入 request 文件 import request from '@/utils/request'; // 以下 api 为示例,实际与项目相匹配 // 分页查询学习列表 export const pageStudyInfo = (params) => { return request({ url: '/study/studyInfo/page', method: 'GET', data: params }); }; // 查询学习列表 export const listStudyInfo = (params) => { return request({ url: '/study/studyInfo/list', method: 'GET', data: params }); }; // 获取学习列表详细信息 export const studyInfoById = (id) => { return request({ url: `/study/studyInfo/${id}`, method: 'GET', }); }; // 增加学习列表 export const saveStudyInfo = (params) => { return request({ url: '/study/studyInfo', method: 'POST', data: params }); }; // 修改学习列表 export const updateStudyInfo = (params) => { return request({ url: '/study/studyInfo', method: 'PUT', data: params }); }; // 删除学习列表 export const deleteStudyInfo = (id) => { return request({ url: `/study/studyInfo/delete?id=${id}`, method: 'DELETE', }); }; [代码] 3、在相关页面使用封装的 api [代码]Page({ data: { studyList: [] }, onLoad: function () { this.getStudyList(); }, getStudyList: async function () { try { const res = await pageStudyInfo(this.data.queryParams); console.log(res.data.records); this.setData({ studyList: res.data.records }); } catch (error) { console.error(error); } } }); [代码] 总结 封装请求在微信小程序开发中同样非常重要。通过封装请求,我们可以提高数据的安全性、减少网络传输的开销、方便协议的扩展和升级等。在封装请求时,需要考虑请求的类型、格式、大小、传输协议、加密方式等因素。常见的封装请求的方式有URL编码、JSON格式、XML格式、HTTP协议等。总之,封装请求是现代网络应用中非常重要的一个环节。通过良好的封装请求,可以保证数据的安全和可靠性,从而提高应用的性能和用户体验。
09-24 - 微信物流服务接入指引
微信物流服务是针对小程序内物流场景的系列解决方案,涵盖快递和同城配送,涉及到发货、查件、退货等环节。 商家只需引入组件,即可获得优质、稳定的物流服务,提高小程序经营效率和用户体验。
2022-03-29 - 如何在微信小程序投放广告
本课程旨在帮助学员快速了解微信小程序广告资源,包括微信公众号小程序产品特性及广告平台投放能力介绍。 更多广告投放课程,可进入腾讯营销学堂查看:https://edu.tencentads.com/
2022-05-17 - 小程序性能优化实践
小程序性能优化课程基于实际开发场景,由资深开发者分享小程序性能优化的各项能力及应用实践,提升小程序性能表现,满足用户体验。
10-09 - 用小程序做「直播带货」
小程序直播的企业实践案例。
2022-03-28 - 微信小程序直播
微信小程序直播系列课程持续更新中,帮助大家更好地理解、应用微信小程序直播功能。
2022-03-29 - 小程序基础能力介绍
官方讲解小程序最常用的功能,了解功能应用场景与接入方式,哪个功能你的小程序还没用上?
2023-03-15 - 小程序编程基础:组件、渲染、函数
将手把手带大家做一个属于自己的小程序,学习基本的小程序开发知识,并将其发布上线。
2023-09-05 - 小程序编程基础:布局、样式、逻辑、数据
我们将从制作小程序的角度,来为大家一一揭晓,小程序背后的技术路线和编程方法,为大家将自己的想法变为现实,更进一步。
2023-09-08 - 小程序开发实战
高校大赛系列课程之“小程序开发实战”,是由清华大学和微信团队共制作的小程序学习教程。通过需求分析、原型设计、小程序前端实现、后台接口开发、小程序对接接口,逐步教大家如何“从无到有”完成小程序项目
2021-11-25 - 微信开发者工具系列课程
介绍开发者工具基础功能和实践案例,解决开发过程中遇到的调试问题。使用工具,简单快速上手开发小程序。
2021-11-19 - 小程序开发新能力解读
这个月小程序释放了什么新能力?又有哪些新规则?收藏课程,及时了解小程序开发动态,听官方为你解读新能力。
2023-01-17