美文网首页
vue 微信分享

vue 微信分享

作者: 混世魔王的小公举 | 来源:发表于2019-11-13 15:13 被阅读0次

    1、单独写一个外部文件引用

    import axios from 'axios';

    import wx from 'weixin-js-sdk';

    const config = require("../../config/config");  //引入基础配置

    //微信分享

    export function wxShare(title, desc, image) {

      var href = encodeURIComponent(window.location.href);

      axios.get(config.BASE_URL + '/api/public/wechat/sign?url=' + href, {}).then(res => { //获取微信签名

        var jsonData = res.data;

        if (jsonData.error) {

          return;

        }

        var data = jsonData.data;

        var link = data.url

        console.log(link);

        wx.config({

          debug: false,

          appId: data.appid,

          timestamp: data.timestamp,

          nonceStr: data.nonceStr,

          signature: data.signature,

          jsApiList: [

            'checkJsApi',

            'onMenuShareTimeline',

            'onMenuShareAppMessage',

            'hideOptionMenu',

            'showOptionMenu',

          ]

        });

        wx.ready(function () { //朋友圈

          wx.onMenuShareTimeline({

            title: title,

            // desc: desc,

            link: link,

            imgUrl: image,

            success: function () {

            },

            cancel: function () {

            }

          });

          wx.onMenuShareAppMessage({ //好友

            title: title,

            desc: desc,

            link: link,

            imgUrl: image,

            success: function () {

            },

            cancel: function () {

            }

          });

        });

      });

    }

    2、引入微信分享文件(我的文件的名字是wxShare.js)

    3、在methods里面添加方法

    loadData() {

          let that = this;

          let title = '这是标题';

          let desc = '这是详情';

          let image = "https://qiniu。123.png"; //这是图片地址

          wxShare.wxShare(title, desc); //调用外部的方法

        },

    4.在created里面写入方法

    相关文章

      网友评论

          本文标题:vue 微信分享

          本文链接:https://www.haomeiwen.com/subject/awshictx.html