小程序弹窗组件

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()
  },