fetchWay函數異步
const app = getApp()
function fetchUser(way, params){
let promise = new Promise(function(resolve, reject){
//請求
if(way === 'get'){
let MyUser = new wx.BaaS.User()
MyUser.get(params.id).then(res => {
// success
console.log('請求成功')
app.globalData.userInfo = res
resolve(res)
}, err => {
// err
})
}
})
return promise
}
module.exports = {
fetchUser: fetchUser,
}
login組件
login.js
data: {
isShowTellInfo: 0, //是否顯示告示信息
},
methods: {
userInfoHandler(data) {
wx.BaaS.handleUserInfo(data).then(res => {
// res 包含用戶完整信息,詳見下方描述
FetchWay.fetchUser('get', res).then((res)=>{
//請求完成
console.log('完成肤无。鸯旁。藤韵。')
console.log('#####USER###2', app.globalData.userInfo)
})
}, res => {
console.log('login: failed', res)
})
},
showMask() {
let self = this;
self.setData({
isShowTellInfo: 2,
})
},
hideMask() {
let self = this
self.setData({
isShowTellInfo: 1,
})
setTimeout(() => {
self.setData({
isShowTellInfo: 0,
})
}, 500);
},
}
login.wxml
<view class="mask fccc {{isShowTellInfo == 2 ? 'fade-in' : isShowTellInfo == 1 ? 'fade-out' : ''}}" hidden="{{isShowTellInfo == 0 && true}}" bindtap="hideMask">
<view class="panel fcsc" catchtap="catcTemp">
</view>
</view>
lgoin.wxss
@import "../../app.wxss";
.panel{
height: 60%;
width: 60%;
background-color: rgba(26, 22, 22, 0.65);
border-radius: 16rpx;
box-sizing: border-box;
padding: 24rpx 15rpx;
position: relative;
}
/*全屏的底部半透明陰影*/
.mask{
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(26, 22, 22, 0.65);
z-index: 1000;
}
/*動畫效果*/
.fade-in{
animation: fi 0.6s ease 1 forwards;
}
.fade-out{
animation: fo 0.6s ease 1 forwards;
}
@keyframes fi {
from{
opacity: 0;
}to{
opacity: 1;
}
}
@keyframes fo{
from{
opacity: 1;
}to{
opacity: 0;
}
}
引入頁面的寫法
test.json
{
"usingComponents": {
"login": "/component/login/login"
}
}
test.wxml
<button bindtap='bindShowLogin'>
未登錄提示
</button>
<login id="login" />
test.js
onLoad: function (options) {
let that = this
that.Login = that.selectComponent('#login')
},
bindShowLogin: function(){
let that = this
that.Login.showMask()
},