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

    前言

    很多同志们再写小程序的过程中，不知道该怎么发起HTTP请求到后端，在Web环境中发起HTTPS请求是很常见的，但是微信小程序是腾讯内部的产品，不能直接打开一个外部的链接。例如，在微信小程序中不能直接打开www.taobao.com网站，但是，在小程序开发的时候，如果需要请求一个网站的内容或者服务，如何实现？虽然微信小程序里面不能直接访问外部链接，但是腾讯为开发者封装好了一个wx.request(object)的API。
     

    一、搭建数据库连接

     为了后期方便维护，我们先将所有的后端接口通过一个文件来保存，在根目录下新建config文件夹随后建立api.js文件。

    1. // 以下是业务服务器API地址
    2.  // 本机开发API地址
    3.  var WxApiRoot = 'http://localhost:8080/wx/';
    4.  // 测试环境部署api地址
    5.  // var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';
    6.  // 线上平台api地址
    7.  //var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';
    8.  
    9.  module.exports = {
    10.    IndexUrl: WxApiRoot + 'home/index', //首页数据接口
    11.    SwiperImgs: WxApiRoot+'swiperImgs', //轮播图
    12.    MettingInfos: WxApiRoot+'meeting/list', //会议信息
    13.  };

    先定义本机开发的API地址，具体的请求在下面定义方便管理。

    1.请求方式的封装

    我们需要多次发送请求的时候，可以将请求方法进行封装直接调用

    在/utils/util.js中添加下列代码

    1. /**
    2.  * 封装微信的request请求
    3.  */
    4. function request(url, data = {}, method = "GET") {
    5.   return new Promise(function (resolve, reject) {
    6.     wx.request({
    7.       url: url,
    8.       data: data,
    9.       method: method,
    10.       header: {
    11.         'Content-Type': 'application/json',
    12.       },
    13.       success: function (res) {
    14.         if (res.statusCode == 200) {
    15.             resolve(res.data);//会把进行中改变成已成功
    16.         } else {
    17.           reject(res.errMsg);//会把进行中改变成已失败
    18.         }
    19.       },
    20.       fail: function (err) {
    21.         reject(err)
    22.       }
    23.     })
    24.   });
    25. }

    注意在module.exports中导出和需要使用的页面js中使用实const util = require("../../utils/util")

    1.  //首页会议信息的ajax
    2.   loadMeetingInfos() {
    3.     let that = this;
    4.     util.request(api.IndexUrl).then(res => {
    5.       this.setData({
    6.         lists: res.data.infoList
    7.       })
    8.     })
    9.   }

    2.后端代码结构

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

    部分代码：

    1. @RestController
    2. @RequestMapping("/wx/home")
    3. public class WxHomeController {
    4.     @Autowired
    5.     private InfoMapper infoMapper;
    6.     @RequestMapping("/index")
    7.     public Object index(Info info) {
    8.         List<Info> infoList = infoMapper.list(info);
    9.         Map<Object, Object> data = new HashMap<Object, Object>();
    10.         data.put("infoList",infoList);
    11.         return ResponseUtil.ok(data);
    12.     }
    13. }

     3.前端代码

    wxml

    2. <view>
    3.   <swiper autoplay="true" indicator-dots="true">
    4.     <block wx:for="{{imgSrcs}}" wx:key="text">
    5.       <swiper-item>
    6.         <view>
    7.           <image src="{{item.img}}" class="swiper-item" />
    8.         view>
    9.       swiper-item>
    10.     block>
    11.   swiper>
    12. view>
    13.  
    14.  
    15. <view class="mobi-title">
    16.   <text class="mobi-icon">text>
    17.   <text class="mobi-text">会议信息text>
    18. view>
    19. <block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    20.   <view class="list" data-id="{{item.id}}">
    21.     <view class="list-img">
    22.       <image class="video-img" mode="scaleToFill" src="{{item.image !=null? item.image : '/static/persons/6.png'}}">image>
    23.     view>
    24.     <view class="list-detail">
    25.       <view class="list-title"><text>{{item.title}}text>view>
    26.       <view class="list-tag">
    27.         <view class="state">{{item.state}}view>
    28.         <view class="join"><text class="list-num">{{item.num}}text>人报名view>
    29.       view>
    30.       <view class="list-info"><text>{{item.location}}text>|<text>{{item.starttime}}text>view>
    31.     view>
    32.   view>
    33. block>
    34. <view class="section">
    35.   <text>到底啦text>
    36. view>

    wxss

    1. /**index.wxss**/
    2. .section{
    3.   color: #aaa;
    4.   display: flex;
    5.   justify-content: center;
    6. }
    7.  
    8. .list-info {
    9.   color: #aaa;
    10. }
    11.  
    12. .list-num {
    13.   color: #e40909;
    14.   font-weight: 700;
    15. }
    16.  
    17. .join {
    18.   padding: 0px 0px 0px 10px;
    19.   color: #aaa;
    20. }
    21.  
    22. .state {
    23.   margin: 0px 6px 0px 6px;
    24.   border: 1px solid #93b9ff;
    25.   color: #93b9ff;
    26. }
    27.  
    28. .list-tag {
    29.   padding: 3px 0px 10px 0px;
    30.   display: flex;
    31.   align-items: center;
    32. }
    33.  
    34. .list-title {
    35.   display: flex;
    36.   justify-content: space-between;
    37.   font-size: 11pt;
    38.   color: #333;
    39.   font-weight: bold;
    40.  
    41.  
    42. }
    43.  
    44. .list-detail {
    45.   display: flex;
    46.   flex-direction: column;
    47.   margin: 0px 0px 0px 15px;
    48. }
    49.  
    50. .video-img {
    51.   width: 80px;
    52.   height: 80px;
    53. }
    54.  
    55. .list {
    56.   display: flex;
    57.   flex-direction: row;
    58.   border-bottom: 1px solid #6b6e74;
    59.   padding: 10px;
    60. }
    61.  
    62. .mobi-text {
    63.   font-weight: 700;
    64.   padding: 15px;
    65. }
    66.  
    67. .mobi-icon {
    68.   border-left: 5px solid #e40909;
    69. }
    70.  
    71. .mobi-title {
    72.   background-color: rgba(158, 158, 142, 0.678);
    73.   margin: 10px 0px 10px 0px;
    74. }
    75.  
    76. .swiper-item {
    77.   height: 300rpx;
    78.   width: 100%;
    79.   border-radius: 10rpx;
    80. }
    81.  
    82. .userinfo {
    83.   display: flex;
    84.   flex-direction: column;
    85.   align-items: center;
    86.   color: #aaa;
    87. }
    88.  
    89. .userinfo-avatar {
    90.   overflow: hidden;
    91.   width: 128rpx;
    92.   height: 128rpx;
    93.   margin: 20rpx;
    94.   border-radius: 50%;
    95. }
    96.  
    97. .usermotto {
    98.   margin-top: 200px;
    99. }

    此时界面已经能够加载数据了，但是还是有些问题，比如会议的状态，我们数据库展示的是数字，但是在界面上不行，还需要计算数据库中三列参加会议的人数，还需要将数据库的时间格式转换

    二、WXS的使用

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

    1.wxs 文件

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

    1. function getState(state){
    2.   // 状态：0取消会议1待审核2驳回3待开4进行中5开启投票6结束会议，默认值为1
    3.   if(state == 0 ){
    4.       return '取消会议';
    5.   }else if(state == 1 ){
    6.       return '待审核';
    7.   }else if(state == 2 ){
    8.       return '驳回';
    9.   }else if(state == 3 ){
    10.       return '待开';
    11.   }else if(state == 4 ){
    12.       return '进行中';
    13.   }else if(state == 5 ){
    14.       return '开启投票';
    15.   }else if(state == 6 ){
    16.       return '结束会议';
    17.   }
    18.       
    19.   return '其它';
    20.  
    21. }
    22. var getNumber = function(str) {
    23.   var s = str+'';
    24.   var array = s.split(',');
    25.   var len = array.length;
    26.   return len;
    27. }
    28. function formatDate(ts, option) {
    29.   var date = getDate(ts)
    30.   var year = date.getFullYear()
    31.   var month = date.getMonth() + 1
    32.   var day = date.getDate()
    33.   var week = date.getDay()
    34.   var hour = date.getHours()
    35.   var minute = date.getMinutes()
    36.   var second = date.getSeconds()
    37.   
    38.   //获取 年月日
    39.   if (option == 'YY-MM-DD') return [year, month, day].map(formatNumber).join('-')
    40.  
    41.   //获取 年月
    42.   if (option == 'YY-MM') return [year, month].map(formatNumber).join('-')
    43.  
    44.   //获取 年
    45.   if (option == 'YY') return [year].map(formatNumber).toString()
    46.  
    47.   //获取 月
    48.   if (option == 'MM') return  [mont].map(formatNumber).toString()
    49.  
    50.   //获取 日
    51.   if (option == 'DD') return [day].map(formatNumber).toString()
    52.  
    53.   //获取 年月日 周一 至 周日
    54.   if (option == 'YY-MM-DD Week')  return [year, month, day].map(formatNumber).join('-') + ' ' + getWeek(week)
    55.  
    56.   //获取 月日 周一 至 周日
    57.   if (option == 'MM-DD Week')  return [month, day].map(formatNumber).join('-') + ' ' + getWeek(week)
    58.  
    59.   //获取 周一 至 周日
    60.   if (option == 'Week')  return getWeek(week)
    61.  
    62.   //获取 时分秒
    63.   if (option == 'hh-mm-ss') return [hour, minute, second].map(formatNumber).join(':')
    64.  
    65.   //获取 时分
    66.   if (option == 'hh-mm') return [hour, minute].map(formatNumber).join(':')
    67.  
    68.   //获取 分秒
    69.   if (option == 'mm-dd') return [minute, second].map(formatNumber).join(':')
    70.  
    71.   //获取 时
    72.   if (option == 'hh')  return [hour].map(formatNumber).toString()
    73.  
    74.   //获取 分
    75.   if (option == 'mm')  return [minute].map(formatNumber).toString()
    76.  
    77.   //获取 秒
    78.   if (option == 'ss') return [second].map(formatNumber).toString()
    79.  
    80.   //默认 时分秒 年月日
    81.   return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    82. }
    83. function formatNumber(n) {
    84.   n = n.toString()
    85.   return n[1] ? n : '0' + n
    86. }
    87.  
    88. function getWeek(n) {
    89.   switch(n) {
    90.       case 1:
    91.       return '星期一'
    92.       case 2:
    93.       return '星期二'
    94.       case 3:
    95.       return '星期三'
    96.       case 4:
    97.       return '星期四'
    98.       case 5:
    99.       return '星期五'
    100.       case 6:
    101.       return '星期六'
    102.       case 7:
    103.       return '星期日'
    104.   }
    105. }
    106. module.exports = {
    107.   getState: getState,
    108.   getNumber: getNumber,
    109.   formatDate:formatDate
    110. };

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

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

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

    修改后的前端html代码

    2. <view>
    3.     <swiper autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="#00f">
    4.         <block wx:for="{{imgSrcs}}" wx:key="text">
    5.             <swiper-item>
    6.                 <view>
    7.                     <image src="{{item.img}}" class="swiper-item" />
    8.                 view>
    9.             swiper-item>
    10.         block>
    11.     swiper>
    12. view>
    13.  
    14.  
    15. <view class="mobi-title">
    16.     <text class="mobi-icon">text>
    17.     <text>会议信息text>
    18. view>
    19. <wxs src="../../utils/page.wxs" module="tools"/>
    20. <block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    21.     <view class="list" data-id="{{item.id}}">
    22.         <view class="list-img">
    23.             <image class="video-img" mode="scaleToFill" src="../../static/persons/1.jpg">image>
    24.         view>
    25.         <view class="list-detail">
    26.             <view class="list-title"><text>{{item.title}}text>view>
    27.             <view class="list-tag">
    28.                 <view class="state">{{tools.getState(item.state)}}view>
    29.                 <view class="join"><text class="list-num">{{tools.getNumber(item
    30.                 .canyuze,item.liexize,item.zhuchiren)}}text>人报名view>
    31.             view>
    32.             <view class="list-info"><text>{{item.location}}text>|<text>{{tools.formatDate(item.starttime)}}text>view>
    33.         view>
    34.     view>
    35. block>
    36. <view class="mysection">
    37. 		<text>到底啦text>
    38. view>
    39.  
    40.  
    41.  
    42.  
    43.

  • 相关阅读:
    糟了，线上服务出现OOM了
    JAVA中的异常处理
    未找到 [“sitemapLocation“] 对应的 sitemap.json 文件
    什么是云服务器实例？实例的镜像，存储，安全分别是什么？
    笔记：Python 字符串与正则表达式（练习题）
    进程互斥的软硬件实现方法
    基于英雄联盟的知识图谱问答系统
    Vue入门
    springBoot源码汇总
    深入理解 JVM 之——Java 内存区域与溢出异常
  • 原文地址：https://blog.csdn.net/Ying_hao_kun/article/details/133957223