• 微信小程序数据交互------WXS的使用

                                                      🎬 艳艳耶✌️：个人主页

                                                      🔥 个人专栏 ：《Spring与Mybatis集成整合》《Vue.js使用》

                                                      ⛺️ 越努力 ，越幸运。
     

    1.数据库连接

    数据表结构：

     

    数据测式：

     

    2.后台配置

    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.CloudJun</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.     </dependencies>
    55.  
    56.     <build>
    57.         <plugins>
    58.             <plugin>
    59.                 <groupId>org.springframework.boot</groupId>
    60.                 <artifactId>spring-boot-maven-plugin</artifactId>
    61.                 <configuration>
    62.                     <excludes>
    63.                         <exclude>
    64.                             <groupId>org.projectlombok</groupId>
    65.                             <artifactId>lombok</artifactId>
    66.                         </exclude>
    67.                     </excludes>
    68.                 </configuration>
    69.             </plugin>
    70.  
    71.             <plugin>
    72.                 <groupId>org.mybatis.generator</groupId>
    73.                 <artifactId>mybatis-generator-maven-plugin</artifactId>
    74.                 <version>1.3.2</version>
    75.                 <dependencies>
    76.                     <!--使用Mybatis-generator插件不能使用太高版本的mysql驱动 -->
    77.                     <dependency>
    78.                         <groupId>mysql</groupId>
    79.                         <artifactId>mysql-connector-java</artifactId>
    80.                         <version>${mysql.version}</version>
    81.                     </dependency>
    82.                 </dependencies>
    83.                 <configuration>
    84.                     <overwrite>true</overwrite>
    85.                 </configuration>
    86.             </plugin>
    87.         </plugins>
    88.     </build>
    89.  
    90. </project>

    appliation.yml

    1. spring:
    2.   datasource:
    3.     #type连接池类型 DBCP,C3P0,Hikari,Druid,默认为Hikari
    4.     type: com.zaxxer.hikari.HikariDataSource
    5.     driver-class-name: com.mysql.jdbc.Driver
    6.     url: jdbc:mysql://localhost:3306/mybatis_oapro?useUnicode=true&characterEncoding=UTF-8&useSSL=false
    7.     username: root
    8.     password: 123456
    9. mybatis:
    10.   mapper-locations: classpath*:mapper/*.xml #指定mapper文件位置
    11.   type-aliases-package: com.zking.minoa.model #指定自动生成别名所在包
    12.  
    13. logging:
    14.   level:
    15.     root: info
    16.     com.zking.minoa.mapper: debug

    3.前端代码

    index.wxml

    1.  
    2. <!-- <view class="box">
    3. <view>1</view>
    4. <view>2</view>
    5. <view>3</view>
    6. <view>4</view>
    7. <view>5</view>
    8. <view>6</view>
    9. <view>7</view>
    10. <view>8</view>
    11. <view>9</view>
    12. <view>10</view>
    13. <view>11</view>
    14. <view>12</view>
    15. </view> -->
    16. <!--index.wxml-->
    17.  
    18. <!--index.wxml-->
    19. <view>
    20.     <swiper autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="#00f">
    21.         <block wx:for="{{images}}" wx:key="text">
    22.             <swiper-item>
    23.                 <view>
    24.                     <image src="{{item.img}}" class="swiper-item" />
    25.                 </view>
    26.             </swiper-item>
    27.         </block>
    28.     </swiper>
    29. </view>
    30. <wxs src="/utils/comm.wxs" module="tools" />
    31. <view class="mobi-title">
    32.     <text class="mobi-icon"></text>
    33.     <text>会议信息</text>
    34. </view>
    35. <block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    36.     <view class="list" data-id="{{item.id}}">
    37.         <view class="list-img">
    38.             <image class="video-img" mode="scaleToFill" src="{{item.seatpic}}"></image>
    39.         </view>
    40.         <view class="list-detail">
    41.             <view class="list-title"><text>{{item.title}}</text></view>
    42.             <view class="list-tag">
    43.                 <view class="state">{{tools.getStateName(item.state)}}</view>
    44.                 <view class="join"><text class="list-num">{{tools.getNum
    45. (item.canyuze,item.liexize,item.zhuchiren)}} </text> 人报名</view>
    46.             </view>
    47.             <view class="list-info"><text>{{item.location}}</text> | <text>{{tools.formatDate(item.starttime)}}</text></view>
    48.         </view>
    49.     </view>
    50. </block>
    51. <view class="section bottom-line">
    52. 		<text>到底啦</text>
    53. </view>

    index.wxss

    1. /* pages/meeting/list/list.wxss */
    2. .list {
    3.   display: flex;
    4.   flex-direction: row;
    5.   width: 100%;
    6.   padding: 0 20rpx 0 0;
    7.   border-top: 1px solid #eeeeee;
    8.   background-color: #fff;
    9.   margin-bottom: 5rpx;
    10.   /* border-radius: 20rpx;
    11.   box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
    12. }
    13.  
    14. .list-img {
    15.   display: flex;
    16.   margin: 10rpx 10rpx;
    17.   width: 150rpx;
    18.   height: 220rpx;
    19.   justify-content: center;
    20.   align-items: center;
    21. }
    22.  
    23. .list-img .video-img {
    24.   width: 120rpx;
    25.   height: 120rpx;
    26.   
    27. }
    28.  
    29. .list-detail {
    30.   margin: 10rpx 10rpx;
    31.   display: flex;
    32.   flex-direction: column;
    33.   width: 600rpx;
    34.   height: 220rpx;
    35. }
    36.  
    37. .list-title text {
    38.   font-size: 11pt;
    39.   color: #333;
    40.   font-weight: bold;
    41. }
    42.  
    43. .list-detail .list-tag {
    44.   display: flex;
    45.   height: 70rpx;
    46. }
    47.  
    48. .list-tag .state {
    49.   font-size: 9pt;
    50.   color: #81aaf7;
    51.   width: 120rpx;
    52.   border: 1px solid #93b9ff;
    53.   border-radius: 2px;
    54.   margin: 10rpx 0rpx;
    55.   display: flex;
    56.   justify-content: center;
    57.   align-items: center;
    58. }
    59.  
    60. .list-tag .join {
    61.   font-size: 11pt;
    62.   color: #bbb;
    63.   margin-left: 20rpx;
    64.   display: flex;
    65.   justify-content: center;
    66.   align-items: center;
    67. }
    68.  
    69. .list-tag .list-num {
    70.   font-size: 11pt;
    71.   color: #ff6666;
    72. }
    73.  
    74. .list-info {
    75.   font-size: 9pt;
    76.   color: #bbb;
    77.   margin-top: 20rpx;
    78. }
    79. .bottom-line{
    80.   display: flex;
    81.   height: 60rpx;
    82.   justify-content: center;
    83.   align-items: center;
    84.   background-color: #f3f3f3;
    85. }
    86. .bottom-line text{
    87.   font-size: 9pt;
    88.   color: #666;
    89. }

    效果展示：

    4.WXS的使用

    WXS（WeChat Mini Program Storage）是微信小程序提供的本地存储方案，用于在小程序中进行数据的存储和管理。相比远程数据库，WXS更适合于小规模、简单的数据存储需求。

    4.1.wxs 文件

    在微信开发者工具里面，右键可以直接创建 .wxs 文件，在其中直接编写 WXS 脚本。

    1. // /pages/comm.wxs
    2.  
    3. var foo = "'hello world' from comm.wxs";
    4. var bar = function(d) {
    5.   return d;
    6. }
    7. module.exports = {
    8.   foo: foo,
    9.   bar: bar
    10. };

    • exports: 通过该属性，可以对外共享本模块的私有变量与函数。

    在需要使用的页面进行引用即可

    1. <wxs src="/tools.wxs" module="tools" />
    2. <view> {{tools.msg}} </view>
    3. <view> {{tools.bar(tools.FOO)}} </view>

    4.2.解决数据显示数字问题

    1. function getStateName(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. module.exports = {
    23.  getStateName:getStateName,
    24.  
    25. };

     4.3.解决统计人数问题

    1. function getNum(canyuze,liexize,zhuchiren){
    2. var person = canyuze + "," +liexize +","+ zhuchiren; 
    3. var arr = person.split(",");
    4. var res =[];
    5. for(var i = 0; i < arr.length; i++){
    6. if(res.indexOf(arr[i] === -1)){
    7. res.push(arr[i]);
    8. }
    9. }
    10.  
    11. return res.length;
    12. }
    13. module.exports = {
    14.  getNum:getNum,
    15.  
    16. };

    4.4.解决时间进制问题

    1. function formatDate(ts, option) {
    2.   var date = getDate(ts)
    3.   var year = date.getFullYear()
    4.   var month = date.getMonth() + 1
    5.   var day = date.getDate()
    6.   var week = date.getDay()
    7.   var hour = date.getHours()
    8.   var minute = date.getMinutes()
    9.   var second = date.getSeconds()
    10.   
    11.   //获取 年月日
    12.   if (option == 'YY-MM-DD') return [year, month, day].map(formatNumber).join('-')
    13.  
    14.   //获取 年月
    15.   if (option == 'YY-MM') return [year, month].map(formatNumber).join('-')
    16.  
    17.   //获取 年
    18.   if (option == 'YY') return [year].map(formatNumber).toString()
    19.  
    20.   //获取 月
    21.   if (option == 'MM') return  [mont].map(formatNumber).toString()
    22.  
    23.   //获取 日
    24.   if (option == 'DD') return [day].map(formatNumber).toString()
    25.  
    26.   //获取 年月日 周一 至 周日
    27.   if (option == 'YY-MM-DD Week')  return [year, month, day].map(formatNumber).join('-') + ' ' + getWeek(week)
    28.  
    29.   //获取 月日 周一 至 周日
    30.   if (option == 'MM-DD Week')  return [month, day].map(formatNumber).join('-') + ' ' + getWeek(week)
    31.  
    32.   //获取 周一 至 周日
    33.   if (option == 'Week')  return getWeek(week)
    34.  
    35.   //获取 时分秒
    36.   if (option == 'hh-mm-ss') return [hour, minute, second].map(formatNumber).join(':')
    37.  
    38.   //获取 时分
    39.   if (option == 'hh-mm') return [hour, minute].map(formatNumber).join(':')
    40.  
    41.   //获取 分秒
    42.   if (option == 'mm-dd') return [minute, second].map(formatNumber).join(':')
    43.  
    44.   //获取 时
    45.   if (option == 'hh')  return [hour].map(formatNumber).toString()
    46.  
    47.   //获取 分
    48.   if (option == 'mm')  return [minute].map(formatNumber).toString()
    49.  
    50.   //获取 秒
    51.   if (option == 'ss') return [second].map(formatNumber).toString()
    52.  
    53.   //默认 时分秒 年月日
    54.   return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    55. }
    56. function formatNumber(n) {
    57.   n = n.toString()
    58.   return n[1] ? n : '0' + n
    59. }
    60.  
    61. function getWeek(n) {
    62.   switch(n) {
    63.       case 1:
    64.       return '星期一'
    65.       case 2:
    66.       return '星期二'
    67.       case 3:
    68.       return '星期三'
    69.       case 4:
    70.       return '星期四'
    71.       case 5:
    72.       return '星期五'
    73.       case 6:
    74.       return '星期六'
    75.       case 7:
    76.       return '星期日'
    77.   }
    78. }
    79. module.exports = 
    80. formatDate:formatDate,
    81.  
    82. };

    效果展示：

  • 相关阅读:
    前端基础：BFC
    基于结构应力方法的焊接结构疲劳评估及实例分析（上篇）
    spring-cloud-alibaba: nacos原理详解
    ES6:Map
    使用 Next.js、 Prisma 和 PostgreSQL 全栈开发视频网站
    2022年8月10日：使用 ASP.NET Core 为初学者构建 Web 应用程序--使用 ASP.NET Core 创建 Web UI
    Java项目：SSM企业OA管理系统
    深入理解Spring Boot Starter：概念、特点、场景、原理及自定义starter
    第一章：最新版零基础学习 PYTHON 教程（第十四节 - Python 条件和循环语句–Python 中的 with 语句）
    【开题报告】基于uni-app的恋爱打卡app的设计与实现
  • 原文地址：https://blog.csdn.net/2301_76988707/article/details/133949435