微信小程序与后端交互(ssm)

2020-5-18更新

最近因为要用微信小程序和java后端(ssm框架)做一个云笔记的软件，因为刚刚接触小程序，在网上查了许多资料。首先，看视频学了点小程序中wxml、js、wxss、json这些类似前端的东西，做了一个简单的天气小程序，使用了和风天气的api接口，因为小程序要在微信的服务器上运行，要想使用其他网站的api接口，就要在微信公众平台•小程序中的开发中的服务器域名中配置合法的域名。配置如下：

从这个案例来看，做一个以微信小程序作为前端，在微信服务器上运行，java作为后端，然后将后端代码发布到自己买的服务器上。小程序通过wx.request()来与服务器交互，这与普遍的前后端交互差不多啊。
于是，我开始搭项目，首先做一个在小程序中显示id和姓名的页面，从后端去拿数据，从而验证可行性。

创建一个小程序的项目，不使用云开发，将原先的东西删掉，再创建如上的目录；
注册下全局app.js（这里讲的不清楚，建议看视频学习下基础）

App({/*** 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）*/onLaunch: function () {},/*** 当小程序启动，或从后台进入前台显示，会触发 onShow*/onShow: function (options) {},/*** 当小程序从前台进入后台，会触发 onHide*/onHide: function () {},/*** 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息*/onError: function (msg) {}
})

app.js是面向全局的，可以把全局变量放在这里。

app.json ,配置显示的页面顺序，这里先显示index页面

{"pages": ["pages/index/index"]
}

index.wxml
wxml格式类似于html，都是便签语言，他们的特性也类似。具体可以到开发者文档详查。

<navigator url="http://localhost:81/toWechat/get.do"><text>id:{{user.id}}\n</text><text>name:{{user.name}}</text>
</navigator>

该页面从index.js中拿数据

id:'',name:''},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.request({url: 'http://locahost:8080/toWechat/get.do', //仅为示例，并非真实的接口地址header: {'content-type': 'application/json' // 默认值},success: function (res) {console.log(res.data)this.setDate({id:res.id,name:res.name})}})},})

但是问题就出在这里：wx.request中的url路径是不能包含localhost的，如下：

一般开发中都要在个人电脑上进行测试，这里我们要把小程序编译器的不验证合法域名打开，这样我们就可以在本地服务器上进行测试了，也可以使用localhost本地地址来测试了。

接下来就开始前后端交互了

SSM与微信小程序

创建index.js，index.json，index.wxml，index.wxss

index.wxml页面布局


<button bindtap='houduanButton1'>点击发起请求</button>
<!-- 触发事件后，在js中，到后端获取数据，赋给list -->
<view wx:for="{{list}}">id:{{item.id}}姓名：{{item.name}}</view><view>{{list[0].name}}</view>

点击按钮触发houduanButton1，到后端获取数据

index.js

Page({/*** 页面的初始数据*/data: {list: ''},//触发事件houduanButton1: function () {var that = this;wx.request({url: 'http://localhost:8080/toJson.do',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})}}})} ,})

下面是后端的代码实现：
使用的是springmvc来处理前端请求，且小程序接收的是json格式的数据，要加上@RequestBody将返回的数据转为json格式。

 @RequestMapping("/toJson.do")@ResponseBodypublic Map<String,String> toJson(){Map<String,String> map= new HashMap<String,String>;map.put("id","1");map.put("name","lin");return map;}

这时候启动服务器，点击小程序的按钮，就可以获取到数据了。
(提示，如果springmvc有加拦截器的话，要把上面的请求地址设为不拦截，不然就会没响应)

微信小程序与后端交互(ssm)相关推荐

微信小程序前后端交互案例
微信小程序前后端交互案例首先声明一下,本人也是一个初学者(下面的案例可能会有很多不完整或说的不正确的,所以只能起到参考作用,千万不要拿我的话当标准). 我是纯自学,之前在前后端交互方面一直搞不懂,所 ...
微信小程序前后端交互__完整的登录注册
简介微信小程序连接后端,后端的代码放的位置随便,后端运行之后,微信小程序模拟器会自动匹配微信小程序官方文档给出的发起 HTTPS 网络请求的示例代码为 wx.request({url: 'exam ...
在线食物卡路里计算器html源码,卡路里计算器微信小程序前后端交互
SSM框架在Controller中添加一个 @RequestMapping(value="/getjson",method={RequestMethod.GET}) @Respo ...
微信小程序前后端数据交互
目录一微信小程序发送请求二后端接口接受小程序请求并返回数据三最后的效果图先简单说一下我写的这个危险小程序前后端交互的业务,主要是两个数据:supplyCount和wantBuyCount ...
微信小程序与后端Java接口交互-图书搜索实现
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 我们模拟实现一个微信小程序端关键字图书,然后显示图书列表的功能,如下图: 实现大体思路,前端用户输入关键字,通过bindtap事件,事件里得 ...
鸿蒙与微信小程序,鸿蒙远程交互应用 vs 微信小程序远程交互应用
原标题:鸿蒙远程交互应用 vs 微信小程序远程交互应用鸿蒙的远程交互组件应用相对复杂,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件. 过程: 导入鸿蒙的网络请 ...
微信小程序之界面交互API07
微信小程序之界面交互API07 关于界面交互,在官方文档上提供了API来 wx.showToast(Object object) 土司(只有提示,会在延迟时间过后消失)! 显示消息提示框参数 Obj ...
(已更新）运势运程小程序v1.2.0 功能模块+微信小程序+前端+后端+新增每日星座卡片
运势运程算命小程序 v1.2.0 完整版+微信小程序+前端+后端运势运程算命小程序开源源码最新更新日志: 新增测算栏目支付成功模版消息提醒,增加留存率.新增每日星座卡片.单向历,请求缓存解决请求慢问 ...
运势运程算命小程序v1.2.0 功能模块+微信小程序+前端+后端+新增每日星座卡片
运势运程算命小程序开源源码最新更新日志: 新增测算栏目支付成功模版消息提醒,增加留存率.新增每日星座卡片.单向历,请求缓存解决请求慢问题.修复测算出生日期开始时间,从 1979 更改为 1918 运势 ...

微信小程序与后端交互(ssm)

SSM与微信小程序

微信小程序与后端交互(ssm)相关推荐

最新文章

热门文章