浏览代码

修改公众号分享链接标题配置

xiebaomin 2 年之前
父节点
当前提交
df6bcfe564
共有 2 个文件被更改,包括 57 次插入26 次删除
  1. 24 1
      pages/_template/ross/index.vue
  2. 33 25
      plugins/jssdk.js

+ 24 - 1
pages/_template/ross/index.vue

@@ -116,9 +116,10 @@ export default {
     },
   },
   created() {
-    document.title = '官方正品授权查询'
+    // document.title = '官方正品授权查询'
   },
   mounted() {
+    this.initAppMessageShareData() // 公众号分享授权页面
     window.addEventListener('scroll', () => {
       this.scrollTop = document.documentElement.scrollTop
     })
@@ -200,6 +201,28 @@ export default {
       this.listQuery.townId = townId
       this.filterClubList()
     },
+
+
+    // 分享当前页面
+    initAppMessageShareData() {
+      console.log(window.location.href, window.location.origin)
+      //  重试次数
+      let retryCount = 1
+      this.$wxReady((wx) => {
+        //需在用户可能点击分享按钮前就先调用
+        wx.updateAppMessageShareData({
+          title: '官方正品授权查询', // 分享标题
+          desc: '官方正品授权', // 分享描述
+          link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
+          imgUrl: window.location.origin + '/activity.png', // 分享图标
+          fail: () => {
+            if (retryCount === 0) return
+            this.initAppMessageShareData()
+            retryCount--
+          },
+        })
+      })
+    },
   },
 }
 </script>

+ 33 - 25
plugins/jssdk.js

@@ -1,31 +1,39 @@
+/*
+ * @Author: xiebaomin 1771403033@qq.com
+ * @Date: 2023-03-29 14:01:47
+ * @LastEditors: xiebaomin 1771403033@qq.com
+ * @LastEditTime: 2023-04-17 14:28:13
+ * @FilePath: \caimei-authentic-www\plugins\jssdk.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import Vue from 'vue'
 import { appId, jsApiList } from '@/configs/jssdk'
 const dev = process.env.EVN
 
-Vue.prototype.$wxReady = async function (callback, apiList = []) {
-  try {
-    const url = window.location.href.split('#')[0]
-    // console.log('当前页面地址:', url)
-    const res = await Vue.prototype.$http.api.initWxConfig({ url, appId })
-    const wx = window.wx
-    if (!wx) return
-    wx.config({
-      debug: false && dev === 'development', // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印。
-      appId: appId, // 必填,公众号的唯一标识
-      timestamp: res.data.timestamp, // 必填,生成签名的时间戳
-      nonceStr: res.data.noncestr, // 必填,生成签名的随机串
-      signature: res.data.signature, // 必填,签名
-      jsApiList: [...jsApiList, ...apiList], // 必填,需要使用的 JS 接口列表
-    })
-    wx.ready(callback(wx))
-    wx.error(function (error) {
-      throw error
-    })
-  } catch (error) {
-    if (dev === 'development') {
-      console.warn('jssdk init error:' + error.msg || error.message)
-    } else {
-      console.warn('jssdk init error')
+Vue.prototype.$wxReady = async function(callback, apiList = []) {
+    try {
+        const url = window.location.href.split('#')[0]
+            // console.log('当前页面地址:', url)
+        const res = await Vue.prototype.$http.api.initWxConfig({ url, appId })
+        const wx = window.wx
+        if (!wx) return
+        wx.config({
+            debug: false && dev === 'development', // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印。
+            appId: appId, // 必填,公众号的唯一标识
+            timestamp: res.data.timestamp, // 必填,生成签名的时间戳
+            nonceStr: res.data.noncestr, // 必填,生成签名的随机串
+            signature: res.data.signature, // 必填,签名
+            jsApiList: [...jsApiList, ...apiList], // 必填,需要使用的 JS 接口列表
+        })
+        wx.ready(callback(wx))
+        wx.error(function(error) {
+            throw error
+        })
+    } catch (error) {
+        if (dev === 'development') {
+            console.warn('jssdk init error:' + error.msg || error.message)
+        } else {
+            console.warn('jssdk init error')
+        }
     }
-  }
 }