微信小程序开发代码大全【微信小程序开发代码大全最新】 收藏 0

一款微信小程序开发「前端+后端（Java）」附完整源码，确实香啊

一、前言

现在微信小程序越来越火了，相信不少人都通过各种途径学习过微信小程序或者尝试开发，作者就是曾经由于兴趣了解开发过微信小程序，所以现在用这篇文章记录我之前开发的一些经验和一些心得吧。

二、主要内容

1. springboot后端架构构建
2. 小程序项目构建
3. 小程序api调用
4. 后台resetful接口编写
5. 小程序调用后台接口
6. 免费的https申请
7. linux下部署上线

三、微信小程序项目构建

这些基础的东西我就不过多介绍，大家在刚开始开发的时候一般都没有自己的服务器及域名，所以大家在本地编写的时候，在“详细”下的“项目设置”里面将“不校验域名安全性”勾选。

至于微信小程序的组件，即前端页面的开发希望大家耐住寂寞认真在微信开发平台上。

组件:

https://developers.weixin.qq.com/miniprogram/dev/component/

*api： *

https://developers.weixin.qq.com/miniprogram/dev/api/

四、后端详解

我在后端编写主要是用java，当然对其他开发语言熟悉的也可以使用其他语言开发后端。现在我就java编写后端api的讲解。主要框架springboot，开发工具myeclipse，服务器阿里云服务器。

创建一个maven项目，导入相关依赖：

pom.xml依赖

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

在实际项目中可能涉及数据库，还要整合mybatis，在文章中，我仅仅做测试就不做使用数据库的测试。

首先创建springboot的入口程序:app.class下面贴上代码：

启动项目时直接右击run即可。

在写一个测试的controller进行微信小程序与java后端实现通信，controller代码如下：

至此简易的后端框架及测试基本完成。

说明：@RestController与@Controller注解的区别@RestController相当于两个注解，它能实现将后端得到的数据在前端页面（网页）中以json串的形式传递。而微信小程序与后台之间的数据传递就是以json报文的形式传递。所以这就是选择springboot框架开发小程序后端的主要原因之一。可以方面我们进行小程序的后端开发。

五、小程序发起网络请求

在完成了小程序的后端开发，下面进行小程序端发起网络请求。

下面以一个简单的按钮请求数据为例：

wxml文件

js文件

接下来以搜索类型的请求为例：

wxml文件：

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

至此已经完成了简易的微信小程序端与java后端进行通信。

现在可以在启动后端项目在微信开发工具上进行测试。

演示效果：

微信图片_20220630212825.gif

所以至此已经完成了小程序的前后端通信。

六、ps申请

其实也不算什么申请，在购买域名之后可以申请免费的ssl证书，在前面的配置文件application.properties中有证书的配置，将证书的pfx文件直接添加到后端项目下即可。

七、购买服务器部署后端api代码

对于springboot项目，本人建议打jar，直接在服务器上部署即可，在服务器上只需要安装对应版本的jdk即可。项目部署命令：

我购买的是阿里云的轻量级应用服务器部署的。比较划算吧。

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

1、 绝对路径用什么符号表示？当前目录、上层目录用什么表示？主目录用什么表示? 切换目录用什么命令？绝对路径： 如/etc/init.d当前目录和上层目录： ./ ../主目录： ~/切换目录： cd

查看当前进程： psps -l 列出与本次登录有关的进程信息； ps -aux 查询内存中进程信息； ps -aux | grep * 查询*进程的详细信息； top 查看内存中进程的动态信息； kill -9 pid 杀死进程。

vi 文件名 #编辑方式查看，可修改cat 文件名 #显示全部文件内容more 文件名 #分页显示文件内容less 文件名 #与 more 相似，更好的是可以往前翻页tail 文件名 #仅查看尾部，还可以指定行数head 文件名 #仅查看头部,还可以指定行数

列出文件列表：ls【参数 -a -l】创建目录和移除目录：mkdir rmdir用于显示文件后几行内容：tail，例如： tail -n 1000：显示最后1000行打包：tar -xvf打包并压缩：tar -zcvf查找字符串：grep显示当前所在目录：pwd创建空文件：touch编辑器：vim vi

Linux查看日志的命令有多种: tail、cat、tac、head、echo等，本文只介绍几种常用的方法。1、tail最常用的一种查看方式命令格式: tail[必要参数][选择参数][文件]-f 循环读取 -q 不显示处理信息 -v 显示详细的处理信息 -c<数目> 显示的字节数 -n<行数> 显示行数 -q, –quiet, –silent 从不输出给出文件名的首部 -s, –sleep-interval=S 与-f合用,表示在每次反复的间隔休眠S秒例如：

