微信小程序做全局登录弹窗

需求：在任意需要弹出登录的页面，后台返回需要登录状态码，弹出登录弹窗进行登录，并刷新当前页面
过程：因为微信小程序无法封装一个全局组件通过方法全局调用。因此只能封装一个公共组件，在需要弹窗的页面注册并挂载，可以在app.json中全局注册（此处有问题后面会讲到），在需要弹窗的页面就无需注册，直接挂载即可。
效果：

1. 第一步，封装全局弹窗组件

注意：封装弹窗组件踩的第一个坑，我当时使用到了微信小程序的page-container组件，使用show来控制弹窗的显示与隐藏，在全局注册并使用分包的情况下，小程序会报一个错误

大致意思就是page-container组件只能有一个实例，这个问题出现在，当你在A包页面登录完成之后，把token置为过期，再进入B包需要登录的页面的时候，，弹窗无法弹窗并会报这个错误。

弹窗组件代码

<!--components/LoginPopup/LoginPopup.wxml-->

<!-- 这里就会出现上面的问题 -->
<!-- <page-container show="{{show}}" position="center" overlay-style="width:200rpx" custom-style="background:transparent;" z-index="99999"> -->
<!-- 解决方法，直接用view替换掉page-container，用wx:if控制显隐，效果是一样的 -->
<view class="container-box" wx:if="{{show}}">
  <view class="popup-box flex-c h--100 w--100">
    <view class="popup-content">
      <view class="br-10 bag-fff">
        <view class="popup-top flex flex-y ju-c pad-l-40">
          <text class="c-333 fs-20 wt-600">登录</text>
          <text class="c-ccc fs-16">Login</text>
        </view>
        <view class="popup-bot pad-20 box-bor mar-t-4">
          <button class="w--100 btn-style1 fs-14 flex-c bag-46D2A1 c-fff br-8 wt-400" bindtap="login">微信一键登录</button>
          <!-- <button class="w--100 btn-style1 fs-14 flex-c bag-46D2A1 c-fff br-8 wt-400"  open-type="getPhoneNumber" type="primary"
      bindgetphonenumber="onGetPhoneNumber">微信一键登录</button> -->
          <!-- <button class="w--100 btn-style2 fs-14 flex-c mar-t-16 bag-fff c-999 br-8 wt-400">手机号登录/注册</button> -->
          <view class="fs-10 flex al-c mar-t-18 line-1 c-ccc" bindtap="setAgree">
            <text wx:if="{{agree}}" class="iconfont icon-44xuanze-2 c-46D2A1 line-1 fs-12 mar-r-2"></text>
            <text wx:else class="iconfont icon-xuanzhong c-999 line-1 fs-12 mar-r-2"></text>
            <text>登录代表您已同意</text>
            <text class="c-46D2A1" data-type="1" catchtap="goWebView">xxx用户协议 、</text>
            <text class="c-46D2A1" data-type="2" catchtap="goWebView">隐私协议</text>
          </view>
        </view>
      </view>
      <view class="line mar-auto"></view>
      <image bindtap="closePopup" class="close-btn mar-auto" src="https://jmqfile.oss-cn-hangzhou.aliyuncs.com/admin/0/20221214/f92b62cc50174d9d8d412fe97ea19d4c.png" mode=""/>
    </view>
  </view>
</view>
<!-- </page-container> -->

// components/LoginPopup/LoginPopup.ts

// 引入刷新当前页面的公共方法，后面有讲到
import { refreshPage } from '../../utils/util'
Component({
   // 这里可有可无，因为碰到一个需求，在首页不需要一进来就弹出登录弹出，
   // 但是点击banner图跳到外部链接的时候需要登录，因此我加了一个属性isShow
  properties: {
    isShow:Number
  },
  data: {
    // 控制弹窗显隐的属性
    show: false
  },
  // 这里可以忽略，自己业务需求
  attached(){
    const {isShow} = this.data
    if(isShow){
      this.setData({
        show:isShow==1?true:false
      })
    }
  },
  methods: {
    // 跳转协议页面
    goWebView(e: WechatMiniprogram.TouchEvent) {
     ...
    },
    setAgree() {
      ...
    },
    closePopup() {
      this.setData({
        show: false
      })
    },
    // 登录
    login() {
      ...
    },
    // 获取用户信息
    async getUserInfo() {
      ...
      // 获取完用户信息之后，刷新当前页面
      // 看需求，也可以登录完成之后直接刷新当前页面
      refreshPage()
    }
  }
})

2. 第二步，全局注册组件

app.json

"usingComponents": {
    "LoginPopup": "./components/LoginPopup/LoginPopup"
  },

3. 第三步，在需要展示弹窗的页面挂载

   // 这里要用class，用于获取组件节点
  <LoginPopup class="LoginPopup"></LoginPopup>

4. 第四步，封装控制组件的公共方法

把控制显隐的方法放到公共方法中，在需要的地方引入并调用即可，如放到响应拦截中
utils/index.ts

// 获取当前页面实例
function getContext() {
  const pages = getCurrentPages();
  return pages[pages.length - 1];
}
// 控制弹窗显隐方法
export function BadgePopup() {
  const options = {
    show: true,
  	dom: '.LoginPopup'
  };
  const page = getContext();
  const c= page .selectComponent(options.dom);
  if (!c) {
    console.warn(`未找到 ${options.dom} 节点，请确认 dom 是否正确`);
    return;
  }
  c.setData(options);
}

5. 第五步，封装刷新当前页面的公共方法

刷新当前页面方法一般在登录完成，获取用户信息之后，直接调用即可

utils/index.ts

// 刷新当前页面
export function refreshPage() {
  // getContext() 和第四步使用的同一个方法
  const perpage = getContext()
  
  const keyList = Object.keys(perpage.options)
  if (keyList.length > 0) {//页面携带参数
    let keys = '?'
    keyList.forEach((item, index) => {
      index === 0 ? keys = keys + item + '=' + perpage.options[item] : keys + '&' + item + '=' + perpage.options[keys]
    })
    wx.reLaunch({
      url: '/' + perpage.route + keys
    })
  } else {//页面没有携带参数
    perpage.onLoad()
    // 也可以使用wx.reLaunch
  }
}

6. 总结

目前想到的最好的解决方法，如有更好的方法还请奉告