vue-cli项目使用微信分享

本

次使用了axios进行了请求，使用时先安装

一、先在index.html下接入微信jsdk

<script src="//res.wx.qq.com/open/js/jweixin-1.2.1.js"></script>

二、创建分享的共用wxshare.js文件

import axios from 'axios'

export default {

  wxShowMenu: function(data) {

    axios.post(data.ajaxurl).then(function(res) {

      var getMsg = res.data.data;

      wx.config({

        debug: true, //生产环境需要关闭debug模式

        appId: getMsg.appId, //appId通过微信服务号后台查看

        timestamp: getMsg.timestamp, //生成签名的时间戳

        nonceStr: getMsg.nonceStr, //生成签名的随机字符串

        signature: getMsg.signature, //签名

        jsApiList: [ //需要调用的JS接口列表

          'onMenuShareTimeline', //分享给好友

          'onMenuShareAppMessage', //分享到朋友圈

          'showMenuItems',

          'hideMenuItems'

        ]

      });

      wx.ready(function() {

        wx.checkJsApi({

          jsApiList: ["showMenuItems"],

          success: function(res) {

            wx.showMenuItems({

              menuList: [

                'menuItem:share:appMessage', //发送给朋友

                'menuItem:share:timeline' //分享到朋友圈

              ]

            });

          }

        });

        //分享到朋友圈

        wx.updateTimelineShareData({

          title: data.titles, // 分享标题

          desc: data.descs, //分享描述

          link: data.link, // 分享链接

          imgUrl: data.imgUrl // 分享图标

        });



        //分享给朋友

        wx.updateAppMessageShareData({

          title: data.titles_circle, // 分享标题

          desc: data.descs, //分享描述

          link: data.link, // 分享链接

          imgUrl: data.imgUrl // 分享图标

        });

      });

    })

  }

}

三、在main.js中注册文件名

import WXConfig from './store/module/wxshare'
import WXConfig from './store/module/wxshare'

四、在.vue或者组件中使用方法

  mounted(){
      //设置微信分享信息
      this.WXConfig.wxShowMenu(
        {
          titles : '分享好友',
          title_circle : '分享朋友圈',
          descs : '分享文案',
          link :'分享连接',
          imgUrl : '分享图片',
        }
      );
 },