分享功能实现

src/App.vue

@@ -18,6 +18,10 @@ import config from '@/config/config.js'
 import { requestWxInit } from "@/utils/wxShare"
 import { requestWxInit } from "@/utils/wxShare"
 
 
 export default {
 export default {
+  created() {
+    // 通过url中是否含有shareId来判断是否是分享出去的详情页，再由路由推向对应详情页
+    this.judgeShare()
+  },
   mounted() {
   mounted() {
     console.log('NODE_ENV')
     console.log('NODE_ENV')
     console.log(process.env.NODE_ENV)
     console.log(process.env.NODE_ENV)
@@ -28,6 +32,29 @@ export default {
     console.log('accessToken')
     console.log('accessToken')
     console.log(localStorage.getItem('accessToken'))
     console.log(localStorage.getItem('accessToken'))
     requestWxInit('测试标题', '描述啊描述', config.shareIcon, config.shareLink)
     requestWxInit('测试标题', '描述啊描述', config.shareIcon, config.shareLink)
+  },
+  methods: {
+    judgeShare() {
+      if (location.href.includes("shareId")) {
+        // 用是否有shareId 来判断是不是分享出去的链接
+        var id = this.getshareId(location.href)
+        this.$router.replace({ path: "detail", query: { detailId: id } });
+      } else {
+      }
+    },
+    getshareId(str) {
+      var arr = str.split("?");
+      var newArr = arr[1].split("&");
+
+      var id = null;
+      newArr.forEach(ele => {
+        if (ele.includes("shareId")) {
+          id = ele.match(/\d+/g)[0];
+        }
+      });
+
+      return id;
+    },
   }
   }
 }
 }
 </script>
 </script>

src/main.js

@@ -23,7 +23,7 @@ window.$axios = axios
 // 微信授权
 // 微信授权
 if (process.env.NODE_ENV === 'development' && !process.env.VUE_APP_BUILD_TYPE) {
 if (process.env.NODE_ENV === 'development' && !process.env.VUE_APP_BUILD_TYPE) {
   // 调试开发，替换这里token
   // 调试开发，替换这里token
-  let testToken = 'OJBwh2ZvViYyQ1phNZEghwf9D8dyAImCD5twnjl0'
+  let testToken = '34B4TeqZ04fnqbfjnxU0o1WOnwaNj76APXvSkb65'
   axios.defaults.headers.common['sysType'] = config.sysType
   axios.defaults.headers.common['sysType'] = config.sysType
   axios.defaults.headers.common['accessToken'] = testToken
   axios.defaults.headers.common['accessToken'] = testToken
   localStorage.setItem('accessToken', testToken)
   localStorage.setItem('accessToken', testToken)

src/views/Detail.vue

 <template>
 <template>
-  <div>Detail页面</div>
+  <div>
+    <h1>{{detailId}}</h1>
+    <div>Detail页面</div>
+  </div>
 </template>
 </template>
 
 
 <script>
 <script>
-export default {
+import config from '@/config/config.js'
+import { requestWxInit } from "@/utils/wxShare"
+
 
 
+export default {
+  data() {
+    return {
+      detailId: null,
+      shareUrl: null
+    }
+  },
+  activated() {
+    this.setShareUrl()
+    requestWxInit('详情页啊', '详情啊啊啊啊', config.shareIcon, this.shareUrl)
+  },
+  deactivated() {
+    setTimeout(() => {
+      this.detailId = null
+      requestWxInit('测试标题222', '从详情页回来的', config.shareIcon, config.shareLink)
+    });
+  },
+  methods: {
+    setShareUrl() {
+      this.detailId = this.$route.query.detailId
+      this.shareUrl = config.shareLink.includes('?')
+        ? `${config.shareLink}&shareId=${this.detailId}`
+        : `${config.shareLink}?shareId=${this.detailId}`;
+    }
+  }
 }
 }
 </script>
 </script>
\ No newline at end of file