微信小程序连接数据库与WXS的使用

news2024/11/6 9:47:54

 

🎉🎉欢迎来到我的CSDN主页！🎉🎉

🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚

🌟推荐给大家我的专栏《微信小程序开发实战》。🎯🎯

👉点击这里，就可以查看我的主页啦！👇👇

Java方文山的个人主页

🎁如果感觉还不错的话请给我点赞吧！🎁🎁

💖期待你的加入，一起学习，一起进步！💖💖

请添加图片描述

前言

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

一、搭建数据库连接

1.接口地址URL

其他的东西还是基本与我们发送ajax请求一致的。

 为了后期方便维护，我们先将所有的后端接口通过一个文件来保存，在根目录下新建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地址，具体的请求在下面定义方便管理。

2.请求方式的封装

 loadMeetingInfos(){
    let that=this;
    wx.request({
        url: api.IndexUrl,
        dataType: 'json',
        success(res) {
          console.log(res)
          that.setData({
              lists:res.data.data.infoList
          })
        }
      })
  }

以上是我们发送请求的代码，虽然比较简短但还是要在需要的地方进行编写，简单的代码反复性高那我们就可以对它进行封装。

在/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
      })
    })
  }

是不是看起来又少了很多代码

3.后端代码

后端SpringBoot搭建的，引入了mysql、mybatisplus、swagger、lombok等依赖。

数据库表结构：

部分代码：

@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);
    }
}

这里我相信大家都懂不必多说！！！！！

 4.前端代码

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的使用

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

1.wxs 文件

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

// /pages/comm.wxs

var foo = "'hello world' from comm.wxs";
var bar = function(d) {
  return d;
}
module.exports = {
  foo: foo,
  bar: bar
};

  • exports: 通过该属性，可以对外共享本模块的私有变量与函数。

在需要使用的页面进行引用即可

<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

页面输出：

some msg
'hello world' from tools.wxs

学会了基本的wxs的使用，我们在刚刚的页面中进行操作一手。

2.解决数据显示数字问题

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 '其它';

}

 3.解决统计人数问题

var getNumber = function(str) {
  var s = str+'';
  var array = s.split(',');
  var len = array.length;
  return len;
}

4.解决时间进制问题

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(':')
}

 效果展示

 请添加图片描述​

到这里我的分享就结束了，欢迎到评论区探讨交流！！

💖如果觉得有用的话还请点个赞吧 💖

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

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

相关文章

下载运行ps软件提示因为计算机中丢失d3dcompiler_47.dll解决方法

下载运行ps软件提示因为计算机中丢失d3dcompiler_47.dll解决方法

在计算机系统中&#xff0c;DLL文件&#xff08;动态链接库&#xff09;是一种重要的共享库&#xff0c;它包含了可被多个程序使用的代码和数据。然而&#xff0c;当某些DLL文件丢失或损坏时&#xff0c;可能会导致程序无法正常运行。本文将介绍四种解决D3DCompiler_47.dll缺失…
阅读更多...
使用esp32的H2 来看看zigbee~

使用esp32的H2 来看看zigbee~

1.首先看下esp-idf的SDK的结构&#xff0c;目前使用的版本是v5.1的。 可能随时间推移&#xff0c;目录有变化。 上图 我们 主要关注zigbee的网关部分 以及子设备部分 看下 zigee角色部分 我们接下来看下终端节点的部分代码&#xff1a;
阅读更多...
入户的第一眼，玄关设计小技巧！福州中宅装饰，福州装修

入户的第一眼，玄关设计小技巧！福州中宅装饰，福州装修

玄关是进门的第一印象&#xff0c;这个地方的颜值&#xff0c;关系到别人是否会直接被你给惊艳到&#xff0c;特别是有小区的邻居、亲戚朋友来参观&#xff0c;只要一打开门。小编今天要分享的就是一些玄关的功能。 玄关&#xff0c;又称门厅&#xff0c;是指建筑物入门处到正厅…
阅读更多...
Chrome插件精选 — 标签效率管理插件

