在项目中，经常会有接口数据返回空的情况，多个页面需要显示空数据状态，那么可以封装成自定义空白页组件：
页面效果如下：
图一：暂无数据
图二：带按钮
接下来就开始写组件代码啦
步骤如下：
1.在根目录下新建components文件夹
2.在components下新建一个blankPage文件夹，新建blankPage的wxml、wxss、json、js文件
blankPage.wxml：
/**empty-空白图片的链接，isShowExplain-是否显示文字，emptyExplain-文字，isShowBtn-是否显示按钮，btnType-bindtap则普通点击事件，其他为电话号码授权事件，emptyBtnText-按钮文字**/
<view class="empty-content">
<view class="empty-box flex-colc">
<view class="empty-img">
<image src="{{emptyImg}}" mode="aspectFit"></image>
</view>
<view class="empty-ex" wx:if="{{isShowExplain}}">
{{emptyExplain}}
</view>
<view class="empty-btnBox" wx:if="{{isShowBtn}}">
<button class="btn btn-lg not-btn flex-row empty-btn" bindtap="clickEmptyBtn" wx:if="{{btnType=='bindtap'}}">{{emptyBtnText}}</button>
<button class="btn btn-lg not-btn flex-row empty-btn" bindgetphonenumber="getPhoneNumber" open-type="getPhoneNumber" wx:else>{{emptyBtnText}}</button>
</view>
</view>
</view>
blankPage.wxss：
.flex-row{flex-direction: row;}
.flex-colc{display: flex;flex-direction: column;justify-content: center;align-items: center;}
.btn{background: #F14243;color: #333;border: none;border-radius: 8rpx;display: inline-block;vertical-align: middle;white-space: nowrap;cursor: pointer;position: relative;z-index: 1;-moz-osx-font-smoothing: grayscale;padding: 0rpx !important;margin: 0rpx !important;line-height: inherit;display: flex;justify-content: center;align-items: center;margin-left: 0rpx !important;margin-right: 0rpx !important;}
.btn-lg{width: 100%;height: 96rpx;line-height: 96rpx;color: #fff;}
.empty-content {
width: 100%;
height: auto;
}
image {
width: 100%;
height: 100%;
display: block;
}
.empty-box {
padding: 168rpx 0rpx 0rpx 0rpx;
display: flex;
}
.empty-box .empty-img {
width: 468rpx;
height: 344rpx;
}
.empty-box .empty-ex {
font-size: 24rpx;
font-weight: 400;
color: #C4C4C4;
margin-top: 48rpx;
}
.empty-btnBox{margin-top:88rpx;}
.empty-btn{
border-radius:40rpx;
padding: 16rpx 116rpx !important;
font-size: 34rpx;
background: #3A71F4 !important;
border-radius: 60rpx;
}
blankPage.json：
{
"component": true,
"usingComponents": {}
}
blankPage.js：
// components/blankPage/blankPage.js
Component({
/**
* 组件的属性列表
*/
properties: {
//图片
emptyImg: {
type: String,
value: 'https://oss-cn-shenzhen.aliyuncs.com/src.png',
},
//是否显示文字说明
isShowExplain:{
type:Boolean,
value:true,
},
//文字说明
emptyExplain: {
type: String,
value: '啊哦，暂无数据 ～',
},
//是否显示按钮
isShowBtn:{
type:Boolean,
value:false,
},
//按钮文字
emptyBtnText:{
type:String,
value:'立即登录',
},
//按钮类型
btnType: {
type: String,
value: "bindtap"
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
_onInit: function () {
},
clickEmptyBtn:function(){
this.triggerEvent('clickEmptyBtn');
},
getPhoneNumber:function(e){
this.triggerEvent('getPhoneNumber', e.detail);
}
},
// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
attached() {
// 在组件实例进入页面节点树时执行
// 在组件实例进入页面节点树时执行
// this._onInit();
},
ready() {
// console.log('进入ready外层节点=', this.data.date);
this._onInit();
},
// 以下为新方法 >=2.2.3
lifetimes: {
attached() {
// 在组件实例进入页面节点树时执行
// this._onInit();
},
detached() {
// 在组件实例被从页面节点树移除时执行
},
ready() {
// console.log('进入ready节点=', this.data.date);
this._onInit();
}
}
})
在页面引用：
wxml:
/**emptyImg-空白页图片，
isShowExplain-是否显示文字说明，
emptyExplain-文字说明，
isShowBtn-是否显示按钮
btnType-bindtap普通点击事件，其他为手机号授权，我这里设置是手机号授权，
bind:getPhoneNumber-接收按钮点击事件，getPhoneNumberInfo-接收点击事件名，
bind:getPhoneNumber为接收组件按钮点击事件，可自定义后面getPhoneNumberInfo事件名
*/
<blankPage emptyImg="https://oss-cn-shenzhen.aliyuncs.com/src.png" isShowExplain="{{true}}" emptyExplain="未登录，请先授权登录" isShowBtn="{{true}}" btnType="login" bind:getPhoneNumber="getPhoneNumberInfo"></blankPage>
json:
{
"usingComponents": {
"blankPage":"/components/blankPage/blankPage"
},
"navigationBarTitleText": "登录"
}
js:
//用于接收按钮点击事件，要跟wxml中的getPhoneNumberInfo相同
getPhoneNumberInfo: function (e) {
//如为手机号码授权，接下来就使用微信手机号码API处理逻辑，普通事件可直接写代码处理逻辑
}
