devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

小程序实现后台数据交互及WXS的使用_小程序与后端如何交互

作者：Cpp五条 | 2024-04-21 19:46:34

赞

踩

小程序与后端如何交互

一，数据交互准备工作

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<Info> infoList = infoMapper.list(info);
  26.         Map<Object, Object> data = new HashMap<Object, Object>();
  27.         data.put("infoList",infoList);
  28.         return ResponseUtil.ok(data);
  29.     }
  30. }

pom.xml的配置:

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

  1. <?xml version="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.0</modelVersion>
  5.     <parent>
  6.         <groupId>org.springframework.boot</groupId>
  7.         <artifactId>spring-boot-starter-parent</artifactId>
  8.         <version>2.6.2</version>
  9.         <relativePath/> <!-- lookup parent from repository -->
  10.     </parent>
  11.     <groupId>com.zking</groupId>
  12.     <artifactId>minoa</artifactId>
  13.     <version>0.0.1-SNAPSHOT</version>
  14.     <name>minoa</name>
  15.     <description>Demo project for Spring Boot</description>
  16.     <properties>
  17.         <java.version>1.8</java.version>
  18.         <fastjson.version>1.2.70</fastjson.version>
  19.         <jackson.version>2.9.8</jackson.version>
  20.     </properties>
  21.     <dependencies>
  22.         <dependency>
  23.             <groupId>org.springframework.boot</groupId>
  24.             <artifactId>spring-boot-starter-jdbc</artifactId>
  25.         </dependency>
  26.         <dependency>
  27.             <groupId>org.springframework.boot</groupId>
  28.             <artifactId>spring-boot-starter-web</artifactId>
  29.         </dependency>
  30.  
  31.         <dependency>
  32.             <groupId>org.mybatis.spring.boot</groupId>
  33.             <artifactId>mybatis-spring-boot-starter</artifactId>
  34.             <version>2.2.1</version>
  35.         </dependency>
  36.  
  37.         <dependency>
  38.             <groupId>mysql</groupId>
  39.             <artifactId>mysql-connector-java</artifactId>
  40.             <version>5.1.44</version>
  41.             <scope>runtime</scope>
  42.         </dependency>
  43.         <dependency>
  44.             <groupId>org.projectlombok</groupId>
  45.             <artifactId>lombok</artifactId>
  46.             <optional>true</optional>
  47.         </dependency>
  48.  
  49.         <dependency>
  50.             <groupId>com.alibaba</groupId>
  51.             <artifactId>fastjson</artifactId>
  52.             <version>${fastjson.version}</version>
  53.         </dependency>
  54.  
  55.     </dependencies>
  56.  
  57.     <build>
  58.         <plugins>
  59.             <plugin>
  60.                 <groupId>org.springframework.boot</groupId>
  61.                 <artifactId>spring-boot-maven-plugin</artifactId>
  62.                 <configuration>
  63.                     <excludes>
  64.                         <exclude>
  65.                             <groupId>org.projectlombok</groupId>
  66.                             <artifactId>lombok</artifactId>
  67.                         </exclude>
  68.                     </excludes>
  69.                 </configuration>
  70.             </plugin>
  71.  
  72.             <plugin>
  73.                 <groupId>org.mybatis.generator</groupId>
  74.                 <artifactId>mybatis-generator-maven-plugin</artifactId>
  75.                 <version>1.3.2</version>
  76.                 <dependencies>
  77.                     <!--使用Mybatis-generator插件不能使用太高版本的mysql驱动 -->
  78.                     <dependency>
  79.                         <groupId>mysql</groupId>
  80.                         <artifactId>mysql-connector-java</artifactId>
  81.                         <version>${mysql.version}</version>
  82.                     </dependency>
  83.                 </dependencies>
  84.                 <configuration>
  85.                     <overwrite>true</overwrite>
  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:

  1. <!--index.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 为后缀名的文件内

在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.   <wxs src="/utils/comm.wxs" module="tools" />
  2. <view> {{tools.msg}} </view>
  3. <view> {{tools.bar(tools.FOO)}} </view>

3.2 页面

前端首页总代码 

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

效果：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/464818
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号