>[success] # 网路请求 1. 微信提供了专属的API接口,用于网络请求: `wx.request` 2. 常用的属性 `success`成功时的回调 / `fail` 失败时的回调  3. 每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信，配置位置**小程序登录后台 – 开发管理 – 开发设置 – 服务器域名** 4. 服务器域名请在 「小程序后台 - 开发 - 开发设置 - 服务器域名」 中进行配置，配置时需要注意 * 域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议 * 域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost * 可以配置端口，如` https://myserver.com:8080`，但是配置后只能向`https://myserver.com:8080` 发起请求。如果向`https://myserver.com、https://myserver.com:9091` 等 URL 请求则会失败。 * 如果不配置端口。如` https://myserver.com`，那么请求的 `URL` 中也不能包含端口，甚至是默认的 `443 `端口也不可以。如果向` https://myserver.com:443` 请求则会失败 * 域名必须经过 ICP 备案 * 出于安全考虑，`api.weixin.qq.com `不能被配置为服务器域名，相关 API 也不能在小程序内调用。 开发者应将 `AppSecret`保存到后台服务器中，通过服务器使用 `getAccessToken` 接口获取 access\_token，并调用相关 `API` * 不支持配置父域名，使用子域名 5. 在开发环境想跳过上述的要求可以在，图中位置勾选  >[danger] ##### 测试json ~~~ json {"errcode":0,"errmsg":null,"data":[{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":290,"priceTipBadge":{"type":0,"text":"已减¥65","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":44173741,"houseName":"【踏春出游季•绿野仙踪】情侣静谧情调小窝•智能大屏投影•沙面公园•夜游珠江•朝拜圣心大教堂","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_200728/thumb/202007281552537926_360_480.jpg","width":360,"height":480},"commentScore":"4.8","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.8分","showHouseVideo":false,"cityId":45,"finalPrice":225,"location":"广州·荔湾区"}},{"discoveryContentType":3,"data":{"iconTag":null,"productPrice":218,"priceTipBadge":{"type":0,"text":"已减¥63","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":51953704,"houseName":"米朵国际公寓(广州沙涌地铁站店)雅致大床房","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/cunit/day_210909/thumb/202109091308301691_700_467.jpg","width":700,"height":467},"commentScore":"4.7","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.7分","showHouseVideo":false,"cityId":45,"finalPrice":155,"location":"广州·荔湾区"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":1403,"priceTipBadge":{"type":0,"text":"已减¥219","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":18298295,"houseName":"进出方便【日式风雅颂】琶洲派对复式6床|广交会国际展馆2km|求婚生日会商务|麻将火锅投影足球机","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_191218/thumb/201912181440563294_360_480.jpg","width":360,"height":480},"commentScore":"4.8","extendMap":{"logicBit":"2048"},"summaryText":"整套·5居6床 12人 4.8分","showHouseVideo":false,"cityId":45,"finalPrice":1184,"location":"广州·海珠区"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":273,"priceTipBadge":{"type":0,"text":"已减¥48","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":20061007,"houseName":"雅致中国风大床房/南站免费接送/近长隆/可开票","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_200105/thumb/202001051429207308_360_480.jpg","width":360,"height":480},"commentScore":"4.9","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.9分","showHouseVideo":false,"cityId":45,"finalPrice":225,"location":"广州·番禺区"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":196,"priceTipBadge":{"type":0,"text":"已减¥37","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":12731258,"houseName":"{徒者-短租便宜} 上下九步行街 | 北京路商圈 | 珠江夜游永庆坊 | 地铁口清新投影会员房","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_190612/thumb/201906121047444344_360_480.jpg","width":360,"height":480},"commentScore":"4.7","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.7分","showHouseVideo":true,"cityId":45,"finalPrice":159,"location":"广州·荔湾区"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":1005,"priceTipBadge":{"type":0,"text":"已减¥317","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":13196128,"houseName":"【贰号公馆】独栋三层5房/自动麻将投影桌游/上下九荔湾广场旁/永庆坊沙面十三行/西关地道美食","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_190615/thumb/201906151731475951_360_480.jpg","width":360,"height":480},"commentScore":"5.0","extendMap":{"logicBit":"2048"},"summaryText":"整套·5居5床 10人 5.0分","showHouseVideo":false,"cityId":45,"finalPrice":688,"location":"广州·荔湾区"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":415,"priceTipBadge":{"type":0,"text":"已减¥97","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":8465745,"houseName":"西关里珠玑—具有西关原汁原味特色民宿","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_190723/thumb/201907230818439048_360_480.jpg","width":360,"height":480},"commentScore":"5.0","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 5.0分","showHouseVideo":true,"cityId":45,"finalPrice":318,"location":"广州·荔湾区"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":207,"priceTipBadge":{"type":0,"text":"已减¥38","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":49139347,"houseName":"近商圈近医院温馨私享Loft复式大窗房","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/qualifiedpics/day_210822/thumb/202108222250217737_360_480.jpg","width":360,"height":480},"commentScore":"4.0","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.0分","showHouseVideo":true,"cityId":45,"finalPrice":169,"location":"广州·天河区"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":143,"priceTipBadge":{"type":0,"text":"已减¥26","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":51830434,"houseName":"豪华落地Loft复式大床房（近地铁，近白云汇广场，国际会议中心)","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_210901/thumb/202109011942432508_360_480.jpg","width":360,"height":480},"commentScore":"4.6","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.6分","showHouseVideo":false,"cityId":45,"finalPrice":117,"location":"广州·白云区"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":598,"priceTipBadge":{"type":0,"text":"已减¥158","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":40157566,"houseName":"Loft复式温馨三房临近沙面上下九永庆坊旅游区&北京路步行街地铁便捷到达","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_210517/thumb/202105171125117829_360_480.jpg","width":360,"height":480},"commentScore":"5.0","extendMap":{"logicBit":"2048"},"summaryText":"整套·3居3床 6人 5.0分","showHouseVideo":false,"cityId":45,"finalPrice":440,"location":"广州·荔湾区"}},{"discoveryContentType":3,"data":{"iconTag":null,"productPrice":273,"priceTipBadge":{"type":0,"text":"已减¥65","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":5772636,"houseName":"LOFT双床房55寸大电视适合十三行进货北京路上下九游玩近孙逸仙纪念医院广州医科大附属一院（非江景）","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_180902/thumb/201809021105384480_700_467.jpg","width":700,"height":467},"commentScore":"4.4","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居2床 4人 4.4分","showHouseVideo":true,"cityId":45,"finalPrice":208,"location":"广州·越秀区"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":1352,"priceTipBadge":{"type":0,"text":"已减¥258","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":52040560,"houseName":"进出方便【炫彩乌托邦】琶洲聚会party200平复式|可住12人|麻将游戏机投影|广交会展馆2km|","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_210902/thumb/202109022133235468_360_480.jpg","width":360,"height":480},"commentScore":"5.0","extendMap":{"logicBit":"2048"},"summaryText":"整套·4居6床 12人 5.0分","showHouseVideo":false,"cityId":45,"finalPrice":1094,"location":"广州·海珠区"}},{"discoveryContentType":3,"data":{"iconTag":null,"productPrice":208,"priceTipBadge":{"type":0,"text":"已减¥48","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":47680507,"houseName":"智简民宿A/中大/广外/gogo新天地/AI加持/自助手工咖啡/大屏电视","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_210814/thumb/202108141259229162_700_467.jpg","width":700,"height":467},"commentScore":"4.5","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.5分","showHouseVideo":true,"cityId":45,"finalPrice":160,"location":"广州·番禺区"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":407,"priceTipBadge":{"type":0,"text":"已减¥78","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":45332023,"houseName":"【唯梵•风之谷】沙面|上下九|西关复式两居","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_201001/thumb/202010011530588874_360_480.jpg","width":360,"height":480},"commentScore":"4.9","extendMap":{"logicBit":"2048"},"summaryText":"整套·2居2床 4人 4.9分","showHouseVideo":false,"cityId":45,"finalPrice":329,"location":"广州·荔湾区"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":364,"priceTipBadge":{"type":0,"text":"已减¥64","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":13283950,"houseName":"广州塔/近地铁/广交会/珠江夜游/浴缸","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_190626/thumb/201906261634059454_360_480.jpg","width":360,"height":480},"commentScore":"4.9","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.9分","showHouseVideo":false,"cityId":45,"finalPrice":300,"location":"广州·海珠区"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":324,"priceTipBadge":{"type":0,"text":"已减¥105","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":40404708,"houseName":"地铁6号沙贝站/近北京路万达/江景公寓","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_200620/thumb/202006201637368526_360_480.jpg","width":360,"height":480},"commentScore":"4.5","extendMap":{"logicBit":"2048"},"summaryText":"整套·2居2床 3人 4.5分","showHouseVideo":true,"cityId":45,"finalPrice":219,"location":"广州·白云区"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":474,"priceTipBadge":{"type":0,"text":"已减¥87","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":15653268,"houseName":"〖翡冷翠〗加勒比庄园LOFT/行李寄存/全身镜/宽屏投影/5分钟到珠江新城地铁站/步行K11、花城汇","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_191128/thumb/201911281857137020_360_480.jpg","width":360,"height":480},"commentScore":"4.9","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.9分","showHouseVideo":false,"cityId":45,"finalPrice":387,"location":"广州·天河区"}},{"discoveryContentType":3,"data":{"iconTag":null,"productPrice":490,"priceTipBadge":{"type":0,"text":"已减¥46","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":49870042,"houseName":"〖意途·陆〗带厨房可做饭 简约现代风 两居室 大床房 珠江新城 直达长隆可寄存行李","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_210508/thumb/202105081855312851_700_467.jpg","width":700,"height":467},"commentScore":"4.7","extendMap":{"logicBit":"2048"},"summaryText":"整套·2居2床 4人 4.7分","showHouseVideo":true,"cityId":45,"finalPrice":444,"location":"广州·天河区"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":355,"priceTipBadge":{"type":0,"text":"已减¥64","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":51858142,"houseName":"广州塔江景房 ｜巨幕投影| 夕阳灯｜海心沙｜海心桥｜琶洲广交会、珠江新城。","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_210819/thumb/202108192131269043_360_480.jpg","width":360,"height":480},"commentScore":"4.8","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.8分","showHouseVideo":false,"cityId":45,"finalPrice":291,"location":"广州·海珠区"}},{"discoveryContentType":3,"data":{"iconTag":null,"productPrice":227,"priceTipBadge":{"type":0,"text":"已减¥40","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":52096417,"houseName":"悦趣服务式公寓轻奢大床房","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/cunit/day_210907/thumb/202109071455223002_700_467.jpg","width":700,"height":467},"commentScore":"4.8","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.8分","showHouseVideo":false,"cityId":45,"finalPrice":187,"location":"广州·黄埔区"}}]} ~~~ >[info] ## 使用案例  1. 案例使用的是codewhy 老师的数据接口，如果后续不可用，可以使用上面json 结构 * wxml ~~~html <view>{{page}}</view> <view class="house-list"> <block wx:for="{{houselist}}" wx:key="index"> <view class="item"> <image src="{{ item.data.image.url}}"></image> <text>{{item.data.houseName}}</text> </view> </block> </view> ~~~ * js ~~~ // pages/network/index.js Page({ /** * 页面的初始数据 */ data: { houselist: [], page:1, }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { const data = {page:this.data.page} this.setHouselist(data) }, // 滚动触底请求数据 onReachBottom(){ console.log('触底') const page = this.data.page + 1 this.setData({page}) this.setHouselist({page}) }, // 请求接口 setHouselist(data) { wx.request({ url: 'http://codercba.com:1888/api/home/houselist', data, success: (res) => { const data = res.data.data // 数据拼接会原来数组 const houselist = [...this.data.houselist,...data] this.setData({ houselist }) } }) }, }) ~~~ * wxss ~~~ .house-list{ display: flex; flex-flow:row wrap } .item{ width: 50%; } ~~~ >[info] ## 将wx.request 进行封装 1. 为了全局方便管理 wx.request 可以对其进行一次二次封装 2. 下面案例是创建一个 serves 文件进行声明封装函数  >[danger] ##### 函数形式封装 ~~~ // 封装成函数 export function request(options) { return new Promise((resolve, reject) => { wx.request({ ...options, success: (res) => { resolve(res.data) }, fail: reject }) }) } ~~~ * 使用 ~~~ import {request} from '../../serves/index' // pages/network/index.js Page({ /** * 页面的初始数据 */ data: { houselist: [], page:1, }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { const data = {page:this.data.page} this.setHouselist(data) }, // 滚动触底请求数据 onReachBottom(){ console.log('触底') const page = this.data.page + 1 this.setData({page}) this.setHouselist({page}) }, // 请求接口 async setHouselist(data) { const res = await request({ url: 'http://codercba.com:1888/api/home/houselist', data }) const d = res.data // 数据拼接会原来数组 const houselist = [...this.data.houselist,...d] this.setData({ houselist }) }, }) ~~~ >[danger] ##### 封装class 形式 ~~~ // 封装成类 -> 实例 class Request { constructor(baseURL) { this.baseURL = baseURL } request(options) { const { url } = options return new Promise((resolve, reject) => { wx.request({ ...options, url: this.baseURL + url, success: (res) => { resolve(res.data) }, fail: (err) => { console.log("err:", err); } }) }) } get(options) { return this.request({ ...options, method: "get" }) } post(options) { return this.request({ ...options, method: "post" }) } } export const hyReqInstance = new Request("http://codercba.com:1888/api") export const hyLoginReqInstance = new Request("http://123.207.32.32:3000") ~~~