汉中网站建设推广,柳州专业网站建设加盟,广州做一个网站多少钱,柳州网站建设源码引言
在现代移动应用开发中#xff0c;微信小程序已经成为了一个非常流行和广泛使用的平台。为了使小程序能够展示丰富的内容和实现复杂的功能#xff0c;与后台数据的交互是至关重要的。同时#xff0c;微信小程序还提供了一种特殊的脚本语言——wxs#xff0c;用于增强小…引言
在现代移动应用开发中微信小程序已经成为了一个非常流行和广泛使用的平台。为了使小程序能够展示丰富的内容和实现复杂的功能与后台数据的交互是至关重要的。同时微信小程序还提供了一种特殊的脚本语言——wxs用于增强小程序的业务逻辑处理能力。本篇博客将介绍如何在微信小程序中进行后台数据交互并探讨wxs的使用方法。
微信小程序与后台数据交互
后台准备
1.导入java项目pom.xml
?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion2.6.2/versionrelativePath/ !-- lookup parent from repository --/parentgroupIdcom.zking.ssm/groupIdartifactIdssm-oa/artifactIdversion0.0.1-SNAPSHOT/versiondescriptionOAPRO/descriptionpropertiesjava.version1.8/java.versionfastjson.version1.2.70/fastjson.versionjackson.version2.9.8/jackson.version/propertiesdependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-jdbc/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.mybatis.spring.boot/groupIdartifactIdmybatis-spring-boot-starter/artifactIdversion2.2.1/version/dependencydependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion5.1.44/versionscoperuntime/scope/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdoptionaltrue/optional/dependencydependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion${fastjson.version}/version/dependency/dependenciesbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactIdconfigurationexcludesexcludegroupIdorg.projectlombok/groupIdartifactIdlombok/artifactId/exclude/excludes/configuration/pluginplugingroupIdorg.mybatis.generator/groupIdartifactIdmybatis-generator-maven-plugin/artifactIdversion1.3.2/versiondependencies!--使用Mybatis-generator插件不能使用太高版本的mysql驱动 --dependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion${mysql.version}/version/dependency/dependenciesconfigurationoverwritetrue/overwrite/configuration/plugin/plugins/build/project
2.配置数据源
spring:datasource:#type连接池类型 DBCP,C3P0,Hikari,Druid,默认为Hikaritype: com.zaxxer.hikari.HikariDataSourcedriver-class-name: com.mysql.jdbc.Driverurl: jdbc:mysql://localhost:3306/oapro?useUnicodetruecharacterEncodingUTF-8useSSLfalseusername: rootpassword: sasa前台与后台数据交互
index.js
// index.js
// 获取应用实例
const app getApp()
const api require(../../config/app.js)
const util require(../../utils/util.js)Page({data: {imgSrcs:[{img: https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png,text: 1},{img: https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png,text: 2},{img: https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png,text: 3},{img: https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png,text: 4},{img: https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png,text: 5},{img: https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png,text: 6}],lists: []}, loadMeetInfos(){util.request(api.IndexUrl).then(res{this.setData({lists:res.data.infoList})})},loadSwiperImgs(){// let thatthis;// wx.request({// url: api.SwiperImgs,// dataType: json,// success(res) {// console.log(res)// that.setData({// imgSrcs:res.data.images// })// }// })},// 事件处理函数bindViewTap() {wx.navigateTo({url: ../logs/logs})},onLoad() {if (wx.getUserProfile) {this.setData({canIUseGetUserProfile: true})}this.loadMeetInfos()// this.loadSwiperImgs()},getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息开发者每次通过该接口获取用户个人信息均需用户确认开发者妥善保管用户快速填写的头像昵称避免重复弹窗wx.getUserProfile({desc: 展示用户信息, // 声明获取用户个人信息后的用途后续会展示在弹窗中请谨慎填写success: (res) {console.log(res)this.setData({userInfo: res.userInfo,hasUserInfo: true})}})},getUserInfo(e) {// 不推荐使用getUserInfo获取用户信息预计自2021年4月13日起getUserInfo将不再弹出弹窗并直接返回匿名的用户个人信息console.log(e)this.setData({userInfo: e.detail.userInfo,hasUserInfo: true})}
})
index.wxml
!--index.wxml--
viewswiper indicator-dotstrue autoplaytrue
block wx:for{{imgSrcs}} wx:key*textswiper-itemimage src{{item.img}}/image/swiper-item
/block
/swiper
/view
view classmobi-titletext classmobi-icon/texttext会议信息/text
/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/persons/2.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 classsection bottom-linetext到底啦/text
/view
config/app.js
// 以下是业务服务器API地址// 本机开发API地址var WxApiRoot http://localhost:8080/wx/;// 测试环境部署api地址// var WxApiRoot http://192.168.0.101:8070/demo/wx/;// 线上平台api地址//var WxApiRoot https://www.oa-mini.com/demo/wx/;module.exports {IndexUrl: WxApiRoot home/index, //首页数据接口SwiperImgs: WxApiRootswiperImgs, //轮播图MettingInfos: WxApiRootmeeting/list, //会议信息};utils.js
const formatTime date {const year date.getFullYear()const month date.getMonth() 1const day date.getDate()const hour date.getHours()const minute date.getMinutes()const second date.getSeconds()return ${[year, month, day].map(formatNumber).join(/)} ${[hour, minute, second].map(formatNumber).join(:)}
}const formatNumber n {n n.toString()return n[1] ? n : 0${n}
}
/*** 封装微信的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)}})});
}
module.exports {formatTime,request
}
效果
微信小程序wxs的使用
function getState(state){// 状态0取消会议1待审核2驳回3待开4进行中5开启投票6结束会议默认值为1if(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 其它;}
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 getNumber(canyuze,liexize,zhuchiren){
var str canyuze,liexize,zhuchiren
return str.split(,).length
}
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 {getState: getState,getNumber: getNumber,formatDate:formatDate
};index.wxml()
!--index.wxml--
viewswiper indicator-dotstrue autoplaytrue
block wx:for{{imgSrcs}} wx:key*textswiper-itemimage src{{item.img}}/image/swiper-item
/block
/swiper
/view
view classmobi-titletext classmobi-icon/texttext会议信息/text
/view
wxs src/utils/comm.wxs moduletools /
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/persons/2.jpg}}/image/viewview classlist-detailview classlist-titletext{{item.title}}/text/viewview classlist-tagview classstate{{tools.getState(item.state)}}/viewview classjointext classlist-num{{tools.getNumber(item.canyuze,item.liexize,item.zhuchiren)}}/text人报名/view/viewview classlist-infotext{{item.location}}/text|text{{tools.formatDate(item.starttime)}}/text/view/view/view
/block
view classsection bottom-linetext到底啦/text
/view
总结
本篇博客介绍了微信小程序与后台数据交互的方法包括获取用户信息、发送网络请求和数据缓存。同时我们还探讨了微信小程序中wxs的使用以增强小程序的业务逻辑处理能力。通过本文的学习相信读者对微信小程序开发会有更深入的了解。
