赞
踩
微信小程序发请求不是前后端ajax以及axios请求那样会存在跨域问题,微信使用的是网络请求,微信小程序支持发送https以及合法域名的请求,所以,本文章将使用微信不校验合法域名发送请求(仅限在开发以及生成环境下发起请求)。
首先开启不校验合法域名
基本语法很简单,都是模板,知道会怎么用,基本都是一套,看以下示例代码
- // index.js
- Page({
-
- data: {
-
- // 初始化当前页面所需的数据
- Emp: []
- },
-
- requestServe() {
- wx.request({
- url: 'http://localhost:8080/list',
- // data是发送到服务端的参数
- data:{
- },
- method: 'GET',
-
- // success请求成功后的回调函数
- success: res => {
- console.log(res.data.data)
- this.setData({
- Emp: res.data.data
- }
-
- )
- }
- })
-
- }
-
- })
上面是在微信小程序所对应一个界面的js文件写的一个请求示例,简单说明一下,我们在data属性中先初始化我们从后端拿到数据要存放的一个数组,在requestServe方法中用wx对象调用request方法,方法中我们所写的配置项,url:你所要请求的路径,data:向服务端所传递的参数数据,method:请求方式(GET,POST等等),success:请求成功的回调函数。
我这里之所以调了俩次data是因为,第一次的data返回的是一个对象,具体响应看下图
res.data
res.data.data
那么这样赋值给我们的Emp数组就是以对象为元素存放在数组中了
这里我们以查询员工信息为例,看以下三层架构的代码
controller层
service层
mapper层
wxml
- <view wx:for="{{Emp}}" wx:key="id">
- <view class="v1">
- <view>
- 用户名:<text>{{item.username}}</text>
- </view>
- <view>
- 姓名:<text>{{item.name}}</text>
- </view>
- <view>
- 入职时间:<text>{{item.entrydate}}</text>
- </view>
- </view>
- </view>
- <van-button type="primary" class="but1" bind:tap="requestServe">测试发送请求</van-button>
-
-
wxss
- /**index.wxss**/
- .but1{
- margin-left: 150px;
- }
- .v1{
- margin-bottom: 10px;
- }
启动后端的启动类确保服务运行
点击按钮发起请求,回显数据如下
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。