vue hash模式实现微信扫码分享

时间  2020-01-11
标签 vue hash 模式 实现 微信 分享 繁體版
原文   原文链接

需求：微信扫二维码跳转到设定的连接，而后分享到微信朋友，或者朋友圈, 配置分享界面样式

首先，生成跳转连接的二维码

https://segmentfault.com/a/11...（这里具体写了怎么生成二维码）
2.pngvue

下来咱们具体讨论微信分享的具体配置，和遇到的问题。

一、配置微信分享界面

咱们系统中使用的路由跳转，都作了权限控制，配置路由的时候若是没有登陆就会跳转到登陆界面，或者请求接口的时候后台作了token验证，这些都会影响分享界面，因此配置分享界面路由是和login同级别的（即外层），请求接口的时候咱们也配置一下微信分享路由不须要验证token。我本身的配置是这样的ios

router/index.jsvuex

...
{
  path: '/wechat-share',
  name: 'wechat-share',
  component: WechatShare
},
{
  path: '/login',
  name: 'login',
  component: Login
}
...

main.jsnpm

router.beforeEach((to, from, next) => {
  // 若是没有session信息不能跳转
  if (localStorage.getItem('userInfo_admin')) {
    next()
  } else {
    // 若是是登陆界面，或者微信分享界面都不须要验证session
    if (to.path === '/login' || to.path === '/wechat-share') {
      next()
    } else {
      next({
        path: '/login'
      })
    }
  }

请求接口文件，封装http.jsaxios

// 请求拦截器
axios.interceptors.request.use(config => {
  // 若是不是登陆接口，或者微信分享接口，都须要验证token
  if (window.location.hash.indexOf('login') === -1 && window.location.hash.indexOf('wechat-share') === -1) {
    const token = store.state.userInfo.Authorization
    token && (config.headers.Authorization = token)
  }
  return config
}

二、经过接口获取微信配置信息（和后台沟通）

一般接口只须要传递转码的url就能够了，返回咱们须要的配置信息segmentfault

axios.get('接口地址', {params: {url: encodeURIComponent(window.location.href.split('#')[0])}}).then(res => {}).catch(error => {})

注意：这里的url经过window.location.href.split('#')获取‘#’号前面的内容，而后进行编码传递给后台获取内容。这里只是实力，实际项目中能够把获取信息写在vuex actions中api

三、微信分享配置

// 安装wx sdk
npm install weixin-js-sdk --save
// 组件中引入
import wx from 'weixin-js-sdk'
// 在mounted中配置
// appId,timestamp, nonceStr, singature均可以在接口中获得。
wx.config({
    debug: true, // 开启调试模式,调用的全部api的返回值会在客户端alert出来，若要查看传入的参数，能够在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的惟一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，须要使用的JS接口列表
})

wx.ready(function() { //经过ready接口处理成功验证
// config信息验证成功后会执行ready方法
    wx.onMenuShareAppMessage({ // 分享给朋友  ,在config里面填写须要使用的JS接口列表，而后这个方法才能够用 
        title: '这里是标题', // 分享标题
        desc: 'This is a test!', // 分享描述
        link: '连接', // 分享连接
        imgUrl: '图片', // 分享图标
        type: '', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 若是type是music或video，则要提供数据连接，默认为空
        success: function() {
            // 用户确认分享后执行的回调函数
        },
        cancel: function() {
            // 用户取消分享后执行的回调函数
        }
     })
     wx.onMenuShareTimeline({ //分享朋友圈
        title: '标题', // 分享标题
        link: '连接',
        imgUrl: '图片', // 分享图标
        success: function() {
            // 用户确认分享后执行的回调函数
        },
        cancel: function() {
            // 用户取消分享后执行的回调函数
        }
    })
})
wx.error(function(res){//经过error接口处理失败验证
    // config信息验证失败会执行error函数
})

个人配置代码，以及遇到的坑

data () {
    return {
      config: {
        url: encodeURIComponent(this.$store.getters.base_url),
        title: '项目名称',
        desc: '项目描述',
        img: 'https://pic4.zhimg.com/80/v2-9e7354788266d6ceae5a0839e24d9c1a_hd.jpg'
      },
      projectInfo: ''
    }
}
...
// 获取微信配置信息，经过后台接口。
    await this.$store.dispatch('getWechatConfigAction', encodeURIComponent(window.location.href.split('#')[0]))
    // alert(this.projectInfo)
    // // 接口获取界面内容
    // alert(JSON.stringify(this.config, null, 4))
    // alert(JSON.stringify(this.$store.state.wxConfig, null, 4))
    wx.config({
      debug: true,
      appId: this.$store.state.wxConfig.appId,
      timestamp: this.$store.state.wxConfig.timestamp,
      nonceStr: this.$store.state.wxConfig.nonceStr,
      signature: this.$store.state.wxConfig.signature,
      jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
    })
    wx.ready(() => {
      wx.onMenuShareAppMessage({
        title: this.config.title, // 分享标题
        desc: this.config.content, // 分享描述
        link: window.location.href.split('#')[0] + '#' + window.location.href.split('#')[1], // 分享连接
        imgUrl: this.config.imgUrl, // 分享图标
        type: 'link', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 若是type是music或video，则要提供数据连接，默认为空
        success: function () {
          // 用户确认分享后执行的回调函数
          // _hmt.push(['_trackEvent', config.title, "分享给好友", "分享成功"]);
          this.$message({
            type: 'success',
            message: '分享成功'
          })
          // config.success()
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
          // _hmt.push(['_trackEvent', config.title, "分享给好友", "取消分享"]);
          this.$message({
            type: 'success',
            message: '取消分享'
          })
          // config.cancel()
        },
        fail: function (res) {
          this.$message({
            type: 'error',
            message: '分享失败'
          })
          // config.fail()
        }
      })
      wx.onMenuShareTimeline({
        title: this.config.title, // 分享标题
        desc: this.config.content, // 分享描述
        link: window.location.href.split('#')[0] + '#' + window.location.href.split('#')[1], // 分享连接
        imgUrl: this.config.imgUrl, // 分享图标
        type: 'link', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 若是type是music或video，则要提供数据连接，默认为空
        success: function () {
          // 用户确认分享后执行的回调函数
          // _hmt.push(['_trackEvent', config.title, "分享给好友", "分享成功"]);
          this.$message({
            type: 'success',
            message: '分享成功'
          })
          // config.success()
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
          // _hmt.push(['_trackEvent', config.title, "分享给好友", "取消分享"]);
          this.$message({
            type: 'success',
            message: '取消分享'
          })
          // config.cancel()
        },
        fail: function (res) {
          this.$message({
            type: 'error',
            message: '分享失败'
          })
          // config.fail()
        }
      })
    })
    wx.error(() => {
      console.log('请求分享数据失败')
      // config.fail()
    })

问题1：微信

// 配置完成之后弹出以下信息
{errorMsg: config: invalid signature}
// 这是由于请求配置信息的接口参数url有误，能够经过encodeURIComponent(window.location.href.split('#')[0])来获取

问题2：session

// 配置完成之后弹出以下信息
{errorMsg: config: invalid url domain}
// 这是由于微信公众号设置中没有设置好，能够根据下图设置

image.png

完整代码

// 分享界面的代码
<!--
 * @Author: 张旭超
 * @Date: 2020-01-08 13:14:14
 * @LastEditTime : 2020-01-10 17:09:56
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /src/components/wechat-share/WechatShare.vue
-->
<template>
  <div>
    <div>微信分享</div>
    <div>微信扫码分享</div>
    <div>{{projectInfo}}</div>
    {{this.$store.state.wxConfig.appId}}
    {{this.$store.state.wxConfig.timestamp}}
    {{this.$store.state.wxConfig.nonceStr}}
    {{this.$store.state.wxConfig.signature}}
  </div>
</template>

<script>
import wx from 'weixin-js-sdk'
export default {
  data () {
    return {
      config: {
        url: encodeURIComponent(this.$store.getters.base_url),
        title: '项目名称',
        desc: '项目描述',
        img: 'https://pic4.zhimg.com/80/v2-9e7354788266d6ceae5a0839e24d9c1a_hd.jpg'
      }
    }
  },
  async mounted () {
    // 获取微信配置信息，经过后台接口。
    await this.$store.dispatch('getWechatConfigAction', encodeURIComponent(window.location.href.split('#')[0]))
    // alert(this.projectInfo)
    // // 接口获取界面内容
    // alert(JSON.stringify(this.config, null, 4))
    // alert(JSON.stringify(this.$store.state.wxConfig, null, 4))
    wx.config({
      debug: true,
      appId: this.$store.state.wxConfig.appId,
      timestamp: this.$store.state.wxConfig.timestamp,
      nonceStr: this.$store.state.wxConfig.nonceStr,
      signature: this.$store.state.wxConfig.signature,
      jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
    })
    wx.ready(() => {
      wx.onMenuShareAppMessage({
        title: this.config.title, // 分享标题
        desc: this.config.content, // 分享描述
        link: window.location.href.split('#')[0] + '#' + window.location.href.split('#')[1], // 分享连接
        imgUrl: this.config.imgUrl, // 分享图标
        type: 'link', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 若是type是music或video，则要提供数据连接，默认为空
        success: function () {
          // 用户确认分享后执行的回调函数
          // _hmt.push(['_trackEvent', config.title, "分享给好友", "分享成功"]);
          this.$message({
            type: 'success',
            message: '分享成功'
          })
          // config.success()
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
          // _hmt.push(['_trackEvent', config.title, "分享给好友", "取消分享"]);
          this.$message({
            type: 'success',
            message: '取消分享'
          })
          // config.cancel()
        },
        fail: function (res) {
          this.$message({
            type: 'error',
            message: '分享失败'
          })
          // config.fail()
        }
      })
      wx.onMenuShareTimeline({
        title: this.config.title, // 分享标题
        desc: this.config.content, // 分享描述
        link: window.location.href.split('#')[0] + '#' + window.location.href.split('#')[1], // 分享连接
        imgUrl: this.config.imgUrl, // 分享图标
        type: 'link', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 若是type是music或video，则要提供数据连接，默认为空
        success: function () {
          // 用户确认分享后执行的回调函数
          // _hmt.push(['_trackEvent', config.title, "分享给好友", "分享成功"]);
          this.$message({
            type: 'success',
            message: '分享成功'
          })
          // config.success()
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
          // _hmt.push(['_trackEvent', config.title, "分享给好友", "取消分享"]);
          this.$message({
            type: 'success',
            message: '取消分享'
          })
          // config.cancel()
        },
        fail: function (res) {
          this.$message({
            type: 'error',
            message: '分享失败'
          })
          // config.fail()
        }
      })
    })
    wx.error(() => {
      console.log('请求分享数据失败')
      // config.fail()
    })
  }
}
</script>

代码中获取配置信息，封装在了vuex的actions中，获取的配置信息存储在 $store.stat.wxConfig中，主要是传递参数url的配置。app

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程