• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序与Java后台的通信

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、写在前面

最近接触了小程序的开发,后端选择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)...)

示例代码

wx.request({
  url: \'test.php\', //仅为示例,并非真实的接口地址  data: {
     x: \'\' ,
     y: \'\'
  },
  header: {
      \'content-type\': \'application/json\' // 默认值  },
  success: function(res) {
    console.log(res.data)
  }
})

三、基本思路

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

四、关键代码

微信小程序代码

index.wxml

  <view>
  <button bindtap=\'bindtest\'>test</button>
  </view>

index.js

  bindtest: function(){
    wx.request({
      url: \'http://localhost:8080/Demo01/servlet02\',
      data:{
        username:\'001\',
        password:\'abc\'
      },
      method:\'GET\',
      header: {
        \'content-type\': \'application/json\' // 默认值      },
      success:function(res){
        console.log(res.data);      },
      fail:function(res){
        console.log(".....fail.....");
      }
    })
  },

Java serlvet类代码

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

五、效果演示

前端控制台

ecplise控制台

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序data中数组java后端接收--小程序踩过的坑发布时间:2022-07-18
下一篇:
微信小程序连接Java后台发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap