分享落地页：打开微信小程序

htmldev/cps/src/api/request.js

@@ -55,7 +55,7 @@ request.interceptors.request.use(request => {
 
   // 因为微信开发者工具重复授权，本地开发时写死
   if (/^(0|192|10|localhost)/.test(domain)) {
-    request.headers.wechatToken = 'af072e53ded8ea6144ea2fc468dd6aeb'
+    request.headers.wechatToken = '9ab28e0d6212ae6da60d7034cbc4fee2'
   } else {
     request.headers.wechatToken = getCookieValue('fanbutingwechatToken')
   }

htmldev/cps/src/utils/index.js

@@ -91,3 +91,24 @@ export function formatArray (arr) {
 
   return result
 }
+
+/**
+ * 判断微信是否支持：微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上
+ * @returns {boolean}
+ */
+export function isSupportJumpWXmini () {
+  const wechat = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i)
+  let result = false
+  if (wechat) {
+    const judgewechat = wechat[1].split('.')
+
+    if (judgewechat[0] >= 7) {
+      if (judgewechat[1] >= 0) {
+        if (judgewechat[2] >= 12) {
+          result = true
+        }
+      }
+    }
+  }
+  return result
+}

htmldev/cps/src/views/common/openWxMiniProgram/api/index.js

@@ -0,0 +1,11 @@
+import request from '@/api/request'
+
+/**
+ * 获取返利链接接口
+ * @param val
+ */
+export const getJumpConfig = (val) => request({
+  method: 'GET',
+  url: `/api/transfer/${val}`,
+  showLoading: true
+})

htmldev/cps/src/views/common/openWxMiniProgram/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <van-popup
+    class="fbt-van-popup"
+    v-model="showFlag"
+    :lock-scroll="true"
+    :close-on-click-overlay="false">
+    <p>打开小程序</p>
+    <div class="btns">
+      <a
+        href="javascript:;"
+        @click="funJumpIndex">取消</a>
+      <div>
+        <a
+          href="javascript:;"
+          @click="funJumpIndex">允许</a>
+        <wx-open-launch-weapp
+          ref="launchBtn"
+          :username="accountId"
+          :path="appPath"
+          style="position: absolute;left:0;top:0;z-index:1;width: 100%;height: 100%;"
+          @error="errorHandle">
+          <script type="text/wxtag-template">
+            <style>
+              .jump-btn {
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: 100%;
+                height: 100%;
+                line-height: 100%;
+                text-align: center;
+                font-size: 12px;
+              }
+            </style>
+            <div class="jump-btn">打开小程序</div>
+          </script>
+        </wx-open-launch-weapp>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+import { Toast, Popup, Dialog } from 'vant'
+import { getJumpConfig } from './api'
+import { isSupportJumpWXmini } from '../../../utils'
+
+export default {
+  name: 'index',
+  components: {
+    'van-popup': Popup
+  },
+  props: {
+    redirectUrl: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      showFlag: false,
+      accountId: '',
+      appPath: '',
+      toast: null
+    }
+  },
+  methods: {
+    init () {
+      this.toast = Toast.loading({
+        message: '加载中...',
+        forbidClick: true,
+        duration: 0
+      })
+      this.handleJump()
+    },
+    funJumpIndex () {
+      const { name } = this.$route
+      this.showFlag = false
+      if (name === 'MarketingSave') {
+        return
+      }
+      this.$nextTick(() => {
+        this.$router.push({ name: 'MarketingSave' })
+      })
+    },
+    async handleJump () {
+      const linkUrl = this.redirectUrl.split('api/transfer/')
+      try {
+        const { status, data, msg } = await getJumpConfig(linkUrl[1])
+        this.toast.clear()
+        if (status) {
+          // type 类型：1-h5 2-小程序
+          const { type, url } = data
+          this.accountId = data.app_id
+          this.appPath = data.page_path
+          if (type === 2 && isSupportJumpWXmini()) {
+            this.showFlag = true
+          } else {
+            top.location.href = url
+          }
+        } else {
+          Toast(msg)
+        }
+      } catch (e) {
+        this.toast.clear()
+      }
+    },
+    errorHandle (err) {
+      Dialog.alert({
+        message: JSON.stringify(err)
+      }).then(() => {
+        // on close
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fbt-van-popup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 273px;
+  background: #fff;
+  border-radius: 5px;
+
+  p, a {
+    line-height: 20px;
+    font-size: 14px;
+  }
+
+  p {
+    font-weight: bold;
+    padding: 23px 0;
+    color: #222;
+  }
+
+  a {
+    padding: 13px 0;
+    text-align: center;
+  }
+
+  .btns {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    border-top: 1px solid #F3F3F3; /*no*/
+
+    & > a {
+      flex: 1;
+      color: #999999;
+    }
+
+    & > div {
+      position: relative;
+      left: 0;
+      top: 0;
+      flex: 1;
+
+      &:before {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        height: 100%;
+        content: '';
+        border-left: 1px solid #F3F3F3;
+      }
+
+      a {
+        display: block;
+        width: 100%;
+        font-weight: bold;
+        color: #222;
+      }
+    }
+  }
+}
+</style>

htmldev/cps/src/views/marketing/save/api/index.js

@@ -8,12 +8,3 @@ export const getHomeList = () => request({
   url: '/api/home/list',
   showLoading: true
 })
-
-/**
- * 获取返利链接接口
- * @param val
- */
-export const getJumpConfig = (val) => request({
-  method: 'GET',
-  url: `/api/transfer/${val}`
-})

htmldev/cps/src/views/marketing/save/index.vue

@@ -38,17 +38,22 @@
         </li>
       </ul>
     </div>
+    <OpenWxMiniProgram
+      :redirectUrl="redirectUrl"
+      ref="fbtOpenWxMiniProgram"/>
   </div>
 </template>
 
 <script>
-import { Loading, Toast } from 'vant'
+import OpenWxMiniProgram from '../../common/openWxMiniProgram'
+import { Loading } from 'vant'
 import BScroll from 'better-scroll'
-import { getHomeList, getJumpConfig } from './api'
+import { getHomeList } from './api'
 
 export default {
   name: 'index',
   components: {
+    OpenWxMiniProgram,
     'van-loading': Loading
   },
   data () {
@@ -56,13 +61,15 @@ export default {
       isRefresh: false, // 是否下拉刷新
       shopsScroll: null,
       shops: [],
-      booLock: false
+      booLock: false,
+      redirectUrl: ''
     }
   },
   activated () {
     if (!this.$route.meta.isUseCache) {
       this.isRefresh = false
       this.booLock = false
+      this.redirectUrl = ''
       this.fetchData()
     } else {
       if (this.shopsScroll) {
@@ -91,44 +98,10 @@ export default {
       }
     },
     async handleJump (shop) {
-      const linkUrl = shop.link_url && shop.link_url.split('api/transfer/')
-      if (!Array.isArray(linkUrl) && linkUrl.length > 1) {
-        top.location.href = shop.link_url
-        return
-      }
-      if (this.booLock) {
-        return
-      }
-      this.booLock = true
-      try {
-        const { status, data, msg } = await getJumpConfig(linkUrl[1])
-        this.booLock = false
-        if (status) {
-          const { url } = data
-          top.location.href = url
-        } else {
-          Toast(msg)
-        }
-      } catch (e) {
-        this.booLock = false
-      }
-    },
-    // 判断微信是否支持：微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上
-    isSupportJumpWXmini () {
-      const wechat = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i)
-      let result = false
-      if (wechat) {
-        const judgewechat = wechat[1].split('.')
-
-        if (judgewechat[0] >= 7) {
-          if (judgewechat[1] >= 0) {
-            if (judgewechat[2] >= 12) {
-              result = true
-            }
-          }
-        }
-      }
-      return result
+      this.redirectUrl = shop.link_url
+      this.$nextTick(() => {
+        this.$refs.fbtOpenWxMiniProgram.init()
+      })
     },
     onRefresh () {
       this.isRefresh = true

htmldev/cps/src/views/shareMiddle/index.vue

@@ -1,123 +1,32 @@
 <template>
-  <div>
-    <van-popup
-      v-model="showFlag"
-      :lock-scroll="false"
-      position="bottom"
-      :close-on-click-overlay="false"
-      @click-overlay="showFlag = false"
-      style="height: 40%;">
-      <wx-open-launch-weapp
-        ref="launchBtn"
-        :username="accountId"
-        :path="appPath"
-        style="position: absolute;left:0;top:0;width: 100%;height: 100%;"
-        @error="errorHandle">
-        <script type="text/wxtag-template">
-          <style>
-            .jump-btn {
-              position: absolute;
-              left: 0;
-              top: 0;
-              width: 100%;
-              height: 100%;
-              line-height: 100%;
-              text-align: center;
-              font-size: 12px;
-            }
-          </style>
-          <div class="jump-btn">打开小程序</div>
-        </script>
-      </wx-open-launch-weapp>
-    </van-popup>
-  </div>
+  <OpenWxMiniProgram
+    :redirectUrl="redirectUrl"
+    ref="fbtOpenWxMiniProgram"/>
 </template>
 
 <script>
-import { Toast, Popup, Dialog } from 'vant'
-import { getJumpConfig } from '../marketing/save/api'
-import { platform } from '../../utils/platform'
+import OpenWxMiniProgram from '../common/openWxMiniProgram'
+import { Toast } from 'vant'
 
 export default {
   name: 'index',
   components: {
-    'van-popup': Popup
+    OpenWxMiniProgram
   },
   data () {
     return {
-      showFlag: false,
-      accountId: 'gh_72a4eb2d4324',
-      appPath: '',
-      toast: null
+      redirectUrl: ''
     }
   },
-  created () {
-    this.toast = Toast.loading({
-      message: '加载中...',
-      forbidClick: true,
-      duration: 0
-    })
+  mounted () {
     const { redirectUrl } = this.$route.query
     if (redirectUrl && /http/.test(decodeURIComponent(redirectUrl))) {
-      this.handleJump({
-        link_url: decodeURIComponent(redirectUrl)
+      this.redirectUrl = decodeURIComponent(redirectUrl)
+      this.$nextTick(() => {
+        this.$refs.fbtOpenWxMiniProgram.init()
       })
-    }
-  },
-  methods: {
-    async handleJump (shop) {
-      const linkUrl = shop.link_url && shop.link_url.split('api/transfer/')
-      if (!Array.isArray(linkUrl) && linkUrl.length > 1) {
-        top.location.href = shop.link_url
-        return
-      }
-      try {
-        const { status, data, msg } = await getJumpConfig(linkUrl[1])
-        if (status) {
-          // type 类型：1-h5 2-小程序
-          const { type, url } = data
-          console.log(type, url)
-          if (type === 2 && this.isSupportJumpWXmini()) {
-            this.toast.clear()
-            this.showFlag = true
-          } else {
-            this.toast.clear()
-            this.showFlag = true
-            // top.location.href = url
-          }
-          if (platform.isWeixin) {
-            this.$nextTick(() => {
-              this.$refs.launchBtn.click()
-            })
-          }
-        } else {
-          Toast(msg)
-        }
-      } catch (e) {}
-    },
-    errorHandle (err) {
-      Dialog.alert({
-        message: JSON.stringify(err)
-      }).then(() => {
-        // on close
-      })
-    },
-    // 判断微信是否支持：微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上
-    isSupportJumpWXmini () {
-      const wechat = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i)
-      let result = false
-      if (wechat) {
-        const judgewechat = wechat[1].split('.')
-
-        if (judgewechat[0] >= 7) {
-          if (judgewechat[1] >= 0) {
-            if (judgewechat[2] >= 12) {
-              result = true
-            }
-          }
-        }
-      }
-      return result
+    } else {
+      Toast('链接出错啦')
     }
   }
 }