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

                                                  艳艳耶✌️：个人主页

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

                                                  ⛺️ 越努力 ，越幸运。
 

1.数据库连接

数据表结构：

 

数据测式：

 

2.后台配置

pom.xml

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.6.2
         
    
    com.CloudJun
    minoa
    0.0.1-SNAPSHOT
    minoa
    Demo project for Spring Boot
    
        1.8
        1.2.70
        2.9.8
    
    
        
            org.springframework.boot
            spring-boot-starter-jdbc
        
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            2.2.1
        

        
            mysql
            mysql-connector-java
            5.1.44
            runtime
        
        
            org.projectlombok
            lombok
            true
        

        
            com.alibaba
            fastjson
            ${fastjson.version}
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
                
                    
                        
                            org.projectlombok
                            lombok
                        
                    
                
            

            
                org.mybatis.generator
                mybatis-generator-maven-plugin
                1.3.2
                
                    
                    
                        mysql
                        mysql-connector-java
                        ${mysql.version}
                    
                
                
                    true
                
            
        
    

appliation.yml

spring:
  datasource:
    #type连接池类型 DBCP,C3P0,Hikari,Druid,默认为Hikari
    type: com.zaxxer.hikari.HikariDataSource
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/mybatis_oapro?useUnicode=true&characterEncoding=UTF-8&useSSL=false
    username: root
    password: 123456
mybatis:
  mapper-locations: classpath*:mapper/*.xml #指定mapper文件位置
  type-aliases-package: com.zking.minoa.model #指定自动生成别名所在包

logging:
  level:
    root: info
    com.zking.minoa.mapper: debug

3.前端代码

index.wxml

    
        
            
                
                    
                
            
        
    



    
    会议信息


    
        
            
        
        
            {{item.title}}
            
                {{tools.getStateName(item.state)}}
                {{tools.getNum
(item.canyuze,item.liexize,item.zhuchiren)}}  人报名
            
            {{item.location}} | {{tools.formatDate(item.starttime)}}
        
    


		到底啦

 

index.wxss

/* pages/meeting/list/list.wxss */
.list {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0 20rpx 0 0;
  border-top: 1px solid #eeeeee;
  background-color: #fff;
  margin-bottom: 5rpx;
  /* border-radius: 20rpx;
  box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
}
 
.list-img {
  display: flex;
  margin: 10rpx 10rpx;
  width: 150rpx;
  height: 220rpx;
  justify-content: center;
  align-items: center;
}
 
.list-img .video-img {
  width: 120rpx;
  height: 120rpx;
  
}
 
.list-detail {
  margin: 10rpx 10rpx;
  display: flex;
  flex-direction: column;
  width: 600rpx;
  height: 220rpx;
}
 
.list-title text {
  font-size: 11pt;
  color: #333;
  font-weight: bold;
}
 
.list-detail .list-tag {
  display: flex;
  height: 70rpx;
}
 
.list-tag .state {
  font-size: 9pt;
  color: #81aaf7;
  width: 120rpx;
  border: 1px solid #93b9ff;
  border-radius: 2px;
  margin: 10rpx 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.list-tag .join {
  font-size: 11pt;
  color: #bbb;
  margin-left: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.list-tag .list-num {
  font-size: 11pt;
  color: #ff6666;
}
 
.list-info {
  font-size: 9pt;
  color: #bbb;
  margin-top: 20rpx;
}
.bottom-line{
  display: flex;
  height: 60rpx;
  justify-content: center;
  align-items: center;
  background-color: #f3f3f3;
}
.bottom-line text{
  font-size: 9pt;
  color: #666;
}

效果展示：

4.WXS的使用

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

4.1.wxs 文件

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

// /pages/comm.wxs
 
var foo = "'hello world' from comm.wxs";
var bar = function(d) {
  return d;
}
module.exports = {
  foo: foo,
  bar: bar
};

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

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

 {{tools.msg}} 
 {{tools.bar(tools.FOO)}} 

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

function getStateName(state){
  // 状态：0取消会议1待审核2驳回3待开4进行中5开启投票6结束会议，默认值为1
  if(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 '其它';

}
module.exports = {
 getStateName:getStateName,

};

 4.3.解决统计人数问题

function getNum(canyuze,liexize,zhuchiren){
var person = canyuze + "," +liexize +","+ zhuchiren; 
var arr = person.split(",");
var res =[];
for(var i = 0; i < arr.length; i++){
if(res.indexOf(arr[i] === -1)){
res.push(arr[i]);
}
}

return res.length;
}
module.exports = {
 getNum:getNum,

};

4.4.解决时间进制问题

function formatDate(ts, option) {
  var date = getDate(ts)
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var 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 = 
formatDate:formatDate,

};

效果展示：