1. Toy模板网首页
  2. > Toy博客

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

10月前 作者：bing人 分类：Toy博客 阅读(53) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序之后台首页交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

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

后台准备

测试结果

​编辑 

 前端

 测试结果

 二.wxs的介绍以及入门 

测试结果

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

后台准备

pom.xml文件编写

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.6.2</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.zking</groupId>
    <artifactId>minoa</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>minoa</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
        <fastjson.version>1.2.70</fastjson.version>
        <jackson.version>2.9.8</jackson.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.1</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.44</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>${fastjson.version}</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>

            <plugin>
                <groupId>org.mybatis.generator</groupId>
                <artifactId>mybatis-generator-maven-plugin</artifactId>
                <version>1.3.2</version>
                <dependencies>
                    <!--使用Mybatis-generator插件不能使用太高版本的mysql驱动 -->
                    <dependency>
                        <groupId>mysql</groupId>
                        <artifactId>mysql-connector-java</artifactId>
                        <version>${mysql.version}</version>
                    </dependency>
                </dependencies>
                <configuration>
                    <overwrite>true</overwrite>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

建立数据表

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

建立数据请求地址类 

package com.zking.minoa.wxcontroller;

import com.zking.minoa.mapper.InfoMapper;
import com.zking.minoa.model.Info;
import com.zking.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 donkee
 * @Since 2022/6/29
 */
@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);
    }
}

定义接口类 

package com.zking.minoa;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@MapperScan("com.zking.minoa.mapper") //指mapper接口所在包
@SpringBootApplication
public class MinoaApplication {

    public static void main(String[] args) {
        SpringApplication.run(MinoaApplication.class, args);
    }

}
测试结果
微信小程序之后台首页交互,微信小程序,小程序 
 前端

