经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » Java相关 » Java » 查看文章
微信小程序与Java后台的通信
来源:cnblogs  作者:霸气小青年  时间:2018/11/6 12:30:57  对本文有异议

一、写在前面

最近接触了小程序的开发,后端选择Java,因为小程序的代码运行在腾讯的服务器上,而我们自己编写的Java代码运行在我们自己部署的服务器上,所以一开始不是很明白小程序如何与后台进行通信的,然后查找资料发现结合了官方提供的api后好像和我们普通的web前后端通信也没有多大的区别,有想法后就写了这个测试程序。

二、API文档

wx.request(OBJECT)

发起网络请求。使用前请先阅读说明

OBJECT参数说明:

参数名类型必填默认值说明
url String   开发者服务器接口地址
data Object/String   请求的参数
header Object   设置请求的 header,header 中不能设置 Referer。
method String GET (需大写)有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType String json 如果设为json,会尝试对返回的数据做一次 JSON.parse
success Function   收到开发者服务成功返回的回调函数
fail Function   接口调用失败的回调函数
complete Function   接口调用结束的回调函数(调用成功、失败都会执行)

success返回参数说明:

参数类型说明最低版本
data Object/String 开发者服务器返回的数据  
statusCode Number 开发者服务器返回的 HTTP 状态码  
header Object 开发者服务器返回的 HTTP Response Header 1.2.0

data 数据说明:

最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String 。转换规则如下:

  • 对于 header['content-type'] 为 application/json 的数据,会对数据进行 JSON 序列化

  • 对于 header['content-type'] 为 application/x-www-form-urlencoded 的数据,会将数据转换成 query string (encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...)

示例代码

复制代码
  1. wx.request({
  2.   url: 'test.php', //仅为示例,并非真实的接口地址  data: {
  3.      x: '' ,
  4.      y: ''
  5.   },
  6.   header: {
  7.       'content-type': 'application/json' // 默认值  },
  8.   success: function(res) {
  9.     console.log(res.data)
  10.   }
  11. })
复制代码

三、基本思路

将数据通过get方式传到Java servlet类,servlet得到微信小程序的数据打印出来并返回一个数据给微信小程序,从而实现一个最简单的前后端通信。

四、关键代码

微信小程序代码

index.wxml

  1.   <view>
  2.   <button bindtap='bindtest'>test</button>
  3.   </view>

index.js

复制代码
  1.   bindtest: function(){
  2.     wx.request({
  3.       url: 'http://localhost:8080/Demo01/servlet02',
  4.       data:{
  5.         username:'001',
  6.         password:'abc'
  7.       },
  8.       method:'GET',
  9.       header: {
  10.         'content-type': 'application/json' // 默认值      },
  11.       success:function(res){
  12.         console.log(res.data);      },
  13.       fail:function(res){
  14.         console.log(".....fail.....");
  15.       }
  16.     })
  17.   },
复制代码

Java serlvet类代码

复制代码
  1.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  2.         // TODO Auto-generated method stub        
  3.         response.setContentType("text/html;charset=utf-8");          
  4.         /* 设置响应头允许ajax跨域访问 */  
  5.         response.setHeader("Access-Control-Allow-Origin", "*");  
  6.         /* 星号表示所有的异域请求都可以接受, */  
  7.         response.setHeader("Access-Control-Allow-Methods", "GET,POST");  
  8.        
  9.         //获取微信小程序get的参数值并打印
  10.         String username = request.getParameter("username");
  11.         String password = request.getParameter("password");
  12.         System.out.println("username="+username+" ,password="+password);
  13.         
  14.         //返回值给微信小程序
  15.         Writer out = response.getWriter(); 
  16.         out.write("进入后台了");
  17.         out.flush();   
  18.     }
复制代码

五、效果演示

前端控制台

ecplise控制台

至此说明微信小程序与Java后台通信成功!当然这是最简单的通信,比较复杂的是需要对Json数据的处理,以后有时间再总结下。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号