uni-app 项目实战

 一、项目搭建
    前端：uni-app
    后端：若依框架
    1. 说明
        uni-app的基础语法不会讲
    2. 搭建项目
        1. 在hubilder中创建uni-app项目
        2. 下载【微信小程序开发工具】
            https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
            注意：登录
        

 修改appId. 拿自己的 

 

2 tabbar

 

2.1 禁止自带的tabBar

 

2.2配置pages.json文件

 

2.3 将组件抽成一个组件 ，因为很多地方都使用

用一个变量来控制 高亮显示

 

使用

tabBar跳转

 

3 首页

1 滑动区域用scroll-view 

每一个小快用二级路由 。 防止首页代码太多。 将卡片抽取成一个组件

首页引入组件： 

 

 2 布局首页

3 中间部分进行滑动 ：视口- 头部- tabBar的高度

定义一个变量高度 clientHeight

 

		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					// 获取头部的高度  select里面的参数就比如css选择器一样选择元素
					let info = uni.createSelectorQuery().in(this).select(".home-header")
					info.boundingClientRect((data)=>{
						// data包含元素的高度信息
						// data.height  头部的高度  68是tabbar的高度
						console.log( data )
						this.clientHeight = res.windowHeight - data.height - 68
					}).exec(function(res){
						// 这个方法必须执行,即使什么也不做,否则不会获取到信息
					})
				}
			})
		},

4 首页传【数组】给HomeCommodity，HomeCommodity再将item给HomeItem

HomeItem 是每一个班级的样式 

  

5 清除滚动条

	scroll-view ::-webkit-scrollbar{
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance:none;
		background: transparent;
		color: transparent;
	}

6 查看班级权益，点击跳转到 班级权益页面

 

 

6.1 权益页面

 中间可以滑动

 

我知道，返回到首页

 

7 班级详情页

1  跳转到详情页：

 

 

2 布局

头部，导航，列表都能成组件

2.1 头部：

 

 固定定位到头部， position: fixed;

传数据：