精华内容
下载资源
问答
  • 该资源是本人所总结,其中包括有微信小程序前台代码和后台代码,还有一些文档帮助学习。
  • 微信小程序前后端交互流程

    万次阅读 2018-09-21 17:22:05
    (近期有时间,也饿,接点小型微信小程序私活填肚子) 建议封装自己的HTTP请求,使用方便并且多少可以减少代码量: function HttpRequst(loading, url, sessionChoose, sessionId, params, method, ask, callBack...

    (近期有时间,也饿,接点小型微信小程序私活填肚子)

    建议封装自己的HTTP请求,使用方便并且多少可以减少代码量:

    function HttpRequst(loading, url, sessionChoose, sessionId, params, method, ask, callBack) {
      if (loading == true) {
        wx.showToast({
          title: '数据加载中',
          icon: 'loading'
        })
      }
      var paramSession = [{},
        {
          'content-type': 'application/json',
          'Cookie': 'JSESSIONID=' + sessionId
        },
        {
          'content-type': 'application/json'
        },
        {
          'content-type': 'application/x-www-form-urlencoded',
          'Cookie': 'JSESSIONID=' + sessionId
        },
        {
          'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
          'Cookie': 'JSESSIONID=' + sessionId
        }
      ]
        wx.request({
          url: baseUrl + url,
          data: params,
          dataType: "json",
          header: paramSession[sessionChoose],
          method: method,
          success: function(res) {
            console.log(res);
            console.log(res.data.statusCode);
            if (loading == true) {
              wx.hideToast(); 
            }
            if (res.data.needLogin == true) {
              wxLogin2(loading, callBack);//在此做自己的wx.login
            }
            if (res.data.needLogin != true) {
              callBack(res.data);
            }
          },
          complete: function() {
            if (loading == true) {
              wx.hideToast(); 
            }
          }
        })
    }

    我们可以在能够使用 HttpRequst 的地方很简单的发出请求,并预定callback函数:

    util.HttpRequst(true, "house/report.do", 4, wx.getStorageSync("sessionId"), params, "POST", false, _this.sthAfterReport);

    利用微信提供的API—getSession,我们可以在小程序端对session过期做相应处理,这可以解决用户注销并切换用户登录的时候,系统需要更新用户的问题:

    在app.js-onLaunch()方法中:
    
    wx.checkSession({
          success: function (res) {
            console.log("处于登录态");
            console.log(wx.getStorageSync('sessionId'));
          },
          fail: function (res) {
            wx.removeStorageSync('sessionId');//在此可以在用户切换登录的时候,将保存在缓存中的session信息删除.
            console.log("处于非登录态");
          }
        })

    在后端我们可以对请求进行拦截,针对不同的框架有不同的实现方法,这里以后端请求filter为例:

    /*
    *当小程序端接收到needLogin == true的标记时,触发wx.login()方法,在后端login方法中,将user信息加入session中并将sessionId传回小程序端保存,可以通过wx.setStorageSync()方法保存到微信端缓存当中.  
    *若session中存在user信息,则可以继续进行请求的操作.
    /
    User user = (User)req.getSession().getAttribute("user");
    			if(null == user){
    				res.put("needLogin", true);
    				return res;
    			}
    
    
    //后端login.
    map.put("sessionId", req.getSession().getId());
    
    //前端login.
    wx.setStorageSync('sessionId', res.sessionId);
    大致流程汇总说明:
    新用户初次登录,小程序端----发送https-request----->服务端.
    filter获取user为空,返回needLogin为true的标识.
    小程序端调用wx.login().
    服务端将session信息放到response.
    小程序端将session信息保存到缓存.
    小程序端之后的request调用,都在request里附加session信息.
    服务端根据session信息取出user对象,进行后续操作.
    展开全文
  • 微信小程序前后端数据交互问题

    千次阅读 2020-03-27 19:43:34
    简单的微信小程序与Java后台的连接. 遇到问题 小程序前后端传递数据时获取不到相应的数据,在两边的控制台打印的都不是定义好的数据,且小程序控制台提示404 解决方法 修改代码: 小程序某个页面的js文件: 注意he....

    今天在弄微信小程序后端的时候遇到一个小问题,查不到自己想要的,所以来记录一下
    首先说明一下,后端选择java,使用servlet,相关问题参考:
    微信小程序通过JAVA连接数据库.
    简单的微信小程序与Java后台的连接.

    遇到问题

    小程序前后端传递数据时获取不到相应的数据,在两边的控制台打印的都不是定义好的数据,且小程序控制台提示404

    解决方法

    修改代码:
    小程序某个页面的js文件:
    在这里插入图片描述
    注意header处的注释,method和header的值是对应的,不要弄反,这里可能也会取不到数据

    WXservlet.java
    在这里插入图片描述

    web.xml

    在这里插入图片描述
    在这里插入图片描述
    重点在路径上,这次404的错误提示就因为web.xml里servlet的路径
    我的servlet文件放在com.servlet目录里,但是web.xml中url-pattern标签内写的路径只有"/WXservlet" (原本自动生成的路径是"/servlet/WXservlet",报错404)

    在修改了一些细节后,成功在前后端看到想要的数据
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 微信小程序前端代码 : index.js中page的onload函数。 onLoad: function () { wx.request({ url: 'http://localhost:8080/BaseProjectSSM/admin/clazz_table/list2', method: 'post', header: { '...

    微信小程序前端代码 :

    index.js中page的onload函数。

    onLoad: function () {
        wx.request({
          url: 'http://localhost:8080/BaseProjectSSM/admin/clazz_table/list2',
          method: 'post',
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: res => {
            console.log(res.data)
            this.setData({
              
            })
          },
          fail: res => {
            console.log("失败")
          }
        })
        if (app.globalData.userInfo) {
          this.setData({
            userInfo: app.globalData.userInfo,
            hasUserInfo: true
          })
        } else if (this.data.canIUse){
          // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
          // 所以此处加入 callback 以防止这种情况
          app.userInfoReadyCallback = res => {
            this.setData({
              userInfo: res.userInfo,
              hasUserInfo: true
            })
          }
        } else {
          // 在没有 open-type=getUserInfo 版本的兼容处理
          wx.getUserInfo({
            success: res => {
              app.globalData.userInfo = res.userInfo
              this.setData({
                userInfo: res.userInfo,
                hasUserInfo: true
              })
            }
            
          })
        }
      },

    微信控制台结果:

    后台代码:

    控制层:

    @RequestMapping(value="/list2",method=RequestMethod.POST)
    	@ResponseBody
    	public Map<String,Object> getList2(){
    		Map<String,Object> ret = new HashMap<String, Object>();
    		List<Clazz> clazz1 = clazzService.findList2();
    		ret.put("clazzList2", clazz1);
    		return ret;
    	}

    service.java文件

    public List<Clazz> findList2();

    serviceImpl.java文件

    	@Override
    	public List<Clazz> findList2() {
    		// TODO Auto-generated method stub
    		return clazzDao.findList2();
    	}

     dao.java文件

    	public List<Clazz> findList2();

    clazz.java实体类

       package com.ischoolbar.programmer.entity.admin;
    
    import java.text.ParseException;
    import java.text.SimpleDateFormat;
    import java.util.Date;
    import java.util.List;
    
    import org.springframework.stereotype.Component;
    
    
    
    /**
     * 课程实体
     * @author whs
     *
     */
    @Component
    public class Clazz {
    	private Long id;
    	private String clazzname;//课程名字
    	private Long categoryId;//分类id
    	private ClazzCategory clazzCategory;//课程类别
    	private Long addressId;//课程地址
    	private String teacher;//教师
    	private Date clazzTime;//上课时间
    	private Integer duration; //时长
    	private String weekday;//星期
    	private String cost;//费用
    	private String remark;//备注
    	
    	
    	public Long getId() {
    		return id;
    	}
    	public void setId(Long id) {
    		this.id = id;
    	}
    	public String getClazzname() {
    		return clazzname;
    	}
    	public void setClazzname(String clazzname) {
    		this.clazzname = clazzname;
    	}
    	public Long getCategoryId() {
    		return categoryId;
    	}
    	public void setCategoryId(Long categoryId) {
    		this.categoryId = categoryId;
    	}
    	public ClazzCategory getClazzCategory() {
    		return clazzCategory;
    	}
    	public void setClazzCategory(ClazzCategory clazzCategory) {
    		this.clazzCategory = clazzCategory;
    	}
    	public Long getAddressId() {
    		return addressId;
    	}
    	public void setAddressId(Long addressId) {
    		this.addressId = addressId;
    	}
    	public String getTeacher() {
    		return teacher;
    	}
    	public void setTeacher(String teacher) {
    		this.teacher = teacher;
    	}
    	public Date getClazzTime() {
    		return clazzTime;
    	}
    	public void setClazzTime(String clazzTime) {
    		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
    		try {
    			this.clazzTime = sdf.parse(clazzTime);
    		} catch (ParseException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    	}
    	public Integer getDuration() {
    		return duration;
    	}
    	public void setDuration(Integer duration) {
    		this.duration = duration;
    	}
    	public String getWeekday() {
    		return weekday;
    	}
    	public void setWeekday(String weekday) {
    		this.weekday = weekday;
    	}
    	public String getCost() {
    		return cost;
    	}
    	public void setCost(String cost) {
    		this.cost = cost;
    	}
    	public String getRemark() {
    		return remark;
    	}
    	public void setRemark(String remark) {
    		this.remark = remark;
    	}
    	
    }
    

     mapper.xml文件

    <!-- 获取课程列表 -->
    	<select id="findList2" resultType="Clazz">
    		select * from clazz where 1 = 1
    	</select>

    数据库:

    展开全文
  • 微信小程序与后端交互(ssm)

    千次阅读 2020-03-05 21:44:40
    微信小程序和java后端(ssm框架)做一个云笔记的软件,之前没有接触过小程序,自己查资料加上试验,其中遇到的坑记录下。 这篇博文也是云笔记系统的可行性分析试验,之后会把项目大概实现和源码在另一篇贴出来

    2020-5-18更新
    系统概述

    最近因为要用微信小程序和java后端(ssm框架)做一个云笔记的软件,因为刚刚接触小程序,在网上查了许多资料。首先,看视频学了点小程序中wxml、js、wxss、json这些类似前端的东西,做了一个简单的天气小程序,使用了和风天气的api接口,因为小程序要在微信的服务器上运行,要想使用其他网站的api接口,就要在微信公众平台•小程序中的开发中的服务器域名中配置合法的域名。配置如下:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    从这个案例来看,做一个以微信小程序作为前端,在微信服务器上运行,java作为后端,然后将后端代码发布到自己买的服务器上。小程序通过wx.request()来与服务器交互,这与普遍的前后端交互差不多啊。
    于是,我开始搭项目,首先做一个在小程序中显示id和姓名的页面,从后端去拿数据,从而验证可行性。
    在这里插入图片描述
    创建一个小程序的项目,不使用云开发,将原先的东西删掉,再创建如上的目录;
    注册下全局app.js(这里讲的不清楚,建议看视频学习下基础)

    App({
    
      /**
       * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
       */
      onLaunch: function () {
        
      },
    
      /**
       * 当小程序启动,或从后台进入前台显示,会触发 onShow
       */
      onShow: function (options) {
        
      },
    
      /**
       * 当小程序从前台进入后台,会触发 onHide
       */
      onHide: function () {
        
      },
    
      /**
       * 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
       */
      onError: function (msg) {
        
      }
    })
    

    app.js是面向全局的,可以把全局变量放在这里。

    app.json ,配置显示的页面顺序,这里先显示index页面

    {
      "pages": [
        "pages/index/index"
      ]
    }
    

    index.wxml
    wxml格式类似于html,都是便签语言,他们的特性也类似。具体可以到开发者文档详查。

    <navigator url="http://localhost:81/toWechat/get.do">
      
      <text>id:{{user.id}}\n</text>
      <text>name:{{user.name}}</text>
    </navigator>
    

    该页面从index.js中拿数据

    
        id:'',
        name:''
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
        wx.request({
          url: 'http://locahost:8080/toWechat/get.do', //仅为示例,并非真实的接口地址
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: function (res) {
            console.log(res.data)
            this.setDate({
              id:res.id,
              name:res.name
            })
          }
        })
      },
      
    })
    

    但是问题就出在这里:wx.request中的url路径是不能包含localhost的,如下:
    在这里插入图片描述
    一般开发中都要在个人电脑上进行测试,这里我们要把小程序编译器的不验证合法域名打开,这样我们就可以在本地服务器上进行测试了,也可以使用localhost本地地址来测试了。
    在这里插入图片描述


    接下来就开始前后端交互了

    SSM与微信小程序

    创建index.js,index.json,index.wxml,index.wxss

    index.wxml页面布局

    
    <button bindtap='houduanButton1'>点击发起请求</button>
    <!-- 触发事件后,在js中,到后端获取数据,赋给list -->
    <view wx:for="{{list}}">
        id:{{item.id}}
        姓名:{{item.name}}
    
      </view>
      <view>
        {{list[0].name}}
      </view>
    
    

    点击按钮触发houduanButton1,到后端获取数据
    在这里插入图片描述
    index.js

    Page({
      /**
       * 页面的初始数据
       */
      data: {
        list: ''
      },
      //触发事件
      houduanButton1: function () {
        var that = this;
        wx.request({
          url: 'http://localhost:8080/toJson.do',
          method: 'GET',
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: function (res) {//成功交互后触发
            console.log(res.data)//打印到控制台
            var list = res.data.list;
            if (list == null) {
              var toastText = '数据获取失败';
              wx.showToast({//弹窗提示
                title: toastText,
                icon: '',
                duration: 2000
              });
            } else {
              that.setData({
                list: list
              })
            }
          }
        })
      } ,
      
    })
    

    下面是后端的代码实现:
    使用的是springmvc来处理前端请求,且小程序接收的是json格式的数据,要加上@RequestBody将返回的数据转为json格式。

    	@RequestMapping("/toJson.do")
        @ResponseBody
        public Map<String,String> toJson(){
    
            Map<String,String> map= new HashMap<String,String>;
            map.put("id","1");
            map.put("name","lin");
    
            return map;
    
        }
    

    这时候启动服务器,点击小程序的按钮,就可以获取到数据了。
    (提示,如果springmvc有加拦截器的话,要把上面的请求地址设为不拦截,不然就会没响应)

    展开全文
  • 小程序表单的默认值 因为下面一开始定义了个数组 修改完后的值都放在 name 里 如何获取修改的id onLoad:function(option){ let id = options.id ; //获取到修改的id } 姓名: 内容: 类型:...
  • 初入微信小程序与java后台交互

    千次阅读 2019-08-16 15:08:28
    初入微信公众号--小程序开发的教程 本教程只作参考,供入门学习。 步骤: step1:准备搭建Java后台; 本次使用maven搭建ssm(你可以使用其他框架eg:servlet、struts系列等), 项目结构如下: 1>编写对应的...
  • 假如有2个参数的值要传给后台接口,还有一个参数要传给后台,从后台返回在获取这个值 name 和tel 的值是要直接传给接口的,timeId的值传给接口,并把接口返回来的值重新赋给timeId data: { name:'', tel:'', ...
  • 微信小程序后台PHP交互

    万次阅读 多人点赞 2018-03-28 17:22:54
    参加过学校的一个创业活动,在团队决定做一个关于图书的微信小程序以后,我负责做微信小程序后台程序,因为初次接触,决定选用较为简单的PHP作为后台语言,实现了微信小程序的一些基本功能,例如对微信段来的...
  • 首先本人的小程序全程基本都是自己写的,后端的框架用了springboots集成的mybatis plus。当然如果使用的是springmvc框架也是基本的这个原理,这里讲解下如何使用封装特别好的框架达成成就一天一个小程序。 选用...
  • 这是我们刚学微信小程序做的一个作业。然后我的要求呢是用微信小程序开发者工具、IDEA、mysql做一个药品管理系统。属于一个最简单的程序吧,毕竟只是一个结课作业。 具体呢就是微信小程序做前端,IDEA做java后端,...
  • 微信小程序与java后台交互

    千次阅读 2019-08-06 12:09:26
    https://www.cnblogs.com/zeroingToOne/p/8987554.html 微信小程序与java后台交互 - zeroingToOne - 博客园 zeroingToOne </div><!--end: ...
  • 微信小程序之前端与java后台进行数据交互

    万次阅读 多人点赞 2018-06-11 22:54:18
    最近小程序挺火的,准备写个小程序试试,我会将我遇到的问题和我认为有用的记录下来,但是只了解java,并不太懂PHP,虽然说语言都是相通的(我也不知道谁说的),反正还是用Java写后台吧, 1.申请服务器+域名 2.http...
  • 基于微信的通知渠道,微信小程序为开发者提供了可以高效触达用户的模板消息能力,在用户本人与小程序页面有交互行为后触发,通过微信聊天列表中的服务通知可快捷进入查看消息,点击查看详情还能跳转到下发消息的小...
  • 推荐一个博客@RequestBody和@RequestParam区别 对于微信小程序前后端交互 使用SpringBoot做Javaweb时,数据交互遇到的问题 小程序:前端同时传递String变量、JSON对象+后台@RequestBody接收 2021/4/8更新 需求:小...
  • 【微信】微信小程序前后端数据请求示例

    千次阅读 多人点赞 2019-04-29 17:26:00
    本篇内容简介之 微信小程序的前后端数据交互示例,主要涉及到获取服务端的数据,和提交到服务端的数据演示,服务端使用java-springboot进行快速搭建演示 1、在小程序中的index.wxml中进行一个表单的设计 例如: ...
  • 一.本地前后台交互 需先勾选这个 否则会调用不了本地 二.接口页面数据渲染 test点击事件
  • 方法介绍:先建立一个小程序,完成wxml和js代码部分,再创建一个*java web *项目,配置好web.xml文件,然后创建servlet.java文件,进行编程。 这个可以同时完成传数据和接收数据, 小程序中 data:{ name:"卡尔·...
  • 微信小程序后台API通信

    千次阅读 2018-11-26 18:28:05
    1、微信小程序不能直接访问后台的接口。 2、通过内网穿透实现,暴漏到公网。 3、这里使用的工具是 ngrok.com 使用ngrok进行内网穿透 1、打开https://dashboard.ngrok.com,注册账号登陆,download 下载适合自己电脑...
  • 之前一直使用堪称“万能”的jQuery处理用户交互的动画,近日开发微信小程序微信小程序高度限制的语法和功能使开源函数可谓对其“无能为力”。 那没办法,只好自己写一个可以让元素渐入渐出的,可复用的函数了。...
  • 微信小程序中使用echarts时,像Vue中直接把data传入是不行的,原因是因为小程序的生命周期一样。 二、解决办法 使用全局变量进行传入数据 第一步: 在app.js中加入 globalData{} //app.js App({ globalData: { ...
  • 我的qq 2038373094 我做的是微信小程序、网站、手机app,后端java+前端vue、bootstrap框架、原生的...强烈推荐一个微信小程序开发快捷的框架:touchWX框架 http://www.wetouch.net/touchwx_doc/component/summar...
  • 微信小程序前后端json交互数组

    千次阅读 多人点赞 2020-01-18 13:43:26
    关于小程序后台交互时的坑之JSON数组传值小程序后台交互时的坑JSON字符串传值 小程序后台交互时的坑 第一次开发小程序,没有什么经验,在学习并且开发的时候遇到过很多让人。。。。的坑。接下来的的两个月来...
  • 微信小程序+Java后台开发(详细解释,附代码)

    万次阅读 多人点赞 2019-02-18 12:59:54
    通过这个博客,你可以快速的搭建一个微信小程序前端和后台相连的一个功能,在这里我会详细的解说每一个步骤,就是如何实现小程序的前后台相互关联;因为是实现简易的小程序的某个功能,主要是为了了解小程序前台如何...
  • 微信小程序以ssm做后台开发

    千次阅读 2019-06-12 22:07:44
    我的微信小程序以ssm为后台进行的开发,下面我以登录注册为例讲解,希望可以帮到大家(我感觉用ssm后台开发资料比较少) 先看一下页面的效果 1、wmxl 我利用from表单做的 <view class="btn-submit"> <...
  • 微信小程序实现与后台PHP交互

    千次阅读 2018-10-18 10:01:27
    接下来将讲后台如何与前台进行数据及图片之间的交互,相信这一点是很多人所关注的,因为当时我实在团队中负责后台开发,因此对前端不是特别了解,这里我会贴出前端开发时的部分代码截图,微信小程序的官方api介绍...
  • 用户授权登录 获取用户信息 支付等小程序用户交互实例
  • 基于微信小程序的学生选课管理系统(Java后端),前后端分离,微信小程序界面实现与后台java系统的交互
  • 微信小程序与springboot后端交互demo

    千次阅读 2020-04-24 16:10:07
    关于小程序和后端的简单交互测试基本信息: 微信开发者工具版本:v1.02.2004020 记得勾选: 1.index.wxml <view><button bindtap="getTest">获取数据</button></view> <view wx...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,160
精华内容 4,464
关键字:

微信小程序前后台交互

微信小程序 订阅