用户登录
<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