Java后台与微信小程序的数据交互实现

想把自己写的一个小项目转成微信小程序,主要是因为小程序比较火,而且自己想学一下小程序的东西,所以抱着初学者的心态开始了这个痛苦的旅程。看过小程序的一点视频,个人感觉和HTML,css,js差不多,甚至比前端更简单一些,可能是微信小程序做不出来那些炫酷的动态效果。 首先,要从Java后台查询出一组数据,然后转成json串返回。我总共总结了2种方法返回数据。一种非常简单,一种显得繁琐。

第一种通过springmvc的组件@ResponseBod返回数据

/*
	 *  查询用户
	 *       通过springmvc的组件@ResponseBody,十分的简便
	 */
	@RequestMapping("findUser")
	public @ResponseBody User findUser()throws Exception {

		User user = userService.findUserByid(1);
		return user;
	}

第二种

1.通过先有三个response的设置
2. 然后查询出数据
3.创建json对象
4.创建writer对象
5.返回json

/*
	 *    查询用户
	 *      将查询的数据转成json串,然后通过response返回给微信小程序,这样十分的麻烦
	 */
	@RequestMapping("findUser2")
	public void findUser2(HttpServletResponse response)throws Exception {
		response.setContentType("text/html;charset=utf-8");
    /* 设置响应头允许ajax跨域访问 */
    response.setHeader("Access-Control-Allow-Origin", "*");
    /* 星号表示所有的异域请求都可以接受, */
    response.setHeader("Access-Control-Allow-Methods", "GET,POST"); 

		User user = userService.findUserByid(1);
		Gson gson=new Gson();
		String json = gson.toJson(user);
		System.out.println(json);

		Writer out = response.getWriter();
		out.write(json);
		out.flush();
	}

对了,还要导入json的包,自己可以下(这个简单) 如果不出什么意外,后台基本完成了工作,接下来就是微信小程序的接受工作 后台的接收也有一些坑,对会小程序的不会有什么问题,对于小白就不那么友好了

这个就是我后台接收的代码,相对也比较简单。 开始我就是这么写的,但是始终接收不到数据,最后静下心来好好想想了逻辑,发现我还差一段代码。

好了到这里也就完成了,祝看到这篇文章的你这篇文章对你有所帮助。 附上自己的结果图

