小程序端和后台进行连接,并且向后台传递数据,同时接收后台传递回来的数据。基于idea、Java后台。
步骤一:创建一个Spring-boot项目;
步骤二:写Controller(后台,基于SSM);
@Controller
@RequestMapping("/se")
public class WxController01 {
@PostMapping("/we")
public void num(@RequestBody JSONObject jsonObject, HttpServletResponse response) throws IOException {
response.setContentType("text/html;charset=utf-8");
/* 设置响应头允许ajax跨域访问 */
response.setHeader("Access-Control-Allow-Origin", "*");
/* 星号表示所有的异域请求都可以接受, */
response.setHeader("Access-Control-Allow-Methods", "GET,POST");
String username = jsonObject.getString("username");
Integer password = jsonObject.getInteger("password");
System.out.println("username="+username+" ,password="+password);
//返回值给微信小程序
Writer out = response.getWriter();
out.write("进入后台");
out.flush();
}
}
这里JSONObject需要导包:
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.47</version>
</dependency>
步骤三:创建微信小程序(前端);
index.wxml 界面:
<view>
<button bindtap='bindtest'>test</button>
<text>接收到后台的数据:{{str}}</text>
</view>
index.js 界面:
bindtest:function(){
var that = this;
wx.request({
url: 'http://localhost:8080/se/we', //本地服务器地址
data: { //data中的参数值就是传递给后台的数据
username:'admin',
password:'123456'
},
method:"POST",
header:{ //默认值
'content-type':'application/json'
},
success:function(res){ //res就是接收后台返回的数据
console.log(res.data);
that.setData({
str: res.data
})
},
fail:function(res){
console.log("--------fail--------");
}
})
},
wx.request({})里面放到就是交互代码;
url是交互地址;
data是给后台传递数据;
success是接收后台返回的数据。