• 微信小程序之后台首页交互

    目录

    一.与后台数据进行交互&request封装

    后台准备

    测试结果

    ​编辑 

     前端

     测试结果

     二.wxs的介绍以及入门 

    测试结果

    一.与后台数据进行交互&request封装

    后台准备

    pom.xml文件编写

    1. "1.0" encoding="UTF-8"?>
    2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    4.     <modelVersion>4.0.0modelVersion>
    5.     <parent>
    6.         <groupId>org.springframework.bootgroupId>
    7.         <artifactId>spring-boot-starter-parentartifactId>
    8.         <version>2.6.2version>
    9.         <relativePath/> 
    10.     parent>
    11.     <groupId>com.zkinggroupId>
    12.     <artifactId>minoaartifactId>
    13.     <version>0.0.1-SNAPSHOTversion>
    14.     <name>minoaname>
    15.     <description>Demo project for Spring Bootdescription>
    16.     <properties>
    17.         <java.version>1.8java.version>
    18.         <fastjson.version>1.2.70fastjson.version>
    19.         <jackson.version>2.9.8jackson.version>
    20.     properties>
    21.     <dependencies>
    22.         <dependency>
    23.             <groupId>org.springframework.bootgroupId>
    24.             <artifactId>spring-boot-starter-jdbcartifactId>
    25.         dependency>
    26.         <dependency>
    27.             <groupId>org.springframework.bootgroupId>
    28.             <artifactId>spring-boot-starter-webartifactId>
    29.         dependency>
    30.         <dependency>
    31.             <groupId>org.mybatis.spring.bootgroupId>
    32.             <artifactId>mybatis-spring-boot-starterartifactId>
    33.             <version>2.2.1version>
    34.         dependency>
    35.  
    36.         <dependency>
    37.             <groupId>mysqlgroupId>
    38.             <artifactId>mysql-connector-javaartifactId>
    39.             <version>5.1.44version>
    40.             <scope>runtimescope>
    41.         dependency>
    42.         <dependency>
    43.             <groupId>org.projectlombokgroupId>
    44.             <artifactId>lombokartifactId>
    45.             <optional>trueoptional>
    46.         dependency>
    47.  
    48.         <dependency>
    49.             <groupId>com.alibabagroupId>
    50.             <artifactId>fastjsonartifactId>
    51.             <version>${fastjson.version}version>
    52.         dependency>
    53.  
    54.     dependencies>
    55.  
    56.     <build>
    57.         <plugins>
    58.             <plugin>
    59.                 <groupId>org.springframework.bootgroupId>
    60.                 <artifactId>spring-boot-maven-pluginartifactId>
    61.                 <configuration>
    62.                     <excludes>
    63.                         <exclude>
    64.                             <groupId>org.projectlombokgroupId>
    65.                             <artifactId>lombokartifactId>
    66.                         exclude>
    67.                     excludes>
    68.                 configuration>
    69.             plugin>
    70.  
    71.             <plugin>
    72.                 <groupId>org.mybatis.generatorgroupId>
    73.                 <artifactId>mybatis-generator-maven-pluginartifactId>
    74.                 <version>1.3.2version>
    75.                 <dependencies>
    76.                     
    77.                     <dependency>
    78.                         <groupId>mysqlgroupId>
    79.                         <artifactId>mysql-connector-javaartifactId>
    80.                         <version>${mysql.version}version>
    81.                     dependency>
    82.                 dependencies>
    83.                 <configuration>
    84.                     <overwrite>trueoverwrite>
    85.                 configuration>
    86.             plugin>
    87.         plugins>
    88.     build>
    89.  
    90. project>

    建立数据表

    建立数据请求地址类 

    1. package com.zking.minoa.wxcontroller;
    2.  
    3. import com.zking.minoa.mapper.InfoMapper;
    4. import com.zking.minoa.model.Info;
    5. import com.zking.minoa.util.ResponseUtil;
    6. import org.springframework.beans.factory.annotation.Autowired;
    7. import org.springframework.web.bind.annotation.RequestMapping;
    8. import org.springframework.web.bind.annotation.RestController;
    9.  
    10. import java.util.HashMap;
    11. import java.util.List;
    12. import java.util.Map;
    13.  
    14. /**
    15.  * @Autho donkee
    16.  * @Since 2022/6/29
    17.  */
    18. @RestController
    19. @RequestMapping("/wx/home")
    20. public class WxHomeController {
    21.     @Autowired
    22.     private InfoMapper infoMapper;
    23.     @RequestMapping("/index")
    24.     public Object index(Info info) {
    25.         List<Info> infoList = infoMapper.list(info);
    26.         Map<Object, Object> data = new HashMap<Object, Object>();
    27.         data.put("infoList",infoList);
    28.         return ResponseUtil.ok(data);
    29.     }
    30. }

    定义接口类 

    1. package com.zking.minoa;
    2.  
    3. import org.mybatis.spring.annotation.MapperScan;
    4. import org.springframework.boot.SpringApplication;
    5. import org.springframework.boot.autoconfigure.SpringBootApplication;
    6.  
    7. @MapperScan("com.zking.minoa.mapper") //指mapper接口所在包
    8. @SpringBootApplication
    9. public class MinoaApplication {
    10.  
    11.     public static void main(String[] args) {
    12.         SpringApplication.run(MinoaApplication.class, args);
    13.     }
    14.  
    15. }
    测试结果
     
     前端

    先关闭mock

     

     先编写url地址

     编写utils.js

    1. const formatTime = date => {
    2.   const year = date.getFullYear()
    3.   const month = date.getMonth() + 1
    4.   const day = date.getDate()
    5.   const hour = date.getHours()
    6.   const minute = date.getMinutes()
    7.   const second = date.getSeconds()
    8.  
    9.   return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
    10. }
    11.  
    12. const formatNumber = n => {
    13.   n = n.toString()
    14.   return n[1] ? n : `0${n}`
    15. }
    16. /**
    17.  * 封装微信的request请求
    18.  */
    19. function request(url, data = {}, method = "GET") {
    20.   return new Promise(function (resolve, reject) {
    21.     wx.request({
    22.       url: url,
    23.       data: data,
    24.       method: method,
    25.       header: {
    26.         'Content-Type': 'application/json',
    27.       },
    28.       success: function (res) {
    29.         if (res.statusCode == 200) {
    30.             resolve(res.data);//会把进行中改变成已成功
    31.         } else {
    32.           reject(res.errMsg);//会把进行中改变成已失败
    33.         }
    34.       },
    35.       fail: function (err) {
    36.         reject(err)
    37.       }
    38.     })
    39.   });
    40. }
    41.  
    42. module.exports = {
    43.   formatTime,request
    44. }

    编写index.js 

    1. // index.js
    2. // 获取应用实例
    3. const app = getApp()
    4. const api=require("../../config/app.js")
    5. const util=require("../../utils/util.js")
    6. Page({
    7.   data: {
    8.    imgSrcs:[
    9.     {
    10.       "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png",
    11.       "text": "1"
    12.     },
    13.     {
    14.       "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png",
    15.       "text": "2"
    16.     },
    17.     {
    18.       "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png",
    19.       "text": "3"
    20.     },
    21.     {
    22.       "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png",
    23.       "text": "4"
    24.     },
    25.     {
    26.       "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png",
    27.       "text": "5"
    28.     },
    29.     {
    30.       "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png",
    31.       "text": "6"
    32.     }
    33.   ],
    34.   lists:[
    35.     
    36.   ]
    37.   },
    38.   // 事件处理函数
    39.   bindViewTap() {
    40.     wx.navigateTo({
    41.       url: '../logs/logs'
    42.     })
    43.   },
    44.   loadMeetInfos(){
    45.     util.request(api.IndexUrl).then(res=>{
    46.       console.log(res);
    47.       this.setData({
    48.                    lists:res.data.infoList
    49.               })
    50.     });
    51.     // let that=this;
    52.     //  wx.request({
    53.     //     url: api.IndexUrl,
    54.     //     dataType: 'json',
    55.     //     success(res) {
    56.     //       console.log(res)
    57.     //       that.setData({
    58.     //           lists:res.data.data.infoList
    59.     //       })
    60.     //     }
    61.     //   })
    62.   },
    63.  
    64.  
    65.  loadSwiperImgs(){
    66.     let that=this;
    67.     // wx.request({
    68.     //     url: api.SwiperImgs,
    69.     //     dataType: 'json',
    70.     //     success(res) {
    71.     //       console.log(res)
    72.     //       that.setData({
    73.     //           imgSrcs:res.data.images
    74.     //       })
    75.     //     }
    76.     //   })
    77.   },
    78.   onLoad() {
    79.     if (wx.getUserProfile) {
    80.       this.setData({
    81.         canIUseGetUserProfile: true
    82.       })
    83.     }
    84.     this.loadSwiperImgs();
    85.     this.loadMeetInfos();
    86.   },
    87.   getUserProfile(e) {
    88.     // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    89.     wx.getUserProfile({
    90.       desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    91.       success: (res) => {
    92.         console.log(res)
    93.         this.setData({
    94.           userInfo: res.userInfo,
    95.           hasUserInfo: true
    96.         })
    97.       }
    98.     })
    99.   },
    100.   getUserInfo(e) {
    101.     // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    102.     console.log(e)
    103.     this.setData({
    104.       userInfo: e.detail.userInfo,
    105.       hasUserInfo: true
    106.     })
    107.   }
    108. })

     编写index.wxml

     

     测试结果

     二.wxs的介绍以及入门 

    WXS 代码可以编写在 wxml 文件中的 标签内，或以 .wxs 为后缀名的文件内。

    模块
    每一个 .wxs 文件和 标签都是一个单独的模块。

    每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

    一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

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

    在utils里面建立一个文件夹，在文件夹建立wxs文件

     

    wxs文件编写 

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

    在index.wxml中编写数据显示

     

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

     

     

     

     

  • 相关阅读:
    c++ 组合模式示例
    应用链的崛起将带来哪些风险与机遇？
    vue存储和使用后端传递过来的token
    Vue 中 KeepAlive 内置缓存使用
    java中spark数据集字段下划线改成驼峰
    【chat】 1：Ubuntu 20.04.3 编译安装moduo master分支
    autox.js的三个版本universal、armeabi-v7a、arm64-v8a的区别
    springboot admin自定义监控里的info信息
    Java面试问题记录
    TLSR8258应用笔记
  • 原文地址：https://blog.csdn.net/2201_75455485/article/details/133955089