feat(share): 分享功能开发

app/web/api/editor.api.ts

@@ -4,5 +4,14 @@ import config from '../config';
 export default {
   getPageById(params) {
     return http.get(`${config.apiHost}/editor/get/${params.pageId}`);
+  },
+  getMpSchema(params) {
+    return http.post(`${config.kdspHost}/api/kdsp/ka/info/getShareMiniUrl`);
+  },
+  getWxConfig(url = window.location.href.split('#')[0]) {
+    return http.post(`${config.kdspHost}/api/kdsp/wx/mp/getJsapiSign`, {
+      url,
+      appId: 'wx2f44c7fe7b08458d'
+    });
   }
 };
\ No newline at end of file

app/web/config/dev.config.ts

@@ -3,6 +3,7 @@ const protocol = EASY_ENV_IS_BROWSER ? window.location.protocol : 'https';
 
 const hostMap = {
   apiHost: `${protocol}//quantum-blocks-vcc2.liangkebang.net`,
+  kdspHost: `${protocol}//talos-test1.liangkebang.net`,
   shenceUrl: `${protocol}//bn.xyqb.com/sa?project=default`,
   test: true
 };

app/web/config/prod.config.ts

 const protocol = EASY_ENV_IS_BROWSER ? window.location.protocol : 'https';
 
 export default {
-  apiHost: `https://quantum-blocks.q-gp.com`,
+  apiHost: `${protocol}//quantum-blocks.q-gp.com`,
+  kdspHost: `${protocol}//talos.q-gp.com`,
   shenceUrl: `${protocol}//bn.xyqb.com/sa?project=production`,
-  // opapiHost: `${protocol}//opapi.q-gp.com`,
   test: false
 };

app/web/config/test.config.ts

@@ -3,6 +3,7 @@ const protocol = EASY_ENV_IS_BROWSER ? window.location.protocol : 'https';
 
 const hostMap = {
   apiHost: `${protocol}//quantum-blocks-vcc2.liangkebang.net`,
+  kdspHost: `${protocol}//talos-test1.liangkebang.net`,
   shenceUrl: `${protocol}//bn.xyqb.com/sa?project=default`,
   test: true
 };

app/web/page/activity/component/BackTop/components/weapp.vue

+<template>
+  <wx-open-launch-weapp
+    class="launch-btn"
+    username="gh_a976018bfb9e"
+    :path="jumpUrl"
+    @launch="launch"
+    @error="launchError"
+  >
+    <script type="text/wxtag-template">
+      <style>.btn {height: 96px}</style>
+      <div class="btn">打开小程序</div>
+    </script>
+  </wx-open-launch-weapp>
+</template>
+<script>
+import wx from "weixin-js-sdk";
+import api from '@/api/editor.api';
+export default {
+  name: "Weapp",
+  props: {
+    jumpUrl: String
+  },
+  data() {
+    return {};
+  },
+  created() {
+    this.wxConfig();
+  },
+  methods: {
+    async wxConfig() {
+      const [res] = await api.getWxConfig();
+      wx.config({
+        debug: false,
+        jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"], // 必填，需要使用的JS接口列表
+        openTagList: ["wx-open-launch-weapp"],
+        ...res
+      });
+    },
+    launch() {
+      console.log("launch");
+    },
+    launchError() {
+      console.log("launchError");
+    }
+  }
+};
+</script>
+<style lang="less">
+.launch-btn {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  opacity: 0;
+  z-index: 100;
+  left: 0;
+}
+</style>

app/web/page/activity/component/BackTop/index.vue

@@ -11,13 +11,18 @@
       </div>
       <template #reference>提示</template>
     </cr-popover>
+    <div v-if="showShareOverlay" class="share-overlay" @click="onShareOverlayClick">
+      <we-app :jump-url="mpLink" v-if="isWechat" />
+    </div>
   </div>
 
 </template>
 <script>
 import Bridge from '@qg/js-bridge';
 import { mapGetters } from 'vuex';
