无纸化办公小程序数据交互、wxs的使用-阿里云开发者社区

前言

很多同志们再写小程序的过程中，不知道该怎么发起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: WxApiRoot+'swiperImgs', //轮播图
   MettingInfos: WxApiRoot+'meeting/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")

 //首页会议信息的ajax
  loadMeetingInfos() {
    let that = this;
    util.request(api.IndexUrl).then(res => {
      this.setData({
        lists: res.data.infoList
      })
    })
  }

2.后端代码结构

后端使用springboot进行搭建，引用了mysql，swagger，mybatisplus等依赖

部分代码：

@RestController
@RequestMapping("/wx/home")
public class WxHomeController {
    @Autowired
    private InfoMapper infoMapper;
    @RequestMapping("/index")
    public Object index(Info info) {
        List<Info> infoList = infoMapper.list(info);
        Map<Object, Object> data = new HashMap<Object, Object>();
        data.put("infoList",infoList);
        return ResponseUtil.ok(data);
    }
}

3.前端代码

wxml

<!--index.wxml-->
<view>
  <swiper autoplay="true" indicator-dots="true">
    <block wx:for="{{imgSrcs}}" wx:key="text">
      <swiper-item>
        <view>
          <image src="{{item.img}}" class="swiper-item" />
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>
<view class="mobi-title">
  <text class="mobi-icon"></text>
  <text class="mobi-text">会议信息</text>
</view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
  <view class="list" data-id="{{item.id}}">
    <view class="list-img">
      <image class="video-img" mode="scaleToFill" src="{{item.image !=null? item.image : '/static/persons/6.png'}}"></image>
    </view>
    <view class="list-detail">
      <view class="list-title"><text>{{item.title}}</text></view>
      <view class="list-tag">
        <view class="state">{{item.state}}</view>
        <view class="join"><text class="list-num">{{item.num}}</text>人报名</view>
      </view>
      <view class="list-info"><text>{{item.location}}</text>|<text>{{item.starttime}}</text></view>
    </view>
  </view>
</block>
<view class="section">
  <text>到底啦</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的使用

WXS（WeChat Mini Program Storage）是微信小程序提供的本地存储方案，用于在小程序中进行数据的存储和管理。相比远程数据库，WXS更适合于小规模、简单的数据存储需求。

1.wxs 文件

在微信开发者工具里面，右键可以直接创建 .wxs 文件，在其中直接编写 WXS 脚本。

function getState(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 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() + 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 '星期日'
  }
}
module.exports = {
  getState: getState,
  getNumber: getNumber,
  formatDate:formatDate
};

注意将自定义的函数进行导出

然后在需要用到的页面引入，比如：

<wxs src="../../utils/page.wxs" module="tools"/>

修改后的前端html代码

<!--index.wxml-->
<view>
    <swiper autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="#00f">
        <block wx:for="{{imgSrcs}}" wx:key="text">
            <swiper-item>
                <view>
                    <image src="{{item.img}}" class="swiper-item" />
                </view>
            </swiper-item>
        </block>
    </swiper>
</view>
<view class="mobi-title">
    <text class="mobi-icon"></text>
    <text>会议信息</text>
</view>
<wxs src="../../utils/page.wxs" module="tools"/>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    <view class="list" data-id="{{item.id}}">
        <view class="list-img">
            <image class="video-img" mode="scaleToFill" src="../../static/persons/1.jpg"></image>
        </view>
        <view class="list-detail">
            <view class="list-title"><text>{{item.title}}</text></view>
            <view class="list-tag">
                <view class="state">{{tools.getState(item.state)}}</view>
                <view class="join"><text class="list-num">{{tools.getNumber(item
                .canyuze,item.liexize,item.zhuchiren)}}</text>人报名</view>
            </view>
            <view class="list-info"><text>{{item.location}}</text>|<text>{{tools.formatDate(item.starttime)}}</text></view>
        </view>
    </view>
</block>
<view class="mysection">
    <text>到底啦</text>
</view>

无纸化办公小程序数据交互、wxs的使用

前言

一、搭建数据库连接

1.请求方式的封装

2.后端代码结构

3.前端代码

二、WXS的使用

1.wxs 文件

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

无纸化办公小程序数据交互、wxs的使用

前言

一、搭建数据库连接

1.请求方式的封装

2.后端代码结构

3.前端代码

二、WXS的使用

1.wxs 文件

热门文章

最新文章

相关课程

相关电子书

相关实验场景