简单粗暴教你在VUE中引入微信SDK 调用微信分享、朋友圈分享、QQ分享......

写在前面：

刚做了一个微信端的网页，用到了微信分享，在网上看了好多的资料，发现好多文档都写得云里雾里，让人看的头疼。通过对很多大佬文章的综合整理，才完成了微信分享的部分。所以我想着自己写一篇文章，能让看到我这篇文章的亲们能够清楚的明白在vue上怎么使用微信分享SDK，能够按照我写的步骤简单粗暴的实现
备注：本人还是个菜鸟，刚刚接触vue 文章中有错误或者大家对我有建议，随意的提出来，我好改正，谢谢大家！

1.安装sdk

  npm install weixin-js-sdk --save

2. 在main.js入口文件中引入微信sdk

  import wx from 'weixin-js-sdk'

3.在main.js的生命周期函数（created()或mounted()）中引入微信sdk配置代码那就是全局的，也可以在你想要分享的.vue组件中引入微信sdk配置代码这样微信分享只在这个组件有效

4.通过config接口注入权限验证配置（一般后台会提供接口，获取接口后对应上就好，这个权限验证也可以放到一个公用js中这样不同的组件都可以复用这个配置）

  wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名jsApiList: [] // 必填，需要使用的JS接口列表});

5.通过ready接口处理成功验证（如果每个组件要应用不同的分享内容那么这个ready接口就在不同组件的生命周期函数中配置就好)

  wx.ready(function () {   //需在用户可能点击分享按钮前就先调用// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）最新接口wx.updateAppMessageShareData({ title: '', // 分享标题desc: '', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '', // 分享图标success: function () {// 设置成功}// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）最新接口     wx.updateTimelineShareData({ title: '', // 分享标题link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '', // 分享图标success: function () {// 设置成功}});

本人也是VUE的菜鸟，谢谢大家查看和使用本文档，如果文档中有什么问题，希望大家能指正出来，我好及时修正，谢谢你

简单粗暴教你在VUE中引入微信SDK 调用微信分享、朋友圈分享、QQ分享......相关推荐

Vue实现微信分享好友，分享朋友圈。
实现微信分享功能. 1 .基于vue去实现在微信里去分享给你的微信好友,或者去分享到你的朋友圈里.如果是react 等等一样用法. 2.目前实现微信分享功能是通过点击微信控件触发的,代码拿走直接用, ...
只需2步，教你在Vue中设置登录验证拦截
摘要:两步教你在Vue中设置登录验证拦截! 本文分享自华为云社区<两步教你在Vue中设置登录验证拦截!>,作者: 灰小猿 . 今天在做vue和springboot交互的一个项目的时候,想要 ...
Vue中引入使用 D3.js
Vue中引入使用 D3.js 1. D3.js 学习文档 D3.js 中文网 D3.js 入门教程 D3.js v5版入门教程 d3.js API中文手册-[看云] d3.layout (布局)-[ ...
vue学习笔记十：Vue中引入jquery
文章目录前言一.引入方式 1.使用Vue CLI 创建的项目 2.直接引入vue方式的项目二.使用方法 1.使用Vue CLI 创建的项目 2.直接引入vue方式的项目总结前言本篇实现vu ...
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...
Uniapp/Vue中引入使用阿里图标
一.uniapp中引入阿里图标将图标加入购物车部分省略 1.下载阿里图标到本地,uniapp不支持symbol格式 2. 打开下载的压缩包,只需要inconfont.css ,将其放到我们的项目 s ...
Vue中引入并使用动态图标
Vue中引入并使用动态图标 1.安装依赖 2.在Vue项main.js中引入 3.经过以上操作,已经实现全局引入,在任何地方直接使用即可. 本次选用Font-awesome-animation 1.安 ...

简单粗暴教你在VUE中引入微信SDK 调用微信分享、朋友圈分享、QQ分享......

写在前面：

1.安装sdk

2. 在main.js入口文件中引入微信sdk

3.在main.js的生命周期函数（created()或mounted()）中引入微信sdk配置代码那就是全局的，也可以在你想要分享的.vue组件中引入微信sdk配置代码这样微信分享只在这个组件有效

4.通过config接口注入权限验证配置（一般后台会提供接口，获取接口后对应上就好，这个权限验证也可以放到一个公用js中这样不同的组件都可以复用这个配置）

5.通过ready接口处理成功验证（如果每个组件要应用不同的分享内容那么这个ready接口就在不同组件的生命周期函数中配置就好)

简单粗暴教你在VUE中引入微信SDK 调用微信分享、朋友圈分享、QQ分享......相关推荐

最新文章

热门文章