uniapp

用户登录

<button class="login wechatLogin" open-type="getUserInfo" @getuserinfo="bindgetuserinfo">

uniapp将原先小程序的返回数据,放在mp属性中

路由传参

// login界面路由传参
methods: {
		bindgetuserinfo(info){
			let {userInfo} = info.detail
			if(userInfo){
				uni.reLaunch({
					url:"/pages/personal/personal?userInfo="+JSON.stringify(userInfo)
				})
			}
		}
	}

// 个人中心页面通过this接收
mounted(){
	console.log(this)
},

mounted(){
	if(this.$mp.query.userInfo){
		this.userInfo = JSON.parse(this.$mp.query.userInfo)
	}else{
		uni.getUserInfo({
			// 注意这里要用箭头函数
			success:(data)=>{	
					this.userInfo = data.userInfo
			}
		})
	}
},

关于空标签

vue:  <template></template>
react:  <></>  或者 <fragment></fragment>
小程序: <block></block>

内容区域滚动**

如果有系统滚动条,需要overflow:hidden,uniapp scroll-view已经处理

小程序端 导航栏和tabBar并不算在100vh中,所以以下算法即可
h5端 导航栏和tabBar算在100vh,需要将他们一并减去

// 小程序
height calc(100vh - header的高度 - navScroll的高度)
// h5
height calc(100vh - header的高度 - navScroll的高度 - 导航栏的高度 - tabBar的高度)
height calc(100vh - 100upx - 80upx - var(--window-bottom) - var(--window-top))

tabBar高度->–window-bottom 导航栏高度->–window-top

这两个属性在小程序端是0px在h5端是有各自的数据,设置在html标签上

购物车界面显示隐藏

根据什么判断呢?
在mounted里面获取用户数据,如果有,就是登录后界面

响应式数据常见bug

const mutations = {
	changeShopItemCount(state,{flag,index}){
		/*
			需求:
				1.点击+/-号时,修改对应商品的数量
				2.当数量小于1时,自动删除该商品
		*/
		console.log('changeShopItemCount',flag,index)
		let shopItem = state.cartList[index];
		if(flag){
			shopItem.count++;
		}else{
			if(shopItem.count===1){
				/ 如果为1再减就是0,清除掉这个数据即可
				state.cartList[index] = undefined   这样是不可以的
				// console.log('0000')
				// 响应式数据无法监视数组内的元素变化,所以页面不会重新渲染
				//	API重写:push,pop,splice
				state.cartList.splice(index,1);
				// console.log('state.cartList',state.cartList)
			}else{
				shopItem.count--;
			}
		}

		// 增加商品
	addShopCart(state,goodsData){
		// console.log("123",goodsData)
		// 推送之前count加一
		let carList = state.mockData
		
		let shopItem = carList.find((item)=>{
			return item.id === goodsData.id
		})
		
		if(shopItem){
			shopItem.count++
		}else{
			// goodsData.count = 1  错误
			// 注意要引入vue,方法一
			// Vue.set(goodsData,"count",1)
			
			// 方法二
			const goodsData1 = Vue.observable({
				...goodsData,
				count:1
			})
			state.mockData.push(goodsData1)
		}
	},

自定义data