微信分享踩坑记（一）——微信生态右上角自定义分享（微信JS-SDK）

最新推荐文章于 2021-09-10 17:21:24 发布
最新推荐文章于 2021-09-10 17:21:24 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： 微信公众号 文章标签： 微信分享 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LYP_csdn_jy/article/details/84568721
版权
本文介绍了在Vue.js项目中利用微信JS-SDK实现微信生态右上角自定义分享的踩坑经历，包括设置JS安全域名、处理打包问题、签名错误排查以及分享限制等关键步骤。在遇到.txt文件放置问题时，通过修改webpack配置解决了访问路径问题；对于签名错误，提供了微信接口签名校验工具进行排查。注意，微信网页分享仅支持图文链接，若需分享图片，建议提示用户长按保存或通过链接方式分享带图内容。
摘要由CSDN通过智能技术生成

使用框架：Vue.js、微信JS-SDK、HTML5+（HBuilder）
两种场景：微信生态右上角自定义分享、APP分享到微信

1’ 公众号设置JS安全域名

公众号开发者可在该域名下调用微信开放的JS接口（详细步骤请自行检索*）

Q：其中的一个.txt校验文件需要放在域名的根目录下面，但是vue中使用webpack打包出来的静态文件通常是放在static下面的，这样会报错
A：将文件放在项目的根目录，并在webpack的这两个目录中添加这一段代码（要保证：域名/文件名.txt能直接访问）
在这里插入图片描述

2’ vue中引入微信相关的模块

Vue.use(WechatPlugin);
const wx = Vue.wechat;

3’ 通过config接口注入权限验证配置（需要后台提供接口）

