【微信小程序】后台数据交互于WX文件使用

news2025/10/31 21:21:40

目录

一、前期准备

1.1 数据库准备

1.2 后端数据获取接口编写

1.3 前端配置接口

1.4 封装微信的request请求

 

二、WXS文件的使用

2.1 WXS简介

2.2 WXS使用

 

三、后台数据交互完整代码

3.1 WXML

3.2 JS

3.3 WXSS

效果图 

一、前期准备

1.1 数据库准备

创建数据库：

注意：字符集选择utf8mb4，因为可能用存储用户信息，而有些用户包含emoji标签，用该字符集可以进行存储显示。

 

会议表结构： 

1.2 后端数据获取接口编写

package com.ycxw.minoa.wxcontroller;

import com.ycxw.minoa.mapper.InfoMapper;
import com.ycxw.minoa.model.Info;
import com.ycxw.minoa.util.ResponseUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @Autho 云村小威
 * @Since 2023/10/21
 */
@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);
    }
}

1.3 前端配置接口

创建config文件夹 --> api.js文件： 

// 以下是业务服务器API地址
 // 本机开发API地址
 var WxApiRoot = 'http://localhost:8080/wx/';
 // 测试环境部署api地址
 // var WxApiRoot = 'http://192.168.0.101:8070/wx/';
 // 线上平台api地址
 //var WxApiRoot = 'https://www.oa-mini.com/wx/';
 
 module.exports = {
   IndexUrl: WxApiRoot + 'home/index', //首页数据接口
 };

1.4 封装微信的request请求

通过分装微信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 = {
  request
}

二、WXS文件的使用

2.1 WXS简介

        WXS（WeiXin Script）是内联在 WXML 中的脚本段。通过 WXS 可以在模版中内联少量处理脚本，丰富模板的数据预处理能力。另外， WXS 还可以用来编写简单的 WXS 事件响应函数。

从语法上看， WXS 类似于有少量限制的 JavaScript 。要完整了解 WXS 语法，请参考WXS 语法参考。

2.2 WXS使用

1、首先在utils目录下创建common.wxs,这个文件存放我们所有的函数方法

//会议人数
function getNum(liexize,canyuze,zhuchiren){
  var person = liexize+","+canyuze+","+zhuchiren;
  return person.split(',').length;
}
 
//会议状态
function getStateName(state){
  if (state == 1){
    return "待审核"
  }else if (state == 1){
    return "审核通过"
  }else if (state == 1){
    return "审核不通过"
  }else if (state == 1){
    return "待开"
  }
  return "其他";
}

//导出方法
module.exports = {
  getStateName:getStateName,
  getNum:getNum
};

 

2、将它导入绑定到需要使用的WXML中

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

3、通过定义的module属性值即可调用方法

<view class="state">{{tools.getStateName(xxx数据)}}</view>

 

三、后台数据交互完整代码

3.1 WXML

<wxs src="/utils/common.wxs" module="tools" />
<view class="indexbg">
    <swiper autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="#00f" style="height: 190px;">
        <block wx:for="{{imgSrcs}}" wx:key="text">
            <swiper-item>
                <view>
                    <image src="{{item.img}}" class="swiper-item" />
                </view> 
            </swiper-item>
        </block>
    </swiper>
    <view class="mobi-title">
        <text class="mobi-text">会 议 信 息</text>
    </view>
    <block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id" class="bg">
        <view class="list" data-id="{{item.id}}">
            <view class="list-img">
                <image class="video-img" mode="scaleToFill" src="{{item.image != null ? item.image : '/static/images/avatar.png'}}"></image>
            </view>
            <view class="list-detail">
                <view class="list-title"><text>{{item.title}}</text></view>
                <view class="list-tag">
                  <view class="state">{{tools.getStateName(item.state)}}</view>
                  <view class="join">
                    <text class="list-num">{{tools.getNum(item.canyuze,item.liexize,item.zhuchiren)}}</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>
</view>

3.2 JS

// index.js
// 获取应用实例
const app = getApp()
const api = require("../../config/api")
const util = require("../../utils/util.js")

