添加微信分享

scene/package-lock.json

@@ -10,17 +10,21 @@
       "dependencies": {
         "axios": "^0.27.2",
         "core-js": "^3.6.5",
+        "crypto-js": "^4.2.0",
         "element-ui": "^2.15.6",
         "html2canvas": "^1.4.1",
         "install": "^0.13.0",
         "npm": "^8.10.0",
+        "string-random": "^0.1.3",
         "swiper": "^5.3.8",
         "v-viewer": "^1.6.4",
         "vue": "^2.6.11",
         "vue-awesome-swiper": "^4.1.1",
-        "vue-router": "^3.2.0"
+        "vue-router": "^3.2.0",
+        "weixin-js-sdk": "^1.6.5"
       },
       "devDependencies": {
+        "@types/crypto-js": "^4.2.2",
         "@vue/cli-plugin-babel": "~4.5.0",
         "@vue/cli-plugin-eslint": "~4.5.0",
         "@vue/cli-plugin-router": "~4.5.0",
@@ -1832,6 +1836,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/crypto-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@types/crypto-js/-/crypto-js-4.2.2.tgz",
+      "integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==",
+      "dev": true
+    },
     "node_modules/@types/express": {
       "version": "4.17.13",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
@@ -4855,6 +4865,11 @@
         "node": "*"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
+    },
     "node_modules/css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -14852,6 +14867,11 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/string-random": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmmirror.com/string-random/-/string-random-0.1.3.tgz",
+      "integrity": "sha512-g+UsIwzKhNi+9/+Q3Q7hP8R4HkQxiIkQlttnxw6GRdk9pnnkGIv53C6H8dvh8wxAVDhkqpnWeauaPXS1b2sBJg=="
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -17018,6 +17038,11 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/weixin-js-sdk": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmmirror.com/weixin-js-sdk/-/weixin-js-sdk-1.6.5.tgz",
+      "integrity": "sha512-Gph1WAWB2YN/lMOFB/ymb+hbU/wYazzJgu6PMMktCy9cSCeW5wA6Zwt0dpahJbJ+RJEwtTv2x9iIu0U4enuVSQ=="
+    },
     "node_modules/which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@@ -18562,6 +18587,12 @@
         "@types/node": "*"
       }
     },
+    "@types/crypto-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@types/crypto-js/-/crypto-js-4.2.2.tgz",
+      "integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==",
+      "dev": true
+    },
     "@types/express": {
       "version": "4.17.13",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
@@ -21152,6 +21183,11 @@
         "randomfill": "^1.0.3"
       }
     },
+    "crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -29140,6 +29176,11 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "string-random": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmmirror.com/string-random/-/string-random-0.1.3.tgz",
+      "integrity": "sha512-g+UsIwzKhNi+9/+Q3Q7hP8R4HkQxiIkQlttnxw6GRdk9pnnkGIv53C6H8dvh8wxAVDhkqpnWeauaPXS1b2sBJg=="
+    },
     "string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -30897,6 +30938,11 @@
       "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
+    "weixin-js-sdk": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmmirror.com/weixin-js-sdk/-/weixin-js-sdk-1.6.5.tgz",
+      "integrity": "sha512-Gph1WAWB2YN/lMOFB/ymb+hbU/wYazzJgu6PMMktCy9cSCeW5wA6Zwt0dpahJbJ+RJEwtTv2x9iIu0U4enuVSQ=="
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",

scene/package.json

@@ -11,18 +11,22 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
-    "html2canvas": "^1.4.1",
     "core-js": "^3.6.5",
+    "crypto-js": "^4.2.0",
     "element-ui": "^2.15.6",
+    "html2canvas": "^1.4.1",
     "install": "^0.13.0",
     "npm": "^8.10.0",
+    "string-random": "^0.1.3",
     "swiper": "^5.3.8",
     "v-viewer": "^1.6.4",
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^4.1.1",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "weixin-js-sdk": "^1.6.5"
   },
   "devDependencies": {
+    "@types/crypto-js": "^4.2.2",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
@@ -34,4 +38,4 @@
     "less-loader": "^5.0.0",
     "vue-template-compiler": "^2.6.11"
   }
-}
+}

scene/public/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport"
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <title>粤韵匠心 艺铸华章 —庆祝中华人民共和国成立75周年广东工艺美术大展</title>
+    <title>粤韵匠心  艺铸华章——庆祝中华人民共和国成立75周年广东工艺美术大展</title>
     <meta name="description" content="四维时代">
     <meta property="og:title" content="四维时代">
     <meta property="og:description" content="四维时代">
@@ -14,6 +14,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="./favicon.ico" class="keep">
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/oldVer/main0.css" />
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/main.css?v=2.25" />
+    <script src="./wxData.js"></script>
     <!-- <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/CAD/cad.css?v=2.25"/> -->
     <!-- <style>
         #cad {

scene/public/wxData.js

