vue项目全局配置微信分享_Vue开发添加微信分享功能（全局分享）

在Vue4.0开发微信公众号的时候，需要做微信分享功能。这个功能其实还算简单，具体的思路如下：

1.安装微信JSSDK和Axios(axios是http请求插件)

2.向后台请求微信配置参数

3.初始化微信分享配置API

4.需要分享的地方引用配置

那么现在来实现：

安装插件：

yarn add weixin-js-sdk

yarn add axios

安装好插件之后，创建一个weixinApi.js文件，添加如下代码：

import wx from 'weixin-js-sdk';

import Axios from"axios";

const ShareImpl= function(option) {//option是分享的配置内容*/

const url = window.location.href.split("#")[0];

window.console.log(url, JSON.stringify(option));

Axios.get('获取参数配置路径', {

params: {url}

}).then((response)=>{

wx.config({

debug:false,

appId: response.data.AppId,

timestamp: response.data.Timestamp,

nonceStr: response.data.NonceStr,

signature: response.data.Signature,

jsApiList: ['updateAppMessageShareData','updateTimelineShareData',

]

});

}).catch(error =>{

window.console.log(error);

});

wx.ready(function() {

wx.updateAppMessageShareData({

title: option.shareTitle,

desc: option.shareDesc,

link: option.shareUrl,

imgUrl: option.shareImg

});

wx.updateTimelineShareData({

title: option.shareTitle,

desc: option.shareDesc,

link: option.shareUrl,

imgUrl: option.shareImg,

});

})/*}*/}

export {ShareImpl}

然后在main.js中引用该配置：

let url = window.location.href.split("#")[0];if(url.indexOf('from') != -1){

url= window.location.href.split("?")[0];

}

window.console.log(url+ 'favicon.png');

ShareImpl({

shareTitle:'深圳XXX',

shareDesc:'让AIXXXXXXX',

shareUrl: url,

shareImg: url+ 'favicon.png',

});

分享的路径是整个域下的路径，比如：http://xxx.xxxx.com/xxxx/,没有根据路由参数来配置。

完成上述操作之后，就可以在全局都用到分享功能了。

vue项目全局配置微信分享_Vue开发添加微信分享功能（全局分享）相关推荐

vue 如何调用微信分享_Vue开发添加微信分享功能（全局分享）
在Vue4.0开发微信公众号的时候,需要做微信分享功能.这个功能其实还算简单,具体的思路如下: 1.安装微信JSSDK和Axios(axios是http请求插件) 2.向后台请求微信配置参数 3.初始 ...
获取微信通讯录php,微信小程序实现添加手机联系人功能实现方法
本文主要介绍了微信小程序实现添加手机联系人功能,结合实例形式分析了微信小程序添加联系人的具体步骤,包括布局与逻辑实现技巧,需要的朋友可以参考下,希望能帮助到大家. 本文实例讲述了微信小程序实现添加手机 ...
六十五、完成Vue项目去哪儿网App首页开发（来源：慕课网）
2020/10/21. 周三.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/21 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共 ...
微信公众平台开发[2] —— 微信端分享功能
背景初次尝试微信公众号的开发,对于学习方法的探索都是来源于网上的博客.问答,对于参差不齐的信息,自己也是有苦说不出,抽出一点时间写点文章,既是对自己的学习总结,也希望给予同是菜鸟的小白一点帮助. 今 ...
如何搭建一个Vue项目和配置环境
如何搭建一个Vue项目和配置环境一.Vue简介 Vue(读音/vju/, 类似于view) 是一套用于构建用户界面的渐进式框架, 发布于2014年2月.与其它大型框架不同的是, Vue被设计为可以自 ...
微信公众平台开发：接入JS-SDK和实现分享功能
微信公众平台开发:接入JS-SDK和实现分享功能一.本文是实现微信公众号自定义的分享功能开发,也是亲自实践实现该功的一些总结体会. 首先贴上微信JS-SDK说明文档地址:http://mp.weix ...
微信小程序开发教程5：设置全局css样式
平凡也就两个字: 懒和惰; 成功也就两个字: 苦和勤; 优秀也就两个字: 你和我. 跟着我从0学习JAVA.spring全家桶和linux运维等知识,带你从懵懂少年走向人生巅峰,迎娶白富美! 关注微信 ...
视频教程-基于python的微信公众号开发教程-微信开发
基于python的微信公众号开发教程微信企业号星级会员.10多年软件从业经历,国家级软件项目负责人,主要从事软件研发.软件企业员工技能培训.已经取得计算机技术与软件资格考试(软考)--"信 ...
php 微信公众平台开发之微信群发信息
这篇文章主要为大家详细介绍了php微信公众平台开发之微信群发信息,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 1.目的完成在微信公众号中群发消息.这里只是完成简单的文字发送.也可以发送语音图片 ...

vue项目全局配置微信分享_Vue开发添加微信分享功能（全局分享）

vue项目全局配置微信分享_Vue开发添加微信分享功能（全局分享）相关推荐

最新文章

热门文章

vue项目全局配置微信分享_Vue开发 添加微信分享功能（全局分享）

vue项目全局配置微信分享_Vue开发 添加微信分享功能（全局分享）相关推荐

最新文章

热门文章

vue项目全局配置微信分享_Vue开发添加微信分享功能（全局分享）

vue项目全局配置微信分享_Vue开发添加微信分享功能（全局分享）相关推荐