微信公众号h5 微信分享朋友 分享给朋友圈 分享给朋友

我是在APP.vue里面引入的

首先下载 微信jssdk

npm install weixin-js-sdk -seve在app.vue里面引入

import wx from ‘weixin-js-sdk’然后请求后端的签名接口

<script>import { zhou } from '@/api' // 此处是引入的后端的签名接口import wx from 'weixin-js-sdk' // 此处是引入的微信jssdkexport default {name: 'App',data() {return {}},created() {},mounted() {this.getM01()},methods: {getzhou() {zhou({signurl: window.location.href.split('#')[0], // 这里我用的路由模式是hash 所以只传#号前面的链接就行了 使用路由模式 history的话需要链接上的全部参数 signurl: window.location.href。}).then((res) => {wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: res.resBody.appid, // 必填，公众号的唯一标识 // 这里填你们后端返回的appidtimestamp: res.resBody.timestamp, // 必填，生成签名的时间戳// 这里填你们后端返回的生成签名的时间戳nonceStr: res.resBody.nonceStr, // 必填，生成签名的随机串// 这里填你们后端返回的生成签名的随机串 signature: res.resBody.signature, // 必填，签名 // 这里填你们后端返回的签名jsApiList: ['scanQRCode','closeWindow','chooseImage','getLocalImgData','updateAppMessageShareData','updateTimelineShareData','chooseWXPay','getLocation','onMenuShareTimeline','onMenuShareAppMessage',], // 必填，需要使用的JS接口列表})wx.ready(function () {wx.checkJsApi({jsApiList: ['scanQRCode','closeWindow','chooseImage','getLocalImgData','updateAppMessageShareData','updateTimelineShareData','chooseWXPay','getLocation','onMenuShareTimeline','onMenuShareAppMessage',], // 需要检测的 JS 接口列表，所有 JS 接口列表见附录2,success: function (res) {console.log('wxJsApi success:', res)},fail: (err) => {console.log('wxJsApi fail:', err)},})// config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。})})},},}</script>

以下进入分享实例 在你需要分享的页面里写入这些代码 （重要）

首先还是引入微信的jssdk

import wx from ‘weixin-js-sdk’

下面就是分享的重要代码

wx.ready(() => {//需在用户可能点击分享按钮前就先调用if (wx.updateAppMessageShareData) { // 很多人疑惑了 这里我为什么要进行一个if判断看最下面console.log(res.resBody.item_name)wx.updateAppMessageShareData({//分享给朋友及分享到QQtitle: this.goodsList.item_name,desc: this.goodsList.item_name,link: `需要分享出去的链接`,imgUrl: this.goodsList.pic_url,trigger: () => {console.log('点击分享')},success: () => {console.log('分享成功')},cancel: () => {console.log('分享取消')},fail: () => {console.log('分享失败')},})} else {console.log(this.goodsList.item_name)wx.onMenuShareAppMessage({//分享给朋友及分享到QQtitle: this.goodsList.item_name,desc: this.goodsList.item_name,link: `需要分享出去的链接`,imgUrl: this.goodsList.pic_url,trigger: () => {console.log('点击分享')},success: () => {console.log('分享成功')},cancel: () => {console.log('分享取消')},fail: () => {console.log('分享失败')},})}if (wx.updateTimelineShareData) {wx.updateTimelineShareData({//分享到朋友圈及分享到QQ空间title: this.goodsList.item_name,link: `需要分享出去的链接`,imgUrl: this.goodsList.pic_url,trigger: () => {console.log('点击分享')},success: () => {console.log('分享成功')},cancel: () => {console.log('分享取消')},fail: () => {console.log('分享失败')},})} else {wx.onMenuShareTimeline({//分享到朋友圈及分享到QQ空间title: this.goodsList.item_name,link: `需要分享出去的链接`,imgUrl: this.goodsList.pic_url,trigger: () => {console.log('点击分享')},success: () => {console.log('分享成功')},cancel: () => {console.log('分享取消')},fail: () => {console.log('分享失败')},})}})

讲解一下上面代码中的if判断

if (wx.updateAppMessageShareData)

这个判断是判断的是否是true 这个true代表的有这个方法 有的手机机型不支持最新的微信分享方法 所以需要使用到老的微信分享的方法

如果有这个 就走最新的微信分享的方法

以上就是我的微信分享