tail -n 10 test.log 查询日志尾部最后10行的日志;tail -n +10 test.log 查询10行之后的所有日志;tail -fn 10 test.log 循环实时查看最后1000行记录(最常用的)一般还会配合着grep搜索用，例如 :tail -fn 1000 test.log | grep \’关键字\’如果一次性查询的数据量太大,可以进行翻页查看，例如:tail -n 4700 aa.log |more -1000 可以进行多屏显示(ctrl + f 或者 空格键可以快捷键)2、head跟tail是相反的head是看前多少行日志head -n 10 test.log 查询日志文件中的头10行日志;head -n -10 test.log 查询日志文件除了最后10行的其他所有日志;head其他参数参考tail3、catcat 是由第一行到最后一行连续显示在屏幕上一次显示整个文件 :

cat > filename将几个文件合并为一个文件：

cat -n textfile1 > textfile2清空一个日志文件:$cat : >textfile2注意：> 意思是创建，>>是追加。千万不要弄混了。cat其他参数参考tail4、moremore命令是一个基于vi编辑器文本过滤器，它以全屏幕的方式按页显示文本文件的内容，支持vi中的关键字定位操作。more名单中内置了若干快捷键，常用的有H（获得帮助信息），Enter（向下翻滚一行），空格（向下滚动一屏），Q（退出命令）。more命令从前向后读取文件，因此在启动时就加载整个文件。该命令一次显示一屏文本，满屏后停下来，并且在屏幕的底部出现一个提示信息，给出至今己显示的该文件的百分比：–More–（XX%）more的语法：more 文件名

Enter 向下n行，需要定义，默认为1行Ctrl f 向下滚动一屏空格键 向下滚动一屏Ctrl b 返回上一屏= 输出当前行的行号:f 输出文件名和当前行的行号v 调用vi编辑器!命令 调用Shell，并执行命令q退出more5、sed这个命令可以查找日志文件特定的一段 , 根据时间的一个范围查询，可以按照行号和时间范围查询按照行号

sed -n \’5,10p\’ filename 这样你就可以只查看文件的第5行到第10行。按照时间段sed -n \’/2014-12-17 16:17:20/,/2014-12-17 16:17:36/p\’ test.log6、lessless命令在查询日志时，一般流程是这样的less log.logshift + G 命令到文件尾部 然后输入 ？加上你要搜索的关键字例如 ？1213按 n 向上查找关键字shift+n 反向查找关键字less与more类似，使用less可以随意浏览文件，而more仅能向前移动，不能向后移动，而且 less 在查看之前不会加载整个文件。less log2013.log 查看文件ps -ef | less ps查看进程信息并通过less分页显示history | less 查看命令历史使用记录并通过less分页显示less log2013.log log2014.log 浏览多个文件常用命令参数：less与more类似，使用less可以随意浏览文件，而more仅能向前移动，不能向后移动，而且 less 在查看之前不会加载整个文件。

less log2013.log 查看文件ps -ef | less ps查看进程信息并通过less分页显示history | less 查看命令使用记录并通过less分页显示less log2013.log log2014.log 浏览多个文件常用命令参数：-b <缓冲区大小> 设置缓冲区的大小-g 只标志最后搜索的关键词-i 忽略搜索时的大小写-m 显示类似more命令的百分比-N 显示每行的行号

-o <文件名> 将less 输出的内容在指定文件中保存起来-Q 不使用警告音-s 显示连续空行为一行/字符串：向下搜索\”字符串\”的功能?字符串：向上搜索\”字符串\”的功能n：重复前一个搜索（与 / 或 ? 有关）N：反向重复前一个搜索（与 / 或 ? 有关）b 向后翻一页h 显示帮助界面q 退出less 命令一般本人查日志配合应用的其他命令history // 所有的历史记录history | grep XXX // 历史记录中包含某些指令的记录history | more // 分页查看记录history -c // 清空所有的历史记录!! 重复执行上一个命令查询出来记录后选中 : !323

告别难用的HBuilderX，用WebStorm轻松开发Uni-app微信小程序详解

作为一名开发者，我一直偏爱 WebStorm 的强大功能和友好的用户体验，而 HBuilderX 编辑器尽管是 uni-app 的官方推荐开发工具，却显得难以适应。尤其在日常开发中，我发现 HBuilderX 在代码补全、项目管理和调试等方面不够直观，使用体验并不理想。因此，我决定使用我熟悉的 WebStorm 来编写 uni-app 项目，凭借其强大的智能提示、代码补全、版本控制、以及插件支持，能让我在开发过程中更加得心应手。

为了在 WebStorm 中开发 uni-app 项目，我们可以通过安装 Uniapp Tool 插件，来为 WebStorm 添加对 uni-app 项目的支持。这篇文章将详细介绍如何在 WebStorm 2023.2.3 中安装 Uniapp Tool 插件，并使用它进行微信小程序的开发。通过这些步骤，你可以避开 HBuilderX 的不便之处，全程在 WebStorm 中进行高效、流畅的开发。

首先，你需要确保安装了 WebStorm 2023.2.3。可以从 JetBrains 的官方网站下载最新版本的 WebStorm。

• 访问 WebStorm 官方下载页面：https://www.jetbrains.com/webstorm/
• 根据你的操作系统（Windows、macOS、Linux）选择对应的安装包并安装 WebStorm。
• 按照安装向导完成安装。

