ytj

config/index.js

@@ -11,8 +11,8 @@ module.exports = {
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {
-      '/app-api': {
-        target: 'http://101.132.102.231:8085',
+      '/h52019-api': {
+        target: 'http://wx.jinchengjiaye.com',
         changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
       },
     },
@@ -55,7 +55,7 @@ module.exports = {
     // Paths
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: './',
 
     /**
      * Source Maps

package.json

@@ -80,7 +80,8 @@
     "webpack": "^3.6.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-server": "^2.9.1",
-    "webpack-merge": "^4.1.0"
+    "webpack-merge": "^4.1.0",
+    "weixin-jsapi": "^1.1.0"
   },
   "engines": {
     "node": ">= 6.0.0",

src/App.vue

@@ -1,13 +1,65 @@
 <template>
-  <div id="app">
+  <div id="app" v-if="showPage">
     <router-view/>
   </div>
 </template>
 
 <script>
 import './assets/css/reset.css'
+import { createNamespacedHelpers } from 'vuex'
+const { mapActions: mapIndexActions } = createNamespacedHelpers('user')
+const { mapState: mapUserState } = createNamespacedHelpers('user')
 export default {
-  name: 'App'
+  name: 'App',
+  data () {
+    return {
+      showPage: false,
+      code: ''
+    }
+  },
+  created () {
+    this.init()
+    this.getAppId().then(() => {
+      console.log(this.appid)
+    })
+  },
+  computed: {
+    ...mapUserState({
+      userInfo: item => item.userInfo,
+      appid: item => item.appid
+    })
+  },
+  methods: {
+    ...mapIndexActions(['getAppId', 'getUser', 'getShare', 'putShare']),
+    async init () {
+      try {
+        await this.getAppId()
+        await this.getCode()
+        await this.getUser({ code: this.code })
+        this.showPage = true
+        this.putShare()
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    getCode () {
+      return new Promise((resolve, reject) => {
+        if (location.search && this.toolClass.UrlSearch(location.search).code) {
+          this.code = this.toolClass.UrlSearch(location.search).code
+          let oldCode = localStorage.getItem('code')
+          if (this.code === oldCode) {
+            localStorage.setItem('code', this.code)
+            this.toolClass.getCode(this.appid)
+          } else {
+            localStorage.setItem('code', this.code)
+            resolve()
+          }
+        } else {
+          this.toolClass.getCode(this.appid)
+        }
+      })
+    }
+  }
 }
 </script>
 

src/store/user/index.js

@@ -1,21 +1,71 @@
 import Ajax from '../../util/ajax'
 import api from '../../util/api'
+import wxsdk from '@/util/share'
 
 export default {
   namespaced: true,
   state: {
-    userInfo: null
+    userInfo: null,
+    appid: null,
+    shareNum: 0
   },
   mutations: {
+    updateAppId (state, data) {
+      state.appid = data.message.appid
+    },
+    updateUserInfo (state, data) {
+      state.userInfo = data || {}
+    },
+    updateShareNum (state, data) {
+      state.shareNum = data || 0
+    }
   },
   actions: {
-    getUserInfo (context, payload) { // 获取手机验证码
+    getAppId (context) {
+      return new Promise((resolve, reject) => {
+        Ajax({
+          ...api.getAppId
+        }).then(res => {
+          context.commit('updateAppId', res)
+          resolve(res)
+        }).catch((res) => {
+          reject(res)
+        })
+      })
+    },
+    getUser (context, payload) {
+      return new Promise((resolve, reject) => {
+        wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]), code: payload.code }, {
+          title: '2019，这些我都想要！ ',
+          desc: '立下Flag，打开你的新年心愿清单',
+          link: `${window.location.origin}${window.location.pathname}#/home`,
+          thu_image: `https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/share_20181229165703.jpg?x-oss-process=style/wxicon`
+        }).then((res) => {
+          context.commit('updateUserInfo', res)
+          resolve(res)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
+    getShare (context) {
+      return new Promise((resolve, reject) => {
+        Ajax({
+          ...api.getShare
+        }).then(res => {
+          context.commit('updateShareNum', res)
+          resolve(res)
+        }).catch((res) => {
+          reject(res)
+        })
+      })
+    },
+    putShare (context) {
+      console.log(context)
       return new Promise((resolve, reject) => {
-        Ajax(api.user.getUserInfo.url, {
-          method: api.user.getUserInfo.method,
-          token: payload
+        Ajax({
+          ...api.putShare
         }).then(res => {
-          console.log(JSON.stringify(res))
           resolve(res)
         }).catch((res) => {
           reject(res)

src/util/ajax.js

@@ -1,5 +1,17 @@
 import axios from 'axios'
 import qs from 'qs'
+import { Toast } from 'vant'
+
+const token = function (headers) {
+  let JWT = ''
+  if (headers) {
+    localStorage.setItem('JWT', headers.authorization)
+    JWT = headers.authorization
+  }
+  const token = JWT ? JWT : localStorage.getItem('JWT') // eslint-disable-line
+
+  return !token ? '' : token
+}
 
 const Axios = axios.create({
   timeout: 60000,
@@ -7,17 +19,21 @@ const Axios = axios.create({
   withCredentials: true,
   queryData: {},
   urlData: {},
+  headerData: '',
   headers: {
-    'Content-Type': 'application/json',
-    'X-Auth-Token': ''
+    'Content-Type': 'multipart/form-data',
+    'authorization': token()
   }
 })
 
 Axios.interceptors.request.use((config) => {
-  let aName = 'X-Auth-Token'
-  config.headers[aName] = config.token || ''
+  config.headers.authorization = token()
+  config.headers['Content-Type'] = config.headerData ? config.headerData : 'multipart/form-data'
+  // config.urlData = { ...config.urlData,  }
+  // 处理请求data,若为get请求，拼到url后面，若为post请求，直接添加到body中
   let urlData = qs.stringify(config.urlData)
   let queryData = qs.stringify(config.queryData)
+  // 判断是通过斜杠传参
   if (config.url.indexOf(':') > -1) {
     if (typeof config.urlData === 'object') {
       config.url = replaceURLParams(config.url, config.urlData)
@@ -28,7 +44,22 @@ Axios.interceptors.request.use((config) => {
   if (queryData) {
     config.url += '?' + queryData
   }
-  return config
+  if (config.headerData) {
+    return config
+  } else {
+    let fm = new FormData()
+    for (let k in config.data) {
+      if (Array.isArray(config.data[k])) {
+        config.data[k].forEach((v) => {
+          fm.append(k, v)
+        })
+      } else {
+        fm.append(k, config.data[k])
+      }
+    }
+    config.data = fm
+    return config
+  }
 }, (error) => {
   console.log(error)
 })
@@ -36,7 +67,20 @@ Axios.interceptors.request.use((config) => {
 const ajax = (...args) => {
   return new Promise((resolve, reject) => {
     Axios(...args).then(({ data, headers }) => {
-      resolve(data)
+      if (headers.authorization) {
+        token(headers)
+      }
+      const { code, message } = data
+      if (code === 200) {
+        resolve(data)
+      } else {
+        Toast.fail({
+          duration: 2000, // 持续展示 toast
+          forbidClick: true, // 禁用背景点击
+          message: message
+        })
+        reject(message)
+      }
     }).catch(reject)
   })
 }

src/util/api.js

@@ -1,10 +1,22 @@
 
+const baseurl = '/h52019-api'
+
 const $api = {
-  user: {
-    getUserInfo: { // 获取用户信息
-      method: 'get',
-      url: `/app-api/user/info`
-    }
+  getAppId: { // 获取appid
+    method: 'get',
+    url: `${baseurl}/appid`
+  },
+  getUser: { // 获取用户信息
+    method: 'get',
+    url: `${baseurl}/user`
+  },
+  getShare: { // 获取分享总数
+    method: 'get',
+    url: `${baseurl}/appid`
+  },
+  putShare: { // 分享成功
+    method: 'put',
+    url: `${baseurl}/appid`
   }
 }
 

src/util/share.js

@@ -0,0 +1,83 @@
+import Ajax from './ajax'
+import api from './api'
+import wx from 'weixin-jsapi'
+
+function wxsdk (params, config) {
+  // const wx = require('weixin-js-sdk')
+  console.log(config)
+  const shareData = {
+    title: config.title, // 分享标题
+    desc: config.desc, // 分享标题
+    link: config.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+    imgUrl: config.thu_image // 分享图标
+  }
+  // 初始化
+  return new Promise(function (resolve, reject) {
+    Ajax({
+      ...api.getUser,
+      queryData: {
+        ...params
+      }
+    }).then(result => {
+      console.log(result)
+      let time = parseInt(result.timestamp)
+      wx.config({
+        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+        appId: result.appId, // 必填，公众号的唯一标识
+        timestamp: time, // 必填，生成签名的时间戳
+        nonceStr: result.noncestr, // 必填，生成签名的随机串
+        signature: result.signature, // 必填，签名，见附录1
+        jsApiList: [
+          'onMenuShareTimeline',
+          'onMenuShareAppMessage',
+          'onMenuShareQQ',
+          'onMenuShareWeibo',
+          'onMenuShareQZone',
+          'openLocation',
+          'getLocation'
+        ]
+      })
+      wx.ready(function () {
+        wx.onMenuShareTimeline(shareData)
+        wx.onMenuShareAppMessage(shareData)
+        resolve(wx)
+      })
+
+      wx.error(function (err) {
+        reject(err)
+      })
+    }).catch((err) => {
+      reject(err)
+    })
+
+    // axios.post(api.share.share.url + '?url=' + params.url)
+    //   .then(function (res) {
+    //     let result = JSON.parse(res.data)
+    //     wx.config({
+    //       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+    //       appId: result.appId, // 必填，公众号的唯一标识
+    //       timestamp: result.timestamp, // 必填，生成签名的时间戳
+    //       nonceStr: result.noncestr, // 必填，生成签名的随机串
+    //       signature: result.signature, // 必填，签名，见附录1
+    //       jsApiList: [
+    //         'onMenuShareTimeline',
+    //         'onMenuShareAppMessage',
+    //         'onMenuShareQQ',
+    //         'onMenuShareWeibo',
+    //         'onMenuShareQZone',
+    //         'openLocation'
+    //       ]
+    //     })
+    //     wx.ready(function () {
+    //       wx.onMenuShareTimeline(shareData)
+    //       wx.onMenuShareAppMessage(shareData)
+    //       // resolve()
+    //     })
+    //   })
+    //   .catch(function (error) {
+    //     console.log(error)
+    //   })
+  })
+}
+
+export default wxsdk

src/util/util.js

@@ -28,68 +28,22 @@ const toolClass = {
       return ''
     }
   },
-  JsBridge: { // IOS/Android原生交互
-    init: function (callback) { // 初始化
-      var u = navigator.userAgent
-      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
-      if (!isiOS) {
-        if (window.WebViewJavascriptBridge) {
-          callback(WebViewJavascriptBridge)
-        } else {
-          document.addEventListener(
-            'WebViewJavascriptBridgeReady',
-            function () {
-              callback(WebViewJavascriptBridge)
-            },
-            false
-          )
-        }
-      } else {
-        if (window.WebViewJavascriptBridge) return callback(WebViewJavascriptBridge)
-        if (window.WVJBCallbacks) return window.WVJBCallbacks.push(callback)
-        window.WVJBCallbacks = [callback]
-        var WVJBIframe = document.createElement('iframe')
-        WVJBIframe.style.display = 'none'
-        WVJBIframe.src = 'https://__bridge_loaded__'
-        document.documentElement.appendChild(WVJBIframe)
-        setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
-      }
-    },
-    first: function () { // 建立第一次链接
-      var u = navigator.userAgent
-      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
-      if (!isiOS) {
-        var _this = this
-        _this.init(function (bridge) {
-          bridge.init(function (message, responseCallback) {
-            responseCallback(data)
-          })
-        })
+  getCode: (appid) => {
+    const refer = window.encodeURIComponent(window.location.href.replace(/code=[^?&#/=]+/, '').replace(/state=[^?&=#/]+/, '').replace(/\?\&+/, '?'))
+    let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${refer}&response_type=code&scope=snsapi_userinfo&state=12313#wechat_redirect`
+    window.location.href = url
+  },
+  UrlSearch: (urls) => {
+    let url = urls // 获取url中"?"符后的字串
+    let theRequest = {}
+    if (url.indexOf('?') !== -1) {
+      let str = url.substr(1)
+      let strs = str.split('&')
+      for (var i = 0; i < strs.length; i++) {
+        theRequest[strs[i].split('=')[0]] = unescape(strs[i].split('=')[1])
       }
-    },
-    registerHandler: function (name, fun) { // app通知h5方法
-      var _this = this
-      _this.init(function (bridge) {
-        bridge.registerHandler(name, fun)
-      })
-    },
-    callHandler: function (name, data, fun) { // h5通知app方法
-      var _this = this
-      _this.init(function (bridge) {
-        bridge.callHandler(name, data, fun)
-      })
     }
-  },
-  returnDoubleNum (num) { // 转化双位数
-    return num > 9 ? num : ('0' + num)
-  },
-  checkPhoneNum (num) { // 校验手机号
-    var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
-    return !!myreg.test(num)
-  },
-  checkEmail (num) { // 校验邮箱
-    var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
-    return !!myreg.test(num)
+    return theRequest
   }
 }