H5调用微信分享

最新推荐文章于 2024-08-03 00:03:01 发布
最新推荐文章于 2024-08-03 00:03:01 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： vue react 前端小知识 文章标签： reactjs html vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lllllllN/article/details/108770988
版权

话不多说,直接干货(我用的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
    评论
专栏目录
react使用锚点，页面滚动（跳转）指定位置
lllllllN的博客
06-12 9056
react使用锚点 在react中，原生的锚点是不可以使用的，因此需要手动判断和取DOM元素 使用的方法和原生的锚点基本类似，唯一不同的是在点击跳转的时候，react使用的是写的方法，原生是直接跳转到相对应位置 下面上代码进行对比 <div id={'tab-bar'}> <Button inline onClick={ () => this.scrollToAnchor('a', true)}>猫1</Button> <Button inline
react-cookie react使用cookie
lllllllN的博客
05-15 2721
此文参考npm地址点击 在react中使用cookie： 1.安装cookie模块 npm install react-cookie 2.在组件中导入cookie import Cookies from 'react-cookie' 3.cookie的操作 存字符串：Cookie.set('name','value') 取字符串：Cookie.load('name') 存json对象:Cookie.set('person',{'name':'Jack','age':'18'}) 取json对象:C
web h5调用微信分享功能
Program Apes
08-09 2035
微信分享 微信网页开发 /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
HTML5手机调用微信分享
07-12
* 1、分享到微信朋友圈 * 2、分享给微信好友 * 3、分享到腾讯微博 * 4、新的分享接口，包含朋友圈、好友、微博的分享（for iOS） * 5、隐藏/显示右上角的菜单入口 * 6、隐藏/显示底部浏览器工具栏 * 7、获取...
H5网页实现微信分享，分享朋友圈功能（分享带图片，附源码）
2401_85616285的博客
06-25 1715
光给面试题不给答案不是我的风格。这里面的面试题也只是凤毛麟角，还有答案的话会极大的增加文章的篇幅，减少文章的可读性光给面试题不给答案不是我的风格。这里面的面试题也只是凤毛麟角，还有答案的话会极大的增加文章的篇幅，减少文章的可读性。
uniapp H5集成微信JS支付
03-26
uni-app框架下，开发H5，集成微信JS API支付，安装指定的，jweixin-module之后调用方法关键代码，搞了一星期，终于都搞明白，很简单，一看就懂了。
H5外部浏览器直接调起微信手机网站调用微信分享
04-13
H5外部浏览器直接调起微信 tml5手机网站调用微信分享，其中示例包括 1. 获取网络类型 2. 调起客户端的图片播放组件 3. 调用微信扫描二维码 4. 判断是否安装对应的应用 5. 发送邮件 6. 分享到微信朋友圈
h5移动端调用微信和支付宝支付的实现
12-29
改文档中主要说明了h5移动端调用微信和支付宝支付的实现，按照readme说明即可
微信端html5页面调用分享接口示例
09-27
主要介绍了微信端html5页面调用分享接口示例的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-zmage 使用(图片缩放、多张查看、放大、下载)
lllllllN的博客
05-14 1961
使用于查看图片、点击放大、查看多张图片、下载图片 安装 npm i react-zmage --save 使用 1.引入组件 import Zmage from 'react-zmage' 2.将页面中的 img 标签替换为 Zmage 组件 <img src="图片源连接"/> ???? to ???? <Zmage src="图片源连接"/> // 现在这些图片都可以放大查看了 ！ 函数调用来唤出图片 // Zmage.browsing 函数接受的参数与 <Zmage
手机号码格式正则验证
lllllllN的博客
07-03 1784
复杂版 /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/ 简易版 /^[1]([3-9])[0-9]{9}$/ 举个栗子 var telStr = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
前端传递数组
lllllllN的博客
07-01 1354
简单明了，不多解释 qs.stringify({ids: [1, 2, 3]}, { indices: false }) //形式： ids=1&ids=2&id=3 qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘indices‘}) //形式： ids[0]=1&aids1]=2&ids[2]=3 qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘brackets‘}) //形式：
钉钉登录第三方网站
lllllllN的博客
12-09 1209
钉钉登录第三方网站 简单介绍 最近有钉钉登录后台的需求,于是在百度上找了很久,但是不是很多,于是就在想是不是过于简单导致没资料,实在没得办法,自己手动搞,最后发现其实官方已经说的很明白了,按照官方提示做就好了 钉钉开发文档 具体方案 官方提供了两种方案 一种是新开钉钉二维码页面,扫码再回到自己的页面 另一种就是内嵌到自己的页面,(推荐) 第一步 全局引入,在 index.html 文件中插入 <script src="https://g.alicdn.com/dingding/dinglogin/
前端--携带token下载表格JS
lllllllN的博客
05-29 945
项目起始的时候，有导出表格的需求，不需要token直接可以使用A标签直连下载 但是在我们项目逐渐完善后，在导出导入等一系列敏感操作的情景下，会要求携带token进行下载导入，这时，A标签href直连就不好使了，就需要写一个公用的方法，本文使用的是原生ajax请求数据 getUserToken（）为自己写的方法，return的是存储的token url为下载的连接，post方法需要在连接后面使用formData格式append每个参数 可以封装一个方法， 可配置项： 下载链接，文件名称 var xhr =
JavaScript 逻辑运算符
lllllllN的博客
05-12 753
逻辑运算符 逻辑运算符用于判定变量或值之间的逻辑。 1、JS中的||符号： 运算方法： 只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。 只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。 总结：真前假后,不可链式操作，（0,1自动转义为false和true），若想链式操作，可使用数组的方法，（查找，遍历等） 2、JS中的&&符号： 运算方法： 只要“&&”前面是fa
图表Echarts
lllllllN的博客
07-08 236
最近闲着没事研究了一下图表Echarts，先贴上 Echarts 介绍， 一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表，Echarts官方示例 直接贴出代码，我把它封装成了一个组件，目前很基础，请各位大神自行补充，但大致功能还是有的 /* * series 为一个对象，可以定制图形
Concis组件库封装——Loading加载中
量子前端的博客
06-22 2016
一个常规的react loading组件的开发和测试
HTML-05新浪新闻-正文-排版
最新发布
程小白的博客
08-03 129
【代码】【无标题】
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、付费专栏及课程。

余额充值