河南专业网站建设哪家好,分销商城开发公司,wordpress建手机站,匠人精神网站建设首页
3.0 创建 home 分支
#x1f355;#x1f355;#x1f355;运行如下的命令#xff0c;基于 master 分支在本地创建 home 子分支#xff0c;用来开发和 home 首页相关的功能git branch(查看分支)git checkout -b home(创建home分支)
3.1 配置网络请求
#x1f32…首页
3.0 创建 home 分支
运行如下的命令基于 master 分支在本地创建 home 子分支用来开发和 home 首页相关的功能git branch(查看分支)git checkout -b home(创建home分支)
3.1 配置网络请求
由于平台的限制小程序项目中不支持 axios而且原生的 wx.request() API 功能较为简单不支持拦截器等全局定制的功能。因此建议在 uni-app 项目中使用 escook/request-miniprogram 第三方包发起网络数据请求。在项目根路径打开命令窗口 执行命令 npm init -y 初始化package.json配置文件安装 npm i escook/request-miniprogram在项目的 main.js 入口文件中通过如下的方式进行配置也提供了请求拦截器方法beforeRequest 也提供了 请求完成的方法afterRequest
//导入网络请求第三方包
import {$http} from escook/request-miniprogram
uni.$http $http;
// 配置请求根路径
$http.baseUrl https://
// 请求开始之前做一些事情
$http.beforeRequest function (options) {uni.showLoading({title: 数据加载中...,})
}
// 请求完成之后隐藏loading
$http.afterRequest function () {uni.hideLoading()
}首页轮播图区域
3.2.1 请求轮播图的数据
实现步骤在 data 中定义轮播图的数组在 onLoad 生命周期函数中调用获取轮播图数据的方法在 methods 中定义获取轮播图数据的方法
export default{data(){return {//1.轮播图数据swiperList:[],};},onLoad(){this.getSwiperList();},methods:{async getSwiperList(){const { data:res } await uni.$http.get(/api/public/v1/home/swiperdata)console.log(res);if(res.meta.status ! 200){return uni.showToast({title:数据请求失败,duration:1500,icon:none})}this.getSwiperList res.message}}
}3.2.2 渲染轮播图的 UI 结构
swiper :indicator-dotstrue :autoplaytrue :interval3000 :duration1000swiper-item v-for(item,i) in swiperList :keyiview classswiper-item!-- 动态绑定属性src --image :srcitem.image_src mode/image/view/swiper-item/swiper3.2.3配置小程序分包
分包可以减少小程序首次启动时的加载时间
把 tabBar 相关的 4 个页面放到主包中其它页面例如商品详情页、商品列表页放到分包中。在 uni-app 项目中配置分包的步骤如下在项目根目录中创建分包的根目录命名为 subpkg在 pages.json 中和 pages 节点平级的位置声明 subPackages 节点用来定义分包相关的结构
subPackages: [{root: subpkg,pages: [{path: goods_detail/goods_detail,style: {}} ]}]3.2.4 点击轮播图跳转到商品详情页面
将 节点内的 view 组件改造为 navigator 导航组件并动态绑定 url 属性 的值动态拼接商品的goods_id改造之前的 UI 结构
//改造前
swiper-item v-for(item, i) in swiperList :keyiview classswiper-item!-- 动态绑定图片的 src 属性 --image :srcitem.image_src/image/view
/swiper-item
//改造后
swiper-item v-for(item, i) in swiperList :keyinavigator classswiper-item :url/subpkg/goods_detail/goods_detail?goods_id item.goods_id!-- 动态绑定图片的 src 属性 --image :srcitem.image_src/image/navigator
/swiper-item封装 uni.$showMsg() 方法
当数据请求失败之后经常需要调用 uni.showToast({ /* 配置对象 */ }) 方法来提示用户。此时可以在全局封装一个 uni.$showMsg() 方法来简化 uni.showToast() 方法的调用。具体的改造步骤如下在 main.js 中为 uni 对象挂载自定义的 $showMsg() 方法,别的页面按需调用即可。
uni.$showMsg function(title数据加载失败!,duration1500){uni.showToast({title,duration,icon:none })
}3.3 分类导航区域
3.3.1 获取分类导航的数据
思路:定义 data 数据在 onLoad 中调用获取数据的方法在 methods 中定义获取数据的方法home.vue中
//分类导航的数据列表
data(){return{//分类导航的数据列表navList:[],}
},
onLoad(){this.getNavList()
},
methods:{//获取分类数据getNavList(){const {data} await uni.$http.get(/api/public/v1/home/catitems);if(data.meta.status !200){return uni.$showMsg(); }this.navList data.message;}
}
3.3.2 点击第一项切换到分类页面
为 nav-item 绑定点击事件处理函数
view classnav-list
view classnav-item v-for(item,i) in navList :keyi clicknavClickHandler(item)
image :srcitem.image_src classnav-img/image
/view
/viewmethods:{navClickHandler(item){if(item.name 分类){uni.switchTab({url:/pages/cate/cate }) }}
}3.4 楼层区域
3.4.1 获取楼层数据思路定义数据在 onLoad 中调用获取数据的方法在 methods 中定义获取数据的方法
data(){return{floorList() }
},
onLoad(){this.getFloorList()
},
methods:{async getFloorList(){const {data} await uni.$http.get(/api/public/v1/home/floordata);if(data.meta.status ! 200){return uni.$showMsg()}this.floorList data.message;}
}3.4.2 渲染楼层的标题
UI 结构
view classfloor-list!-- item项 --view classfloor-item v-for(item,i) in floorList :keyi!-- 标题 --image :srcitem.floor_title.image_src classfloor-title /image/view/view美化楼层标题的样式
.floor-title{height: 60rpx;width: 100%;display: flex;
}3.4.3 渲染楼层里的图片
!-- 标题 --image :srcitem.floor_title.image_src classfloor-title /image
!-- 楼层图片区域 --view classfloor-img-box!-- 左侧大图片的盒子 --view classleft-img-boximage :srcitem.product_list[0].image_src:style{width:item.product_list[0].image_width rpx} modewidthFix/image/view!-- 右侧图片的盒子 --view classright-img-boxview classright-img-item v-for(item2,i2) in item.product_list :keyi2 v-ifi2 ! 0image :srcitem2.image_src modewidthFix :style{width:item2.image_width rpx}/image/view/view/view楼层图片区域的样式
.floor-img-box{display: flex;padding-left: 10rpx;
}
.right-img-box{display: flex;flex-wrap: wrap;justify-content: space-around;
}3.4.4 点击楼层图片跳转到商品列表页
在 subpkg 分包中新建 goods_list 页面为跳转页面做准备楼层数据请求成功之后通过双层 forEach 循环处理 URL 地址
async getFloorList(){const {data:res} await uni.$http.get(/api/public/v1/home/floordata)console.log(res);if(res.meta.status !200){return uni.$showMsg()}// 通过双层forEach循环处理URL地址res.message.forEach(floor{floor.product_list.forEach(prod{//添加一个自定义url属性把路径和?分割后的参数拼接在一起prod.url /subpkg/goods_list/goods_list? prod.navigator_url.split(?)[1]})})this.floorList res.message},总结
特殊的标签、和网络请求配置
