02 uni-app

1项目启动

一启动后台

1下载依赖

 2启动

nodemon 或者node index.js

二启动前台

只能启动一个 ，如果有其他项目，把其他关闭，在运行这个

2tabBar配置

没有使用ui库，后续自己可以使用ui库

2.1 删除page里边的东西，记得删除pages,json的配置

2.2 新建home页面

查看配置 pages.json

2.3 把cart,category,about 页面都创建了 

配置文件pages 里边第一个是home，所以展示的是home页面

2.4 配置全局配置

每个页面的style会覆盖全局配置，所以 styl记得配置

 

2.5 将图片添加到项目当中

2.6配置tabBar

 

3顶部搜素内容

1 小程序不能引入阿里图标的在线地址的，所以得先下载文档

 引入到main.js当中，或者app.vue当中

 

4 滑动导航条

 

2  点击那个高亮显示

定义一个样式

3 请求 

可以添加动画：

 

/* 
	封装的网络请求的方法
		url 接口地址
		method 请求方式
		data 参数传递
		options 配置参数
			{
				loading:boolean, 是否加载动画
				title:'名称'
				
			}
 */
import base from './base.js'
	
export default function(url,options={loading:true,isShow:true},method='GET',data={}){//options={loading:true,title:'',isShow:}
	
	return new Promise((resolve,reject)=>{
		//交互动画
		if(options.loading){
			uni.showLoading({
				title:"数据加载中"
			})
		}
		uni.request({
				url:base.host+url,
				method,
				data,
				success:res=>{
					if(res.data.status===200){
						if(options.isShow){
							uni.showToast({
								title:options.title || "数据加载完毕" 
							})
						}
						
					}
					resolve(res.data)
				},
				fail:error=>{
					//信息提示--请求失败
					reject(error)
				},
				complete() {
					//成功或者失败都执行
					uni.hideLoading()
				}
			})
	})
	
}

4 调用接口

5 渲染

 

6 点击高亮显示：动态的添加

 

 点击谁，谁高亮 

5 H5页面打开

 h5 跨域， 小程序没有是因为没有校验合法域名

1 处理请求

 配置第一种：

//跨域配置---位置：vue-cli官网上
module.exports = {
	devServer: {
		proxy: {
			'/api': {
				target: 'http://localhost:7788',
				ws: true,
				changeOrigin: true,
				pathRewrite:{
					"^/api":""
				}
			},
			// '/foo': {
			// 	target: '<other_url>'
			// }
		}
	}
}

6vuex创建sotre仓库

分类多个地方都使用了， 用vuex 

1 编写并测试

 

2 存导航数据

7 因为下边有多个，所以进行分组件编写

拆分推荐组件

推荐组件，居家组件等都有  轮播。再继续拆分轮播组件

7.1轮播

<template>
	<view class="myBanner">
		<swiper class="banner" indicator-dots autoplay interval='3000' circular>
			<swiper-item v-for="(item,index) in banner" :key='index'>
				<image :src="item" mode="" class="img"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "Banner",
		props:{
			banner:{
				type:Array,
				default:function(){
					return []
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.myBanner {
		margin: 10rpx 0;
	}

	.banner {
		width: 100%;
		height: 350rpx;
	
	.img {
			width: 100%;
			height: 350rpx;
		}
	}
</style>

 引入到推荐组件当中

7.2 logo

首页查询的数据中包含，所以数据从父组件home传给子组件 recommend推荐组件

 

display:flex     flex:1  

7.2 分类导航展示

2  内嵌h5地址

<navigator :url="'/pages/catePage/catePage?url='+item.schemeUrl">

7.3 好物列表布局

横向滚动 

 二维数组： 第一层： 种类  第二层： 每个种类的数据

2 添加文字两行超出省略不生效，因为 横向滚动添加了一个不换行，导致不生效

所以给里边添加了一个不换行

3 一行掉下去了

 给文字添加高度

8 点哪个导航，能看到哪个的数据

其他组件样式都一样，作为一个组件，只是传不同的参数数据进行显示

居家还是在首页显示，和推荐进行切换

8.1 导航分类布局

 后台一次返回三个类别的数据，需要我们进行筛选，我们点哪个，展示哪个类别的数据

 

8.2 跳转商品详情

查看是否调到详情页

8.3 页面布局

 

9 uni-ui

 最开始建项目并没有加，怎么加入哪？

 

点击去导入插件

2 使用

<script>
	export default {
		data() {
			return {
				//正常：传递id标识 进入详情界面 获取接口 
				//非正常：点击商品--传递了整个商品数据传递给详情页 无需再次请求 --省事的后台
				goodsInfo: {}, //详情数据 
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					// info: 2,
					// infoBackgroundColor: '#007aff',
					// infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [
					{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],

			}

		},
		onLoad(options) {
			this.goodsInfo = JSON.parse(options.goodsInfo);
			console.log('详情界面---', this.goodsInfo);
		},
		methods: {
			//点击加入购物车左侧列表
			onClick(e) {
				console.log('e---ee', e);
			},
			//点击加入购物车-立即购买按钮 
			buttonClick(e) {
				console.log('buttonClick---', e)
				this.options[2].info++
			}
		}
	}
</script>