H5调用微信分享

最新推荐文章于 2024-06-25 03:20:55 发布
最新推荐文章于 2024-06-25 03:20:55 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： vue react 前端小知识 文章标签： reactjs html vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lllllllN/article/details/108770988
版权
本文介绍如何在H5中调用微信分享功能，特别是在React项目中处理动态传参路由和自定义分享内容的方法，包括全局引入微信SDK、封装微信内置方法及在webView中的消息传递处理。
摘要由CSDN通过智能技术生成

话不多说,直接干货(我用的react,Vue也使用这个方法)

在小程序项目中遇到了H5通过分享增加别人游戏次数的需求,这就不简单是一个海报分享或者直接分享能够实现的了,

首先我把我的路由写成了一个动态传参路由,这样的话就可以在海报层面上进行分享携带我分享者的信息

第二步就是实现H5上面的三个点进行分享,也就是文章的重点

1.全局引入微信SDK,在根目录public文件夹下index.html

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

2.引入之后就可以全局使用微信的内置方法了,因为方法有很多,因此可以简单的封装一下

  postMessage(message)
最低0.47元/天 解锁文章
lllllllN
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5实现微信分享
code_shuai的博客
11-09 1837
背景 前篇文章介绍了公司业务需要，我们需要做一个H5端的商城，在微信内分享时发现，采用右上角分享，分享出去的样式很丑，基于此我们就接入微信自定义分享功能，来美化一波。（同样我只介绍前端需要的工作） 技术准备 1.首先项目引入微信JSSDK的JS文件,直接在项目的入口文件（public/index.html）文件引入就行。文档地址。 2.都2019了 项目基本都用的框架，所以没有用框架的自己单独引入...
HTML5手机调用微信分享
07-12
* 1、分享到微信朋友圈 * 2、分享给微信好友 * 3、分享到腾讯微博 * 4、新的分享接口，包含朋友圈、好友、微博的分享（for iOS） * 5、隐藏/显示右上角的菜单入口 * 6、隐藏/显示底部浏览器工具栏 * 7、获取当前的网络状态 * 8、调起微信客户端的图片播放组件 * 9、关闭公众平台Web页面 * 10、判断当前网页是否在微信内置浏览器中打开 * 11、增加打开扫描二维码 * 12、支持WeixinApi的错误监控 * 13、检测应用程序是否已经安装（需要官方开通权限） * 14、发送电子邮件 * 15、禁止用户分享
web h5调用微信分享功能
Program Apes
08-09 2079
微信分享 微信网页开发 /JS-SDK说明文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html // 根目录引用微信js文件 <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> // imgUrl:缩略图 title:分享标题 desc:描述文字 function weChatShar
H5外部浏览器直接调起微信手机网站调用微信分享
04-13
H5外部浏览器直接调起微信 tml5手机网站调用微信分享，其中示例包括 1. 获取网络类型 2. 调起客户端的图片播放组件 3. 调用微信扫描二维码 4. 判断是否安装对应的应用 5. 发送邮件 6. 分享到微信朋友圈
H5网页实现微信分享，分享朋友圈功能（分享带图片，附源码）
最新发布
2401_85616285的博客
06-25 2316
光给面试题不给答案不是我的风格。这里面的面试题也只是凤毛麟角，还有答案的话会极大的增加文章的篇幅，减少文章的可读性光给面试题不给答案不是我的风格。这里面的面试题也只是凤毛麟角，还有答案的话会极大的增加文章的篇幅，减少文章的可读性。
uniapp H5集成微信JS支付
03-26
uni-app框架下，开发H5，集成微信JS API支付，安装指定的，jweixin-module之后调用方法关键代码，搞了一星期，终于都搞明白，很简单，一看就懂了。
h5移动端调用微信和支付宝支付的实现
12-29
改文档中主要说明了h5移动端调用微信和支付宝支付的实现，按照readme说明即可
微信端html5页面调用分享接口示例
09-27
主要介绍了微信端html5页面调用分享接口示例的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
h5中使用微信分享
Kratial的博客
12-26 3352
单页面应用添加微信分享和页面授权功能
html5手机网站调用微信分享
07-16
html5手机网站调用微信分享，其中示例包括 1. 获取网络类型 2. 调起客户端的图片播放组件 3. 调用微信扫描二维码 4. 判断是否安装对应的应用 5. 发送邮件 6. 分享到微信朋友圈
h5微信分享代码
08-22
h5微信分享代码详细代码，请参考腾讯微信官方h5开发文档！！！
微信h5分享js接口写法老接口
09-13
这个是我自己写的分享微信内的分享js写法，总是报错的参考一下，也可直接复制，另外还需要引用微信接口的js
H5 移动端浏览器调用微信的分享功能
weixin_43837123的博客
08-16 7687
​ 项目场景：把某个h5页面分享到微信里 API参考：概述 | 微信开放文档 1. 使用npm 安装或者在.html 文件里 引入 npm install weixin-js-sdk 2. 引入微信的SDK import wx from 'weixin-js-sdk' 3. 请求后端接口，在接口成功的回调函数中，通过wx的config接口注入权限验证配置 封装 .js export const wechatShare = function (...............
H5页面设置微信分享
weixin_42599428的博客
07-22 3040
H5页面设置微信分享 写代码之前的准备工作 1、登录微信公众号（需要已经认证过的公众号），进入“设置与开发”→“公众号设置”→“功能设置”→“JS接口安全域名”，将文件下载下来，上传至与将要分享的页面相同的域名服务器中，上传成功后再在下面填写你的域名。 2、在“设置与开发”→“基本配置”→“IP白名单”中配置你的IP地址，这里的IP地址是获取签名步骤时需要访问的IP地址。 3、在“设置与开发”→“基本配置”中拿到APPID及密钥（也就是开发者密码AppSecret），这里在获取签名时需要用到。 4、这
PHP微信分享jssdk，前后端解决方案
Unbeau
09-17 611
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 微信开发的解决方案，包括获取存储accesstoken、jsapiticket、signpackage等数据。 一、AccessToken、JsapiTicket怎么获取？ 微信的接口需要使用Token验证，Token的字段名为AccessToken；AK可以通过Appid和APPSecret获取，接口为（..
小程序内嵌H5（webview），调起微信分享
weixin_48091030的博客
03-21 5269
内嵌H5调起微信分享（朋友圈不可 ）
H5页面在微信端的分享
weixin_34060299的博客
08-29 1347
H5页面在微信端的分享 微信分享，咋一看好像很复杂，实则非常简单。只需要调用微信官方出的微信jssdk，加上些许配置，就可以实现h5页面在微信上的分享，官方文档地址为：https://mp.weixin.qq.com/wiki... 一、获取基本信息 找到已有公众号的appid，根据这个appid和url向后端发起请求，拿到配置所需要的参...
vue h5调用微信分享
12-14
要在Vue H5中调用微信分享，首先需要引入微信官方的JS-SDK库。在Vue项目的index.html文件中，可以在<head>标签内添加如下代码： ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 然后，在Vue组件的created生命周期钩子函数中，使用Vue的axios或者其他网络请求库向后端请求获取微信配置信息。 ```javascript created() { this.fetchWechatConfig(); }, methods: { async fetchWechatConfig() { const response = await axios.get('/api/wechat/config'); // 向后端请求微信配置信息 const { appId, timestamp, nonceStr, signature } = response.data; // 将配置信息存储到全局变量中 this.$store.commit('setWechatConfig', { appId, timestamp, nonceStr, signature }); this.initWechatSDK(); }, initWechatSDK() { const { appId, timestamp, nonceStr, signature } = this.$store.state.wechatConfig; wx.config({ appId, timestamp, nonceStr, signature, jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], // 配置需要使用的微信API }); // 进行微信SDK的初始化 wx.ready(() => { this.shareToWechat(); }); }, shareToWechat() { const shareData = { title: '分享标题', link: '分享链接', imgUrl: '分享图片链接', desc: '分享描述', }; // 配置分享的具体内容 wx.onMenuShareTimeline(shareData); // 分享到朋友圈 wx.onMenuShareAppMessage(shareData); // 分享给好友 }, }, ``` 上述代码中，我们通过axios库向后端请求了微信配置信息，并将其存储到Vuex的全局状态中。然后，我们使用微信JS-SDK中的`wx.config`方法进行微信验证和初始化配置。一旦初始化成功，`wx.ready`回调函数将会被触发，我们在该函数中调用`shareToWechat`方法来配置分享的具体内容。 在`shareData`对象中，我们可以自定义分享的标题、链接、图片和描述等信息，然后使用`wx.onMenuShareTimeline`方法配置分享给朋友圈的内容，使用`wx.onMenuShareAppMessage`方法配置分享给好友的内容。 最后，我们可以在Vue组件中调用`shareToWechat`方法来触发微信分享。 注意：在实际开发中，需要根据微信的API文档和后端提供的接口来进行相应的调整和配置。以上代码仅为示例，具体实现方式可能会有所不同。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值