美文网首页
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 微信分享

    Web项目经常会用到微信,所以总结一下。 1. 引用微信的'weixin-js-sdk 2. 获取签名 后台会给一...

  • vue 微信分享

    npm install weixin-js-sdk --save网上好多使用这个的但是已经弃用了指路[https:...

  • vue 微信分享

    1、单独写一个外部文件引用 import axios from 'axios';import wx from 'w...

  • 微信公众号开发

    采用 TP5 + vue 实现如下功能 微信登录微信分享微信支付 微信登录 前端输入参数跳转 前端获取code码 ...

  • 微信h5页面 ios wx.chooseImage无效

    具体流程:vue项目,几个微信h5页面,A页面(隐藏了微信分享)跳转到B页面(隐藏了微信分享),使用 a链接跳转 ...

  • 记一次vue单页应用微信分享

    由于业务需要,单页面应用需要进行微信分享,目前要求只分享首页 准备工作: 在index.vue使用: 微信jsdk...

  • 简单粗暴帮你用vue实现微信分享

    最近在用vue搞项目,碰到一个问题就是微信分享,我们知道微信分享会自动获取页面的title标签做为我们的分享标题,...

  • vue微信分享总汇

    本文通过自己开发过程遇到一些坑做一次总结: 一、首先交代一下基本过程和工具 1、肯定是先撸一波文档微信api接口文...

  • vue做微信分享

    1、下载weixin-js-sdk 的依赖 cnpm install weixin-js-sdk --save 2...

  • 项目中遇到的问题以及如何解决的

    1问题: vue 项目中微信分享,拿到的分享链接总是首页;原因:微信浏览器自动会截图链接中#后面的数据解决方法:在...

网友评论

      本文标题:vue 微信分享

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