微信小程序之会议OA首页后台交互
后台准备
springboot+mybatis
pom.xml
4.0.0
org.springframework.boot
spring-boot-starter-parent
2.6.2
com.zking.ssm
ssm-oa
0.0.1-SNAPSHOT
OAPRO
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/oapro?useUnicode=true&characterEncoding=UTF-8&useSSL=false
username: root
password: sasamybatis-generator
生成mapper接口，model实体类，mapper映射文件
整合mybatis
application.yml
mybatis:
mapper-locations: classpath*:mapper/*.xml #指定mapper文件位置
type-aliases-package: com.zking.ssm.model #指定自动生成别名所在包在启动类
@MapperScan("com.zking.ssm.mapper") //指mapper接口所在包准备前端的首页的数据
Promise
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
-
promise运行中有三个状态：
-
pending: 等待 (进行中) promise一创建出来，就是pending进行中
-
fulfilled: 成功 (已完成), 调用 resolve, 就会将状态从pending改成fulfilled, 且将来就会执行.then
-
rejected: 失败 (拒绝), 调用 reject, 就会将状态从pending改成rejected, 且将来就会执行.catch
-
-
注意点：
-
一旦promise的状态发生变化, 状态就会被凝固
-
如果再调用reject或resolve,进行状态修改就没有意义了
-
封装request
在/utils/util.js中
/**
* 封装微信的request请求
*/
function request(url, data = {}, method = "GET") {
return new Promise(function (resolve, reject) {
wx.request({
url: url,
data: data,
method: method,
header: {
'Content-Type': 'application/json',
},
success: function (res) {
if (res.statusCode == 200) {
resolve(res.data);//会把进行中改变成已成功
} else {
reject(res.errMsg);//会把进行中改变成已失败
}
},
fail: function (err) {
reject(err)
}
})
});
}会议展示
index/index.js
loadMeetingInfos(){
let that=this;
util.request(api.IndexUrl).then(res=>{
this.setData({
lists:res.data.infoList
})
}).catch(res=>{
console.log('服器没有开启，使用模拟数据!')
})
}WXS
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
入门示例
-
新建一个wxs文件
var toDecimal2 = function (x) {
var f = parseFloat(x);
if (isNaN(f)) {
return '0.00'
}
var f = Math.round(x * 100) / 100;
var s = f.toString();
var rs = s.indexOf('.');
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + 2) {
s += '0';
}
return s;
}
//module.exports = toDecimal2
module.exports = {
toDecimal2:toDecimal2
}
在wxml中使用
var msg = "hello world";
module.exports.message = msg;
pages/c/c.wxml,
{{m1.message}}
{{PageUtils.toDecimal2(123.453)}}
注意事项
-
WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
-
WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
-
WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。
-
WXS 函数不能作为组件的事件回调。
-
由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
以下是一些使用 WXS 的简单示例，要完整了解 WXS 语法，请参考:WXS 语法参考 | 微信开放文档
页面渲染
var msg = "hello world";
module.exports.message = msg;
{{m1.message}} 页面输出： hello world
数据处理
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
}
})
var getMax = function(array) {
var max = undefined;
for (var i = 0; i < array.length; ++i) {
max = max === undefined ?
array[i] :
(max >= array[i] ? max : array[i]);
}
return max;
}
module.exports.getMax = getMax;
{{m1.getMax(array)}} 页面输出：5
综合案例
-
在utils目录下创建创建common.wxs文件
-
添加首页数据处理转换方法
-
会议状态切换
var changeStatus=function(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
return "会议结束";
};参会人数统计
var getCount=function(str){
//参与者+列席者+主持人==全部参会人员
//数组分割
var arr=str.split(',');
//用于接收数组去重后的结果
var arr2=[];
//循环并进行数组去重处理
for(var i=0;i参会日期转换
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 '星期日'
}
}3.wxs页面渲染处理
模块输出
module.exports={
changeStatus:changeStatus,
getCount:getCount,
formatDate:formatDate
}页面渲染
{{item.title}}
{{common.changeStatus(item.state)}}
{{common.getCount(item.canyuze+','+item.liexize+','+item.zhuchiren)}} 人报名
{{item.location}} | {{common.formatDate(item.starttime)}}