Vue微信分享问题

Vue微信分享问题

文章目录

  • Vue微信分享问题
        • **步骤三:通过config接口注入权限验证配置**
  • 1. vue实现微信分享功能
  • 2.vue-hash模式微信分享后打开是首页的问题
  • 3. 如果DESC拿不到数据

参考博客1
参考博客2
官方文档
需要注意的是:
在SPA(单页面程序)中,初始化微信分享的时候,可能会出现用网址向后台授权分享的时候会发生授权注入失败的情况,我遇到的现象就是,首次分享的时候,分享出来的卡片封面内容错误,再次分享的时候正常。当时具体的解决方法就是,将用于向后台请求授权的URL截断,只留#前边的部分。
官方文档中也有说明,但是具体的解决方案与本人的不太一样:

步骤三:通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

1. vue实现微信分享功能

前端需要做的:

  1. 首先是引入JS-SDK文件,可以通过script标签引入的方式,vue可以通过npm来安装引入

npm地址

npm install weixin-js-sdk
  1. 新建一个文件来单独存放相关微信分享的代码,如: tools/wxshare/wxapi.js
  2. 在文件中首先引入JS-SDK
import wx from 'weixin-js-sdk';
  1. 获取当前完整的URL,用于向后台请求数据
let sharelink = window.location.href;
  1. 向外暴露一个方法
function wxshare(shareConfig){}
  1. 拿到后台返回的数据后
  • 通过config接口注入权限验证配置
  • 通过ready接口处理成功验证
  • 通过error接口处理失败验证
  1. 通过ready实现要分享的内容
  2. 具体实现代码如下:

wxapi.js

/*
* 传递配置的格式
* */
// var DESC = {
//     title: 	"拍照识别,快速检查口算,快来体验吧!",
//     desc: 	"倍速口算检查",
//     link: 	_shareLink,
//     imgurl: "https://beisu-js.beisu100.com/lib/img/share_icon.png"
// };


import wx from 'weixin-js-sdk';
import {GET} from "../http/http";

// 获取当前完整的URL,用于向后台请求数据
let sharelink = window.location.href;

function wxshare(shareConfig) {
    // 自己封装axios的GET方法
    /*
    * 1. 向后台请求数据
    * 2. 请求的时候带上当前的完整URL
    * */

    GET(`https://app.beisu100.com/site/wxjs`, {params: {url: sharelink}}).then(res => {
        /*
        *  拿到后台返回的数据后
        * 1. 通过config接口注入权限验证配置
        * 2. 具体的数据配置根据自己的情况对应
        * */

        wx.config({
            appId: res.data.appId,
            timestamp: res.data.timestamp,
            nonceStr: res.data.nonceStr,
            signature: res.data.signature,
            jsApiList: [
                "onMenuShareTimeline",
                "onMenuShareAppMessage"
            ]
        })

        /*
        * 通过ready接口处理成功验证
        * */

        wx.ready(function () {
            // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

            /*
            * 自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
            * */

            wx.onMenuShareAppMessage({
                title: shareConfig.title, // 分享标题
                desc: shareConfig.desc, // 分享描述
                link: shareConfig.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: shareConfig.imgUrl, // 分享图标
                success: function () {
                    // 设置成功
                }
            })

            /*
            * 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
            * */

            wx.onMenuShareTimeline({
                title: shareConfig.title, // 分享标题
                link: shareConfig.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: shareConfig.imgUrl, // 分享图标
                success: function () {
                    // 设置成功
                } // 设置成功
            })


        });

        /*
        * 通过error接口处理失败验证
        * */
        wx.error(function (res) {
            // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
        });
    })
}

export default  wxshare

需要分享的页面

mounted() {
  var DESC = {
    title: "这里有很多超值商品优惠券等你来领!",
    desc: "淘宝内部优惠券,每日更新~",
    //link这么写是为了解决微信分享打开是首页的情况
    link: window.location.href.split('#')[0] + 'static/html/redirect.html?app3Redirect=' + encodeURIComponent(window.location.href),
    imgUrl: "https://beisu-js.beisu100.com/lib/img/share_icon.png"
  }
  wxshare(DESC);
}

2.vue-hash模式微信分享后打开是首页的问题

参考博客1
参考博客2
在上传到服务器的时候

  1. static目录下新建一个名为html的文件夹,在html文件夹中再新建一个redirect.html

在html中写一下内容;

<script>
    let url = location.href.split('?')
    let pars = url[1].split('&')
    let data = {}
    pars.forEach((n, i) => {
        let p = n.split('=')
        data[p[0]] = p[1]
    })
    if (!!data.app3Redirect) {
        self.location = decodeURIComponent(data.app3Redirect)
    }

</script>
  1. 将上文中的DESC中的URL改成如下效果:
var link = window.location.href.split('#')[0] + 'static/html/redirect.html?app3Redirect=' + encodeURIComponent(window.location.href);

**需要注意的是: **这里改的link是在ready函数中用于分享的链接,并不是用于向后台请求的链接

3. 如果DESC拿不到数据

将DESC以及wxshare方法一起放在created()方法里调用
可能是当时用了keep-alive以及activated钩子函数,在钩子函数里将item的数据清空,以至于mounted()钩子函数中拿不到数据。

你可能感兴趣的:(Vue,踩坑)