uniApp微信小程序前后端交互

这篇具有很好参考价值的文章主要介绍了uniApp微信小程序前后端交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端

config包下

// 本地环境
 const  Url= 'http://本机地址:端口号/**********';
 //暴露接口
 export default Url;

common交互逻辑

// 引入本地环境
import Url from '../config/config.js';
//清除登录用户信息
export default {
    //获取openid方法
    getOpenIdSessionKey() {
        var that = this;
        uni.login({
            provider: 'weixin',
            success: (res) => {
                
                //这里获取的是用户的code,用来换取 openid、unionid、session_key 等信息,再将信息丢给后台自己的登录业务就行了
                uni.request({
                    url: Url + '/*****/*******',
                    method: 'post',
                    dataType: 'json',
                    responseType: 'text',
                    header: {
                        'content-type': 'application/json',
                    },
                    data: {
                        code: res.code
                    },
                }).then((res) => {
                    console.log(res);
                    console.log(res[1].data.code);
                    // if (res.data.code == 200) {
                    //      console.log("测试");
                    // }
                })
            }
        })
    },


    /**
     * 判断当前参数是否为空(空返回true,不空返回flase)
     * @param {*} options 需要判空的参数
     */
    fieldIsNull(options) {
        if (typeof options === "undefined" || options === null || options === "") {
            return true;
        } else {
            return false;
        }
    }
}

index页面

<script>
    //引入common交互逻辑
    import h from '../../common/common.js';
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {
            // 获取token oppenId
            h.getOpenIdSessionKey();
        },
        methods: {

        }
    }
</script>

后端Java

过滤拦截token

package com.skiff.manufacture.config;

import com.alibaba.fastjson.JSON;
import com.skiff.manufacture.util.ReturnResult;
import org.apache.commons.lang.StringUtils;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.concurrent.TimeUnit;
import java.util.logging.Logger;

/**
 * 
 * 登录验证拦截并验证token是否正确
 * @author Kylin
 * @since 2022/11/16
 */


@Component
public class LoginStatusInterceptor implements HandlerInterceptor {
    static Logger logger = Logger.getLogger(LoginStatusInterceptor.class.getName());

    @Resource
    private RedisTemplate<String, Object> redisTemplate;

    /**
     * 功能描述: token验证
     *
     * @param request
     * @param response
     * @param handler
     * @return boolean
     * @author Carver
     */
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {

        // 从请求头获取token
        String token = request.getHeader("token");
        System.out.println(token + "00000000000");
        if (StringUtils.isBlank(token)) {
            printJson(response);
            return false;
        }

        Object redisObj = redisTemplate.opsForValue().get(token);
        if (null != redisObj) {
            // 用户操作,给redis加时间
            redisTemplate.expire(token, 30, TimeUnit.MINUTES);
            return true;
        }

//         token错误
        printJson(response);
        return false;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {

    }

    /**
     * 功能描述: token校验失败
     *
     * @param response
     * @author Carver
     */
    private static void printJson(HttpServletResponse response) {
        // token验证失败
        logger.warning("token校验失败!");
        ReturnResult rt = new ReturnResult();
        rt.setErrorCode(ErrorCode.TOKEN_VERIFICATION_FAILED);
        String content = JSON.toJSONString(rt);
        printContent(response, content);
    }

    /**
     * 功能描述: token错误状态下向前端响应状态
     *
     * @param response 响应
     * @param content  响应内容
     * @author Carver
     */
    private static void printContent(HttpServletResponse response, String content) {
        try {
            response.reset();
            response.setContentType("application/json");
            response.setHeader("Cache-Control", "no-store");
            response.setCharacterEncoding("UTF-8");
            PrintWriter writer = response.getWriter();
            writer.write(content);
            writer.flush();
        } catch (IOException e) {
            logger.warning("响应json数据异常!" + e.getMessage());
        }
    }
}

校验token文章来源地址https://www.toymoban.com/news/detail-518621.html

package com.skiff.manufacture.controller;

import com.skiff.manufacture.config.ErrorCode;

import com.skiff.manufacture.dto.UserLoginCode;
import com.skiff.manufacture.dto.WeAppParamsDto;
import com.skiff.manufacture.util.FastJsonUtil;
import com.skiff.manufacture.util.OkHttpUtils;
import com.skiff.manufacture.util.ReturnResult;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.logging.Logger;

/**
 * 
 * 获取微信open_id
 * @author kylin
 * @since 2022/11/16
 */
@RestController
@RequestMapping("/******")
public class AuthorizationController {
    static Logger logger = Logger.getLogger(AuthorizationController.class.getName());

    @Value("${weapp.app-id}")
    private String appId;

    @Value("${weapp.app-url}")
    private String appUrl;

    @Value("${weapp.app-secret}")
    private String appSecret;

    @Value("${weapp.grant_type}")
    private String grantType;