Page({
    data: {
        imgSrcs: [ {
          "img": "https://1.s91i.faiusr.com/4/AFsI4uYPEAQYACDw69bhBSjulrWKBTDABzicBA!800x800.png?_tm=3&v=1556100764632",
          "text": "1"
        },
        {
          "img": "https://img.zcool.cn/community/01e71e61e7c7ba11013e8cd0236304.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100",
          "text": "2"
        },
        {
          "img": "https://ts1.cn.mm.bing.net/th/id/R-C.022f2e37a033ca3c5754d2f32e8132a1?rik=9ysyMcx6nMOilg&riu=http%3a%2f%2fres.picxiaobai.com%2ftxb%2ftemplate%2fpre%2f20200517%2fd7580b5326b45a612dbf2c1904bc6ca2.jpg%3fv%3d1589705812%26x-oss-process%3dimage%2fresize%2cw_500&ehk=mHQV45sPbW8QB5iv%2ftSXZeasTn4bN6d%2bdLOtwiOYpl8%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
          "text": "3"
        },
        {
          "img": "https://bpic.588ku.com/Templet_origin_pic/05/08/59/20760ea806f4a490f73c577d69e8ffe8.jpg",
          "text": "4"
        },
        {
          "img": "https://img.tukuppt.com/ad_preview/00/10/75/5d78cd9a6a9b4.jpg!/fw/780",
          "text": "5"
        },
        {
          "img": "https://1.s91i.faiusr.com/4/AFsI4uYPEAQYACDv69bhBSiCruq3BTDABzicBA!800x800.png?v=1556100745578",
          "text": "6"
        }],
        lists: []
    },
    // 事件处理函数
    bindViewTap() {
        wx.navigateTo({
            url: '../logs/logs'
        })
    },

   //首页会议信息的ajax
   loadMeetingInfos() {
      util.request(api.IndexUrl).then(res => {
        this.setData({
        lists: res.data.infoList
      })
    })
  },
 
    onLoad() {
        if (wx.getUserProfile) {
            this.setData({
                canIUseGetUserProfile: true
            })
        }

        this.loadMeetingInfos();
    }

})

3.3 WXSS

/**index.wxss**/
.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;
}

/**index.wxss**/
.section {
  color: #aaa;
  display: flex;
  justify-content: center;
}

.list-info {
  color: #aaa;
}

.list-num {
  color: red;
  /* font-weight: 700; */
}

.join {
  padding: 0px 0px 0px 10px;
  color: #aaa;
}

.state {
  margin: 3px 6px 0px 0px;
  border: 1px solid #4083ff;
  color: #4083ff;
  padding: 3px 5px 3px 5px;
}

.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 {
  margin-top: 8px;
  width: 90px;
  height: 90px;
}

.list {
  display: flex;
  flex-direction: row;
  background-color: rgb(232, 240, 245);
  border-bottom: 1px solid #ccd1d3;
  padding: 10px;
}

.mobi-text {
  font-weight: 700;
  padding: 15px;
  color: white;
}

/* .mobi-icon {
  border-left: 5px solid #57f564;
} */
.indexbg{
    background-color: rgba(219, 219, 219, 0.678);
}

.mobi-title {
  display: flex;
  align-items: center;
  height: 40px;
  background-color: rgba(69, 147, 250, 0.678);
}

.swiper-item {
  height: 345rpx;
  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;
}

效果图 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1117128.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【JavaEE初阶】 定时器详解与实现

【JavaEE初阶】 定时器详解与实现

文章目录 &#x1f334;定时器是什么&#x1f38b;Java标准库中的定时器&#x1f332;模拟实现定时器&#x1f6a9;定时器的构成&#x1f4cc;第一步&#xff1a;MyStack类的建立&#x1f4cc;第二步&#xff1a;创建MyTimer类&#x1f4cc;第三步&#xff1a;解决相关问题 &am…
阅读更多...
ant利用pathconvert将资源集合转换为路径方式

ant利用pathconvert将资源集合转换为路径方式

