可以做qq空间背景音乐的网站,网站设计规划建设的目的,吉林省白山市建设厅网站首页,做网站什么最赚钱吗前言
很多同志们再写小程序的过程中#xff0c;不知道该怎么发起HTTP请求到后端#xff0c;在Web环境中发起HTTPS请求是很常见的#xff0c;但是微信小程序是腾讯内部的产品#xff0c;不能直接打开一个外部的链接。例如#xff0c;在微信小程序中不能直接打开www.taobao…前言
很多同志们再写小程序的过程中不知道该怎么发起HTTP请求到后端在Web环境中发起HTTPS请求是很常见的但是微信小程序是腾讯内部的产品不能直接打开一个外部的链接。例如在微信小程序中不能直接打开www.taobao.com网站但是在小程序开发的时候如果需要请求一个网站的内容或者服务如何实现虽然微信小程序里面不能直接访问外部链接但是腾讯为开发者封装好了一个wx.request(object)的API。
一、搭建数据库连接 为了后期方便维护我们先将所有的后端接口通过一个文件来保存在根目录下新建config文件夹随后建立api.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, //会议信息};
先定义本机开发的API地址具体的请求在下面定义方便管理。 1.请求方式的封装
我们需要多次发送请求的时候可以将请求方法进行封装直接调用
在/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中导出和需要使用的页面js中使用实const util require(../../utils/util) //首页会议信息的ajaxloadMeetingInfos() {let that this;util.request(api.IndexUrl).then(res {this.setData({lists: res.data.infoList})})}
2.后端代码结构
后端使用springboot进行搭建引用了mysqlswaggermybatisplus等依赖 部分代码
RestController
RequestMapping(/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);}
} 3.前端代码
wxml
!--index.wxml--
viewswiper autoplaytrue indicator-dotstrueblock wx:for{{imgSrcs}} wx:keytextswiper-itemviewimage src{{item.img}} classswiper-item //view/swiper-item/block/swiper
/viewview classmobi-titletext classmobi-icon/texttext classmobi-text会议信息/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/6.png}}/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
wxss
/**index.wxss**/
.section{color: #aaa;display: flex;justify-content: center;
}.list-info {color: #aaa;
}.list-num {color: #e40909;font-weight: 700;
}.join {padding: 0px 0px 0px 10px;color: #aaa;
}.state {margin: 0px 6px 0px 6px;border: 1px solid #93b9ff;color: #93b9ff;
}.list-tag {padding: 3px 0px 10px 0px;display: flex;align-items: center;
}.list-title {display: flex;justify-content: space-between;font-size: 11pt;color: #333;font-weight: bold;}.list-detail {display: flex;flex-direction: column;margin: 0px 0px 0px 15px;
}.video-img {width: 80px;height: 80px;
}.list {display: flex;flex-direction: row;border-bottom: 1px solid #6b6e74;padding: 10px;
}.mobi-text {font-weight: 700;padding: 15px;
}.mobi-icon {border-left: 5px solid #e40909;
}.mobi-title {background-color: rgba(158, 158, 142, 0.678);margin: 10px 0px 10px 0px;
}.swiper-item {height: 300rpx;width: 100%;border-radius: 10rpx;
}.userinfo {display: flex;flex-direction: column;align-items: center;color: #aaa;
}.userinfo-avatar {overflow: hidden;width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;
}.usermotto {margin-top: 200px;
}
此时界面已经能够加载数据了但是还是有些问题比如会议的状态我们数据库展示的是数字但是在界面上不行还需要计算数据库中三列参加会议的人数还需要将数据库的时间格式转换
二、WXS的使用
WXSWeChat Mini Program Storage是微信小程序提供的本地存储方案用于在小程序中进行数据的存储和管理。相比远程数据库WXS更适合于小规模、简单的数据存储需求。
1.wxs 文件
在微信开发者工具里面右键可以直接创建 .wxs 文件在其中直接编写 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 其它;}
var getNumber function(str) {var s str;var array s.split(,);var len array.length;return len;
}
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
};
注意将自定义的函数进行导出
然后在需要用到的页面引入比如
wxs src../../utils/page.wxs moduletools/
修改后的前端html代码
!--index.wxml--
viewswiper 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/swiper
/viewview classmobi-titletext classmobi-icon/texttext会议信息/text
/view
wxs src../../utils/page.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../../static/persons/1.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 classmysectiontext到底啦/text
/view