    /**
     * 
     * 功能描述: 通过小程序code获取openId和sessionKey传到前端
     * 1.获取小程序code 2.从yml文件读取参数 3.发送请求,获取数据 4.将数据返回到前端
     * @author kylin
     * @since 2022/11/16
     * @param userLoginCode
     * @return com.skiff.manufacture.util.ReturnResult
     */
    @RequestMapping("/******")
    public ReturnResult getAuthorizationInfo(@RequestBody UserLoginCode userLoginCode) {
        String code = userLoginCode.getCode();
        System.out.println(code+"校验");
        logger.info("进入小程序校验Controller,code:" + code);
        ReturnResult rt = new ReturnResult();

        // 登录凭证不能为空
        if (StringUtils.isBlank(code)) {
            logger.warning("参数[code]不存在!");
            rt.setErrorCode(ErrorCode.INCOMPLETE_INFORMATION);
            return rt;
        }
        //1、向微信服务器 使用登录凭证 code 获取 session_key 和 openid
        // 请求参数
        String params = "appid=" + appId + "&secret=" + appSecret + "&js_code=" + code + "&grant_type="
                + grantType;
        // 发送请求
        String sr = OkHttpUtils.sendGet(appUrl, params);
        //将sessionkey和openid的json字符串转成bean
        WeAppParamsDto weAppParams = FastJsonUtil.strToBean(sr, WeAppParamsDto.class);
        rt.setData(weAppParams);
        return rt;
    }
}

到了这里,关于uniApp微信小程序前后端交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 怎么将微信小程序项目转为uniapp项目

    将微信小程序项目转换为uni-app项目需要以下几个步骤: 安装uni-app开发工具:HBuilderX 在HBuilderX中创建一个新的uni-app项目 将微信小程序的代码复制到uni-app项目的相应文件夹中 在uni-app中修改相关代码以适配uni-app平台 运行并测试uni-app项目 请注意,由于微信小程序和uni-app的开发

    2024年02月11日
    浏览(33)
  • 前端uniapp+后端springboot 详细教程《实现微信小程序授权登录》(附完整前后端项目demo)

    微信小程序官方登录流程图: 参考微信小程序登录官网文档 1、前端技术栈 1.1、uniapp 使用uniapp构建一套代码多端使用的前端框架项目 1.2、前端封装工具 dateUtil.js: 功能: 1. 时间日期格式化 2. 传入日期是否和当前日期的比较 完整代码: requestUtil.js: 功能: 1. 定义公共的

    2024年02月14日
    浏览(37)
  • 微信小程序uniapp出现白屏怎么解决(总集)

    我本人遇到这种问题一般都很快解决了,所以没有怎么留意,没有凡尔赛自夸,不是自己厉害,只是比较细心。最近有小伙伴反馈白屏,突然想到这种情况有很多种,想做个集合,有朋友遇到解决不了的,请留言,我尽可能解决并留在此处。 最重要的!!! 如果你的电脑配

    2024年01月19日
    浏览(38)
  • uniapp - 微信小程序新版本发布之后用户端怎么更新?updateManager ?

    微信小程序在版本更新后,从上面标题栏进去,发现还是没有更新,存在缓存问题 这就要说到微信小程序更新机制 解决办法--微信提供的wx.getUpdateManager()(我的uniapp)uni.getUpdateManager(),链接:uni.getUpdateManager() | uni-app官网 1)定期检查发现版本更新 微信运行时,会定期检查最近使

    2024年02月06日
    浏览(49)
  • 如何快速搭建springboot+前后端分离(vue),多商户客户端实现微信小程序+ios+app使用uniapp(一处编写,处处编译)

    kxmalls外卖生鲜多商户,针对中小商户、企业和个人学习者开发。使用Java编码,采用SpringBoot、Mybatis-Plus等易用框架,适合个人学习研究。同时支持单机部署、集群部署,用户与店铺范围动态定位,中小商户企业可根据业务动态扩容。kxmalls使用uniapp前端框架,可同时编译到 微

    2024年01月25日
    浏览(48)
  • 微信小程序前后端数据交互

         目录 一 微信小程序发送请求 二 后端接口接受小程序请求并返回数据  三 最后的效果图     先简单说一下我写的这个微信小程序前后端交互的业务,主要是两个数据:supplyCount和wantBuyCount,分别代表我的车源和我的求购。目前的需求就是小程序向后端发送请求,然后

    2024年02月09日
    浏览(28)
  • 微信小程序前后端交互与WXS的应用

    目录 前言 一、后台数据交互 1.数据表 2.后端代码的实现 3.前后端交互 3.1.后端接口URL管理 3.2.发送后端请求 3.3.请求方式的封装 4.前端代码的编写 二、WXS的使用 1、.wxs 文件 2.综合运用 当今社交媒体的普及使得微信小程序成为了一种流行的应用开发形式。微信小程序不仅可以

    2024年02月08日
    浏览(43)
  • UNIAPP---实现微信小程序登录授权和手机号授权(uniapp做微信小程序)

    描述:uniapp开发小程序,先授权用户信息后再出现手机号授权的页面进行手机号授权。完成后返回上一页面并把信息存入后台以及前台缓存中,方便使用。 1.在uniapp的manifest.json进行微信小程序配置 2.封装request请求api.js(如果已封装可跳过) 3.封装微信授权登录以及获取手机

    2024年02月11日
    浏览(32)
  • uniApp配置微信分享 uniApp跳转微信小程序

    最近在做uniApp时需要跳转微信小程序进行支付,以为和跳转支付宝小程序支付一样简单结果让我发狂,跳转微信代码其实很简单就是下面这一段,但是要配置一大推东西 提示:plus为App端默认的系统参数,不用引入或者其他操作            ios跳转跳转微信小程序还需要配置

    2024年02月09日
    浏览(37)
  • uniapp 微信小程序分包

    uniapp项目编译到微信小程序上传代码时提示体积过大,这个时候就要做优化了,大致就以下几个方面 1.减少或压缩本地图片 2.删减重复代码,删减无用CSS样式 3.减少无用组件引用 这个时候做完发现也优化不了多少体积,代码包还是过大,所以就要用到分包了 分包步骤 1.在p

    2024年02月14日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包