@@ -0,0 +1,11 @@
+// 发送接口的域名或端口
+const WX_BASE_URL ='xxxxxxxxxxxxxx'
+
+// 微信分享的标题
+const WX_TITLE='粤韵匠心 艺铸华章——庆祝中华人民共和国成立75周年广东工艺美术大展'
+
+// 微信分享的描述
+const WX_DESC=''
+
+// 微信分享的图片地址（同一服务器域名下 并且 https）
+const WX_IMGURL='https://houseoss.4dkankan.com/project/yueYun/wxSha.jpg'

scene/src/App.vue

@@ -13,8 +13,21 @@
 <script>
 import '@/assets/style/reset.less'
 import '@/assets/style/public.less'
+
+import { wxShareInit } from "./utils/shareJs";
+
 export default {
-    
+  created() {
+    try {
+    wxShareInit();
+    // token 有效期为 7200s
+    window.setInterval(() => {
+      wxShareInit();
+    }, 719000);
+  } catch (error) {
+    console.error(error);
+  }
+},
 }
 </script>
 <style lang="less">

scene/src/utils/shareJs.js

@@ -0,0 +1,140 @@
+// npm i crypto-js string-random weixin-js-sdk
+// npm i --save-dev @types/crypto-js
+import crypto from "crypto-js";
+import axios from "axios";
+import random from "string-random";
+
+
+import wx from "weixin-js-sdk";
+
+const WX_URL = window.location.href.split("#")[0];
+
+// 调试使用
+// const APP_ID = "wx5322ebef16888678";
+// const APP_SECRET = "5e7139c342b1621f88aaf9bf6e75a652";
+
+// 央视网
+const APP_ID = "wx2805e0c14291bbd7";
+
+const generatorSha1 = (str) => {
+  return crypto.SHA1(str).toString(crypto.enc.Hex);
+};
+/**
+ * 获签名信息
+ */
+const getSignature = async () => {
+  const getticketResult = await axios.get(`wxMini/getTicket`, {
+    // 从 public 里面的 wxData里面拿
+    baseURL: WX_BASE_URL,
+  });
+  const jsapi_ticket = getticketResult.data.data.ticket;
+  const nonceStr = random(16); // 'Wm3WZYTPz0wzccnW'
+  const timestamp = new Date().getTime();
+  const str = `jsapi_ticket=${jsapi_ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${WX_URL}`;
+  const signature = generatorSha1(str);
+  const result = {
+    nonceStr,
+    jsapi_ticket,
+    timestamp,
+    signature,
+    appId: APP_ID,
+  };
+  return result;
+};
+
+/**
+ * 通过config接口注入权限验证配置
+ * 请在前端页面调用
+ * @param {Object} params
+ */
+const wxConfig = async (params) => {
+  const { appId, timestamp, nonceStr, signature, jsApiList, onReady, onError } =
+    params;
+  wx.config({
+    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+    appId, // 必填，公众号的唯一标识
+    timestamp, // 必填，生成签名的时间戳
+    nonceStr, // 必填，生成签名的随机串
+    signature, // 必填，签名
+    jsApiList: jsApiList, // 必填，需要使用的JS接口列表
+  });
+  // 通过ready接口处理成功验证
+  wx.ready(function () {
+    onReady && onReady();
+  });
+
+  // 通过error接口处理失败验证
+  wx.error(function (error) {
+    onError && onError(error);
+  });
+};
+
+const shareApp = (params) => {
+  const { title, desc, link, imgUrl } = params;
+  // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
+  wx.updateAppMessageShareData({
+    title, // 分享标题
+    desc, // 分享描述
+    link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+    imgUrl, // 分享图标
+    success: function () {
+      // 设置成功
+    },
+  });
+
+  // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
+  wx.updateTimelineShareData({
+    title, // 分享标题
+    link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+    imgUrl, // 分享图标
+    success: function () {
+      // 设置成功
+    },
+  });
+
+  // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
+  wx.onMenuShareWeibo({
+    title, // 分享标题
+    desc, // 分享描述
+    link, // 分享链接
+    imgUrl, // 分享图标
+    success: function () {
+      // 用户确认分享后执行的回调函数
+    },
+    cancel: function () {
+      // 用户取消分享后执行的回调函数
+    },
+  });
+};
+
+/**
+ * 微信Api初始化
+ * 请在需要分享的前端页面调用
+ */
+export const wxShareInit = async () => {
+  const data = await getSignature(); // 后端提供的获取签名api，具体实现可以看上面的”获取签名信息参考代码”小节
+  const { appId, timestamp, nonceStr, signature } = data;
+  wxConfig({
+    appId,
+    timestamp,
+    nonceStr,
+    signature,
+    jsApiList: [
+      // 分享需要用到以下几个接口
+      "updateAppMessageShareData", // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
+      "updateTimelineShareData", // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
+      "updateTimelineShareData", // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
+    ],
+    onReady: () => {
+      shareApp({
+        title: WX_TITLE,
+        desc: WX_DESC,
+        link: WX_URL,
+        imgUrl: WX_IMGURL,
+      }); // 分享配置
+    },
+    onError: (error) => {
+      console.log("初始化失败", error);
+    },
+  });
+};