先关闭mock

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

 先编写url地址

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

 编写utils.js

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : `0${n}`
}
/**
 * 封装微信的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 = {
  formatTime,request
}

编写index.js 

// index.js
// 获取应用实例
const app = getApp()
const api=require("../../config/app.js")
const util=require("../../utils/util.js")
Page({
  data: {
   imgSrcs:[
    {
      "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png",
      "text": "1"
    },
    {
      "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png",
      "text": "2"
    },
    {
      "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png",
      "text": "3"
    },
    {
      "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png",
      "text": "4"
    },
    {
      "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png",
      "text": "5"
    },
    {
      "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png",
      "text": "6"
    }
  ],
  lists:[
    
  ]
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  loadMeetInfos(){
    util.request(api.IndexUrl).then(res=>{
      console.log(res);
      this.setData({
                   lists:res.data.infoList
              })
    });
    // let that=this;
    //  wx.request({
    //     url: api.IndexUrl,
    //     dataType: 'json',
    //     success(res) {
    //       console.log(res)
    //       that.setData({
    //           lists:res.data.data.infoList
    //       })
    //     }
    //   })
  },


 loadSwiperImgs(){
    let that=this;
    // wx.request({
    //     url: api.SwiperImgs,
    //     dataType: 'json',
    //     success(res) {
    //       console.log(res)
    //       that.setData({
    //           imgSrcs:res.data.images
    //       })
    //     }
    //   })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
    this.loadSwiperImgs();
    this.loadMeetInfos();
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

 编写index.wxml

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

 测试结果

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

 二.wxs的介绍以及入门 

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

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

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

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

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

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

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

wxs文件编写 

// /pages/comm.wxs
function getStateName(state){
   if(state ==1){
     return "待审核"
   }else if(state ==2){
    return "审核通过"
}else if(state ==3){
  return "审核不通过"
}else if(state ==4){
  return "待开会议"
}
return "其他";
}

function getNum(canyuze,liexize,zhuchiren){
  var person = canyuze+ ","+liexize+","+zhuchiren;
  return person.split(",").length;
}

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 = {
  getStateName: getStateName,
  getNum:getNum,
  formatDate:formatDate
};

在index.wxml中编写数据显示

 文章来源地址https://www.toymoban.com/news/detail-718205.html

<!--index.wxml-->
<view>
  <swiper indicator-dots="true" autoplay="true" >
        <block wx:for="{{imgSrcs}}" wx:key="*text">
          <swiper-item>
            <image src=" {{item.img}}"></image>
          </swiper-item>
        </block>
      </swiper>
</view>

<wxs src="/utils/comm.wxs" module="tools" />
<view class="mobi-title">
    <text class="mobi-icon"></text>
    <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/2.jpg'}}"></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>{{tools.formatDate(item.starttime)}}</text></view>
        </view>
    </view>
</block>
<view class="section bottom-line">
		<text>到底啦</text>
</view>
<!-- <view class="top"></view>
<view class="down">
<view class="list">
<view class="lift"></view>
<view class="right"></view>
</view>
</view> -->
测试结果

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

 

 

 

到了这里，关于微信小程序之后台首页交互的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序之会议OA系统首页布局搭建与Mock数据交互

    微信小程序之会议OA系统首页布局搭建与Mock数据交互

    目录 前言 一、Flex 布局（ 分类 编程技术） 1、Flex布局是什么？ 2、基本概念 3、容器的属性 3.1 flex-direction属性 3.2 flex-wrap属性 3.3 flex-flow 3.4 justify-content属性 3.5 align-items属性 3.6 align-content属性 4、项目的属性 4.1 order属性 4.2 flex-grow属性 4.3 flex-shrink属性 4.4 flex-basis属性 4.5 fl

    2024年02月08日
    浏览(49)
  • 微信小程序之会议OA首页数据交互，会议状态，会议人数转换，会议室交互，WXS的使用

    微信小程序之会议OA首页数据交互，会议状态，会议人数转换，会议室交互，WXS的使用

    前言： 本篇博客使用结合了SpringMVC，mybatis，maven，小程序，如果不熟悉使用可以翻看我之前的博客，以便大家可以更好的学习！！！ 这是我们今天完成后的效果： 1.1启动开发工具，导入后台 导入框架： 配置maven 注意数据库的名称： 启动 1.2导入数据表 1.3前台页面的编码（

    2024年02月08日
    浏览(54)
  • 微信小程序进阶——后台交互个人中心授权登录

    微信小程序进阶——后台交互个人中心授权登录

    目录 一、小程序登录微信登录接口演示 1.1 项目导入 1.2 method1  1.3 method2 二、小程序授权登录 2.1 登录过程 2.1.1 详解 2.1.2 图解 2.2 后端代码导入 2.3 前端代码导入 ​编辑 2.4 案例演示 前端代码如下： 2.4.1 前端调用接口地址 2.4.2 个人中心 后端代码如下： 2.5 效果演示    然后

    2024年02月02日
    浏览(40)
  • “编辑微信小程序与后台数据交互与微信小程序wxs的使用“

    “编辑微信小程序与后台数据交互与微信小程序wxs的使用“

    在现代移动应用开发中，微信小程序已经成为了一个非常流行和广泛使用的平台。为了使小程序能够展示丰富的内容和实现复杂的功能，与后台数据的交互是至关重要的。同时，微信小程序还提供了一种特殊的脚本语言——wxs，用于增强小程序的业务逻辑处理能力。本篇博客

    2024年02月08日
    浏览(48)
  • 【微信小程序】后台数据交互于WX文件使用

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

    目录 一、前期准备 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 效果图  创建数据库： 注意： 字符集选择 utf8mb4 ，因为可能用存储用户信息，

    2024年02月08日
    浏览(50)
  • 微信小程序之会议OA个人中心后台交互

    微信小程序之会议OA个人中心后台交互

    目录 获取用户昵称头像和昵称 小程序登录 登录-小程序 wx.checkSession wx.login wx.request 后台 准备数据表 反向生成工具生成 准备封装前端传过来的数据 小程序服器配置 导入微信小程序SDK application.yml WxProperties WxConfig WxAuthController 登录-小程序 login.js user.js util.js emoji wx.getUserProfi

    2024年02月22日
    浏览(72)
  • 会议OA小程序项目 与后台数据的交互【首页】

    会议OA小程序项目 与后台数据的交互【首页】

    目录 一. 与后台数据进行交互 pom.xml 配置数据源 MinoaApplication WxHomeController 后台数据展示  二. request的封装 三. 会议展示 application.yml 在utils/util.js中 api.js index/index.js utils/comm.wxs index/index.wxml  效果展示

    2024年02月07日
    浏览(46)
  • 关于微信小程序与Java后台交互数据中中文乱码问题的讨论

    关于微信小程序与Java后台交互数据中中文乱码问题的讨论

    如果小程序端发起的请求参数中含有中文，直接发送到后台会显示乱码，需要在header中设置UTF-8编码 这样后台接收到的中文就能解析正常了 为了便于测试，后台接口简化如下： 结果小程序端显示的用户名为“寮犱笁”。 起初怀疑后台返回的编码格式不对，网上说对于Spring

    2024年02月09日
    浏览(40)
  • 巧用回调函数解决微信小程序与后台数据交互出现的异步问题

    巧用回调函数解决微信小程序与后台数据交互出现的异步问题

            微信小程序端需要发送一个包含文字与图片的表单数据给后端，我一开始的思路是 先 上传图片得到临时的URL， 后 执行POST请求将表单数据发送给后端，但后端只能获取到文字，而图片URL却始终获取不到。         注意看我上面的思路， 一先一后 ，无形中将两

    2024年02月16日
    浏览(43)
  • 【微信小程序】6天精准入门（第5天:利用案例与后台的数据交互）附源码

    【微信小程序】6天精准入门（第5天:利用案例与后台的数据交互）附源码

            在小程序中，与后台交互指的是小程序前端与后台服务器之间的数据通信和请求处理过程。通过与后台交互，小程序能够获取服务器端的数据、上传用户数据、发送请求等。         小程序与后台交互可以实现数据的传输、用户认证、实时消息推送等功能，为

    2024年02月08日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包