VUE使用JS-SDK实现微信分享好友功能（通过点击控件触发）

微信JSSDK官方开发文档

微信分享有很多种这里只记录了分享好友功能

1、通过npm安装微信的js-sdk

npm install weixin-js-sdk

2、在main.js里引用或在需要分享的页面引用

import wx from 'weixin-js-sdk';

3、在页面创建时候先注入配置信息（必须）！

//生命周期我就创建了
created() {var payUrl = window.location.href;//当前分享的页面UrlgetWxjsSign({ //调用后台接口 获取相关参数url: payUrl}).then(res => {if (res.returnCode == '200') {if (res.response.code == '200') {var data = res.response.sign;var appId = data.appId;var timestamp = data.timestamp;var nonceStr = data.nonceStr;var signature = data.signature;wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: appId, // 必填，公众号的唯一标识timestamp: timestamp, // 必填，生成签名的时间戳nonceStr: nonceStr, // 必填，生成签名的随机串signature: signature, // 必填，签名，见附录1jsApiList: ['updateAppMessageShareData', 'onMenuShareAppMessage', 'hideMenuItems']// 必填，需要使用的JS接口列表，所有JS接口列表见附录2});wx.ready(function () {// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，// config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，// 则须把相关接口放在ready函数中调用来确保正确执行。// 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。});} else {}}})},

4、点击分享按钮之后

wxShare() {//获取分享支付的urlweixinpayProxy({orderSn: this.sn}).then(res => {if (res.returnCode == '200') {if (res.response.code == '200') {var mwebUrl = res.response.url;var imgUrl = 'http://img.3hmlg.com/imageSearch/upload/image/202003/a28dc203-baef-482e-82f2-6019cbe70111.png'wx.hideMenuItems({menuList: ['menuItem:share:timeline','menuItem:share:qq','menuItem:share:QZone','menuItem:share:email','menuItem:openWithQQBrowse','menuItem:openWithSafari'] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3});wx.updateAppMessageShareData({title: '请帮我付款', // 分享标题desc: '请帮我付款，谢谢你。', // 分享描述link: mwebUrl, // 分享链接imgUrl: imgUrl, // 分享图标success: function () {},cancel: function () {// 用户取消分享后执行的回调函数},fail: function (res) {alert('分享失败！！' + res)}});} else {}}})},

到这里是不能直接分享的（就是不会出现微信官方分享的页面）、需要自己点击右上角3个点 ··· 我这边处理是自己加了个提示页面引导用户去点击分享

到这里基本是成功了，但是从其他页面进入到需要分享的页面：

安卓在进行页面跳转是会刷新当前url，ios端不会，所以这里有可能导致签名失败。

简单粗暴点如果我们在A页面到B页面（需要做分享的页面）直接用window.location.href='...url'来跳转。

VUE使用JS-SDK实现微信分享好友功能（通过点击控件触发）相关推荐

wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
Vue实现微信分享好友，分享朋友圈。
实现微信分享功能. 1 .基于vue去实现在微信里去分享给你的微信好友,或者去分享到你的朋友圈里.如果是react 等等一样用法. 2.目前实现微信分享功能是通过点击微信控件触发的,代码拿走直接用, ...
微信分享好友+朋友圈开发文档
微信分享好友+朋友圈准备工作资源申请配置AS 备注准备工作资源申请申请微信开放平台账号申请自己的AppID 地址准备开发资源开发工具包 android项目,添加依赖库 2018.12 ...
python怎么使用别人的代码_利用Python查看微信共同好友功能的实现代码
总有思路清奇的朋友存在,想实现查看微信共同好友: 由于之前分享的代码有获取过微信好友头像,所以当时第一反应是通过itchat微信接口获取好友信息,比对两个人的好友信息列表就可以实现了.按理说这么简单的 ...
微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
[Ext JS 4] 实战之带week(星期)的日期选择控件(三)
前言在 [Ext JS 4] 实战之带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件 ==> "2. 每年的周数从(1-52), 如果超 ...
[Ext JS 4] 实战之带week(星期)的日期选择控件(二)
前言 JavaScript 中的日期和时间 [Ext JS 4] 实战之带week(星期)的日期选择控件(一) 如对本篇的一些预备知识需详尽了解,可参考以上两篇. Javascript 有提供Dat ...
基于 next.js + mdx 搭建组件库文档项目(二) -- mdx 控件封装实现组件的演示与 Props 列表
说明经过上阶段的配置虽然可以在项目中使用 mdx 语法来创建页面了,但是我们的组件库有一些定制化的需求:交互式的组件演示.组件 Props 列表展示.这些功能如果可以通过封装来实现,会大大提升开发 ...
微信个人中心 html,微信小程序个人中心的列表控件实现代码
个人中心的列表控件首先来看效果图 wxml 我的收藏 wxss .list-item { display: flex; flex-direction: row; align-items: cente ...

VUE使用JS-SDK实现微信分享好友功能（通过点击控件触发）

VUE使用JS-SDK实现微信分享好友功能（通过点击控件触发）相关推荐

最新文章

热门文章