1、设置默认占位图
人物头像
background-image: url('https://ic_default_header.png');
background-repeat: no-repeat;
background-position: center;
background-color: #f6f6f6;
background-size: cover;
大图占位
background-image: url('https://image_default.png');
background-repeat: no-repeat;
background-position: center;
background-color: #f6f6f6;
background-size: cover;
2、Dialog弹窗不出来
vant的Dialog弹窗由于是从根节点查找第一个,开发过程中热更新会丢失,需要重新运行下项目。其次才是简单库有没有导入
3、vant添加圆角
- 中间弹窗
<van-dialog id="van-dialog" />
Dialog.confirm({
customStyle: 'border-radius: 16rpx;',
})
- 底部弹窗
<van-popup
custom-style="border-radius: 16rpx;"
/>
4、字体粗细
尽量使用normal、bold属性,不使用具体数字。
小程序、uniapp、weex、RN这类框架在dom节点桥接原生组件上,部分安卓手机在字体粗细属性数字映射上,会将<=300映射成normal,>=500映射成bold(400目前看也是bold),从而造成适配问题,ui改起来很麻烦。
// ✅
font-weight: normal;
// ❎
font-weight: 300;
5、空白视图CommonEmpty
推荐使用方法
1、如果页面不依赖自带的滚动(例如滚动使用scrollview或者没有滚动情况),设置overflow-y属性
/* 防止CommonEmpty滚动 */
overflow-y: hidden;
2、同时设置足够大的高度,例如100vh
<CommonEmpty
style="margin-top: {{statusBarHeight}}px;height:100vh;"
/>
封装参考:
index.wxml
<view
class="empty-container"
style="{{style}}"
>
<image
class="empty-image"
mode="aspectFill top"
src="{{icon}}"
/>
<text
wx:if="{{title}}"
class="empty-text"
>{{title}}</text
>
<text
wx:if="{{content}}"
class="empty-text2"
>{{content}}</text
>
<view
wx:if="{{buttonText}}"
class="button-post"
bind:tap="onTapButton"
>
<text class="button-post-text">{{buttonText}}</text>
</view>
</view>
index.js
const app = getApp();
const { OSS_DOMAIN } = app.globalData;
Component({
properties: {
style: {
type: String,
value: 'height:66vh;',
},
icon: {
type: String,
value: OSS_DOMAIN + '/miniprogram/channel/Post/ic_empty_default.png',
},
title: {
type: String,
value: '',
},
content: {
type: String,
value: '',
},
buttonText: {
type: String,
value: '',
},
},
data: {
OSS_DOMAIN,
},
methods: {
onTapButton() {
this.triggerEvent('onTapButton');
},
},
});
index.wxss
.empty-container {
display: flex;
position: relative;
width: 100vw;
flex-direction: column;
background-color: white;
align-items: center;
padding-top: 60%;
}
.empty-image {
width: 256rpx;
height: 192rpx;
margin-bottom: 22rpx;
}
.empty-text {
font-size: 32rpx;
font-family:
PingFangSC,
PingFang SC;
font-weight: 400;
color: #1a1a1a;
line-height: 44rpx;
}
.empty-text2 {
font-size: 26rpx;
font-family:
PingFangSC,
PingFang SC;
font-weight: 400;
color: #9e9e9e;
line-height: 44rpx;
}
.button-post {
width: 264rpx;
height: 64rpx;
background: #6d91f3;
border-radius: 8rpx;
border: 2rpx solid #6d91f3;
margin-top: 38rpx;
display: flex;
align-items: center;
justify-content: center;
}
.button-post:active {
opacity: 0.5;
}
.button-post-text {
font-size: 28rpx;
font-family:
PingFangSC,
PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 28rpx;
}
6、一行点点点
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
7、控件尺寸测量
this.createSelectorQuery()
.select(`#fixedComponent`)
.boundingClientRect((res) => {
})
.exec();
8、scroll-view组件撑满剩余控件
由于微信小程序的scroll-view必须制定高度,所以flex:1是没用的,因此我们可以设置高度为0即可。
这种写法兼容android、ios,并且适配度很好。
flex: 1;
height: 0;
9、wxml中书写Object
<IdentityItem
info="{{ {title:'张三',content:'as扥'} }}"
bind:tap="onTapItem"
/>
注意:在小程序中动态解析需要用{{,小程序不识别{{{。
以下会报错:Bad attr info with message
<IdentityItem
info="{{{title:'张三',content:'as扥'}}}"
bind:tap="onTapItem"
/>
10、scroll-view里面flex布局不生效
添加enable-flex="true"
属性
<scroll-view
class="scrollView"
enable-flex="true"
scroll-y="true"
>
</scroll-view>
11、页面间通讯
A页面注册数据
wx.navigateTo({
url: `/CustomerService/pages/others/FriendPermission/index?fromChannel=1&userId=${this.userId}`,
events: {
FriendPermission: ({ friendPermission }) => {
this.setData({ friendPermission });
},
},
});
B页面给A页面发数据
this.getOpenerEventChannel().emit('FriendPermission', { friendPermission: index });
12、调试
1、可在调试器 -> Sources -> 具体页面断点
2、也可在代码中输入debugger;
微信小程序会走到这里会自动断点
13、添加阴影变色效果
在css样式上添加伪元素:active
,注意冒号前不要有空格
.friend-item:active {
background-color: #f8f8f8;
}