vue h5 微信分享功能(艾思科技出品)

1. 首先安装插件

npm install weixin-jsapi

2. 在项目目录新建wx.js文件
   
   wx.js代码

import wx from 'weixin-jsapi' //引入刚才下载的包
import {getWxConfig} from '../api/red_package/index' //导入自己写的后台接口，获取wx配置

const ShareImpl = function (option) {
    //option是分享的配置内容*/
    const url = window.location.href.split("#")[0]; //获取当前的url
  
    getWxConfig({url:url}).then(res => { //请求后台接口
        console.log(res)
        wx.config({
            debug: true, //是否开启debug
            appId: res.data.appId,//你的appid
            timestamp: res.data.timestamp, //时间戳
            nonceStr: res.data.nonceStr,//随机字符串
            signature: res.data.signature,//秘钥（秘钥生成规则请看我另一篇文章（php获取微信AccessToken，生成秘钥））
            jsApiList: [ //请求的api接口列表，微信的，详情去看微信官方文档
                    'updateAppMessageShareData',
                    'updateTimelineShareData',
                    'getLocation',
                    'openLocation',
                    'onMenuShareAppMessage',
                    'onMenuShareTimeline'
            ]
        });
        wx.ready(function () { //如果wx.config配置正常，会自动走此处
            console.log('ready执行完毕')
            //自定义“分享给朋友”及“分享到QQ”按钮的分享内容
            wx.updateAppMessageShareData({
                title: option.shareTitle,//分享的标题
                desc: option.shareDesc,//分享的描述信息
                link: option.shareUrl,//分享的url
                imgUrl: option.shareImg//分享的图片
            });
            //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分
            wx.updateTimelineShareData({
                title: option.shareTitle,
                desc: option.shareDesc,
                link: option.shareUrl,
                imgUrl: option.shareImg,
            });
        });
        wx.error(function (res) { //如果wx.config配置失败,会走到此处
            console.log('error',res);
        })
    });

};

export default ShareImpl //将此方法导出

1. 在main.js中引入刚才写好的方法
   
2. 在需要分享的页面中调用

  mounted() {
            var option = {
                shareTitle : '',
                shareDesc : '',
                shareUrl : '',
                shareImg: ''
            };
            this.ShareImpl(option)
        },