• 【微信小程序】6天精准入门（第5天:利用案例与后台的数据交互）附源码

    一、什么是后台交互？

            在小程序中，与后台交互指的是小程序前端与后台服务器之间的数据通信和请求处理过程。通过与后台交互，小程序能够获取服务器端的数据、上传用户数据、发送请求等。

            小程序与后台交互可以实现数据的传输、用户认证、实时消息推送等功能，为用户提供更丰富的体验和功能。

    与后台交互可以通过以下方式实现：

    1. 发起网络请求：小程序可以使用网络请求 API（如wx.request）向后台发送 HTTP 请求，来获取后台服务器返回的数据。可以使用 GET、POST、PUT、DELETE 等不同的请求类型来实现不同的操作。
    2. WebSocket：小程序可以使用 WebSocket 技术与服务器建立长连接，实现实时的双向通信。通过 WebSocket，小程序能够及时接收服务器端推送的消息，实现实时更新和交互。
    3. 云函数：小程序提供了云开发平台，其中的云函数可以在后台服务器上执行，用于处理复杂的业务逻辑和数据处理。小程序可以通过调用云函数来与后台进行交互，并获取处理结果。

    二、后台数据交互与request封装

    1、准备工作

    • 在使用数据交互的时候我们要事先准备好后台的数据方便我们进行调用。
    • 我在这里就不准备后台的数据在这里了

    2、后台数据交互

    1、在前面的博客里面编写了一个专门用来调用数据后台的一个api.js文件，我们要确保这些数据可以调用到后台，记得把你的后台启动哦！

    1. // 以下是业务服务器API地址
    2.  // 本机开发API地址
    3.  var WxApiRoot = 'http://localhost:8080/wx/';
    4.  
    5.  module.exports = {
    6.    IndexUrl: WxApiRoot + 'home/index' //首页数据接口
    7.  };

    2、在你要调用的页面的js里面编写调用的方法，注意记得打印一下你的数据是在那个属性里面，记得在Page的外面调用实用例。

    1. // 获取应用实例
    2. const app = getApp()
    3. const api = require("../../config/api")
    4.  //首页会议信息的ajax
    5.     loadMeetingInfos() {
    6.         let that = this;
    7.          wx.request({
    8.              url: api.IndexUrl,
    9.              dataType: 'json',
    10.              success(res) {
    11.                  console.log(res)
    12.                  that.setData({
    13.                      lists: res.data.data.infoList
    14.                  })
    15.              }
    16.          })
    17.  
    18.     }

    然后再定义好的onLoad方法里面调用

    1.     onLoad() {
    2.         if (wx.getUserProfile) {
    3.             this.setData({
    4.                 canIUseGetUserProfile: true
    5.             })
    6.         }
    7.         this.loadMeetingInfos();
    8.     }

    3、request封装

    1. 在我们项目的里面有个utils/util,js文件，在里面进行一个方法编写。
      1.  
      2. /**
      3.  * 封装微信的request请求
      4.  */
      5. function request(url, data = {}, method = "GET") {
      6.     return new Promise(function (resolve, reject) {
      7.         wx.request({
      8.             url: url,
      9.             data: data,
      10.             method: method,
      11.             header: {
      12.                 'Content-Type': 'application/json',
      13.             },
      14.             success: function (res) {
      15.                 if (res.statusCode == 200) {
      16.                     resolve(res.data);//会把进行中改变成已成功
      17.                 } else {
      18.                     reject(res.errMsg);//会把进行中改变成已失败
      19.                 }
      20.             },
      21.             fail: function (err) {
      22.                 reject(err)
      23.             }
      24.         })
      25.     });
      26. }
      27. module.exports = {
      28.     formatTime,request
      29. }

    2. 在你的需要调用的页面进行一个方法的调用进行代码的优化；就以上为例：

      1. // 获取应用实例
      2. const app = getApp()
      3. const api = require("../../config/api")
      4. const util = require("../../utils/util.js")
      5.  //首页会议信息的ajax
      6.     loadMeetingInfos() {
      7.         let that = this;
      8.  
      9.         util.request(api.IndexUrl).then(res => {
      10.             console.log(res)
      11.             this.setData({
      12.                 lists: res.data.infoList
      13.             })
      14.         }).catch(res => {
      15.             console.log('服器没有开启，使用模拟数据!')
      16.         })
      17.     }

    3. 效果也是一样的，只是进行了一个代码的优化。

    这里提供完整的代码

    util.js

    1. const formatTime = date => {
    2.     const year = date.getFullYear()
    3.     const month = date.getMonth() + 1
    4.     const day = date.getDate()
    5.     const hour = date.getHours()
    6.     const minute = date.getMinutes()
    7.     const second = date.getSeconds()
    8.  
    9.     return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
    10. }
    11.  
    12. const formatNumber = n => {
    13.     n = n.toString()
    14.     return n[1] ? n : `0${n}`
    15. }
    16.  
    17. /**
    18.  * 封装微信的request请求
    19.  */
    20. function request(url, data = {}, method = "GET") {
    21.     return new Promise(function (resolve, reject) {
    22.         wx.request({
    23.             url: url,
    24.             data: data,
    25.             method: method,
    26.             header: {
    27.                 'Content-Type': 'application/json',
    28.             },
    29.             success: function (res) {
    30.                 if (res.statusCode == 200) {
    31.                     resolve(res.data);//会把进行中改变成已成功
    32.                 } else {
    33.                     reject(res.errMsg);//会把进行中改变成已失败
    34.                 }
    35.             },
    36.             fail: function (err) {
    37.                 reject(err)
    38.             }
    39.         })
    40.     });
    41. }
    42. module.exports = {
    43.     formatTime,request
    44. }

    index.js

    1. // index.js
    2. // 获取应用实例
    3. const app = getApp()
    4. const api = require("../../config/api")
    5. const util = require("../../utils/util.js")
    6. Page({
    7.     data: {
    8.         imgSrcs: [{
    9.             "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png",
    10.             "text": "1"
    11.         },
    12.         "lists": []
    13.     },
    14.     //首页会议信息的ajax
    15.     loadMeetingInfos() {
    16.         let that = this;
    17.         util.request(api.IndexUrl).then(res => {
    18.             console.log(res)
    19.             this.setData({
    20.                 lists: res.data.infoList
    21.             })
    22.             console.log(res.data.infoList)
    23.         }).catch(res => {
    24.             console.log('服器没有开启，使用模拟数据!')
    25.         })
    26.     },
    27.     onLoad() {
    28.         if (wx.getUserProfile) {
    29.             this.setData({
    30.                 canIUseGetUserProfile: true
    31.             })
    32.         }
    33.         this.loadMeetingInfos();
    34.     }
    35. })

    三、wxs的使用

    我们可以在微信的开发文档里面可以查看到微信开放文档，wxs的使用。

    1、使用wxs步骤

    1. 我们首先新建一个wxs文件在一个位置
    2. 然后在里面定义方法 
      1. function getState(state){}
      2. module.exports = {
      3.     getState: getState
      4. };
    3. 在wxml里面调用，src:是你的wxs的路径；module:你后面需要调用的名字，可以随便取。 
          <wxs src="/utils/comm.wxs" module="tools" />

    4. 调用

      <text class="list-num">{{tools.getState(item.state)}}text>

    2、完整方法

    wxs

    1.  
    2. function getState(state) {
    3.     // 状态：0取消会议1待审核2驳回3待开4进行中5开启投票6结束会议，默认值为1
    4.     if (state == 0) {
    5.         return '取消会议';
    6.     } else if (state == 1) {
    7.         return '待审核';
    8.     } else if (state == 2) {
    9.         return '驳回';
    10.     } else if (state == 3) {
    11.         return '待开';
    12.     } else if (state == 4) {
    13.         return '进行中';
    14.     } else if (state == 5) {
    15.         return '开启投票';
    16.     } else if (state == 6) {
    17.         return '结束会议';
    18.     }
    19.  
    20.     return '其它';
    21.  
    22. }
    23. function getNumber(canyuze, liexize, zhuchiren) {
    24.     var person = canyuze + ',' + liexize + ',' + zhuchiren;
    25.     return person.split(',').length;
    26. }
    27. function formatDate(ts, option) {
    28.     var date = getDate(ts)
    29.     var year = date.getFullYear()
    30.     var month = date.getMonth() + 1
    31.     var day = date.getDate()
    32.     var week = date.getDay()
    33.     var hour = date.getHours()
    34.     var minute = date.getMinutes()
    35.     var second = date.getSeconds()
    36.  
    37.     //获取 年月日
    38.     if (option == 'YY-MM-DD') return [year, month, day].map(formatNumber).join('-')
    39.  
    40.     //获取 年月
    41.     if (option == 'YY-MM') return [year, month].map(formatNumber).join('-')
    42.  
    43.     //获取 年
    44.     if (option == 'YY') return [year].map(formatNumber).toString()
    45.  
    46.     //获取 月
    47.     if (option == 'MM') return [mont].map(formatNumber).toString()
    48.  
    49.     //获取 日
    50.     if (option == 'DD') return [day].map(formatNumber).toString()
    51.  
    52.     //获取 年月日 周一 至 周日
    53.     if (option == 'YY-MM-DD Week') return [year, month, day].map(formatNumber).join('-') + ' ' + getWeek(week)
    54.  
    55.     //获取 月日 周一 至 周日
    56.     if (option == 'MM-DD Week') return [month, day].map(formatNumber).join('-') + ' ' + getWeek(week)
    57.  
    58.     //获取 周一 至 周日
    59.     if (option == 'Week') return getWeek(week)
    60.  
    61.     //获取 时分秒
    62.     if (option == 'hh-mm-ss') return [hour, minute, second].map(formatNumber).join(':')
    63.  
    64.     //获取 时分
    65.     if (option == 'hh-mm') return [hour, minute].map(formatNumber).join(':')
    66.  
    67.     //获取 分秒
    68.     if (option == 'mm-dd') return [minute, second].map(formatNumber).join(':')
    69.  
    70.     //获取 时
    71.     if (option == 'hh') return [hour].map(formatNumber).toString()
    72.  
    73.     //获取 分
    74.     if (option == 'mm') return [minute].map(formatNumber).toString()
    75.  
    76.     //获取 秒
    77.     if (option == 'ss') return [second].map(formatNumber).toString()
    78.  
    79.     //默认 时分秒 年月日
    80.     return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    81. }
    82. function formatNumber(n) {
    83.     n = n.toString()
    84.     return n[1] ? n : '0' + n
    85. }
    86.  
    87. function getWeek(n) {
    88.     switch (n) {
    89.         case 1:
    90.             return '星期一'
    91.         case 2:
    92.             return '星期二'
    93.         case 3:
    94.             return '星期三'
    95.         case 4:
    96.             return '星期四'
    97.         case 5:
    98.             return '星期五'
    99.         case 6:
    100.             return '星期六'
    101.         case 7:
    102.             return '星期日'
    103.     }
    104. }
    105. module.exports = {
    106.     getState: getState,
    107.     getNumber: getNumber,
    108.     formatDate:formatDate
    109. };

    index.wxml

    1. <view class="indexbg">
    2.     <swiper autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="#00f">
    3.         <block wx:for="{{imgSrcs}}" wx:key="text">
    4.             <swiper-item>
    5.                 <view>
    6.                     <image src="{{item.img}}" class="swiper-item" />
    7.                 view>
    8.             swiper-item>
    9.         block>
    10.     swiper>
    11.     <wxs src="/utils/comm.wxs" module="tools" />
    12.     <view class="mobi-title">
    13.         <text class="mobi-icon">❤text>
    14.         <text class="mobi-text">会议信息text>
    15.     view>
    16.     <block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id" class="bg">
    17.         <view class="list" data-id="{{item.id}}">
    18.             <view class="list-img">
    19.                 <image class="video-img" mode="scaleToFill" src="{{item.image != null ? item.image:'/static/persons/8.jpg'}}">image>
    20.             view>
    21.             <view class="list-detail">
    22.                 <view class="list-title"><text>{{item.title}}text>view>
    23.                 <view class="list-tag">
    24.                     <view class="state">{{tools.getState(item.state)}}view>
    25.                     <view class="join"><text class="list-num">{{tools.getNumber(item.canyuze,item.liexize,item.zhuzhiren)}}text>人报名view>
    26.                 view>
    27.                 <view class="list-info"><text>{{item.location}}text>|<text>{{tools.formatDate(item.starttime,'YY-MM-DD hh-mm-ss')}}text>view>
    28.             view>
    29.         view>
    30.     block>
    31.     <view class="section">
    32.         <text>到底啦text>
    33.     view>
    34. view>

  • 相关阅读:
    数据结构 Map&Set(搜索)
    redis底层都有哪些数据结构？带你了解redis是如何存储数据的
    运算符+事件三要素
    ebay运营思路|学会这些技巧，新店铺销量翻倍
    【毕业季·进击的技术er】 什么是微信小程序，带你推开小程序的大门
    Show Me the Code之MXNet网络模型（三）
    【毕业设计】基于深度学习实现语义分割算法系统 - 机器视觉
    基于webapi的websocket聊天室（番外二）
    LeetCode—1. 两数之和—python
    （七）vulhub专栏：Log4j远程代码执行漏洞复现
  • 原文地址：https://blog.csdn.net/weixin_74383330/article/details/133949559