uni-app与java的交互且使用小米球Ngrok连接到手机微信小程序

上一篇已经将uni-app的单机登陆完成了:https://blog.csdn.net/qq_43222167/article/details/106562615

java交互后台响应

将login.vue修改(这里注意的是用户名和密码的值与后台的对应)

<template><view class="content"><view class="input-group"><view class="input-row border"><text class="title">账号：</text><m-input class="m-input" type="text" clearable focus v-model="userName" placeholder="请输入账号"></m-input></view><view class="input-row"><text class="title">密码：</text><m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input></view></view><view class="btn-row"><button type="primary" class="primary" @tap="bindLogin">登录</button></view><view class="action-row"><navigator url="../reg/reg">注册账号</navigator><text>|</text><navigator url="../pwd/pwd">忘记密码</navigator></view><view class="oauth-row" v-if="hasProvider" v-bind:style="{top: positionTop + 'px'}"><view class="oauth-image" v-for="provider in providerList" :key="provider.value"><image :src="provider.image" @tap="oauth(provider.value)"></image><!-- #ifdef MP-WEIXIN --><button v-if="!isDevtools" open-type="getUserInfo" @getuserinfo="getUserInfo"></button><!-- #endif --></view></view></view>
</template><script>import service from '../../service.js';import {mapState,mapMutations} from 'vuex'import mInput from '../../components/m-input.vue'export default {components: {mInput},data() {return {providerList: [],hasProvider: false,userName: '',password: '',positionTop: 0,isDevtools: false,}},computed: mapState(['forcedLogin']),methods: {...mapMutations(['login']),initProvider() {const filters = ['weixin', 'qq', 'sinaweibo'];uni.getProvider({service: 'oauth',success: (res) => {if (res.provider && res.provider.length) {for (let i = 0; i < res.provider.length; i++) {if (~filters.indexOf(res.provider[i])) {this.providerList.push({value: res.provider[i],image: '../../static/img/' + res.provider[i] + '.png'});}}this.hasProvider = true;}},fail: (err) => {console.error('获取服务供应商失败：' + JSON.stringify(err));}});},initPosition() {/*** 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。* 反向使用 top 进行定位，可以避免此问题。*/this.positionTop = uni.getSystemInfoSync().windowHeight - 100;},bindLogin() {/*** 客户端对账号信息进行一些必要的校验。* 实际开发中，根据业务需要进行处理，这里仅做示例。*//* if (this.userName.length < 5) {uni.showToast({icon: 'none',title: '账号最短为 5 个字符'});return;}if (this.password.length < 6) {uni.showToast({icon: 'none',title: '密码最短为 6 个字符'});return;} *//*** 下面简单模拟下服务端的处理* 检测用户账号密码是否在已注册的用户列表中* 实际开发中，使用 uni.request 将账号信息发送至服务端，客户端在回调函数中获取结果信息。*/const data = {userName: this.userName,password: this.password};uni.request({url:"http://localhost:8080/order/userLogin",method:"POST",data:data,success: (res) => {console.log(res);}})/* const validUser = service.getUsers().some(function(user) {return data.userName === user.userName && data.password === user.password;});if (validUser) {this.toMain(this.userName);} else {uni.showToast({icon: 'none',title: '用户账号或密码不正确',});} */},oauth(value) {uni.login({provider: value,success: (res) => {uni.getUserInfo({provider: value,success: (infoRes) => {/*** 实际开发中，获取用户信息后，需要将信息上报至服务端。* 服务端可以用 userInfo.openId 作为用户的唯一标识新增或绑定用户信息。*/this.toMain(infoRes.userInfo.nickName);},fail() {uni.showToast({icon: 'none',title: '登陆失败'});}});},fail: (err) => {console.error('授权登录失败：' + JSON.stringify(err));}});},getUserInfo({detail}) {if (detail.userInfo) {this.toMain(detail.userInfo.nickName);} else {uni.showToast({icon: 'none',title: '登陆失败'});}},toMain(userName) {this.login(userName);/*** 强制登录时使用reLaunch方式跳转过来* 返回首页也使用reLaunch方式*/if (this.forcedLogin) {uni.reLaunch({url: '../main/main',});} else {uni.navigateBack();}}},onReady() {this.initPosition();this.initProvider();// #ifdef MP-WEIXINthis.isDevtools = uni.getSystemInfoSync().platform === 'devtools';// #endif}}
</script><style>.action-row {display: flex;flex-direction: row;justify-content: center;}.action-row navigator {color: #007aff;padding: 0 10px;}.oauth-row {display: flex;flex-direction: row;justify-content: center;position: absolute;top: 0;left: 0;width: 100%;}.oauth-image {position: relative;width: 50px;height: 50px;border: 1px solid #dddddd;border-radius: 50px;margin: 0 20px;background-color: #ffffff;}.oauth-image image {width: 30px;height: 30px;margin: 10px;}.oauth-image button {position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;}
</style>

发送请求到后台…

发生了这么一个错,这个错是跨域问题,我们在后端提供了两种解决办法
1.在你的控制层的类上面加

@CrossOrigin(value = {"*"})

表示可以接收所有的请求

修改后发送请求

2.加入CorsConfig文件到你发送请求的项目中(要被SpringBoot扫描到)

package com.jbit.util;import org.springframework.context.annotation.Configuration;
import org.springframework.format.FormatterRegistry;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.validation.MessageCodesResolver;
import org.springframework.validation.Validator;
import org.springframework.web.method.support.HandlerMethodArgumentResolver;
import org.springframework.web.method.support.HandlerMethodReturnValueHandler;
import org.springframework.web.servlet.HandlerExceptionResolver;
import org.springframework.web.servlet.config.annotation.*;import java.util.List;@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void configurePathMatch(PathMatchConfigurer pathMatchConfigurer) {}@Overridepublic void configureContentNegotiation(ContentNegotiationConfigurer contentNegotiationConfigurer) {}@Overridepublic void configureAsyncSupport(AsyncSupportConfigurer asyncSupportConfigurer) {}@Overridepublic void configureDefaultServletHandling(DefaultServletHandlerConfigurer defaultServletHandlerConfigurer) {}@Overridepublic void addFormatters(FormatterRegistry formatterRegistry) {}@Overridepublic void addInterceptors(InterceptorRegistry interceptorRegistry) {}@Overridepublic void addResourceHandlers(ResourceHandlerRegistry resourceHandlerRegistry) {}@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS").allowCredentials(true).maxAge(3600).allowedHeaders("*");}@Overridepublic void addViewControllers(ViewControllerRegistry viewControllerRegistry) {}@Overridepublic void configureViewResolvers(ViewResolverRegistry viewResolverRegistry) {}@Overridepublic void addArgumentResolvers(List<HandlerMethodArgumentResolver> list) {}@Overridepublic void addReturnValueHandlers(List<HandlerMethodReturnValueHandler> list) {}@Overridepublic void configureMessageConverters(List<HttpMessageConverter<?>> list) {}@Overridepublic void extendMessageConverters(List<HttpMessageConverter<?>> list) {}@Overridepublic void configureHandlerExceptionResolvers(List<HandlerExceptionResolver> list) {}@Overridepublic void extendHandlerExceptionResolvers(List<HandlerExceptionResolver> list) {}@Overridepublic Validator getValidator() {return null;}@Overridepublic MessageCodesResolver getMessageCodesResolver() {return null;}}

加入后发送请求

也已经得到

显示登陆成功的提示

只需要将success修改为

success: (res) => {console.log(res.data);let user=res.data;uni.showToast({icon:"success",title:"登陆成功,欢迎"+user.userName})this.login(user.userName)}

导入到微信小程序中使用

在HBuilder中的工具–>设置配置好微信小程序的路径

微信小程序中将代理打开

运行

等待加载成功

然后就可以在小程序中使用了

连接到手机(在微信小程序的真机调试中使用)

因为地址的原因,我们这里要使用到小米球Ngrok(内网穿透工具)
官网:http://ngrok.ciqiuwl.cn/
也可以在我的网盘中提取(我这里是windows64位操作系统的):链接:https://pan.baidu.com/s/1JbOVnnh8HLcBHxVCdsJNHw
提取码:p7sp
下载好之后对这个文件进行编辑

我们在这里只需要修改

这两个随意修改,只需要相同就好。还有一个

//对应的是你请求的端口号
proto:http: localhost:8080

修改好之后启动

输入第一步改的值

启动成功后复制值,这个代表的值为localhost:8080

放到HBuilder中(拼接出相应的请求路径)

一定要注意好url的地址正确,本人开始一直有个空格,导致一直发不出请求
微信小程序中点击

二维码出来后手机微信扫描后进入小程序登陆测试

在电脑的微信小程序启动的真机调试中也可以看到相应的值