【微信小程序开发】运用WXS进行后台数据交互

🥳🥳Welcome Huihui's Code World ! !🥳🥳

接下来看看由辉辉所写的关于小程序的相关操作吧

一.wxs是什么

WXS是指"微信小程序云开发"（WeChat Mini Program Cloud Development），是由微信提供的一项云端开发服务。WXS允许开发者在微信小程序中使用云端能力，包括数据库存储、云函数、文件存储等，方便开发者快速构建功能丰富的小程序。通过WXS，开发者可以将数据存储在云端，实现小程序和云端的高效交互，并可借助云函数实现复杂的逻辑处理 

二.wxs有什么作用 

1. 数据库存储：WXS提供了一个轻量级的数据库，开发者可以在数据库中存储和管理小程序的数据。通过WXS，可以方便地读写、查询和更新数据，实现数据的持久化存储和管理

2. 云函数：WXS支持开发者编写云函数，云函数可在云端执行，实现一些复杂的业务逻辑。开发者可以通过云函数实现数据的处理、计算、验证等操作，将一部分逻辑从前端移至云端，减轻小程序前端的负担

3. 文件存储：WXS提供了文件存储的能力，开发者可以将小程序中需要的文件（如图片、视频等）存储在云端，并通过简单的接口进行上传、下载和管理

三.使用wxs的步骤 

1.前期准备工作

①定义后端连接接口        

②封装请求的代码

我们也可以看一下封装前后的代码对比

封装前👇👇

封装后👇👇

在这里再提一下如何进行封装

在utils/util.js中写代码

const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
}const formatNumber = n => {n = n.toString()return n[1] ? n : `0${n}`
}
/*** 封装微信的request请求*/
function request(url, data = {}, method = "GET") {return new Promise(function (resolve, reject) {wx.request({url: url,data: data,method: method,header: {'Content-Type': 'application/json',},success: function (res) {if (res.statusCode == 200) {resolve(res.data);//会把进行中改变成已成功} else {reject(res.errMsg);//会把进行中改变成已失败}},fail: function (err) {reject(err)}})});
}module.exports = {formatTime,request
}

2.初步效果预览

其中还存在一些小问题，所以我们后续还需要进行修改，这时我们就需要使用到wxs了

3.wxs的使用

①先建一个wxs文件

function getState(state){// 状态：0取消会议1待审核2驳回3待开4进行中5开启投票6结束会议，默认值为1if(state == 0 ){return '取消会议';}else if(state == 1 ){return '待审核';}else if(state == 2 ){return '驳回';}else if(state == 3 ){return '待开';}else if(state == 4 ){return '进行中';}else if(state == 5 ){return '开启投票';}else if(state == 6 ){return '结束会议';}return '其它';}
var getNumber = function(str) {var s = str+'';var array = s.split(',');var len = array.length;return len;
}
function formatDate(ts, option) {var date = getDate(ts)var year = date.getFullYear()var month = date.getMonth() + 1var day = date.getDate()var week = date.getDay()var hour = date.getHours()var minute = date.getMinutes()var second = date.getSeconds()//获取 年月日if (option == 'YY-MM-DD') return [year, month, day].map(formatNumber).join('-')//获取 年月if (option == 'YY-MM') return [year, month].map(formatNumber).join('-')//获取 年if (option == 'YY') return [year].map(formatNumber).toString()//获取 月if (option == 'MM') return  [mont].map(formatNumber).toString()//获取 日if (option == 'DD') return [day].map(formatNumber).toString()//获取 年月日 周一 至 周日if (option == 'YY-MM-DD Week')  return [year, month, day].map(formatNumber).join('-') + ' ' + getWeek(week)//获取 月日 周一 至 周日if (option == 'MM-DD Week')  return [month, day].map(formatNumber).join('-') + ' ' + getWeek(week)//获取 周一 至 周日if (option == 'Week')  return getWeek(week)//获取 时分秒if (option == 'hh-mm-ss') return [hour, minute, second].map(formatNumber).join(':')//获取 时分if (option == 'hh-mm') return [hour, minute].map(formatNumber).join(':')//获取 分秒if (option == 'mm-dd') return [minute, second].map(formatNumber).join(':')//获取 时if (option == 'hh')  return [hour].map(formatNumber).toString()//获取 分if (option == 'mm')  return [minute].map(formatNumber).toString()//获取 秒if (option == 'ss') return [second].map(formatNumber).toString()//默认 时分秒 年月日return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {n = n.toString()return n[1] ? n : '0' + n
}function getWeek(n) {switch(n) {case 1:return '星期一'case 2:return '星期二'case 3:return '星期三'case 4:return '星期四'case 5:return '星期五'case 6:return '星期六'case 7:return '星期日'}
}
module.exports = {getState: getState,getNumber: getNumber,formatDate:formatDate
};

②在需要用到的页面引入wxs文件

③修改wxml的代码

好啦，今天的分享就到这了，希望能够帮到你呢！😊😊