微信小程序开发(后端 Java)

article/2025/10/14 12:10:05

微信使用的开发语言和文件很「特殊」。

小程序所使用的程序文件类型大致分为以下几种:

①WXML (WeiXin Mark Language,微信标记语言)

②WXSS (WeiXin Style Sheet,微信样式表)

③JS (Java,小程序的主体)

小伙伴们有兴趣想了解内容和更多相关学习资料的请点赞收藏+评论转发+关注我,后面会有很多干货。我有一些面试题、架构、设计类资料可以说是程序员面试必备!
所有资料都整理到网盘了,需要的话欢迎下载!私信我回复【111】即可免费获取

在语言方面,小程序看似重新定义了一套标准。但实际上,它们与「前端三件套」——HTML、CSS 和 Java—— 差不太多。

下面,我们就来对比一下小程序开发语言和「前端三件套」有什么异同点:

HTML 与 WXML:两者差异比较大,如果之前没有接触过 Android 开发,可能会觉得有些头疼。事实上,WXML 更像是 Android 开发中的界面 XML 描述文件,适合于程序界面的构建;而 HTML 则倾向于文章的展示 (这与 HTML 的历史有关),以及互联网页面的构建。

WXSS 与 CSS:两者在语言上几乎没有差别,可以直接通用。

JS 文件:小程序的 JS 文件与前端开发使用的 JS 几乎没有区别,只是小程序的 JS 新增了微信的一些 API 接口,并去除了一些不必要的功能 (如 DOM)。

在语言上,小程序完全向学习成本最低的前端开发看齐,但这不代表所有前端开发者都能无缝迁移。

如果你是从前端开发转向小程序,就需要注意这两个点:

HTML 与 WXML 两种文件的构建思想差异较大,如果之前只接触过前端开发,需要一点时间才能适应 WXML 的编写方法。

虽然小程序使用的是前端语言,但不代表可以继续沿用前端的开发思想进行开发。小程序对前端开发的要求从「构建界面」升级成「开发完整应用」,前端开发需要在意识上进行转变。
 

1. 主要内容

  springboot 后端架构构建

  小程序项目构建

  小程序 api 调用

  后台 resetful 接口编写

  小程序调用后台接口

  免费的 https 申请

  Linux 下部署上线

2. 后端详解(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

 


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

相关文章

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

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

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

目录 第 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;以…