vue 微信分享功能

因为是全局的分享，所有以下操作在App.vue中实现。

安装weixin-js-sdk

npm i weixin-js-sdk -S

在js引入并使用

script>
// 引入
import wx from "weixin-js-sdk";
export default {name: "App",created () {//刷新回到首页if (this.$route.path !== '/') {this.$router.replace('/')}    //分享this.wxShare();},  methods: {   //分享的方法wxShare () {var url = encodeURIComponent(window.location.href.split("#")[0]);this.$http.post("后端请求路径",{ url }).then((res) => {let data = res.data;wx.config({debug: false,appId: data.appId,timestamp: data.timestamp,nonceStr: data.nonceStr,signature: data.signature,jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ","onMenuShareWeibo","onMenuShareQZone",],});});wx.ready(() => {var shareData = {title: "标题...",desc: "描述...",link: "分享出去的链接地址（入口）",imgUrl:"分享出去的icon图标地址",  success: () => { },};wx.onMenuShareTimeline(shareData);wx.onMenuShareAppMessage(shareData);wx.onMenuShareQQ(shareData);wx.onMenuShareWeibo(shareData);wx.onMenuShareQZone(shareData);});},},
};
</script>

注意：
有时候分享出去的图标可能出现不显示的情况，
一种可能是图标太大，图标大小建议在200 * 200px，30kb左右；
还有一种可能是图片地址不对，所以尽量使用线上地址：eg:https://www.xxx.com/xxx/share.jpg
或者写成：imgUrl:require(‘…/assets/img/share.jpg’)。

vue 微信分享功能相关推荐

vue项目做微信分享功能
vue项目做微信分享功能安装sdk npm install weixin-js-sdk --save 方法 1.新建js文件wxapi.js 2.在wxapi.js中引入sdk以及配置一些基本信息( ...
vue 如何调用微信分享_Vue开发添加微信分享功能（全局分享）
在Vue4.0开发微信公众号的时候,需要做微信分享功能.这个功能其实还算简单,具体的思路如下: 1.安装微信JSSDK和Axios(axios是http请求插件) 2.向后台请求微信配置参数 3.初始 ...
vue项目全局配置微信分享_Vue开发添加微信分享功能（全局分享）
在Vue4.0开发微信公众号的时候,需要做微信分享功能.这个功能其实还算简单,具体的思路如下: 1.安装微信JSSDK和Axios(axios是http请求插件) 2.向后台请求微信配置参数 3.初始 ...
Flutter 微信分享功能实现
志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的 ...
centos + nodejs + egg2.x 开发微信分享功能
前言近期把自用的微信公众号微信分享模块从 php 修改为 nodejs 的版本,虽然这是一个很小的功能,但仍然选择了 egg 框架,也算是为未来继续开发公众号,做点扩展的准备. 本文章仅为项目介绍, ...
微信分享功能问题-描述内容换行，导致js加载失败
jsContent内容存在换行符,导致js处理失败, 解决办法,在后台接口中替换'/r/n'为空,并截取前30位 weiXinJsSdk.setSharcontent(StringUtils.isNo ...
Android Studio 微信分享功能（包括可以分享到朋友圈，分享到朋友）
第一步:配置sdk 在build.gradle文件中,添加如下依赖即可: 在Android Studio中新建你的工程,并保证网络设置可以成功从jcenter下载微信SDK即可. dependenci ...
ShareSDK接入实现微信分享功能（转）
ShareSDK接入实现微信分享功能首先需要去Mob官网(http://www.mob.com/)下载shareSDK For Unity3d 下载完成,解压,将以下plugins文件夹移入Unit ...
2015最新微信分享功能开发，自定义分享内容。
在2015年之前很长一段时间,微信分享功能,只需要页面埋几段js代码即可捕获用户点击分享按钮的事情,并且自定义. 但后来微信的新版本里已经屏蔽了次方法直接调用分享接口需要在服务端坐一点开发工作. 当 ...

vue 微信分享功能

vue 微信分享功能相关推荐

最新文章

热门文章