到此这篇关于Java后台与微信小程序的数据交互实现的文章就介绍到这了,更多相关Java与小程序数据交互内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序仿微信运动步数排行(交互)

    本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自己留个笔记,废话不多说了,具体如下: 效果图如下: wxml: <view class="item-box"> <view class="items"> <view wx:for="{{list}}" wx:key="{{index}}" class="item"> <view bindtouchst

  • 微信小程序wx.request实现后台数据交互功能分析

    本文实例讲述了微信小程序wx.request实现后台数据交互功能.分享给大家供大家参考,具体如下: 记录微信小程序wx.request这个api在跟后台交互时遇上的问题. 1.根据资料,完成第一步,请求发送,代码如下: wx.request({ url: 'https://localhost:8443/xiaochengxu/addBill.do', data: e.detail.value, method: 'POST', success:function(res) { console.log

  • 微信小程序 数据交互与渲染实例详解

    微信小程序 数据交互与渲染 实现效果图: 微信小程序的api中提供了网络交互的api,我们只要调用即可和后端进行数据交互,该api为wx.request.,具体代码如下. //list.js //获取应用实例 var app = getApp() Page({ data: { list:[], hiddenLoading: true, url: '' }, loadList: function () { var that = this; that.setData({ hiddenLoading:

  • 微信小程序之事件交互操作实例分析

    本文实例讲述了微信小程序之事件交互操作.分享给大家供大家参考,具体如下: 微信小程序-点击事件 什么是事件? 指点击,触摸,按下,滑动,松开,等一系列对手机屏幕操作. 下面代码所要呈现的效果就是给两个按钮一人一个ID然后点击谁,在上面显示信息那就显示 点击了谁,点击了多少次,这多少次没有分开啊,次数是点击他两的总和.下面另一代码是分开的,各计各的. 1. 在index.wxml 中设置点击事件(测试时需要删除注释部分) <view class="page"> //点击后在这

  • 小程序跨页面交互的作用与方法详解

    去年年末,微信小程序的分包大小已经到达了 12M 大小,一方面说明小程序的确逐步为开发者放开更大的权限,另一方面也说明了对于某些小程序 8M 的大小已经不够用了.我个人今年也是在开发一个 to B 小程序应用.这里列举一些跨页面交互的场景. 对于 B 端应用的业务需求来说,小程序开发的复杂度相对比网页开发要复杂一些.一个是双线程的处理机制问题,另一个是页面栈之间交互问题. 注: 笔者目前只需要开发微信小程序,为了在小程序页面中可以使用 properties behaviors observers

  • 微信小程序与webview交互实现支付功能

    实现原理:点击h5网页的支付按钮--(跳转)-->嵌套改h5的小程序的支付页面--(处理支付)-->跳转至支付完成后的页面 注意:(1)网页h5中,引入微信的jssdk <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> (2)小程序嵌套h5页面后,需要在微信公众平台配置h5网页的业务逻辑名,否则无法访问(且

  • 详解微信小程序与内嵌网页交互实现支付功能

    上个月,小程序开放了新功能,支持内嵌网页,所以我就开始了小程序内嵌网页之路,之前我只是个小安卓. 内嵌网页中可使用JSSDK 1.3.0提供的接口,可坑就来了,居然不支持支付接口的调用,经过一番研究,总算打通了两边的交互. 大概流程 1.先说明涉及到的文件,下面会用到 1.1 app.js:小程序的app.js文件,在globalData里定义一个全局变量paySuccessUrl: '',用来保存支付成功跳转url 1.2 wxminiwebview.js:小程序中放web-view的界面 1

  • 详解微信小程序自定义组件的实现及数据交互

    简单的自定义组件 本文的使用场景是:多个页面都需要用到拨打电话功能,为减少代码量.便于维护,所以自定义了一个组件,每个页面直接调用即可.基本实现下图样式: 下面我们来一步步的实现它: step1:创建文件夹以及文件 首先创建一个components(名字可自取)文件夹,用于放置所有自定义的组件, 里面可以用右键自动创建的方式,新建一个Component组件,例如: 创建之后的目录结构为: 其中callphone是我们本次要实现的拨打电话组件. step2:组件的基本搭建 在callphone.w

  • Java后台与微信小程序的数据交互实现

    想把自己写的一个小项目转成微信小程序,主要是因为小程序比较火,而且自己想学一下小程序的东西,所以抱着初学者的心态开始了这个痛苦的旅程.看过小程序的一点视频,个人感觉和HTML,css,js差不多,甚至比前端更简单一些,可能是微信小程序做不出来那些炫酷的动态效果. 首先,要从Java后台查询出一组数据,然后转成json串返回.我总共总结了2种方法返回数据.一种非常简单,一种显得繁琐. 第一种通过springmvc的组件@ResponseBod返回数据 /* * 查询用户 * 通过springmvc

  • 微信小程序 本地数据存储实例详解

    微信小程序 本地数据存储实例详解 前言 如果您在看此文章之前有过其他程序的开发经验,那一定会知道一般例如安卓或者苹果的原生APP都提供了本地的存储功能,甚至可以使用sqlite数据库来做存储.可是微信的小程序框架基于微信本身,其实际运行环境只是在浏览器里面,所以不会提供那么丰富的数据存储实力.但html5开始已经可以在浏览器里面存储数据,好在微信的小程序给这个功能封装好了,这样我们可以使用数据存储. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStor

  • 微信小程序 动态绑定数据及动态事件处理

    微信小程序 动态绑定数据及动态事件处理 关键核心代码 <image class="midimage" data-Type="{{item.Type}}" data-BillCode="{{item.BillCode}}" data-src="{{item.imgurl}}" src="{{item.imgurl}}" mode="scaleToFill" bindtap="

  • 微信小程序首页数据初始化失败的解决方法

    一. 问题描述 用户首次后再次进入小程序时,我们通常需要通过获取用户openid或unionid用作唯一标示与后台进行数据交流,初始化用户信息.当我们通过第三方服务器跟微信建立请求时,微信需要用户确认是否公开信息.如图1,从console可以看到,在请求的同时,我们的首页index已经加载完成,图中初始化数据显示为空.无论我们将请求信息写在app.js的onload中或者index.js中,当我们点击确认后,请求信息才执行success方法,将第三方服务器返回的数据处理,这样的因需要用户点击而产

  • 微信小程序 用户数据解密详细介绍

    微信小程序 用户数据解密 官方指引图: 引导图一步一步操作 1.获取code onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 let that = this wx.login({ success: function (res) { // success let code = res.code that.setData({ code: code }) wx.getUserInfo({ success: function (res)

  • 微信小程序登录数据解密及状态维持实例详解

    本文实例讲述了微信小程序登录数据解密及状态维持.分享给大家供大家参考,具体如下: 学习过小程序的朋友应该知道,在小程序中是不支持cookie的,借助小程序中的缓存我们也可以存储一些信息,但是对于一些比较重要的信息,我们需要通过登录状态维持来保存,同时,为了安全起见,用户的敏感信息,也是需要加密在网络上传输的. 前台,service.封装了http请求,同时封装了getSession(通过code获取服务器生成的session).getUserInfo(获取用户信息).getDecryptionD

  • 微信小程序的数据存储与Django等服务发送请求 讲解

    目录 官方文档 快速归纳 存取改删 1.wx存储数据到本地以及本地获取数 1.1 wx.setStorageSync(string key, any data) 存(同步) 1.2 wx.setStorage(Object object)存(异步) 1.3 wx.getStorageSync(string key)取(同步) 1.4 wx.getStorage(Object object)取(异步) 小程序如何向我们django等服务请求接口(wx.request) 官方文档 wx.setSto

  • Java中生成微信小程序太阳码的实现方案

    目录 背景 实现方案 生成有限制太阳码 实现步骤 获取小程序的access_token 调用微信api生成小程序太阳码 说明 参数说明 注意事项 获取小程序的access_token 调用微信api生成小程序太阳码 说明 参数说明 参数过长问题 解决方案 生成无限制太阳码 扩展功能 总结 背景 当前小程序盛行的时代,无论走在那里都会看到各种各样的小程序太阳码,小程序项目中经常也会用到小程序的太阳码,那么我们如何生成小程序的太阳码呢? 实现方案 我们可以通过如下的方法实现小程序太阳码生成. 生成有

  • 微信小程序网络数据请求的实现详解

    目录 一.限制 二.配置服务器合法域名 三.发起请求 GET请求 POST请求 二者区别 四. 跳过requst合法域名校验 五.关于跨域和Ajax的说明 番外-GET与POST二者的通俗化解释 一.限制 出于安全性考虑,小程序官方对数据接口的请求做出了如下两点限制: 只能请求HTTPS类型的接口 必须先将接口的域名添加到信任列表中 二.配置服务器合法域名 配置步骤: 登录微信小程序管理后台 链接 点击开发 开发管理 开发设置 服务器域名 点击右上角修改requst合法域名 注意事项: 域名只支

  • 微信小程序 本地数据读取实例

    微信小程序 本地数据读取实例 一般情况下,小程序的utils这个文件夹下,我们可以把本地的数据写进去,封装成.js文件,提供对外暴露的接口,然后读取本地数据.如果涉及到一些针对这些数据的处理方法,也可以把方法写好,封装到.js文件里面,然后需要时调用. module.exports = { mtData: mtData, searchmtdata: searchmtdata, usedraw: usedraw } var mt_data = mtData() function searchmtd

随机推荐