Chrome插件精选 — 标签效率管理插件

Chrome实现同一功能的插件往往有多款产品&#xff0c;逐一去安装试用耗时又费力&#xff0c;在此为某一类型插件挑选出比较好用的一款或几款&#xff0c;尽量满足界面精致、功能齐全、设置选项丰富的使用要求&#xff0c;便于节省一个个去尝试的时间和精力。 1. OneTab Plus 下…
阅读更多...
SoftPlc on docker 测试

SoftPlc on docker 测试

软件主页 https://github.com/fbarresi/SoftPlc 安装 docker stop softplc docker rm softplc docker pull fbarresi/softplc:latest-linux docker run -d -p 7080:80 -p 7443:443 -p 20012:102 --restartalways --name softplc fbarresi/softplc:latest-linux netstat -na|…
阅读更多...
Chrome插件精选 — 历史记录管理插件

Chrome插件精选 — 历史记录管理插件

Chrome实现同一功能的插件往往有多款产品&#xff0c;逐一去安装试用耗时又费力&#xff0c;在此为某一类型插件挑选出比较好用的一款或几款&#xff0c;尽量满足界面精致、功能齐全、设置选项丰富的使用要求&#xff0c;便于节省一个个去尝试的时间和精力。 1. Better History…
阅读更多...
【electron】实战技巧（持续更新，不要错过喔）

【electron】实战技巧（持续更新，不要错过喔）

▒ 目录 ▒ &#x1f6eb; 导读需求开发环境 1️⃣ nvm处理多node环境避免node版本切换指定32位/64位 2️⃣ 常用node库npm-run-all&#xff08;脚本运行工具&#xff09;cross-env&#xff08;配置环境变量&#xff09;dotenv&#xff08;配置文件&#xff09;minimist&#x…
阅读更多...
洛谷月赛 P5588 小猪佩奇爬树

洛谷月赛 P5588 小猪佩奇爬树

题目描述 佩奇和乔治在爬树。 给定 n 个节点的树 T(V,E)&#xff0c;第 i 个节点的颜色为 wi​&#xff0c;保证有1≤wi​≤n。 对于1≤i≤n&#xff0c;分别输出有多少对点对(u,v)&#xff0c;满足u<v&#xff0c;且恰好经过所有颜色为 i 的节点&#xff0c;对于节点颜色…
阅读更多...
2023年【金属非金属矿山（地下矿山）安全管理人员】考试内容及金属非金属矿山（地下矿山）安全管理人员考试报名

2023年【金属非金属矿山（地下矿山）安全管理人员】考试内容及金属非金属矿山（地下矿山）安全管理人员考试报名

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 金属非金属矿山&#xff08;地下矿山&#xff09;安全管理人员考试内容根据新金属非金属矿山&#xff08;地下矿山&#xff09;安全管理人员考试大纲要求&#xff0c;安全生产模拟考试一点通将金属非金属矿山&#xf…
阅读更多...
leetcode分类刷题：如何更好地理解递归

leetcode分类刷题：如何更好地理解递归

文章目录 概念含义递归三要素递归算法的编程模型递归问题分类递归vs循环(迭代)参考文献 参考知乎上递归下的一个高赞回答&#xff0c;觉得写的非常好&#xff0c;挑选有助于自己理解的内容进行简单总结。 概念含义 1、递归(Recursion)是指在函数的定义中调用函数自身的方法&…
阅读更多...
一篇文章教会你C++11入门知识点

一篇文章教会你C++11入门知识点

C11入门 列表初始化1. {}初始化2. initializer_list 声明1. auto2. decltype3. nullptr 范围for循环STL新增容器1. array2. forward_list3. unordered_map和unordered_set 右值引用和移动语义1. 左值引用和右值引用2. 左值引用和右值引用比较3. 右值引用使用场景和意义4. 右值引…
阅读更多...
16-spring AOP核心对象的创建

16-spring AOP核心对象的创建

