需求

小程序在跳转登录页面之前，需要弹出一个弹窗，展示一些内容，用户可以选择取消，这时候不再跳转登录页面，选择确定之后，再跳转登录页面。

思考

思考：如何最小化的变动，在尽可能不影响其他业务的情况下，实现全局弹窗。
接口逻辑已定，如果调用接口，出现301等登录跳转code，跳转登录页面进行登录。

问题&方法

封装写成组件，需要在每个用到登录权限接口的页面，引入组件
过于麻烦，暂时放弃

页面目前不算多，如果每个页面包一个公用组件，内容写道组件的插槽中，然后在组件中写相关的弹窗逻辑。
和上方方法类似，但是维护起来可能相对容易一些，可扩展性高一些。

之前写过uniapp，有这样一种操作，将弹窗写成一个页面，需要弹窗了跳转页面，但是这个页面是背景透明的，用户是看不出来跳转了页面。样式还是弹窗的样式。

微信小程序推出的Skyline渲染模式，之前就看过但是一直没敢用于项目，但是看到其中有针对该问题的解决方法

Skyline 页面的层数

页面背景色：可通过 page 选择器在 wxss 中定义，默认为白色
页面容器背景色：可在页面 json 文件中通过 backgroundColorContent 属性定义，支持 #RRGGBBAA 写法，默认白色
自定义路由容器背景色，由路由配置项中返回的 StyleObject 控制，默认透明
控制是否显示前一个页面，由路由配置项中的 opaque 字段控制，默认不显示

webview 下的页面背景色

页面背景色：可通过 page 选择器在 wxss 中定义，默认为透明
页面容器背景色：可在页面 json 文件中通过 backgroundColorContent 属性定义，支持 #RRGGBB 写法，默认白色
窗口背景色：可通过 wx.setBackgroundColor 接口或页面配置修改，默认为白色

页面实现透明背景的示例

可实现效果如图

尝试

框架为Taro

尝试方法3

<template>
  <view>
    1231231
    sadasd
  </view>
</template>

<script setup>

</script>

<script>
definePageConfig({
  navigationBarTitleText: '',
  navigationStyle: 'custom',
  backgroundColorContent: '#ffffff00'
})
</script>

<style lang="scss">
page {
  background: rgba(0, 0, 0, 0);
}
</style>

将能设置为背景透明的窗体都设置为透明，未能实现预期效果。

方法3无法实现

尝试方法4

app.config.js

..........
    lazyCodeLoading: 'requiredComponents',
    rendererOptions: {
        skyline: {
            "defaultDisplayBlock": true
        }
    },

弹窗页面

<template>
  <view class="container">
    <view> 当前为 Skyline 页，背景镂空</view>
  </view>
</template>

<script setup>
import Taro from "@tarojs/taro";

// Taro.setBackgroundColor({
//   backgroundColor: '#000', // 窗口的背景色为白色
// })
</script>

<script>
definePageConfig({
  navigationBarTitleText: '',
  backgroundColorContent: '#00FF0000',
  renderer: 'skyline',
  componentFramework: 'glass-easel',
  disableScroll: true,
  navigationStyle: "custom"
})
</script>

<style lang="scss">
page {
  background: transparent;
  background-color: transparent;
}
</style>

为尽可能最小的改动，app.config.js未设置skyline渲染模式，尝试只在弹窗页面设置skyline，结果展示出来只有一个黑色界面