微信小程序开发【前端+后端(java)】

article/2025/10/14 12:06:40
  1. 前言
    现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发过微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的一些经验和一些心得吧。

  2. 主要内容
    springboot后端架构构建
    小程序项目构建
    小程序api调用
    后台resetful接口编写
    小程序调用后台接口
    免费的https申请
    linux下部署上线

  3. 微信小程序项目构建
    这些基础的东西我就不过多介绍,大家在刚开始开发的时候一般都没有自己的服务器及域名,所以大家在本地编写的时候,在“详细”下的“项目设置”里面将“不校验域名安全性”勾选。这里写图片描述
    至于微信小程序的组件,即前端页面的开发希望大家耐住寂寞认真在微信开发平台上,组件https://developers.weixin.qq.com/miniprogram/dev/component/及api:https://developers.weixin.qq.com/miniprogram/dev/api/

  4. 后端详解
    我在后端编写主要是用java,当然对其他开发语言熟悉的也可以使用其他语言开发后端。现在我就java编写后端api的讲解。主要框架springboot,开发工具myeclipse,服务器阿里云服务器。
    创建一个maven项目,导入相关依赖:
    pom.xml依赖

    <!-- 统一版本控制 --><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.5.9.RELEASE</version></parent><dependencies><!-- freemarker渲染页面 --><!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-freemarker --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-freemarker</artifactId></dependency><!-- spring boot 核心 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- springboot整合jsp --><!-- tomcat 的支持. --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><exclusions><exclusion><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-tomcat</artifactId></exclusion></exclusions></dependency><dependency><groupId>org.apache.tomcat.embed</groupId><artifactId>tomcat-embed-jasper</artifactId></dependency></dependencies>

在配置文件src/main/resources/下创建application.properties文件可以修改一些配置参数等。

#jsp支持
spring.mvc.view.suffix=.jsp
spring.mvc.view.prefix=/WEB-INF/jsp/
#this is set port
#server.port=80
server.port=443
#添加ssl证书
#ssl证书文件名
server.ssl.key-store=classpath:xxxxxxx.pfx
server.ssl.key-store-password=xxxxxxxx
server.ssl.keyStoreType=xxxxxxxx

在实际项目中可能涉及数据库,还要整合mybatis,在文章中,我仅仅做测试就不做使用数据库的测试。
首先创建springboot的入口程序:app.class下面贴上代码:

@ComponentScan(basePackages= "com.bin")//添加扫包@ComponentScan(basePackages= "")
@EnableAutoConfiguration
public class App{//启动springbootpublic static void main(String[] args) {SpringApplication.run(App.class, args);}
}

启动项目时直接右击run即可。
在写一个测试的controller进行微信小程序与java后端实现通信,controller代码如下:

@RestController
@SpringBootApplication
public class ControllerText {@RequestMapping("getUser")public Map<String, Object> getUser(){System.out.println("微信小程序正在调用。。。");Map<String, Object> map = new HashMap<String, Object>();List<String> list = new ArrayList<String>();list.add("zhangsan");list.add("lisi");list.add("wanger");list.add("mazi");map.put("list",list);System.out.println("微信小程序调用完成。。。");return map;}@RequestMapping("getWord")public Map<String, Object> getText(String word){Map<String, Object> map = new HashMap<String, Object>();String message = "我能力有限,不要为难我";if ("后来".equals(word)) {message="正在热映的后来的我们是刘若英的处女作。";}else if("微信小程序".equals(word)){message= "想获取更多微信小程序相关知识,请更多的阅读微信官方文档,还有其他更多微信开发相关的内容,学无止境。";}else if("西安工业大学".equals(word)){message="西安工业大学(Xi'an Technological University)简称”西安工大“,位于世界历史名城古都西安,是中国西北地区唯一一所以兵工为特色,以工为主,理、文、经、管、法协调发展的教学研究型大学。原中华人民共和国兵器工业部直属的七所本科院校之一(“兵工七子”),陕西省重点建设的高水平教学研究型大学、陕西省人民政府与中国兵器工业集团、国防科技工业局共建高校、教育部“卓越工程师教育培养计划”试点高校、陕西省大学生创新能力培养综合改革试点学校。国家二级保密资格单位,是一所以\"军民结合,寓军于民\"的国防科研高校。";}map.put("message", message);return map;}@RequestMapping("")public String getText(){return "hello world";}}

