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

https://www.cnblogs.com/dichuan/p/7932442.html

爱编程的川

去见你想见的人，去做你想做的事，趁阳光正好，趁微风不躁，趁你未老。

</div><!--end: blogTitle 博客的标题和副标题 -->
<div id="navigator">

• 博客园
• 首页
• 新随笔
• 管理

		<div id="blog_stats">

随笔 - 31 
文章 - 3 
评论 - 45

	</div><!--end: blogStats -->
</div><!--end: navigator 博客导航栏 -->

    <div id="post_detail">

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

一、写在前面

最近接触了小程序的开发，后端选择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"<span>);
    String password = request.getParameter("password"<span>);
    System.out.println("username="+username+" ,password="+<span>password);
    
    //返回值给微信小程序
    Writer out =<span> response.getWriter(); 
    out.write("进入后台了"<span>);
    out.flush();   
}</span></span></span></span></span></span></span></span></span></span></span></span></pre>

五、效果演示

前端控制台

ecplise控制台

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

	</div>
	<div class = "postDesc">posted @ <span id="post-date">2017-11-30 23:28</span> <a href='https://www.cnblogs.com/dichuan/'>的川</a> 阅读(<span id="post_view_count">...</span>) 评论(<span id="post_comment_count">...</span>)  <a href ="https://i.cnblogs.com/EditPosts.aspx?postid=7932442" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(7932442);return false;">收藏</a></div>
</div>
<script type="text/javascript">var allowComments=true,cb_blogId=389785,cb_entryId=7932442,cb_blogApp=currentBlogApp,cb_blogUserGuid='641027e1-df9f-44e3-34f6-08d4ef52ecb6',cb_entryCreatedDate='2017/11/30 23:28:00';loadViewCount(cb_entryId);var cb_postType=1;var isMarkdown=false;</script>

</div><!--end: forFlow -->
</div><!--end: mainContent 主体内容容器-->

<div id="sideBar">
	<div id="sideBarMain">

公告

		<div id="blog-calendar" style="display:none"></div><script type="text/javascript">loadBlogDefaultCalendar();</script>
		
		<div id="leftcontentcontainer">
			<div id="blog-sidecolumn"></div><script type="text/javascript">loadBlogSideColumn();</script>
		</div>
		
	</div><!--end: sideBarMain -->
</div><!--end: sideBar 侧边栏容器 -->
<div class="clear"></div>
</div><!--end: main -->
<div class="clear"></div>
<div id="footer">

Copyright ©2019 的川