网页网站建设难吗,域名注册需要多久,朝阳区办公,代运营推广公司目录 前言
一. 前后台数据交互及封装request
1.准备后台
1.1 配置数据源 1.2 部分后台获取数据方法编写
2.准备前端
2.1封装Request
2.2 前端JS方法编写
2.3 前端页面展示index.wxml
二.WXS的使用
1.简介
2.WXS优化OA系统 2.1 使用及定义
2.2 导入要使用的项目
2.…目录 前言
一. 前后台数据交互及封装request
1.准备后台
1.1 配置数据源 1.2 部分后台获取数据方法编写
2.准备前端
2.1封装Request
2.2 前端JS方法编写
2.3 前端页面展示index.wxml
二.WXS的使用
1.简介
2.WXS优化OA系统 2.1 使用及定义
2.2 导入要使用的项目
2.3 优化会议状态
2.4 优化人数参与
2.5 优化时间格式 最终效果展示 前言
本期为大家带来微信小程序之首页-后台交互及WXS的使用将前端进行数据交互并介绍WXS的使用 一. 前后台数据交互及封装request
1.准备后台 技术栈springbootmybatis 1.1 配置数据源
首先在我们的配置文件config/api中配置数据接口,因为等下需要启动后台所以这里测试使用本地WxApiRoot修改成自己的数据接口地址
// 以下是业务服务器API地址// 本机开发API地址var WxApiRoot http://localhost:8080/wx/;module.exports {IndexUrl: WxApiRoot home/index, //首页数据接口SwiperImgs: WxApiRootswiperImgs, //轮播图MettingInfos: WxApiRootmeeting/list, //会议信息}; 1.2 部分后台获取数据方法编写
RestControllerRequestMapping(/wx/home)
public class WxHomeController {Autowiredprivate InfoMapper infoMapper;RequestMapping(/index)public Object index(Info info) {ListInfo infoList infoMapper.list(info);MapObject, Object data new HashMapObject, Object();data.put(infoList,infoList);return ResponseUtil.ok(data);}
}
2.准备前端
2.1封装Request
在utils/util.js中进行封装Request并在执行方法前进行定义
/*** 封装微信的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,},
module.exports {request
} 注定义封装完request方法一定不要忘记在下方模块中进行导入使用 2.2 前端JS方法编写
通过loadMeetingInfos调用后端定义好的数据接口并将其展示在前端 loadMeetingInfos(){util.request(api.IndexUrl).then(res{this.setData({lists:res.data.infoList})})}, 注 其中的api、util不要忘了在JS顶部进行定义 const api require(../../config/app.js)
const util require(../../utils/util.js) 在加载的方法中进行调用该方法
onLoad() {this.loadMeetingInfos();},
2.3 前端页面展示index.wxml
viewswiper indicator-dotstrue autoplaytrueblock wx:for{{imgSrcs}} wx:keytextswiper-itemimage src{{item.img}}/image/swiper-item/block/swiper
/view
view styleheight: 60px;/view
block wx:for-items{{lists}} wx:for-itemitem wx:keyitem.idview classlist data-id{{item.id}}view classlist-imgimage classvideo-img modescaleToFill src{{item.image ! null ?item.image : /static/meeting/会议.jpg}}/image/viewview classlist-detailview classlist-titletext{{item.title}}/text/viewview classlist-tagview classstate{{item.state}}/viewview classjointext classlist-num{{item.num}}/text人报名/view/viewview classlist-infotext{{item.location}}/text|text{{item.starttime}}/text/view/view/view
/block
view classsectiontext到底啦/text
/view效果展示 二.WXS的使用
1.简介
WXSWeiXin Script是内联在 WXML 中的脚本段。通过 WXS 可以在模版中内联少量处理脚本丰富模板的数据预处理能力。
WXS 允许开发者在微信小程序中进行逻辑处理和数据操作。它的设计目标是为了解决一些在 WXMLWeiXin Markup Language和 JavaScript 中难以处理的问题提供更灵活的逻辑处理能力。 数据绑定和计算 WXS 可以用于处理数据绑定和计算。在小程序中WXML 用于描述页面的结构WXS 则可以用来进行一些数据的逻辑操作比如条件判断、循环等。 独立模块 WXS 可以被视为一种独立的模块有自己的作用域可以定义自己的变量和函数。这使得开发者可以更好地组织代码避免全局变量的冲突。 与 JavaScript 的关系 WXS 与 JavaScript 是有区别的虽然它们有相似的语法但在小程序中WXS 有一些限制和特定的用途。例如WXS 不具备 DOM 操作能力不能直接操作页面的结构。 运行环境 WXS 运行在一个独立的环境中与页面的生命周期不同步。它不支持页面事件主要用于数据处理和计算 2.WXS优化OA系统 2.1 使用及定义
首先在utils目录下创建common.wxs,这个文件存放我们所有的函数方法 2.2 导入要使用的项目 导入到我们要使用的wxml的页面中
wxs src/utils/common.wxs moduletools /
2.3 优化会议状态
编写优化会议状态函数并进行导入
function getStateName(state){if (state 1){return 待审核}else if (state 1){return 审核通过}else if (state 1){return 审核不通过}else if (state 1){return 待开}return 其他;
}module.exports {getStateName:getStateName
};
在wxml中进行函数调用(tools为导入wxs时的名称)
view classstate{{tools.getStateName(item.state)}}/view效果演示 2.4 优化人数参与
编写优化人数参与函数并进行导入
function getNum(liexize,canyuze,zhuchiren){var person liexize,canyuze,zhuchiren;return person.split(,).length;
}
在wxml中进行函数调用
view classjointext classlist-num{{tools.getNum(item.canyuze,item.liexize,item.zhuchiren)}}/text人报名/view
效果演示 注传参时一定要传所有参数
2.5 优化时间格式
编写优化时间格式参与函数并进行导入,将当前时间当作参数进行传递并格式化进行返回输出
function formatDate(ts, option) {var date getDate(ts)var year date.getFullYear()var month date.getMonth() 1var 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 星期日} 最终效果展示 WXS更多的是将函数储存在公共文件中供所有其他页面进行导入获取使用可以提高我们代码的便捷和减少我们的代码量 今天的分享到这里就结束了感谢各位大大的观看各位大大的三连是博主更新的动力感谢谢谢谢谢谢谢谢谢各位的支持
