学习地址
零基础玩转微信小程序：黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)
uniapp - 黑马优购 笔记地址
代码 重点注意点记录
1 网络框架配置
1 初始化项目
npm init -y
2 下载
npm install @escook/request-miniprogram
3 使用 main.js 导入
import { $http } from '@escook/request-miniprogram'
4 挂载
uni.$http = $http
5 配置base网址
$http.baseUrl = 'https://www.uinav.com'
6 拦截 , 请求前
$http.beforeRequest = function(options){
uni.showLoading({
title:'数据加载中....'
})
}
7 拦截 请求后
$http.afterRequest = function(){
uni.hideLoading()
}
8 定义公共方法
uni.$showMsg = function(title = '数据加载失败!' , duration = 1500){
uni.showToast({
title,
duration,
icon:"none",
})
}
9 网络请求
9.1 定义 数据源
data() {
return {
swiperList: [],
};
},
9.2 编辑请求
methods: {
async getSwiperList() {
const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
if (res.meta.status !== 200) {
return uni.$showMsg()
}
console.log(res)
this.swiperList = res.message
},
}
9.3 发起请求
onLoad() {
this.getSwiperList()
},
10 编辑页面
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item v-for="(item ,i) in swiperList" key="i">
<navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
<image :src="item.image_src" mode="widthFix"></image>
</navigator>
</swiper-item>
</swiper>
10.1 v-for 写法
v-for="(item ,i) in swiperList" key="i"
10.2 循环内的内容如需要用到item的数据 需要 在属性前加 " : " 号
:src="item.image_src"
10.3 数据拼接 字符串 单引号 + 循环数据 需要在属性前加 " : " 号 // 完整代码在下面
:url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id"
:url="item.product_list[0].url"
:src="item.product_list[0].image_src"
10.4 自定义Style 需要 用大括号扩住 // 完整代码在下面
:style="{width: item.product_list[0].image_width + 'rpx'}"
10.5 点击事件 可传值
@click="navItemClick(item)" // 完整代码在下面
10.6 v-if 不起作用 可以放在下面 用 block 渲染
<block v-if="i2 !== 0">
11 循环修改数据源 forEach()
//navigator_url: "/pages/goods_list?query=户外"
res.message.forEach(item =>{
item.product_list.forEach(ziitme =>{
ziitme.url = '/subpkg/goods_list/goods_list?'+ziitme.navigator_url.split('?')[1] // 只保留 query=户外
})
})
11.1 跳转分包的地址 是从 分包的根目录开始的
'/subpkg/goods_list/goods_list'
12 普通切换tabbar
navItemClick(item) {
if (item.name === "分类") {
uni.switchTab({
url: '/pages/cate/cate'
})
}
}
main.js 代码
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()
}
uni.$showMsg = function(title = '数据加载失败!' , duration = 1500){
uni.showToast({
title,
duration,
icon:"none",
})
}
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
home.vue 代码
<template>
<view>
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item v-for="(item ,i) in swiperList" key="i">
<navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
<image :src="item.image_src" mode="widthFix"></image>
</navigator>
</swiper-item>
</swiper>
</view>
<view class="navList">
<view class="navList-item" v-for="(item ,i) in navList" key="i" @click="navItemClick(item)">
<image :src="item.image_src" mode="widthFix"></image>
</view>
</view>
<!-- 楼层区域 -->
<!-- 楼层区域 -->
<view class="floor-list">
<!-- 楼层 item 项 -->
<view class="floor-item" v-for="(item, i) in floor_title" :key="i">
<!-- 楼层标题 -->
<image :src="item.floor_title.image_src" class="floor-title"></image>
<view class="floor-img-box">
<!-- 左侧大图片的盒子 -->
<navigator class="left-img-box" :url="item.product_list[0].url">
<image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}"
mode="widthFix"></image>
</navigator>
<!-- 右侧 4 个小图片的盒子 -->
<view class="right-img-box">
<navigator class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2" :url="item2.url" >
<block v-if="i2 !== 0">
<image :src="item2.image_src" mode="widthFix" :style="{width: item2.image_width + 'rpx'}"></image>
</block>
</navigator>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
swiperList: [],
navList: [],
floor_title: [],
};
},
onLoad() {
this.getSwiperList()
this.getNavList()
this.getFloorList()
},
methods: {
async getSwiperList() {
const {
data: res
} = await uni.$http.get('/api/public/v1/home/swiperdata')
if (res.meta.status !== 200) {
return uni.$showMsg()
}
console.log(res)
this.swiperList = res.message
},
async getNavList() {
const {
data: res
} = await uni.$http.get('/api/public/v1/home/catitems')
if (res.meta.status !== 200) {
return uni.$showMsg()
}
console.log(res)
this.navList = res.message
},
async getFloorList() {
const {
data: res
} = await uni.$http.get('/api/public/v1/home/floordata')
if (res.meta.status !== 200) {
return uni.$showMsg()
}
///
//navigator_url: "/pages/goods_list?query=户外"
res.message.forEach(item =>{
item.product_list.forEach(ziitme =>{
ziitme.url = '/subpkg/goods_list/goods_list?'+ziitme.navigator_url.split('?')[1]
})
})
console.log(res)
this.floor_title = res.message
},
navItemClick(item) {
if (item.name === "分类") {
uni.switchTab({
url: '/pages/cate/cate'
})
}
}
}
}
</script>
<style lang="scss">
swiper {
height: 330rpx;
width: 100%;
.swiper-item,
image {
width: 100%;
height: 100%;
}
}
.navList {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 15rpx 0;
.navList-item image {
width: 128rpx;
height: 140rpx;
}
}
.floor-title {
height: 60rpx;
width: 100%;
display: flex;
}
.right-img-box {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.floor-img-box {
display: flex;
padding-left: 10rpx;
}
</style>
瞎按股
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