至此简易的后端框架及测试基本完成。
说明:@RestController与@Controller注解的区别@RestController相当于两个注解,它能实现将后端得到的数据在前端页面(网页)中以json串的形式传递。而微信小程序与后台之间的数据传递就是以json报文的形式传递。所以这就是选择springboot框架开发小程序后端的主要原因之一。可以方面我们进行小程序的后端开发。

  1. 小程序发起网络请求
    在完成了小程序的后端开发,下面进行小程序端发起网络请求。
    下面以一个简单的按钮请求数据为例:
    wxml文件
<button bindtap='houduanButton1'>点击发起请求</button>
<view wx:for="{{list}}">姓名:{{item}}</view>
js文件
 /*** 页面的初始数据*/data: {list: '',word: '',message:''},houduanButton1: function () {var that = this;wx.request({url: 'http://localhost:443/getUser',method: 'GET',header: {'content-type': 'application/json' // 默认值},success: function (res) {console.log(res.data)//打印到控制台var list = res.data.list;if (list == null) {var toastText = '数据获取失败';wx.showToast({title: toastText,icon: '',duration: 2000});} else {that.setData({list: list})}}})}

主要调用的api就是wx.request,想知道将详细的介绍大家可以去微信公众平台。
接下来以搜索类型的请求为例:
wxml文件:

 <input type="text" class="houduanTab_input" placeholder="请输入你要查询的内容" bindinput='houduanTab_input'></input><button bindtap='houduanButton2'>查询</button><view wx:if="{{message!=''}}">{{message}}</view>

js文件:变量的定义见上一个js文件

//获取输入框的内容houduanTab_input: function (e) {this.setData({word: e.detail.value})},// houduanButton2的网络请求houduanButton2: function () {var that = this;wx.request({url: 'http://localhost:443/getWord',data:{word: that.data.word},method: 'GET',header: {'content-type': 'application/json' // 默认值},success: function (res) {console.log(res.data)//打印到控制台var message = res.data.message;if (message == null) {var toastText = '数据获取失败';wx.showToast({title: toastText,icon: '',duration: 2000});} else {that.setData({message: message})}}})}

至此已经完成了简易的微信小程序端与java后端进行通信。
现在可以在启动后端项目在微信开发工具上进行测试。
演示效果:
这里写图片描述
这里写图片描述
所以至此已经完成了小程序的前后端通信。

  1. https申请
    其实也不算什么申请,在购买域名之后可以申请免费的ssl证书,在前面的配置文件application.properties中有证书的配置,将证书的pfx文件直接添加到后端项目下即可。
  2. 购买服务器部署后端api代码
    对于springboot项目,本人建议打jar,直接在服务器上部署即可,在服务器上只需要安装对应版本的jdk即可。项目部署命令:
    我购买的是阿里云的轻量级应用服务器部署的。比较划算吧。
运行命令: nohup java -jar helloworld.jar &

nohup的意思不挂服务,常驻的意思,除非云服务器重启,那就没法了;最后一个&表示执行命令后要生成日志文件nohup.out。
当然还可以使用java -jar helloworld.jar

源码:链接: https://pan.baidu.com/s/1PfByFfEgqkVALcc3PRhn9w 提取码: c7yf

结束语:由于时间篇幅问题,本人介绍的内容很有限,希望对这方面有兴趣的你能有帮助。共同进步。
觉得有帮助,给个赞赏吧。给赞赏的优先同意qq或者微信,问问题秒回复等[滑稽],谢谢老铁。
在这里插入图片描述


http://chatgpt.dhexx.cn/article/pOd2OGEZ.shtml

相关文章

微信小程序开发前后端交互快速入门

目录 第 1 章 小程序特点 1.1 小程序特点概述 1.2 小程序配置 全局配置&#xff1a; app.json 页面配置: 页面名称.json sitemap 配置: sitemap.json 1.3 小程序框架接口 App Page 第 2 章 wxml 语法 2.1 数据绑定 初始化数据 使用数据 修改数据 2.2 事件绑定 事…

1. KVM虚拟化理论知识

基本概念 虚拟化是指在一个物理上运行多台虚拟机&#xff0c;各虚拟机之间共享cpu、内存等资源&#xff0c;但在逻辑上是相互隔离的。这样的物理机被称为是宿主机&#xff0c;各个虚拟机被称为是客户机 虚拟化的本质是资源抽象化&#xff0c;将资源最小化&#xff0c;按需使用…

KVM(Kernel-basedVirtual Machine)虚拟化技术——超详细理论+实验!!!

文章目录 一、虚拟化技术(KVM)是什么&#xff1f;1.1 KVM技术的具体作用 二、KVM技术发展2.1 虚拟化类型 三、KVM运行时的三种模式四、KVM工作原理五、KVM特性5.1 优势5.2 劣势 六、虚拟化前、后对比6.1 虚拟化前6.2 虚拟化后 七、KVM虚拟化平台实操7.1 拓扑图7.2 虚拟机资源环…

KVM虚拟化(1) | KVM简介

目录 1、kvm架构 2、架构解析 3、kvm和qemu的作用 1、kvm架构 2、架构解析 从rhel6开始使用&#xff0c;红帽公司直接把KVM的模块做成了内核的一部分。xen用在rhel6之前的企业版中默认内核不支持&#xff0c;需要重新安装带xen功能的内核KVM 针对运行在x86 硬件上的、驻留在…

KVM 虚拟化技术 | 虚拟化平台部署

KVM 虚拟化技术 一、虚拟化技术1.1 概述1.2 类型① 全虚拟化② 半虚拟化③ 直通 1.3 特点 二、KVM2.1 概述2.2 原理2.3 虚拟化架构2.4 工作流程 三、部署 KVM 虚拟化平台3.1 宿主机最低配置3.2 环境优化① 关闭 DNS 反向解析② 将镜像光盘设置为自动挂载③ 设置本地源和网络源④…

KVM虚拟化技术(理论理解以及虚拟化平台搭建步骤)

KVM虚拟化技术 文章目录 KVM虚拟化技术一、虚拟化产生背景二 、虚拟化技术简介2.1 虚拟化技术2.2 虚拟化技术发展2.3 虚拟化类型2.4 特性 三、KVM3.1 广义KVM3.2 KVM架构以及原理3.3 KVM工作流程 四、KVM虚拟化平台部署一、虚拟机资源二、实验环境三、安装KVM三、设置KVM网络四…

KVM虚拟化技术的-NUMA技术和应用

KVM虚拟化技术的-NUMA技术和应用 NUMA技术是解决多CPU共同工作的技术方案&#xff0c;多CPU共同工作主要有3中架构&#xff1a;SMP&#xff1a;Symmetric Multi-Processor)&#xff0c;非统一存储访问结构(NUMA&#xff1a;Non-Uniform Memory Access)&#xff0c;以及海量并行…

KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机

一 .KVM 简介 KVM &#xff08;名称来自英语&#xff1a; Kernel-basedVirtual Machine 的缩写&#xff0c;即基于内核的虚拟机&#xff09; &#xff0c; 是一种用于Linux内核中的虚拟化基础设施&#xff0c;可以将Linux内核转化为一个hypervisor。KVM在2007年2月被导入Linux …

KVM-虚拟化技术之Hypervisor-架构

Hypervisor 是一种运行在物理服务器和操作系统之间的中间软件层,可允许多个操作系统和应用共享一套基础物理硬件&#xff0c;因此也可以看作是虚拟环境中 的“元”操作系统&#xff0c;它可以协调访问服务器上的所有物理设备和虚拟机&#xff0c;也叫 虚拟机监视器&#xff08;…

KVM虚拟化技术学习-基础入门

1.虚拟化技术概述 虚拟化[Virtualization]技术最早出现在 20 世纪 60 年代的 IBM ⼤型机系统&#xff0c;在70年代的 System 370 系列中逐渐流⾏起来&#xff0c;这些机器通过⼀种叫虚拟机监控器[Virtual Machine Monitor&#xff0c;VMM]的程序 在物理硬件之上⽣成许多可以运⾏…

KVM虚拟化技术学习-KVM管理

二&#xff0c;KVM管理 1.升级配置 1.创建一个空磁盘卷 [rootlocalhost ~]# qemu-img create -f qcow2 /kvm/images/disk2.qcow2 5G Formatting disk2.qcow2, fmtqcow2 size5368709120 encryptionoff cluster_size65536 lazy_refcountsoff 2.修改配置文件 <disk typefi…

KVM虚拟化技术原理简介

KVM KVM架构概述KVM运行时的三种模式KVM工作原理 硬件虚拟化技术1、CPU虚拟化2、内存虚拟化3、I/O虚拟化 KVM虚拟化平台部署1.虚拟机资源2.安装KVM3.设置KVM网络4.KVM部署与管理 KVM架构概述 KVM架构很简单&#xff0c;就是内核的一个模块KVM是集成到内核的hypervisorI&#x…

KVM虚拟化技术实践

[版权申明&#xff1a;本文系作者原创&#xff0c;转载请注明出处] 文章出处&#xff1a;http://blog.csdn.net/sdksdk0/article/details/54809159 作者&#xff1a;朱培 ID&#xff1a;sdksdk0 今天分享的文章是关于云计算中的kvm&#xff08;虚拟化技术&#xff09;&…

详解KVM虚拟化原理

详解KVM虚拟化原理 KVM架构 KVM&#xff08;Kernel-based Virtual Machine&#xff09;包含一个为处理器提供底层虚拟化、可加载的核心 模块kvm.ko&#xff08;kvm-intel.ko或kvm-amd.ko&#xff09;&#xff0c;使用QEMU&#xff08;QEMU-KVM&#xff09;作为虚拟机上层 控制…

KVM虚拟化技术介绍以及相关操作

一、KVM架构 KVM功能&#xff0c;是以扩展虚拟化CPU为硬件基础&#xff08;如Intel-VT,AMD-V&#xff09;&#xff0c;利用CPU虚拟化技术。 KVM作为内核的一个模块&#xff0c;来提供虚拟化功能。如果系统需要虚拟化功能&#xff0c;则KVM模块可以被linux内核按需动态加载到内…

KVM(虚拟化平台)概念及部署

KVM&#xff08;虚拟化平台&#xff09;概念及部署 一、虚拟化技术二、虚拟化技术发展三、虚拟化特性优势&#xff1a;劣势&#xff1a; 四、KVM架构及原理&#xff08;一&#xff09;KVM虚拟化架构/三种模式&#xff08;二&#xff09;KVM原理总结&#xff1a;&#xff08;三&…

KVM 虚拟化

kvm虚拟化 Kvm的安装、KVM下的虚拟机安装和相互访问约束 推荐下载TightVNC 也可以使用 VNCSever 一、虚拟化产品介绍 linux类的虚拟化软件: qemu&#xff0c;软件纯模拟全虚拟化软件&#xff0c;特别慢!xen(半)&#xff0c;性能特别好&#xff0c;需要使用专门修改之后的内…

Linux KVM 虚拟化技术

一 、 KVM 介绍 &#xff1b; KVM 全称是 基于内核的虚拟机&#xff08;Kernel-based Virtual Machine&#xff09;&#xff0c;它是Linux 的一个内核模块&#xff0c;该内核模块使得 Linux 变成了一个 Hypervisor&#xff1a; ① 、它由 Quramnet 开发&#xff0c;该公司于…

KVM 虚拟化详解

服务器虚拟化是云计算最核心的技术&#xff0c;而KVM是当前最主流的开源的服务器虚拟化技术。从Linux2.6.20起&#xff0c;KVM作为内核的一个模块 集成到Linux主要发行版本中。从技术架构&#xff08;代码量、功能特性、调度管理、性能等&#xff09;、社区活跃度&#xff0c;以…

KVM 虚拟化技术(理论详解+实战)

文章目录 前言什么是虚拟化为什么要用虚拟化虚拟化技术的优势KVM简介关于KVM关于Virtual Machine Manager其他虚拟化软件 KVM虚拟化平台部署 前言 什么是虚拟化 在计算机技术中&#xff0c;虚拟化&#xff08;技术&#xff09;或虚拟技术&#xff08;英语&#xff1a;Virtual…