• 小程序实现后台数据交互及WXS的使用

    一，数据交互准备工作

    1.1 后端准备

    后端部分代码，可自行创建后端代码

    1. package com.zking.minoa.wxcontroller;
    2.  
    3. import com.zking.minoa.mapper.InfoMapper;
    4. import com.zking.minoa.model.Info;
    5. import com.zking.minoa.util.ResponseUtil;
    6. import org.springframework.beans.factory.annotation.Autowired;
    7. import org.springframework.web.bind.annotation.RequestMapping;
    8. import org.springframework.web.bind.annotation.RestController;
    9.  
    10. import java.util.HashMap;
    11. import java.util.List;
    12. import java.util.Map;
    13.  
    14. /**
    15.  * @Autho donkee
    16.  * @Since 2022/6/29
    17.  */
    18. @RestController
    19. @RequestMapping("/wx/home")
    20. public class WxHomeController {
    21.     @Autowired
    22.     private InfoMapper infoMapper;
    23.     @RequestMapping("/index")
    24.     public Object index(Info info) {
    25.         List infoList = infoMapper.list(info);
    26.         Map data = new HashMap();
    27.         data.put("infoList",infoList);
    28.         return ResponseUtil.ok(data);
    29.     }
    30. }

    pom.xml的配置:

    根据自己有更多需求进行应用配置的增加

    1. "1.0" encoding="UTF-8"?>
    2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    4.     <modelVersion>4.0.0modelVersion>
    5.     <parent>
    6.         <groupId>org.springframework.bootgroupId>
    7.         <artifactId>spring-boot-starter-parentartifactId>
    8.         <version>2.6.2version>
    9.         <relativePath/> 
    10.     parent>
    11.     <groupId>com.zkinggroupId>
    12.     <artifactId>minoaartifactId>
    13.     <version>0.0.1-SNAPSHOTversion>
    14.     <name>minoaname>
    15.     <description>Demo project for Spring Bootdescription>
    16.     <properties>
    17.         <java.version>1.8java.version>
    18.         <fastjson.version>1.2.70fastjson.version>
    19.         <jackson.version>2.9.8jackson.version>
    20.     properties>
    21.     <dependencies>
    22.         <dependency>
    23.             <groupId>org.springframework.bootgroupId>
    24.             <artifactId>spring-boot-starter-jdbcartifactId>
    25.         dependency>
    26.         <dependency>
    27.             <groupId>org.springframework.bootgroupId>
    28.             <artifactId>spring-boot-starter-webartifactId>
    29.         dependency>
    30.  
    31.         <dependency>
    32.             <groupId>org.mybatis.spring.bootgroupId>
    33.             <artifactId>mybatis-spring-boot-starterartifactId>
    34.             <version>2.2.1version>
    35.         dependency>
    36.  
    37.         <dependency>
    38.             <groupId>mysqlgroupId>
    39.             <artifactId>mysql-connector-javaartifactId>
    40.             <version>5.1.44version>
    41.             <scope>runtimescope>
    42.         dependency>
    43.         <dependency>
    44.             <groupId>org.projectlombokgroupId>
    45.             <artifactId>lombokartifactId>
    46.             <optional>trueoptional>
    47.         dependency>
    48.  
    49.         <dependency>
    50.             <groupId>com.alibabagroupId>
    51.             <artifactId>fastjsonartifactId>
    52.             <version>${fastjson.version}version>
    53.         dependency>
    54.  
    55.     dependencies>
    56.  
    57.     <build>
    58.         <plugins>
    59.             <plugin>
    60.                 <groupId>org.springframework.bootgroupId>
    61.                 <artifactId>spring-boot-maven-pluginartifactId>
    62.                 <configuration>
    63.                     <excludes>
    64.                         <exclude>
    65.                             <groupId>org.projectlombokgroupId>
    66.                             <artifactId>lombokartifactId>
    67.                         exclude>
    68.                     excludes>
    69.                 configuration>
    70.             plugin>
    71.  
    72.             <plugin>
    73.                 <groupId>org.mybatis.generatorgroupId>
    74.                 <artifactId>mybatis-generator-maven-pluginartifactId>
    75.                 <version>1.3.2version>
    76.                 <dependencies>
    77.                     
    78.                     <dependency>
    79.                         <groupId>mysqlgroupId>
    80.                         <artifactId>mysql-connector-javaartifactId>
    81.                         <version>${mysql.version}version>
    82.                     dependency>
    83.                 dependencies>
    84.                 <configuration>
    85.                     <overwrite>trueoverwrite>
    86.                 configuration>
    87.             plugin>
    88.         plugins>
    89.     build>
    90.  
    91. project>

    访问所有数据 

    1.2 前端工作

     为了后期方便维护，我们先将所有的后端接口通过一个文件来保存，在根目录下新建config文件夹随后建立api.js文件

    1. // 以下是业务服务器API地址
    2.  // 本机开发API地址
    3.  var WxApiRoot = 'http://localhost:8080/wx/';
    4.  // 测试环境部署api地址
    5.  // var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';
    6.  // 线上平台api地址
    7.  //var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';
    8.  
    9.  module.exports = {
    10.    IndexUrl: WxApiRoot + 'home/index', //首页数据接口
    11.    SwiperImgs: WxApiRoot+'swiperImgs', //轮播图
    12.    MettingInfos: WxApiRoot+'meeting/list', //会议信息
    13.  };

    1.2.1请求方式的封装

    1.  loadMeetingInfos(){
    2.     let that=this;
    3.     wx.request({
    4.         url: api.IndexUrl,
    5.         dataType: 'json',
    6.         success(res) {
    7.           console.log(res)
    8.           that.setData({
    9.               lists:res.data.data.infoList
    10.           })
    11.         }
    12.       })
    13.   }

    在/utils/util.js中添加下列代码:

    1. /**
    2.  * 封装微信的request请求
    3.  */
    4. function request(url, data = {}, method = "GET") {
    5.   return new Promise(function (resolve, reject) {
    6.     wx.request({
    7.       url: url,
    8.       data: data,
    9.       method: method,
    10.       header: {
    11.         'Content-Type': 'application/json',
    12.       },
    13.       success: function (res) {
    14.         if (res.statusCode == 200) {
    15.             resolve(res.data);//会把进行中改变成已成功
    16.         } else {
    17.           reject(res.errMsg);//会把进行中改变成已失败
    18.         }
    19.       },
    20.       fail: function (err) {
    21.         reject(err)
    22.       }
    23.     })
    24.   });
    25. }

    注意在module.exports中导出和需要使用的页面js中使用时定义：const util = require("../../utils/util")

    1.  //首页会议信息的ajax
    2.   loadMeetingInfos() {
    3.     let that = this;
    4.     util.request(api.IndexUrl).then(res => {
    5.       this.setData({
    6.         lists: res.data.infoList
    7.       })
    8.     })
    9.   }

    二，实现数据交互

    前端wxml:

    2. <view>
    3.   <swiper autoplay="true" indicator-dots="true">
    4.     <block wx:for="{{imgSrcs}}" wx:key="text">
    5.       <swiper-item>
    6.         <view>
    7.           <image src="{{item.img}}" class="swiper-item" />
    8.         view>
    9.       swiper-item>
    10.     block>
    11.   swiper>
    12. view>
    13.  
    14.  
    15. <view class="mobi-title">
    16.   <text class="mobi-icon">text>
    17.   <text class="mobi-text">会议信息text>
    18. view>
    19. <block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    20.   <view class="list" data-id="{{item.id}}">
    21.     <view class="list-img">
    22.       <image class="video-img" mode="scaleToFill" src="{{item.image !=null? item.image : '/static/persons/6.png'}}">image>
    23.     view>
    24.     <view class="list-detail">
    25.       <view class="list-title"><text>{{item.title}}text>view>
    26.       <view class="list-tag">
    27.         <view class="state">{{item.state}}view>
    28.         <view class="join"><text class="list-num">{{item.num}}text>人报名view>
    29.       view>
    30.       <view class="list-info"><text>{{item.location}}text>|<text>{{item.starttime}}text>view>
    31.     view>
    32.   view>
    33. block>
    34. <view class="section">
    35.   <text>到底啦text>
    36. view>

    前端wxss:

    1. /**index.wxss**/
    2. .section{
    3.   color: #aaa;
    4.   display: flex;
    5.   justify-content: center;
    6. }
    7.  
    8. .list-info {
    9.   color: #aaa;
    10. }
    11.  
    12. .list-num {
    13.   color: #e40909;
    14.   font-weight: 700;
    15. }
    16.  
    17. .join {
    18.   padding: 0px 0px 0px 10px;
    19.   color: #aaa;
    20. }
    21.  
    22. .state {
    23.   margin: 0px 6px 0px 6px;
    24.   border: 1px solid #93b9ff;
    25.   color: #93b9ff;
    26. }
    27.  
    28. .list-tag {
    29.   padding: 3px 0px 10px 0px;
    30.   display: flex;
    31.   align-items: center;
    32. }
    33.  
    34. .list-title {
    35.   display: flex;
    36.   justify-content: space-between;
    37.   font-size: 11pt;
    38.   color: #333;
    39.   font-weight: bold;
    40.  
    41.  
    42. }
    43.  
    44. .list-detail {
    45.   display: flex;
    46.   flex-direction: column;
    47.   margin: 0px 0px 0px 15px;
    48. }
    49.  
    50. .video-img {
    51.   width: 80px;
    52.   height: 80px;
    53. }
    54.  
    55. .list {
    56.   display: flex;
    57.   flex-direction: row;
    58.   border-bottom: 1px solid #6b6e74;
    59.   padding: 10px;
    60. }
    61.  
    62. .mobi-text {
    63.   font-weight: 700;
    64.   padding: 15px;
    65. }
    66.  
    67. .mobi-icon {
    68.   border-left: 5px solid #e40909;
    69. }
    70.  
    71. .mobi-title {
    72.   background-color: rgba(158, 158, 142, 0.678);
    73.   margin: 10px 0px 10px 0px;
    74. }
    75.  
    76. .swiper-item {
    77.   height: 300rpx;
    78.   width: 100%;
    79.   border-radius: 10rpx;
    80. }
    81.  
    82. .userinfo {
    83.   display: flex;
    84.   flex-direction: column;
    85.   align-items: center;
    86.   color: #aaa;
    87. }
    88.  
    89. .userinfo-avatar {
    90.   overflow: hidden;
    91.   width: 128rpx;
    92.   height: 128rpx;
    93.   margin: 20rpx;
    94.   border-radius: 50%;
    95. }
    96.  
    97. .usermotto {
    98.   margin-top: 200px;
    99. }

    三，WXS的使用

        WXS 代码可以编写在 wxml 文件中的 标签内，或以 .wxs 为后缀名的文件内

    在wxs中，可以使用一些内置的方法和对象来实现数据处理，如Math、Date等。同时，也可以使用一些自定义的函数和变量来实现特定的业务逻辑

    通过后台数据交互和wxs应用，可以实现小程序的数据展示、数据操作和业务逻辑的实现。同时，也可以提高小程序的性能和用户体验

    3.1 WXS文件

    在项目中的utils文件中创建 .wxs 文件，名为: comm.wxs

    comm.wxs代码：

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

    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.  * 封装微信的request请求
    18.  */
    19. function request(url, data = {}, method = "GET") {
    20.   return new Promise(function (resolve, reject) {
    21.     wx.request({
    22.       url: url,
    23.       data: data,
    24.       method: method,
    25.       header: {
    26.         'Content-Type': 'application/json',
    27.       },
    28.       success: function (res) {
    29.         if (res.statusCode == 200) {
    30.             resolve(res.data);//会把进行中改变成已成功
    31.         } else {
    32.           reject(res.errMsg);//会把进行中改变成已失败
    33.         }
    34.       },
    35.       fail: function (err) {
    36.         reject(err)
    37.       }
    38.     })
    39.   });
    40. }
    41.  
    42. module.exports = {
    43.   formatTime,request
    44. }

    再修改首页页面中的 index.wxml  文件，在需要使用的页面进行引用即可 

    1.   "/utils/comm.wxs" module="tools" />
    2.  {{tools.msg}} 
    3.  {{tools.bar(tools.FOO)}}

    3.2 页面

    前端首页总代码 

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

    效果：

  • 相关阅读:
    如何使用vsCode打开intel D435i深度相机
    Docker Desktop 设置镜像环境变量
    什么是软件工程？
    ICCV 2023 | SuS-X：仅靠类别名称微调CLIP模型，剑桥大学联合DeepMind出品
    【Vue】vuex getters 配置项
    蓝牙地址解析(NAP/UAP/LAP)
    k8s学习-CKA真题-网络策略NetworkPolicy
    【花雕动手做】有趣好玩的音乐可视化系列项目（31）--LCD1602液晶屏
    OpenCV（三十四）：轮廓外接最大、最小矩形和多边形拟合
    QGIS下载各种DEM的插件（SRTM 90m/30m -ALOS 30m -Cop 30m/90m-NASADEM Global DEM）
  • 原文地址：https://blog.csdn.net/m0_73192864/article/details/133956276