vue项目做微信分享总结

在做微信分享，也是遇到了许多的坑，记录一下流程，以后做到可以直接用。

安装sdk

npm install weixin-js-sdk --save

整体步骤

1.我是新建了一个js文件wxapi.js。

2.在wxapi.js中引入sdk以及配置一些基本信息（相关的配置内容是后台返的）

3.在需要做分享的页面引入wxapi.js，调用里面的方法

大概代码如下：

wxapi.js中：

/**
 * 微信js-sdk
 * 参考文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
 */
import wx from 'weixin-js-sdk'
import Axios from 'axios'
const wxApi = {
    /**
     * [wxRegister 微信Api初始化]
     * @param  {Function} callback [ready回调函数]
     */
    wxRegister(data,option) { //data是微信配置信息，option是分享的配置内容
        wx.config({
            debug: false, // 开启调试模式
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名，见附录1
            jsApiList: [
                'checkJsApi',
                'updateTimelineShareData',
                'updateAppMessageShareData',
                'onMenuShareQQ',
                'onMenuShareWeibo'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        })
        wx.ready(function(){
            wx.updateTimelineShareData({
                title: option.title, // 分享标题
                link: option.link, // 分享链接
                imgUrl: option.imgUrl, // 分享图标
                desc: option.desc, // 分享描述
                success() {
                    // 用户成功分享后执行的回调函数
                    option.success()
                },
                cancel() {
                    // 用户取消分享后执行的回调函数
                    option.error()
                }
            });
            wx.updateAppMessageShareData({
                title: option.title, // 分享标题
                desc: option.desc, // 分享描述
                link: option.link, // 分享链接
                imgUrl: option.imgUrl, // 分享图标
                success() {
                    // 用户成功分享后执行的回调函数
                    option.success()
                },
                cancel() {
                    // 用户取消分享后执行的回调函数
                    option.error()
                }
            })
        })
    }
}
export default wxApi

需要分享的页面，如：index.vue

1.引入wxapi.js

import wxapi from '@/assets/js/wxapi.js';

2.页面请求完接口之后，获取配置信息，调用wxapi.js中的方法（可以写在created中，也可以写在初始化调用的犯法里面，具体根据实际项目而定）

wxapi.wxRegister(data,option);//data是微信配置信息，option是分享要配置的内容

 

上面的步骤就已经完成了，但是还是有一些坑，分享出去图片跟说明老是没有，后来开启了调试模式，微信返回信息是签名错了。所以这里就要注意了，我们是vue做的项目，而且路由还是用的hash，所以url上面包含"#"，这个时候后端返回的信息，签名一直都是错的。解决方案有两个：

1：router.js中路由配置换成history模式

当然，这种方式需要后台配合，具体怎么配合可以看一下https://www.cnblogs.com/chao202426/p/11168019.html这个里面的。

2：url去掉’#’hash部分，可用location.href.split('#')[0]

 

踩完坑之后自己做一下总结：

1、一开始说要以这种点击的方式触发分享，其实目前是实现不了的

2、浏览器中的分享，其实用的是浏览器自带的，这个分享他就没办法按照你的配置来，试了一下之后发现，浏览器中自带的分享：

　　标题会取你页面的title

　　图片会取你页面的img，没有的话就是去页面截图

　　地址会取你当前页面的url