创建电子商务网站的7个步骤,网站平台怎么做的好处,做一个微信小程序难吗,网站备案怎么转入为了获取到后台服务器发来的数据#xff0c;需要配置相应的网络地址。位置在main.js入口文件中。
import { $http } from escook/request-miniprogramuni.$http $http
// 配置请求根路径
$http.baseUrl https://api-hmugo-web.itheima.net// 请求开始之前做一些事情
$http.…为了获取到后台服务器发来的数据需要配置相应的网络地址。位置在main.js入口文件中。
import { $http } from escook/request-miniprogramuni.$http $http
// 配置请求根路径
$http.baseUrl https://api-hmugo-web.itheima.net// 请求开始之前做一些事情
$http.beforeRequest function (options) {uni.showLoading({title: 数据加载中...,})
}// 请求完成之后做一些事情
$http.afterRequest function () {uni.hideLoading()
}轮播图的实现
获取轮播图数据
1.首先需要在data中定义轮播图数组以便将轮播图数据存在数组中。 2.在 onLoad 生命周期函数中调用获取轮播图数据的方法。 3.在 methods 中定义获取轮播图数据的方法从后台获取轮播图。
export default {data() {return {// 1. 轮播图的数据列表默认为空数组swiperList: [],}},onLoad() {// 2. 在小程序页面刚加载的时候调用获取轮播图数据的方法this.getSwiperList()},methods: {// 3. 获取轮播图数据的方法async getSwiperList() {// 3.1 发起请求将返回数据data赋值给为resconst { data: res } await uni.$http.get(/api/public/v1/home/swiperdata)// 3.2 请求失败if (res.meta.status ! 200) {return uni.showToast({title: 数据请求失败,duration: 1500,icon: none,})}// 3.3 请求成功用res数据中的 message 为 data 中的数据赋值this.swiperList res.message},},
}res的内容如图所示
渲染轮播图的 UI 结构
templateview!-- 轮播图区域 --swiper :indicator-dotstrue :autoplaytrue :interval3000 :duration1000 :circulartrue!-- 循环渲染轮播图数组的 item 项 --swiper-item v-for(item, i) in swiperList :keyiview classswiper-item!-- 动态绑定图片的 src 属性 --image :srcitem.image_src/image/view/swiper-item/swiper/view
/template模拟器模拟效果
点击轮播图跳转到商品详情页面
swiper-item v-for(item, i) in swiperList :keyi!-- 增加一个动态生成对应的商品详情跳转链接当检测到轮播图被点击时进行跳转 --navigator 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({ /* 配置对象 */ }) 方法来提示用户。此时可以在main.js全局封装一个 uni.$showMsg() 方法来简化 uni.showToast() 方法的调用。
// 封装的展示消息提示的方法
uni.$showMsg function (title 数据加载失败, duration 1500) {uni.showToast({title,duration,icon: none,})
}分类导航区域的实现
获取分类导航的数据
1.首先需要在data中定义分类导航数组以便将分类导航数据存在数组中。 2.在 onLoad 生命周期函数中调用获取数据的方法。 3.在 methods 中定义获取数据的方法从后台获取数据。
export default {data() {return {// 1. 分类导航的数据列表navList: [],}},onLoad() {// 2. 在 onLoad 中调用获取数据的方法this.getNavList()},methods: {// 3. 在 methods 中定义获取数据的方法async getNavList() {const { data: res } await uni.$http.get(/api/public/v1/home/catitems)if (res.meta.status ! 200) return uni.$showMsg()this.navList res.message},},
}res内容如图所示
渲染 UI 结构
!-- 分类导航区域 --
view classnav-listview classnav-item v-for(item, i) in navList :keyiimage :srcitem.image_src classnav-img/image/view
/view模拟器效果
点击分类切换到分类页面
!-- 分类导航区域 --
view classnav-list!-- 为 nav-item 类绑定点击事件处理函数监听到点击事件时执行 --view classnav-item v-for(item, i) in navList :keyi clicknavClickHandler(item)image :srcitem.image_src classnav-img/image/view
/view// nav-item 项被点击时候的事件处理函数
navClickHandler(item) {// 判断点击的是哪个 navif (item.name 分类) {//切换页面uni.switchTab({url: /pages/cate/cate})}
}楼层区域的实现
获取楼层数据
1.定义 data 数据 2.在 onLoad 中调用获取数据的方法 3.在 methods 中定义获取数据的方法
export default {data() {return {// 1. 楼层的数据列表floorList: [],}},onLoad() {// 2. 在 onLoad 中调用获取楼层数据的方法this.getFloorList()},methods: {// 3. 定义获取楼层列表数据的方法async getFloorList() {const { data: res } await uni.$http.get(/api/public/v1/home/floordata)if (res.meta.status ! 200) return uni.$showMsg()this.floorList res.message},},
}res内容
渲染楼层的标题
!-- 楼层区域 --
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渲染楼层里的图片
!-- 楼层图片区域 --
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!-- 右侧 4 个小图片的盒子 --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效果
实现跳转
// 获取楼层列表数据
async getFloorList() {const { data: res } await uni.$http.get(/api/public/v1/home/floordata)if (res.meta.status ! 200) return uni.$showMsg()// 通过双层 forEach 循环处理res中的 URL 地址将地址的查询部分分割出来重新连接到指向分包的 URLres.message.forEach(floor {floor.product_list.forEach(prod {prod.url /subpkg/goods_list/goods_list? prod.navigator_url.split(?)[1]})})this.floorList res.message
}把图片外层的 view 组件改造为 navigator 组件并动态绑定 url 属性 的值
!-- 楼层图片区域 --
view classfloor-img-box!-- 左侧大图片的盒子 --navigator classleft-img-box :urlitem.product_list[0].urlimage :srcitem.product_list[0].image_src :style{width: item.product_list[0].image_width rpx} modewidthFix/image/navigator!-- 右侧 4 个小图片的盒子 --view classright-img-boxnavigator classright-img-item v-for(item2, i2) in item.product_list :keyi2 v-ifi2 ! 0 :urlitem2.urlimage :srcitem2.image_src modewidthFix :style{width: item2.image_width rpx}/image/navigator/view
/view
