网站开发的关键,怎么区别做pc端和手机端网站,轻淘客轻网站怎么做,wordpress首页模板在哪一、什么是后台交互#xff1f; 在小程序中#xff0c;与后台交互指的是小程序前端与后台服务器之间的数据通信和请求处理过程。通过与后台交互#xff0c;小程序能够获取服务器端的数据、上传用户数据、发送请求等。 与后台交互可以通过以下方式实现#xff1a; 发起网络请…一、什么是后台交互 在小程序中与后台交互指的是小程序前端与后台服务器之间的数据通信和请求处理过程。通过与后台交互小程序能够获取服务器端的数据、上传用户数据、发送请求等。 与后台交互可以通过以下方式实现 发起网络请求小程序可以使用网络请求 API如wx.request向后台发送 HTTP 请求来获取后台服务器返回的数据。可以使用 GET、POST、PUT、DELETE 等不同的请求类型来实现不同的操作。 WebSocket小程序可以使用 WebSocket 技术与服务器建立长连接实现实时的双向通信。通过 WebSocket小程序能够及时接收服务器端推送的消息实现实时更新和交互。 云函数小程序提供了云开发平台其中的云函数可以在后台服务器上执行用于处理复杂的业务逻辑和数据处理。小程序可以通过调用云函数来与后台进行交互并获取处理结果。 通过这些方式小程序与后台交互可以实现数据的传输、用户认证、实时消息推送等功能为用户提供更丰富的体验和功能。 二、后台数据交互与request封装
1.准备 在使用数据交互的时候我们要事先准备好后台的数据方便我们进行调用。我在这里就不准备后台的数据在这里了 2.后台数据交互 在前面的博客里面编写了一个专门用来调用数据后台的一个api.js文件我们要确保这些数据可以调用到后台记得把你的后台启动哦 // 以下是业务服务器API地址 // 本机开发API地址 var WxApiRoot http://localhost:8080/wx/;module.exports {IndexUrl: WxApiRoot home/index //首页数据接口}; 2、在你要调用的页面的js里面编写调用的方法注意记得打印一下你的数据是在那个属性里面记得在Page的外面调用实用例。 loadMeetInfos(){let that this;wx.request({url: api. IndexUrl,dataType: json,success(res) {console.log(res)that.setData({lists: res.data.data.infoList})}})}, 然后再定义好的onLoad方法里面调用 onLoad() {if (wx.getUserProfile) {this.setData({canIUseGetUserProfile: true})}this.loadMeetingInfos();} 3.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)}})});
}
module.exports {formatTime,request
} 在你的需要调用的页面进行一个方法的调用进行代码的优化就以上为例 // 获取应用实例
const app getApp()
const api require(../../config/api)
const util require(../../utils/util.js)//首页会议信息的ajaxloadMeetingInfos() {let that this;util.request(api.IndexUrl).then(res {console.log(res)this.setData({lists: res.data.infoList})}).catch(res {console.log(服器没有开启使用模拟数据!)})} 效果是一样的 完整代码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
} index.js // index.js
// 获取应用实例
const app getApp()
const api require(../../config/api)
const util require(../../utils/util.js)
Page({data: {imgSrcs: [{img: https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png,text: 1}],lists: []},//首页会议信息的ajaxloadMeetingInfos() {let that this;util.request(api.IndexUrl).then(res {console.log(res)this.setData({lists: res.data.infoList})console.log(res.data.infoList)}).catch(res {console.log(服器没有开启使用模拟数据!)})},onLoad() {if (wx.getUserProfile) {this.setData({canIUseGetUserProfile: true})}this.loadMeetingInfos();}
}) 三、wxs的使用 我们可以在微信的开发文档里面可以查看微信开放文档 (qq.com)wxs的使用。 1、使用wxs步骤 我们首先新建一个wxs文件在这个位置 2. 然后在里面定义方法 function getState(state){}
module.exports {getState: getState
}; 3.在wxml里面调用src:是你的wxs的路径module:你后面需要调用的名字可以随便取。 wxs src/utils/comm.wxs moduletools / 调用 text classlist-num{{tools.getState(item.state)}}/text 2、完整方法
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 getNumber(canyuze, liexize, zhuchiren) {var person canyuze , liexize , zhuchiren;return person.split(,).length;
}
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 星期日}
}
module.exports {getState: getState,getNumber: getNumber,formatDate:formatDate
};
index.wxml
view classindexbgswiper autoplaytrue indicator-dotstrue indicator-color#fff indicator-active-color#00fblock wx:for{{imgSrcs}} wx:keytextswiper-itemviewimage src{{item.img}} classswiper-item //view/swiper-item/block/swiperwxs src/utils/comm.wxs moduletools /view classmobi-titletext classmobi-icon❤/texttext classmobi-text会议信息/text/viewblock wx:for-items{{lists}} wx:for-itemitem wx:keyitem.id classbgview classlist data-id{{item.id}}view classlist-imgimage classvideo-img modescaleToFill src{{item.image ! null ? item.image:/static/persons/8.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.zhuzhiren)}}/text人报名/view/viewview classlist-infotext{{item.location}}/text|text{{tools.formatDate(item.starttime,YY-MM-DD hh-mm-ss)}}/text/view/view/view/blockview classsectiontext到底啦/text/view
/view