ant可以利用pathconvert 任务&#xff0c;将内嵌的资源集合转换为某一平台的路径方式。pathconvert可以通过属性property设置一个属性名称&#xff0c;将转换后的路径保存到属性中。 例如&#xff0c;下面的代码&#xff1a; <project name"demo_project"><…
阅读更多...
2023年中国一次性医用内窥镜市场发展现状分析：相关产品进入上市高峰期[图]

2023年中国一次性医用内窥镜市场发展现状分析：相关产品进入上市高峰期[图]

基于对减少交叉感染风险和维护成本的需求等因素&#xff0c;一种新兴的、耗材化的一次性内窥镜可以避免因重复使用产品而导致的感染问题和高额的清洗消毒费用&#xff0c;从而提高患者的安全性并帮助医疗机构节省运营成本。 一次性和可重复使用医用内窥镜特点对比 资料来源&am…
阅读更多...
C++前缀和算法：合并石头的最低成本原理、源码及测试用例

C++前缀和算法：合并石头的最低成本原理、源码及测试用例

本文涉及的基础知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 动态规划&#xff0c;日后完成。 题目 有 n 堆石头排成一排&#xff0c;第 i 堆中有 stones[i] 块石头。 每次 移动 需要将 连续的 k 堆石头合并为一堆&#xff0c;而…
阅读更多...
asp.net企业招聘管理系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio计算机毕业设计

asp.net企业招聘管理系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio计算机毕业设计

一、源码特点 asp.net 企业招聘管理系统 是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c#语 言开发 asp.net企业招聘管理系统 二、功…
阅读更多...
SpringBoot常见异步编程，你会多少？

SpringBoot常见异步编程，你会多少？

微信公众号访问地址&#xff1a;SpringBoot常见异步编程&#xff0c;你会多少&#xff1f; 近期热推文章&#xff1a; 1、springBoot对接kafka,批量、并发、异步获取消息,并动态、批量插入库表; 2、SpringBoot用线程池ThreadPoolTaskExecutor异步处理百万级数据; 3、基于Redis…
阅读更多...
线性代数2：梯队矩阵形式

线性代数2：梯队矩阵形式

图片来自 Europeana on Unsplash 一、前言 欢迎阅读的系列文章的第二篇文章&#xff0c;内容是线性代数的基础知识&#xff0c;线性代数是机器学习背后的基础数学。在我之前的文章中&#xff0c;我介绍了线性方程和系统、矩阵符号和行缩减运算。本文将介绍梯队矩阵形式&#xf…
阅读更多...
2023年中国养殖渔船产业链、市场规模及发展趋势分析[图]

2023年中国养殖渔船产业链、市场规模及发展趋势分析[图]

养殖渔船行业是指涉及水产养殖活动的渔船制造、运营和相关服务的产业。这个行业将渔船和水产养殖业结合起来&#xff0c;包括生产和维护用于养殖水域中养殖活动的各种船只&#xff0c;如养殖网船、渔业养殖船、水产养殖工作船等。 养殖渔船行业产业链 资料来源&#xff1a;共研…
阅读更多...
2023年中国车用冲压模具行业特征、竞争现状及行业市场规模分析[图]

2023年中国车用冲压模具行业特征、竞争现状及行业市场规模分析[图]

汽车冲压件模具具有尺寸大、型面复杂、精度要求高等特点&#xff0c;属于技术密集型产品。汽车冲压模具能快速精密地把材料直接加工成零件或半成品并通过焊接、铆接、拼装等工艺装配成零部件&#xff0c;冲压模具的设计开发和加工能力对汽车冲压零部件产品总制造成本、质量及性…
阅读更多...
SpringBoot（二）集成 Quartz:2.5.4

SpringBoot（二）集成 Quartz:2.5.4

Quartz是一个广泛使用的开源任务调度框架&#xff0c;用于在Java应用程序中执行定时任务和周期性任务。它提供了强大的调度功能&#xff0c;允许您计划、管理和执行各种任务&#xff0c;从简单的任务到复杂的任务。 以下是Quartz的一些关键特点和功能&#xff1a; 灵活的调度器…
阅读更多...
海外问卷调查是不是真的能赚钱？