-import { isApp, isWxMp } from '@/service/utils.service';
+import { isApp, isWxMp, isWechat } from '@/service/utils.service';
+import api from '@/api/editor.api';
+import WeApp from './components/weapp.vue';
 const SHARE_CONFIG = {
   name: 'share',
   txt: '',
@@ -26,6 +31,9 @@ const SHARE_CONFIG = {
 };
 export default {
   name: 'BackTop',
+  components: {
+    WeApp
+  },
   props: {
     showBackTop: Boolean
   },
@@ -48,16 +56,41 @@ export default {
       tipTimer: null,
       jsBridge: null,
       wx: null,
+      mpSchema: '',
+      mpLink: '',
+      showShareOverlay: isWechat || isH5Normal,
+      isWechat
     };
   },
+  computed: {
+    appSchema() {
+      return `xyqb://openhttp?jumpurl=${this.mpLink}`;
+    }
+  },
   created() {
     if (!EASY_ENV_IS_NODE) {
       this.renderTpl = true;
       this.jsBridge = new Bridge();
       this.wx = require('weixin-js-sdk');
+      this.mpLink = `${window.location.origin}${window.location.pathname}?vccToken={token}&vccChannel={registerFrom}`;
+      this.getMpSchema();
     }
   },
   methods: {
+    async getMpSchema() {
+      if (isH5Normal && EASY_ENV_IS_BROWSER) {
+        const [schema] = await api.getMpSchema({
+          miniUrl: 'pages/webview/webview',
+          params: `url=${encodeURIComponent(JSON.stringify(this.mpLink))}`
+        });
+        this.mpSchema = schema.nextUrl;
+      }
+    },
+    onShareOverlayClick() {
+      if (isH5Normal) {
+        window.location.href = this.pageInfo.shareOpenMethod === 1 ? this.mpSchema : this.appSchema;
+      }
+    },
     handleBackTopClick(e) {
       // ! 此处以1.3为准，但需要对齐分享功能
       if (e && e.name === 'share') {
@@ -71,16 +104,17 @@ export default {
     },
     share() {
       if (EASY_ENV_IS_NODE) return;
-      const { coverImage, pageName, pageDescribe } = this.pageInfo;
+      const { coverImage, pageName, pageDescribe, shareCoverImage } = this.pageInfo;
+      const link = `${window.location.origin}${window.location.pathname}?vccToken={token}&vccChannel={registerFrom}`;
       const data = {
         event: "showShareView",
         data: {
-          platform: ["weChat", "timeLine", "QQ", "QQZone", "CopyLink"], //依次分别是微信、朋友圈、QQ好友、QQ空间、复制链接
+          platform: ["weChat",  "CopyLink"],
           shareDic: {
             title: pageName || '羊小咩',
             desc: pageDescribe || '羊小咩',
-            link: window.location.origin + window.location.pathname, // 页面地址
-            imgUrl: coverImage // 图片地址
+            link,
+            imgUrl: shareCoverImage || coverImage // 图片地址
           }
         }
       };
@@ -129,4 +163,12 @@ export default {
     }
   }
 }
+.share-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 8;
+}
 </style>
\ No newline at end of file

app/web/page/activity/view/activity/index.ts

@@ -7,7 +7,7 @@ import GridLayout from '../../component/VueGridLayout/GridLayout.vue';
 import GridItem from '../../component/VueGridLayout/GridItem.vue';
 import TransformStyleMixin from '@/page/mixins/transformStyle.mixin';
 import SaMixin from '@/page/mixins/sa.mixin';
-import { getStyle, debounce, isApp } from '@/service/utils.service';
+import { getStyle, debounce, isApp, isWechat, isH5Normal } from '@/service/utils.service';
 import { EventBus } from '@qg/citrus-ui/src/helper/service/eventBus';
 import { setAppTitleColor } from '@/service/color.service';
 import localStorage from '@/service/localStorage.service';
@@ -34,7 +34,6 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
   targetEle: HTMLElement | null = null;
   loading: boolean = true;
   modfiTabsStyleDebounce = debounce(this.modfiTabsStyle, 300);
-
   get layout() {
     return this.pageData && this.pageData.elements.map(v => v.point) || [];
   }
@@ -83,9 +82,7 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
 
   mounted() {
     this.targetEle = document.querySelector('body');
-    if (EASY_ENV_IS_BROWSER) {
-      this.showBackTop = true;
-    }
+    if (EASY_ENV_IS_BROWSER) { this.showBackTop = true; }
     this.pageVisibilityChange();
     if (EASY_ENV_IS_BROWSER) {
       EventBus.$on('NATIVE_EVENT_LOGIN', json => {

app/web/page/store/modules/activity/state.ts

@@ -45,6 +45,8 @@ export interface PageInfo {
   enable?: number;
   author?: string;
   coverImage?: string;
+  shareCoverImage?: string; // 分享缩略图
+  shareOpenMethod?: string; // 分享后的打开方式
   isTemplate?: number;
   isPublish?: number | boolean;
   appLoginState?: boolean;

app/web/service/utils.service.ts

@@ -139,6 +139,9 @@ export const isIOS = /iphone|ipad|ipod/.test(ua);
 // 判读Android环境
 export const isAndroid = /android/.test(ua);
 
+// 判读非微信浏览器和appwebview和小程序webview
+export const isH5Normal = !isWechat && !isWxMp && !isApp;
+
 // 异常字段
 export const errorQueryValues = ['{token}', '{vccToken}', '{registerFrom}', '{vccChannel}', '{sonVccChannel}', '{h}', '{uuid}', '{}'];