项目场景：把某个h5页面分享到微信里

API参考：概述 | 微信开放文档

1. 使用npm 安装或者在.html 文件里 <script src="" ></script >引入

npm install weixin-js-sdk

2. 引入微信的SDK

import wx from 'weixin-js-sdk'

3. 请求后端接口，在接口成功的回调函数中，通过wx的config接口注入权限验证配置

封装 .js

export const wechatShare = function (shareData, url) {console.log(shareData);fetch(baseUrl + "/gzh/jsapi?url=" + url, {// 请求配置 // 根据后台配置填写method: "GET",}).then(async (res) => {const data = await res.json();const Data = data.data;wx.config({debug: false,// 是否开启调试模式appId: Data.appId,  //必填，公众号的唯一标识timestamp: Data.timestamp, // 必填，生成签名的时间戳nonceStr: Data.nonceStr, // 必填，生成签名的随机串signature: Data.signature, // 必填，签名jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],// 必填，需要使用的JS接口列表,可以查看文档，根据项目需求填加});});wx.ready(() => {// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）wx.updateAppMessageShareData({title: shareData.title,desc: shareData.desc,link: shareData.url,imgUrl: shareData.image,success: function () {console.log(shareData, "shareData");// 设置成功},cancel: function () {console.log("分享取消");},});// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）wx.updateTimelineShareData({title: shareData.title,desc: shareData.desc,link: shareData.url,imgUrl: shareData.image,success: function () {// 设置成功},cancel: function () {console.log("分享取消");},});});
};

4. 组件里使用刚刚封装的 .js里的函数,内容自己配置

 componentDidMount() {const id = this.getParams(Router.router.asPath)this.getDetail(id)const currentUrl = window.location.href.split('#')[0]wechatShare({title: '******网站',  // 标题desc: '*****千万家',// 描述url: location.href, // 跳转地址image: 'https://img.nbsjfr.com/shangjingu.png' // 图片}, currentUrl)}

Tips：title,desc,imgURL,根据自己需求进行配置

H5 移动端浏览器调用微信的分享功能相关推荐

解决方案：h5网页外部浏览器唤起微信分享，唤起微信面板，分享朋友圈方案，兼容大部分浏览器
h5网页外部浏览器唤起微信分享,唤起微信面板,分享朋友圈方案,兼容大部分浏览器需求是点击分享按钮,直接唤起微信,发送给好有或者朋友圈.这个需求并不好完成,因为微信并没有对h5网页开放api,但是每个 ...
微信H5页面隐藏点击右上角的分享功能
微信H5页面隐藏点击右上角的分享功能注:H5页面右上角的三个点是微信自带的,所以不能去掉,只是可以隐藏点击后的分享功能右上角分享功能的显示与隐藏 <script>// 隐藏docume ...
微信自定义分享功能实现
微信自定义分享功能实现微信自定义分享功能实现一.实现的关键 1.后端的任务 2.前台的任务二.实现具体步骤 1.js安全域名配置(被分享的网址必须实现) 2.添加服务器配置(成为开发者) 3.生 ...
php 微信分享功能_基于thinkPHP实现的微信自定义分享功能
这篇文章主要介绍了基于thinkPHP实现的微信自定义分享功能,结合实例形式分析了thinkPHP调用微信接口实现自定义分享功能的相关操作技巧,需要的朋友可以参考下本文实例讲述了基于thinkPHP ...
【vue/uni-app】微信sdk分享功能在vue中开发中的一些个人纪录
在vue开发微信sdk分享功能中的一些个人纪录先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 我这里用的是 ...
微信禁止分享功能怎么设置
微信禁止分享功能怎么设置 how to do? 有时候我们在微信端,有的内容并不希望用户分享出去,就需要设置禁止分享功能,废话少说,切入正题888: how to do? 引入jssdk.js htt ...
微信分享源码PHP版JS-SDK接口_微信JSSDK分享功能图文实例详解
本文实例讲述了微信JSSDK分享功能.分享给大家供大家参考,具体如下: 这里以微信分享到朋友圈,分享给微信好友为例为参考,进行调用测试,想添加其他的功能,自行查看开发人员文档即可工欲善其事,必先利其 ...
php根据浏览器调用支付_Android通过外部浏览器调用微信H5支付，Android+PHP详解
看了好多关于讲解微信H5支付开发的文章,大多数都是通过微信内部浏览器来调用支付接口(其实就是公众号支付),可能是因为H5支付接口刚开放不久吧. 微信官方体验链接:http://wxpay.wxutil ...
H5手机浏览器唤起微信实现分享
最近在做一个手机站,要求点击分享可以直接打开微信分享出去.而不是jiathis,share分享这种的点击出来二维码.在网上看了很多,都说APP能唤起微信,手机网页实现不了.也找了很多都不能直接唤起微信 ...
H5之外部浏览器唤起微信分享
转自https://blog.csdn.net/qq_18976087/article/details/79095735 最近在做一个手机站,要求点击分享可以直接打开微信分享出去.而不是jiathis ...

H5 移动端浏览器调用微信的分享功能

项目场景：把某个h5页面分享到微信里

1. 使用npm 安装或者在.html 文件里 <script src="" ></script >引入

2. 引入微信的SDK

3. 请求后端接口，在接口成功的回调函数中，通过wx的config接口注入权限验证配置

4. 组件里使用刚刚封装的 .js里的函数,内容自己配置

H5 移动端浏览器调用微信的分享功能相关推荐

最新文章

热门文章