shanxia2.0/miniprogram/pages/common/wechat-binding-authorize.vue

<script setup>
import { getCurrentInstance, ref } from 'vue'
import { onLoad, onReady, onUnload } from '@dcloudio/uni-app'
import { isWechatAuthorizeUrl } from '@/api/wechat-notices'

const instance = getCurrentInstance()
const src = ref('')
const errorText = ref('')
let ready = false, pendingUrl = '', channel
const receive = ({ authorizeUrl } = {}) => {
  if (!isWechatAuthorizeUrl(authorizeUrl)) { errorText.value = '授权地址无效，请返回重新绑定'; return }
  pendingUrl = authorizeUrl
  if (ready) src.value = pendingUrl
}
onLoad(() => {
  channel = instance?.proxy?.getOpenerEventChannel?.()
  if (!channel) { errorText.value = '请从关注服务号页面发起绑定'; return }
  channel.on('wechatBindingAuthorize', receive)
})
onReady(() => {
  ready = true
  if (pendingUrl) src.value = pendingUrl
})
onUnload(() => { channel?.off('wechatBindingAuthorize', receive) })
const onError = () => { errorText.value = '微信授权页面打开失败，请返回后重试或联系管理员检查域名配置' }
</script>

<template>
  <view class="binding-authorization">
    <view v-if="errorText" class="binding-authorization__error">{{ errorText }}</view>
    <web-view v-else-if="src" :src="src" @error="onError" />
    <view v-else>正在打开微信授权…</view>
  </view>
</template>

<style scoped>
.binding-authorization { padding: 40rpx 32rpx; color: #6b7b74; font-size: 28rpx; line-height: 1.7; }
.binding-authorization__error { color: #b45309; }
</style>