diff --git a/src/components/AiOpenData.vue b/src/components/AiOpenData.vue
index 98674d0a..2acb6122 100644
--- a/src/components/AiOpenData.vue
+++ b/src/components/AiOpenData.vue
@@ -1,5 +1,7 @@
 <template>
-  <div :type="type" :openid="oid" v-text="oid"/>
+  <div :type="type" :openid="oid">
+    <div class="loading" v-text="`读取中...`"/>
+  </div>
 </template>
 
 <script>
@@ -19,15 +21,20 @@ export default {
   methods: {
     ...mapActions(['injectJWeixin']),
     bindWWOpenData() {
-      if (window?.WWOpenData) WWOpenData.bind(this.$el)
-      else this.injectJWeixin().then(() => {
-        this.$nextTick(() => {
-          WWOpenData.bind(this.$el)
-          WWOpenData.on('update', () => {
+      if (window?.WWOpenData) {
+        WWOpenData.bind(this.$el)
+      } else {
+        this.injectJWeixin().then(() => {
+          this.$nextTick(() => {
             WWOpenData.bind(this.$el)
           })
         })
-      })
+      }
+    }
+  },
+  watch: {
+    openid(v) {
+      v && this.bindWWOpenData()
     }
   },
   mounted() {
@@ -35,3 +42,19 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+.loading {
+  color: transparent;
+  height: 100%;
+  animation: loading 1s infinite alternate;
+}
+
+@keyframes loading {
+  from {
+    background: rgba(#eee,.6);
+  }
+  to {
+    background: rgba(#eee,.2);
+  }
+}
+</style>