
微信小程序与Java后端接口交互
本文主要介绍小程序前后端数据的交互,实践演示。
准备
创建后端项目
我这里就创建一个SpringBoot项目作为演示。
在创建项目中选择Spring Initializr
要勾选SpringWeb框架,当然你也可以后面导入,确认好设置后,创建项目。
然后在Maven依赖中调整SpringBoot的版本
目录结构如下,缺少的自行创建:
配置文件application.yml配置如下(仅供参考),
代码HelloWeiXin类(后端接口,在controller层):
测试,然后我们就可以在浏览器访问测试接口
这样我们的后端接口就创建完成了。
创建小程序项目
打开微信开发者工具,创建项目:
模板我使用javascript基础模板(js比较主流,推荐这个),创建即可。
具体的小程序学习请参考官方文档
学习起来很简单,我这里直接写案例代码了。
创建一个页面,wxml代码如下:
js代码如下
wx.request(Object)
代码中有几个细节要注意:
我把回调过程都封装在getData方法中,在onLoad方法中调用,onLoad你可以理解为内置方法,它是在页面加载是自动调用的。
其次,在getData方法中使用了另一个对象,这个对象若向访问页面对象,要提前声明个that = this,否则作用域不用,在success方法中this用的就是wx对象了。
如果你遇到如下问题,提示域名不安全,注意这不是跨域问题,只是由于访问的地址没有正规的检查。
你需要手动设置一下开发工具
在右上角的详情,勾选这个
就ok了。
页面和控制台都是正常的了。
这就实现了前后端的交互。