wx.config({
   
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '',
最低0.47元/天 解锁文章
MytLoy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信JS-SDK实现自定义分享功能，分享给朋友，分享到QQ，分享到微博
许小乖……是总攻
03-23 1万+
其实除了可以在微信上分享到朋友圈和发送给好友，微信的分享接口还提供了分享到QQ和分享到腾讯微博……小编又继续去微信公众平台学习了一下，其实都是一样的嘛！就是在页面的config接口注入权限验证配置好就ok！             类似于“分享到朋友圈”按钮点击状态及自定义分享内容接口，我们调用“分享到QQ”和“分享到腾讯微博”按钮点击状态及自定义分享内容接口  。 获取“分享
php微信从右上角打开,微信jssdk隐藏右上角菜单问题
weixin_29069575的博客
03-20 320
项目中需要隐藏微信右上角的菜单，在某些页面需要禁止刷新、分享等操作。但使用微信jssdk隐藏右上角菜单wx.hideOptionMenu();，出现问题：(1)右上角的“...”还在，然后打开后还有“调整字体”、“刷新”、“举报”，但我的这个页面是禁止刷新的啊。。那等于是没有隐藏掉。。(2)链接到别的页面时，其他页面的右上角菜单也受影响了，都只剩下这三个选项了，这个设置不是只是某个页面的设置吗？难...
重置微信分享参数（微信二次分享）
Cousin__的博客
03-29 968
一、引入sdk.js 1.安装： npm install weixin-js-sdk import wx from 'weixin-js-sdk' //引入微信sdk依赖 import axios from 'axios'; // 引用全局 const jsApiList = ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ','onMenuShareWeibo'] //要用到微信API functi.
微信公众号H5分享的坑
今天又懒得加班
09-10 712
1. 先注册js api白名单 jsApiList:[ 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone' ] 2. wx.updateTimelineShareData 和 wx.updateAppMessageShar.
H5页面在微信端的分享
web前端开发
10-22 1833
来源 |https://www.cnblogs.com/BeautifulBoy/p/9785005.html微信分享，咋一看好像很复杂，实则非常简单。只需要调用微信官方出的微信jss...
SpringBoot JS-SDK自定义微信分享的实现
10-16
在本文中，我们将深入探讨如何在SpringBoot项目中利用JS-SDK实现微信分享的自定义功能。微信分享自定义允许开发者调整用户在微信内分享内容的样式和信息，包括标题、图片、描述等，从而提升用户体验和品牌曝光度。 ...
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
10-05
主要介绍了微信JS-SDK自定义分享功能,结合实例形式分析了基于JS-SDK接口实现的分享给朋友及分享到朋友圈等功能的相关配置文件与数据操作技巧,需要的朋友可以参考下
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
10-17
主要介绍了微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中使用微信公众号js-sdk踩坑记录
12-03
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。 分享页面到朋友...
微信JS-SDK Demo.rar_DEMO_微信_微信JS-SDK Demo_微信js sdk_微信扫一扫
09-21
微信JS-SDK Demo 摘录微信调用扫一扫功能的实现
php微信自定义分享不生效,微信网页分享自定义内容无效
weixin_29810427的博客
03-23 422
测试连接：http://greenstar.vmi31.com/index.php?m=default&c=article&a=info&aid=55&u=6debug:true的时候 所有的反馈信息都正常。config oksendmessage oksuccess ok但是分享到的内容 就是少了自定义内容分享代码如下~~但是分享到朋友圈和发给朋友 自定义的...
微信自定义分享-配置成功分享失败
qq_37239553的博客
05-10 7754
最近花了一天时间踩了个自定义分享的坑，按官方文档来说第一步需要绑定域名，第二步需要引入jssdk接下来就是前端所需要的值如何获取到的问题，前端config所需的值（appid,timestamp,nonceStr,signature）如下图所示：第一个坑nonceStr一定要用驼峰命名法写，第二个坑签名错误，本人通过官方检验工具检验签名完全正确，当时就以为微信怕是抽风了.......经过查证发现这...
微信自定义分享设置
一个慢的博客
04-09 6198
经常会从APP分享某个网页到微信，然后会在微信里打开再分享出去后 结果就是从APP分享过来的是1的样子，在微信里打开再分享出来就是2的样子 现在想让2的链接和标题、图标都是1的样子，那么需要在h5分享页面做些设置 设置如下： 微信公众平台的设置可以参考微信公众平台文档 html页面的设置如下： var data = { title: '分享页面的标题', description: ...
微信公众号里内置浏览器右上角分享主题/内容/图片自定义 JS代码
不变的24号
03-30 9354
[javascript] view plain copyvar wimg = 'http://ihome.shlogic.com.cn/store/images/logo.png';  var wurl = window.location.href;  var wdesc = '我在蜗牛暖通智慧家发现了一个不错的商品, 快来看看！';  var wtit = '蜗牛暖通';  var wappid...
js微信禁用右上角的分享按钮，，和vue中微信页面禁用右上角的分享按钮的问题
dakache11的博客
12-19 6942
1、隐藏微信网页右上角的按钮 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {     // 通过下面这个API隐藏右上角按钮     WeixinJSBridge.call('hideOptionMenu'); });               document.addEventL...
模仿微信右上角加号菜单
weixin_34409703的博客
08-03 1656
<style lang="scss"> .menu { position: absolute; top: 46px; right: 10px; z-index: 100; width: 160px; background: #373A41; box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2); .menu-it...
html5页面微信分享,微信 js-sdk 完成 H5自定义页面分享
最新发布
05-30
好的，关于微信分享的问题，我可以给你一些指导。首先，你需要在你的 HTML5 页面中引入微信 JS-SDK，然后在页面加载完成后初始化 JS-SDK。接着，你需要通过 JS-SDK 提供的接口来配置分享的内容和参数，最后调用分享接口即可完成分享。 具体步骤如下： 1. 引入微信 JS-SDK 在 HTML 页面中引入微信 JS-SDK，如下所示： ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 2. 初始化 JS-SDK 在页面加载完成后，初始化 JS-SDK。你需要先通过微信公众平台获取到你的 AppID 和 AppSecret，然后使用这些信息初始化 JS-SDK。示例代码如下： ```javascript wx.config({ debug: false, appId: 'your app id', timestamp: 'your timestamp', nonceStr: 'your nonceStr', signature: 'your signature', jsApiList: [ 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] }); ``` 其中，`appId`、`timestamp`、`nonceStr` 和 `signature` 分别是通过微信公众平台生成的，用于验证你的身份和权限的参数。`jsApiList` 是你需要使用的 JS-SDK 接口列表。 3. 配置分享内容和参数 在初始化 JS-SDK 后，你需要通过 JS-SDK 提供的接口来配置分享的内容和参数。示例代码如下： ```javascript wx.ready(function() { wx.onMenuShareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); wx.onMenuShareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); }); ``` 其中，`onMenuShareAppMessage` 和 `onMenuShareTimeline` 分别是分享给好友和分享到朋友圈的接口。你需要提供分享的标题、描述、链接和缩略图等参数。 4. 调用分享接口 最后，在页面中调用分享接口即可完成分享。示例代码如下： ```javascript wx.ready(function() { wx.onMenuShareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); wx.onMenuShareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); // 在需要分享的地方调用 shareAppMessage 和 shareTimeline 接口 // 示例代码如下 document.querySelector('#share-btn').addEventListener('click', function() { wx.shareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); }); document.querySelector('#share-timeline-btn').addEventListener('click', function() { wx.shareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); }); }); ``` 这样就完成了微信分享功能的实现。需要注意的是，由于微信的安全机制，分享的链接必须是在微信公众平台中配置过的域名，否则可能无法正常分享。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值