uni-app 是基于 Vue.js 的跨平台框架，可以通过它开发包括微信小程序在内的多个平台应用。在 WebStorm 中，我们可以直接创建一个 uni-app 项目。

• 安装 HBuilderX 编辑器，HBuilderX 是 uni-app 官方推荐的开发工具，它有内置的 uni-app 模板及工具支持。安装完成后：
• 通过 HBuilderX 创建一个 uni-app 项目。
• 选择项目类型为“微信小程序”。
• 设置好项目路径并创建。
• 接下来你可以在 WebStorm 中打开这个项目进行开发。

Uniapp Tool 是一个专门为 WebStorm 提供 uni-app 支持的插件。它简化了开发过程，并为 WebStorm 添加了对 uni-app 项目的智能提示、补全以及调试功能。

步骤如下：

1. 打开 WebStorm：
2. 启动 WebStorm，进入主界面。
3. 打开插件市场：
4. 点击顶部菜单栏的 File > Settings（或直接使用快捷键 Ctrl + Alt + S 打开设置窗口）。
5. 在左侧面板中，找到 Plugins 选项，点击进入插件市场。
6. 搜索并安装 Uniapp Tool 插件：
7. 在插件市场的搜索框中输入“Uniapp Tool”。
8. 找到 Uniapp Tool 插件（版本 1.0.13-231.2），点击右侧的 Install 按钮进行安装。
9. 重启 WebStorm：
10. 安装完成后，WebStorm 会提示你重启 IDE，以便插件生效。
11. 点击 Restart IDE 按钮，等待 WebStorm 重启。

下面具体给出我的配置截图：

1. 打开 Uni-app 项目：
2. 在 WebStorm 主界面，点击 File > Open，然后选择你之前在 HBuilderX 中创建的 uni-app 项目的根目录。
3. 安装依赖包：
4. 打开终端窗口，使用 npm 或 yarn 安装 uni-app 项目的依赖：
5. npm install
6. 确保安装完成后，你的项目可以在 WebStorm 中正常运行。
7. 配置编译输出路径：
8. 在 uni-app 项目中，manifest.json 文件中可以配置编译输出路径：
9. 打开项目中的 manifest.json 文件。
10. 找到 mp-weixin 配置项，确保输出路径和微信开发者工具所使用的路径一致。

1. 创建页面：
2. 在 pages 目录中，你可以创建不同的页面目录，每个页面通常包括三个文件：*.vue、*.js 和 *.json 文件。
3. 使用 Vue.js 语法编写微信小程序的逻辑和界面。WebStorm 提供了 Vue 文件的智能提示和代码补全功能，这可以大大提高开发效率。
4. 使用 Uniapp Tool 提供的功能：
5. 插件会自动检测到 uni-app 项目，并提供对应的智能提示和代码补全。
6. 在编写 .vue 文件时，WebStorm 会根据 Uniapp Tool 提供的小程序 API 自动给出建议，比如 wx.request、wx.navigateTo 等微信小程序的 API 调用。
7. 调试和运行：
8. 你可以在 WebStorm 中直接运行和调试 uni-app 项目。为了调试微信小程序，仍需要使用微信开发者工具：
9. 将 WebStorm 项目的输出目录指向微信开发者工具的工作区。
10. 每次更改代码后，重新编译 uni-app 项目，并在微信开发者工具中预览。

1. 编译项目：
2. 在 WebStorm 中保存所有更改后，可以通过 WebStorm 内部终端或 HBuilderX 编译项目：
3. npm run dev:mp-weixin
4. 这个命令将会编译项目并生成适合微信小程序的代码。
5. 打开微信开发者工具：
6. 打开 微信开发者工具，将编译输出的目录添加到微信开发者工具中。
7. 在微信开发者工具中，你可以实时预览项目并进行调试。

1. 插件安装后无效果：
2. 确保 Uniapp Tool 插件已经成功安装，且 WebStorm 已经重启。如果问题依然存在，尝试卸载并重新安装插件。
3. 代码提示不完整或不准确：
4. 检查项目的依赖是否已安装完整，并且 manifest.json 配置是否正确。你可以通过命令 npm install 确保所有包都已正确安装。
5. 编译错误：
6. 如果在编译时遇到错误，可以通过 WebStorm 的终端或者微信开发者工具的控制台查看具体的错误信息。通常，修复 .vue 文件中的语法错误或者 manifest.json 配置问题可以解决。

通过在 WebStorm 中安装 Uniapp Tool 插件，我们可以充分利用 WebStorm 的强大功能来编写和管理 uni-app 项目。这个插件为开发微信小程序提供了完整的智能提示、代码补全和调试功能，使得开发过程更加高效和顺畅。

现在，你可以使用 WebStorm 轻松地创建、编写和调试微信小程序项目，享受高效的开发体验。如果你在使用过程中遇到问题，插件和 IDE 相关的文档与社区也是一个不错的资源来查找答案。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com