文章目录 1. aop的几个重要概念2. aop bean definition3. AspectJPointcutAdvisor4.AopConfigUtils5.AnnotationAwareAspectJAutoProxyCreator6. 循环依赖1. aop的几个重要概念 参考官方解释：https://docs.spring.io/spring-framework/docs/5.2.9.RELEASE/spring-framework-r…
阅读更多...
操作系统备考学习 day10

操作系统备考学习 day10

操作系统备考学习 day10 第三章 内存管理3.2 虚拟内存管理3.2.1 虚拟内存的基本概念传统存储管理方式的特征、缺点局部性原理虚拟内存的定义和特征如何实现虚拟内存技术 3.2.2 请求分页管理方式页表机制缺页中断机构地址变换机构 3.2.3 页面置换算法最佳置换算法&#xff08;OP…
阅读更多...
总结一下vue中v-bind的常见用法

总结一下vue中v-bind的常见用法

文章目录 &#x1f415;前言&#xff1a;&#x1f3e8;简述一下v-bind命令其它写法 &#x1f415;前言&#xff1a; 本篇博客主要总结一下v-bind命令在vue中的常见用法 &#x1f3e8;简述一下v-bind命令 v-bind命令是将动态的数据属性与咱们的标签进行一个绑定,它可以绑定标…
阅读更多...
二维码智慧门牌管理系统：革新小区安全管理的新力量

二维码智慧门牌管理系统：革新小区安全管理的新力量

文章目录 前言一、外采人员的数据采集二、二维码智慧门牌管理系统的创新性三、居民的便捷体验四、面临的挑战 前言 在科技快速发展的今天&#xff0c;智能化和数字化已经深刻影响着我们的生活的各个方面。近期备受关注的话题之一是二维码智慧门牌管理系统&#xff0c;这一系统…
阅读更多...
缓存失效方案

缓存失效方案

一、背景 WRITE &#xff1a; 数据写入Mysql 和 Redis缓存&#xff0c; READ&#xff1a;先从 Redis 缓存中取数据&#xff0c;拿不到再从Mysql中加载&#xff0c;更新到Redis 上图第三阶段&#xff0c;接收Mysql的binlog变更消息&#xff0c;可以参考阿里的 Canal&#xff0…
阅读更多...
tooltip里面画echarts图

tooltip里面画echarts图

第一步: 第二步; 完整代码: //协作工作受理分析圆柱形workLineChart(xData, yData) {let that this;let option {backgroundColor: "#061326",grid: {top: "10%",bottom: "5%",left: "5%",right: "5%",containLabel: true…
阅读更多...
【C语言必知必会 | 子系列第一篇】深入剖析顺序结构（1）

【C语言必知必会 | 子系列第一篇】深入剖析顺序结构（1）

引言 C语言是一门面向过程的、抽象化的通用程序设计语言&#xff0c;广泛应用于底层开发。它在编程语言中具有举足轻重的地位。 此文为【C语言必知必会子系列】第一篇&#xff0c;基于进行C语言顺序结构的选择题专项练习&#xff0c;结合专题优质题目&#xff0c;带领读者从0开…
阅读更多...
软件测试01

软件测试01

一、认识软件及测试 1、什么是软件 控制计算机硬件工作的工具 2、软件的基本组成 页面客户端------请求----->代码服务器-------请求------>数据服务器 3、软件产生过程 需求产生------->需求文档------->设计效果图------->产品开发-------->产品测试 …
阅读更多...
消失的它：网络层分片包中的第一个分片包去哪了？

消失的它：网络层分片包中的第一个分片包去哪了？

在网络层IP包分片的过程中&#xff0c;遇到了大麻烦&#xff01; 主机A&#xff1a; IP地址&#xff1a;192.168.0.10/24 MAC地址&#xff1a;02:00:00:00:00:10 主机B&#xff1a; IP地址&#xff1a;192.168.0.20/24 MAC地址&#xff1a;02:00:00:00:00:20 MTU&#xff1a;1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023