第八阶段:uni-app小程序 --首页开发(2)

一:分析页面布局

1.1: 功能

搜索框:

轮播图:

分类的导航区:

楼层区:

二: 利用命令创建home分支

git branch

git checkout -b home

git branch

三: 配置网络请求(main.js 入口函数)

由于平台的限制,小程序项目中不支持 axios ,而且原生的 wx.request() API 功能较为简单,不支持拦截器 等全局定制的功能。因此,建议在 uni-app 项目中使用@escook/request-miniprogram 第三方包发起网络数据请求。

1:在每次请求之前展示loading效果(请求拦截器),每次请求完成之后隐藏loading(响应拦截器),就要使用拦截器了

2: option参数是请求时候的相关配置,如果暂时用不到,还是可以声明一下的

3: 原生小程序就用wx. xxx.

uni-app小程序就用 uni. xxx

4: 展示loading的时候提供属性 :标题title

5:请求完毕后还要手动关闭loading的效果,在响应拦截器

css 复制代码
//main.js. 入口函数



import Vue from 'vue'
import App from './App'

// 导入网络请求的包
import { $http } from '@escook/request-miniprogram'

uni.$http = $http

// 请求的根路径
$http.baseUrl = 'https://www.uinav.com'

// // 请求拦截器
// $http.beforeRequest = function(options) {
//   uni.showLoading({
//     title: '数据加载中...'
//   })
// }

// // 响应拦截器
// $http.afterRequest = function() {
//   uni.hideLoading()
// }
// 请求拦截器
$http.beforeRequest = function(option){
	// 每次请求之前展示loading效果(请求拦截器)
	uni.showLoading({
		title:'数据加载中...'
	})
}

// 响应拦截器

// 请求完毕后还要手动关闭loading的效果,在响应拦截器
$http.afterRequest = function(){
	uni.hideLoading()
}

四:实现轮播图功能

4.1 请求轮播图的数据

实现步骤:

  1. 在 data 中定义轮播图的数组

  2. 在 onLoad 生命周期函数中调用获取轮播图数据的方法

  3. 在 methods 中定义获取轮播图数据的方法

1: 请求获取数据,请求失败就调用uni.showToast ( { title:,duration: 弹框时间 , icon: 图标} ); 请求成功就把数据复制给data中的swpierList

2: data() { } 存储数据。 onload(){ } 调用方法,获取数据

vue中所有的方法都放在methods中,method{} 获取轮播图数据的方法

3: 发送请求前要+根路径,所以在main.js中配置根路径

css 复制代码
// 请求的根路径
$http.baseUrl = 'https://www.uinav.com'

4: 请求服务器获取的数据是一个大对象(下图),在对象的data{ } 中 ;{ data : res } 意思是结构出data属性,并重命名为res属性


总结:

1: 在main.js中挂载了请求的根路径

2: 在home.vue中定义一个swiperList[ ] 节点

onload(){ } 调用方法,获取轮播图的数据

methods:{} 进行发起请求获取数据。利用uni.$http.get(url) 发起网络请求,返回值是promise,并且用async 和 await 进行网络优化;在判断是否成功,失败就返回提示,成功就复制给swiperList进行存储;

十: 解决问题

1: 在开发某个项目的时候,请求接口时,要在小程序里面配置域名 ,并在微信开发者工具里面配置相关请求的域名

相关推荐
曲江涛2 小时前
微信小程序 webview 定位 并返回
微信小程序·小程序
27669582924 小时前
美团民宿 mtgsig 小程序 mtgsig1.2 分析
java·python·小程序·美团·mtgsig·mtgsig1.2·美团民宿
web_Hsir4 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
fakaifa6 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
Angus-zoe6 小时前
微信小程序唤起app
微信小程序·小程序
不老刘7 小时前
微信小程序使用 Vant Weapp 组件库教程
微信小程序·小程序·vant
Mr.Liu68 小时前
小程序30-wxml语法-声明和绑定数据
前端·微信小程序·小程序
清风絮柳18 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
说私域19 小时前
基于开源AI大模型与S2B2C模式的线下服务型门店增长策略研究——以AI智能名片与小程序源码技术为核心
大数据·人工智能·小程序·开源
小程序照片合成20 小时前
uniapp微信小程序开发工具本地获取指定页面二维码
微信小程序·小程序·uniapp·二维码