fix(wechat): add wechat share✨ #9

nicejade · Apr 7, 2018 · 8f6f86b · 8f6f86b
1 parent f86c358
commit 8f6f86b
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 9 deletions.
diff --git a/index.ejs b/index.ejs
@@ -43,7 +43,7 @@
   <body>
     <div id="app"></div>
     <!-- built files will be auto injected -->
-    <script  src="<%= webpackConfig.output.publicPath %>static/js/vendor.dll.js?v03-15"></script>
+    <script  src="<%= webpackConfig.output.publicPath %>static/js/vendor.dll.js?v04-06"></script>
     <!--[if lt IE 9]>
       <script async src="<%= webpackConfig.output.publicPath %>static/js/browsermodal.js"></script>
     <![endif]-->

diff --git a/src/helper/apis.js b/src/helper/apis.js
@@ -98,17 +98,23 @@ export default {
     return $ajax.get(requestUrl('getUserInfo'), data)
   },
 
-  crawlLinksInfo (data) {
-    return $ajax.get(requestUrl('crawlLinksInfo'), data)
-  },
-
   updateAvatar (data) {
     return $ajax.post(requestUrl('updateAvatar'), data)
   },
 
   removeUserById (data) {
     return $ajax.post(requestUrl('removeUserById'), data)
   },
+
+  // ---------------------Help-------------------------start
+  crawlLinksInfo (data) {
+    return $ajax.get(requestUrl('crawlLinksInfo'), data)
+  },
+
+  getWechatApiSignature (data) {
+    return $ajax.get(requestUrl('getWechatApiSignature'), data)
+  },
+
   // ---------------------Config-----------------------
   getSysConf (data) {
     return $ajax.get(requestUrl('getSysConf'), data)

diff --git a/src/helper/util.js b/src/helper/util.js
@@ -99,6 +99,35 @@ export default {
     return objURL
   },
 
+  loadScript (url, isAsyncFlag) {
+    return new Promise((resolve, reject) => {
+      var script = document.createElement('script')
+      script.type = 'text/javascript'
+
+      if (script.readyState) {
+        script.onreadystatechange = () => {
+          if (script.readyState === 'loaded' ||
+            script.readyState === 'complete') {
+            script.onreadystatechange = null
+            resolve('success: ' + url)
+          }
+        }
+      } else {
+        script.onload = () => {
+          resolve('success: ' + url)
+        }
+      }
+
+      script.onerror = () => {
+        reject(Error(url + 'load error!'))
+      }
+
+      script.src = url
+      script.async = isAsyncFlag
+      document.body.appendChild(script)
+    })
+  },
+
   queryString (url, query) {
     let str = []
     for (let key in query) {
@@ -134,6 +163,15 @@ export default {
     return pattern.test(str)
   },
 
+  isWechatBrowser () {
+    var ua = window.navigator.userAgent.toLowerCase()
+    if (ua.match(/MicroMessenger/i) === 'micromessenger') {
+      return true
+    } else {
+      return false
+    }
+  },
+
   setCurrentDate (date) {
     Vue.config.currentDate = date
   },

diff --git a/src/mixins/pageMixin.js b/src/mixins/pageMixin.js
@@ -7,6 +7,9 @@ export default {
   computed: {
   },
 
+  created () {
+  },
+
   mounted () {
     this.sendGtagEventTracking()
   },

diff --git a/src/partials/Frame.vue b/src/partials/Frame.vue
@@ -42,6 +42,17 @@ export default {
         this.$getUserInfo()
       }
     }
+
+    this.initWechatShare()
+  },
+
+  mounted () {
+  },
+
+  watch: {
+    $route: function (to, from) {
+      this.initWechatShare()
+    }
   },
 
   methods: {
@@ -51,11 +62,72 @@ export default {
       }
     },
 
-    afterEnter (element) {
-      element.style.height = 'calc(100% - 60px)'
+    initWechatShare () {
+      const params = {
+        url: encodeURIComponent(location.href.split('#')[0])
+      }
+      this.$apis.getWechatApiSignature(params).then(result => {
+        this.initWechatConfig(result)
+      })
     },
 
-    afterLeave (element) {
+    initWechatConfig (result) {
+      const wechatJs = 'https://res.wx.qq.com/open/js/jweixin-1.0.0.js'
+      this.$util.loadScript(wechatJs).then(() => {
+        window.wx.config({
+          appId: result.appId,
+          timestamp: result.timestamp,
+          nonceStr: result.nonceStr,
+          signature: result.signature,
+          jsApiList: [
+            'onMenuShareTimeline',
+            'onMenuShareAppMessage'
+          ]
+        })
+
+        window.wx.ready(() => {
+          this.setWechatShare()
+        })
+
+        window.wx.error((res) => {
+        })
+      })
+    },
+
+    setWechatShare () {
+      if (!window.wx) return
+
+      const shareTitle = window.document.title
+      const shareLink = window.document.location.href
+      const shareImgUrl = 'https://nicelinks.site/static/img/favicons/android-chrome-192x192.png'
+      window.wx.onMenuShareTimeline({
+        title: shareTitle,
+        link: shareLink,
+        imgUrl: shareImgUrl,
+        success: function () {
+        },
+        cancel: function () {
+        },
+        fail: function (message) {
+          window.alert(`Error: ${message}`)
+        }
+      })
+
+      window.wx.onMenuShareAppMessage({
+        title: shareTitle,
+        desc: this.$t('description'),
+        link: shareLink,
+        imgUrl: shareImgUrl,
+        type: 'link',
+        dataUrl: '',
+        success: function () {
+        },
+        cancel: function () {
+        },
+        fail: function (message) {
+          window.alert(`Error: ${message}`)
+        }
+      })
     }
   }
 }

diff --git a/src/store/index.js b/src/store/index.js
@@ -25,7 +25,13 @@ const state = {
     sortTarget: 'likes'
   },
   isLoadMore: true,
-  lastPathUrl: ''
+  lastPathUrl: '',
+  wechatApiSignature: {
+    appid: '',
+    nonceStr: '',
+    signature: '',
+    timestamp: ''
+  }
 }
 
 const debug = process.env.NODE_ENV !== 'production'

diff --git a/src/store/mutations.js b/src/store/mutations.js
@@ -32,5 +32,9 @@ export default {
   $vuexSaveLastPathUrl (state) {
     const currentHref = document.location.href
     state.lastPathUrl = currentHref
+  },
+
+  $setWechatApiSignature (state, result) {
+    Object.assign(state.wechatApiSignature, result)
   }
 }