海外问卷调查是不是真的能赚钱？

海外问卷调查是不是真的能赚钱&#xff1f;我来告诉你&#xff0c;我在橙河网络这家公司干了两年半的问卷调查&#xff0c;可以明确地告诉你&#xff1a;海外问卷调查确实可以赚钱&#xff0c;真的&#xff01; 海外问卷调查这个项目&#xff0c;在国内已经存在了很长时间&…
阅读更多...
KVM动态在线迁移实操笔录

KVM动态在线迁移实操笔录

环境介绍 一台NFS&#xff08;192.168.184.132&#xff09; 一台KVM-a&#xff08;192.168.184.133&#xff09; 一台KVM-b&#xff08;192.168.184.134&#xff09; NFS配置 [rootlocalhost ~]# setenforce 0 //关闭selinux [rootlocalhost ~]# service iptables stop [root…
阅读更多...
电子元器件网络变压器（网络滤波器 ̖ 脉冲变压器）的EMI产生原因

电子元器件网络变压器（网络滤波器 ̖ 脉冲变压器）的EMI产生原因

Hqst华强盛&#xff08;盈盛电子&#xff09;导读&#xff1a;网络变压器&#xff08;网络滤波器 ̖ 脉冲变压器&#xff0c;以下称网络变压器&#xff09;在工作过程中会产生电磁场&#xff0c;这可能会导致电磁干扰&#xff08;EMI&#xff09;。EMI会影响设备的性能和可靠性…
阅读更多...
基于Java的图书商城管理系统设计与实现(源码+lw+部署文档+讲解等)

基于Java的图书商城管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09; 代码参考数据库参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…
阅读更多...
基于Java的图书馆借阅管理系统设计与实现(源码+lw+部署文档+讲解等)

基于Java的图书馆借阅管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09; 代码参考数据库参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…
阅读更多...
设计模式：模板模式（C#、JAVA、JavaScript、C++、Python、Go、PHP）

设计模式：模板模式（C#、JAVA、JavaScript、C++、Python、Go、PHP）

简介&#xff1a; 模板模式&#xff0c;它是一种行为型设计模式&#xff0c;它定义了一个操作中的算法的框架&#xff0c;将一些步骤延迟到子类中实现&#xff0c;使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。 通俗地说&#xff0c;模板模式就是将某一行…
阅读更多...
微信小程序数据交互------WXS的使用

微信小程序数据交互------WXS的使用

&#x1f3ac; 艳艳耶✌️&#xff1a;个人主页 &#x1f525; 个人专栏 &#xff1a;《Spring与Mybatis集成整合》《Vue.js使用》 ⛺️ 越努力 &#xff0c;越幸运。 1.数据库连接 数据表结构&#xff1a; 数据测式&#xff1a; 2.后台配置 pom.xml <?xml version&quo…
阅读更多...
重磅发布！RflySim Cloud 智能算法云仿真平台亮相，助力大规模集群算法高效训练

重磅发布！RflySim Cloud 智能算法云仿真平台亮相，助力大规模集群算法高效训练

RflySim Cloud智能算法云仿真平台&#xff08;以下简称RflySim Cloud平台&#xff09;是由卓翼智能及飞思实验室为无人平台集群算法验证、大规模博弈对抗仿真、人工智能模型训练等前沿研究领域研发的平台。主要由环境仿真模块、物理效应计算模块、多智能体仿真模块、分布式网络…
阅读更多...
Bi-Modal Progressive Mask Attention for Fine-Grained Recognition

Bi-Modal Progressive Mask Attention for Fine-Grained Recognition

方法 作者未提供代码
阅读更多...
Python安装使用graphviz经验，Format: “png“ not recognized

Python安装使用graphviz经验，Format: “png“ not recognized

Graphviz 是一款由 AT&T Research 和 Lucent Bell 实验室开源的可视化图形工具&#xff0c;可以很方便的用来绘制结构化的图形网络&#xff0c;支持多种格式输出。Graphviz 输入是一个用 dot 语言编写的绘图脚本&#xff0c;通过对输入脚本的解析&#xff0c;分析出其中的点…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023