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

一、写在前面

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

二、API文档

wx.request(OBJECT)

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

OBJECT参数说明:

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

success返回参数说明:

参数类型说明最低版本
dataObject/String开发者服务器返回的数据 
statusCodeNumber开发者服务器返回的 HTTP 状态码 
headerObject开发者服务器返回的 HTTP Response Header1.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数据的处理,以后有时间再总结下。

已标记关键词 清除标记
<p> <span style="font-size:16px;color:#337FE5;"><strong>【为什么学习微信程序?】</strong></span> </p> <p> <span>  小程序开发为当下一种主流的开发形式,<span>小程序开发已经不仅仅局限于互联网行业,传统行业同样也有海量的需求,</span>掌握小程序开发不仅仅是掌握了一个新的开发技能,更可以增加大家的行业竞争力,<span>无论是在岗位的提升,求职面试、或者个人创业都是有很大的帮助。</span>掌握了小程序开发</span><span>小程序也是一门相对比较容易上手的技术,因为小程序开发容纳了前端、后端、运维等岗位所需掌握的知识但又极为简单好理解,对于刚刚入门或者小白用户是一个可以快速掌握并成为一名程序猿的不二途径。</span> </p> <p> <br /> </p> <p> <span style="font-size:16px;color:#337FE5;"><strong>【推荐你学习这门课程的四大亮点】</strong></span> </p> <p style="font-size:13.3333px;"> <span style="color:#337FE5;">1、完整成体系的小程序开发知识:</span> </p> <p style="font-size:13.3333px;"> 对于没有学习过小程序开发的同学,本课程由浅入深系统的向同学们讲解了小程序开发知识,将<span style="font-size:13.3333px;">知识点串联起来,</span>让同学们可以更好更快的掌握小程序开发。 </p> <p> <span style="color:#337FE5;">2、视频及相关功能开发的掌握:</span> </p> <p> 借助于小程序开发使得视频方向的开发变的尤为简单,即使你是入门小白也可以熟练掌握小程序中视频的相关开发,其中涉及了视频的常规控制如播放暂停等也有比较流行的视频弹幕功能,并结合了一下视频开发中相关的性能优化问题,可以让同学们通过本课程的学习对于视频类的开发有更深层次的认识。 </p> <p style="font-size:13.3333px;"> <span style="color:#337FE5;">3、打造智能闲聊小程序:</span> </p> <p style="font-size:13.3333px;"> 借助于网络上开放的人工智能接口,去实现智能闲聊功能,使得开发的过程不仅能够收获更多的知识也变得更加有趣。项目中虽然知识讲解了智能闲聊功能的调用,但是通过此功能的调用方法大家可以举一反三去使用更多的开发功能使得开发变得简单且有趣。 </p> <p> <span style="color:#337FE5;">4、掌握项目级开发知识及技巧:</span> </p> <p> 本课程中融入了两大当前比较主流的项目实例,视频功能和人工智能。通过项目的练习不仅可以让大家掌握较为主流的项目方向且融入很多的中高级语法及项目开发知识,如ES6+的一些语法和模块化、组件化开发的知识。 </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:16px;color:#337FE5;"><strong>【课程内容设计】</strong></span> </p> <p style="text-indent:0px;"> <span style="font-size:12px;">  设计本门课程时考虑到很多同学可能没有小程序开发相关经验,本门课程将由浅入深,渐进式的讲解知识点。我把课程分为了三个阶段分别为:初次接触、基础入门、实战提升。</span> </p> <p style="text-indent:0px;"> <span style="font-size:12px;color:#337FE5;">  1、</span><b><span style="color:#337FE5;">初次接触</span></b><span style="font-size:12px;color:#337FE5;"><span style="color:#337FE5;">:</span></span> </p> <p style="text-indent:0px;"> <span style="font-size:12px;">  主要给大家讲解小程序开发的相关知识,让大家在宏观上对向程序开发能有一定的概念。并且讲授的开发环境的搭建让大家对在开发前期做一个充分的热身。先激发起大家对线程序开发的热情,这样为下一步小程序的开发学习做一个铺垫。</span> </p> <p style="text-indent:0px;"> <span style="font-size:12px;"> <span style="color:#337FE5;"> 2、</span></span><b><span style="color:#337FE5;">基础入门</span></b><span style="font-size:12px;color:#337FE5;"><span style="color:#337FE5;">:</span></span> </p> <p style="text-indent:0px;"> <span style="font-size:12px;">  这个阶段主要为入门的同学提供了一个比较全面的小程序开发基础知识知识汇总,并伴有实践的例子简单且易上手,让大家能够体验到小程序的开发乐趣,并未下一步的项目实战开发打定基础。</span> </p> <p style="text-indent:0px;"> <span><b>  <span style="color:#337FE5;">3、实战提升:</span></b></span> </p> <p style="text-indent:0px;"> <span style="font-size:12px;">  这个阶段为项目实践阶段,通过实战项目让大家深入了解和学习小程序开发,项目中同时融入了现在主流的视频内容,和有趣并贴近生活的智能闲聊功能,项目中涉及到的技术点也是由浅入深,同学们在掌握小程序的开发能力的同时也掌握了问题解决与深入学习的能力。</span> </p> <p> <br /> </p> <p> <span style="font-size:16px;color:#337FE5;"><strong>【实战项目展示】</strong></span> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdnimg.cn/202008181214457971.jpg" alt="" /><img src="https://img-bss.csdnimg.cn/202008181214513368.jpg" alt="" /> </p> <p> <br /> </p> <p> <span style="font-size:16px;color:#337FE5;"><strong>【学习完课程你将收获】</strong></span> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdnimg.cn/202008181213579208.jpg" alt="" /> </p>
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页