vue实现分享功能，百度分享，需要刷新页面才显示的问题

最新推荐文章于 2024-04-19 14:57:07 发布
最新推荐文章于 2024-04-19 14:57:07 发布
阅读量2k 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39516866/article/details/82910185
版权

在beforeCreate中加上 window._bd_share_main = “”; 

LiAlisa
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue单页应用加百度统计代码（亲测有效）
08-28
这是因为Vue.js单页应用使用了客户端路由，页面的跳转不需要刷新整个页面，只需要更新页面的内容。这使得百度统计代码无法被正确地触发。 二、解决方案 为了解决这个问题，我们可以使用Vue Router的afterEach方法...
关于flexble.js 刷新后才能自适应手机的问题
lorena0928的博客
03-09 1106
首先大家都知道flexible.js手淘框架，是一个用来适配移动端的js框架。 手淘框架的核心原理就是根据不同的width给网页中html跟节点设置不同的font-size，然后所有的距离大小都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。 使用步骤简单介绍如下： 1.引入flexible.js 2.根据拿到的设计手稿进行rem值转换。引入js后，加载dom时，整个页面会
关于响应式布局，你必须要知道的
weixin_33754913的博客
05-23 1564
一、前言 响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。本文主要介绍一些响应式布局容易忽略但又很重要的知识点。 二、视口 移动前端中常说的 viewport （视口）就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。手机端与PC端视口存在差异，电脑端的视口宽度...
vue3分享网页到qq好友，朋友圈，微博，qq空间
最新发布
m0_56191891的博客
04-19 632
vue3分享网页到qq好友，朋友圈，微博，qq空间 1，所需插件 2，详细代码 3，效果展示
解决 ios 调用 wx.config 需要刷新一次才能成功
DTCloud
03-02 615
在进入H5公众号后，利用js 进行刷新一次，然后打个标记。
vue使用百度分享，需要刷新页面才显示的解决方案
陈小穗子
05-21 4460
vue单页面中使用百度分享，初次加载失败或者需要刷新一次才可正常点击，首先得写在mounted的this.$nextTick()里面，其次，需要在beforeCreate中加上 window._bd_share_main = “”; 附上百度分享源码 window._bd_share_main ? window._bd_share_is_recently_loaded = !0 : (wi...
解决前端开发之微信内置浏览器页面渲染和缓存问题
热门推荐
倚竹幽篁
01-07 2万+
最近在做一个前端的项目，因为需求是最好能够分享到微信朋友圈，那免不了兼容微信内置的QQ浏览器。 我不得不说，微信内置的浏览器简直就是前端开发的绊脚石，业界之毒瘤啊！w(ﾟДﾟ)w说白了就是个手机版的IE，对H5响应式页面支持非常差，但我们必须承认微信这整个生态圈是很NB的。 另外页面缓存问题也是大家很烦恼的，由于微信内置的简易浏览器没有提供刷新功能，后台更新图片资源后，根本刷新不了。 那么现...
Vue多系统切换实现方案
08-27
在实现时，我们可以在 app.vue 里开发切换功能，因为每个页面都需要这个切换功能。我们使用 Vue + Element 开发，所以切换的地方直接使用 Element 的 tab 切换组件。 需要注意的是，如果使用 v-if 控制每个 iframe ...
路由技术解决页面跳转问题
01-19
以我们公司现在这个项目为例，前台是由FLEX实现，整个系统可能只有几个application组成，所有的功能点均由module实现，而Module本身无法实现各module之间的跳转，只能通过application实现对各个module的动态加载来...
VUE+DataV+ECharts组合页面制作看板
06-30
最后，通过Vue的数据绑定和响应式系统，实现数据的动态更新和图表的实时刷新。 总的来说，"VUE+DataV+ECharts组合页面制作看板"是一种高效且灵活的前端开发模式，可以帮助开发者轻松构建出功能丰富、视觉效果优秀的...
移动端首次进页面，部分样式刷新后才生效
多多踩坑
12-31 1084
项目：h5 + vue + vant 问题复现：页脚盒子起了类名为 footer 并同时给了 fixed 定位和 flex 样式，发现首次进入该页面时页脚部分样式不对，必须要刷新一下页面，样式才会正常。 分析：起初以为是 fixed 和 flex 会有冲突，于是在 footer 里又套了一层盒子，问题没解决，二次排查，在查看样式时发现 footer 中有默认 padding 并不是我写的，于是将 footer类名改为 foot，问题解决 结论：不确定，但是感觉 footer 类名是有默认样式的，需要尽
网页分享插件，可以实现微信、QQ、微博分享
11-17
网页分享插件，可以实现微信、QQ、微博分享，内附有实例demo，简单易懂
vue实现分享功能，百度分享，需要刷新页面才显示的解决方案
mandy' blog
11-06 4085
vue单页面中使用百度分享，初次加载失败或者需要刷新一次才可正常点击，首先得写在mounted的this.$nextTick()里面， 关键是需在beforeCreate中加上 window._bd_share_main = “”; 目的是把百度分享的一个参数置空 ...
vue 页面分享功能
weixin_43173924的博客
04-30 1万+
<!-- 分享弹窗 --> <el-dialog title="分享：数据大屏" :visible.sync="shareDialogVisible" width="30%"> <el-checkbox v-model="shareInfo.usePassword">启用密码：</el-checkbox> ...
简单粗暴教你在VUE中引入微信SDK 调用微信分享、朋友圈分享、QQ分享......
alokka的博客
11-23 1万+
写在前面： 刚做了一个微信端的网页，用到了微信分享，在网上看了好多的资料，发现好多文档都写得云里雾里，让人看的头疼。通过对很多大佬文章的综合整理，才完成了微信分享的部分。所以我想着自己写一篇文章，能让看到我这篇文章的亲们能够清楚的明白在vue上怎么使用微信分享SDK，能够按照我写的步骤简单粗暴的实现 备注：本人还是个菜鸟，刚刚接触vue 文章中有错误或者大家对我有建议，随意的提出来，我好改正，谢...
vue组件中使用百度分享初次加载失败
luoxuefeisheng的博客
10-17 633
问题：初次加载时，百度分享的按钮图片都不显示，F12发现class和点击事件都未生效 刷新后就正常显示使用 解决：在beforeCreate中加上这一句就好了 window._bd_share_main = "";...
Vue+Vue-router微信分享功能
weixin_34025151的博客
02-13 454
在使用vue和vue-router路由框架已经开发过好几个项目了，其中也遇到不少坑，有些坑各种搜也没有找到非常理想的答案。 vue学习相对来说还是比较简单，官方文档说明非常清楚（https://cn.vuejs.org/v2/guide/），多做一些Demo就可以熟练上手了，并且现在也有好多框架（vuex，MintUI，Element，iView等），根据项目需要自行学则，因此本人也就没有怎么写过...
基于Vshare插件实现vue分享功能
菜鸟零号 kungfu~peng
11-30 1759
Vue中引入分享功能插件 一度为快 实现 引入插件 npm config set strict-ssl false npm install vshare -S 页面实现 <template> <div style="text-align: center"> <h3>分享demo</h3> <div> <vshare :vshareConfig="vshareConfig
vue3 实现分享功能
09-24
对于Vue3中实现分享功能，你可以使用Vue的生命周期钩子函数和第三方库来实现。首先，你可以在Vue组件的created或mounted钩子函数中初始化微信分享功能，以确保在组件加载完成后进行分享设置。 在实现微信分享之前，你需要引入微信分享的JS-SDK，可以通过以下步骤获取： 1. 注册微信公众号，并绑定域名。 2. 在微信公众平台中开启JS-SDK权限，并获取appId、timestamp、nonceStr和signature等参数。 3. 引入微信JS-SDK的分享API，并通过配置参数进行分享设置。 接下来，你可以使用第三方库（如wx-js-sdk）来简化微信分享的实现。安装wx-js-sdk库后，你可以按照以下步骤来实现分享功能： 1. 在Vue组件中引入wx-js-sdk库。 ```javascript import wx from 'weixin-js-sdk'; ``` 2. 在Vue组件的created或mounted钩子函数中进行初始化微信分享。 ```javascript created() { // 初始化微信JS-SDK this.initWechatShare(); }, methods: { initWechatShare() { // 通过Ajax请求获取微信分享的配置参数 // 这里需要替换为你实际的接口地址 axios.get('/api/getWechatShareConfig').then(response => { const { appId, timestamp, nonceStr, signature } = response.data; // 配置微信JS-SDK wx.config({ debug: false, appId, timestamp, nonceStr, signature, jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 需要使用的分享API列表 }); // 调用微信分享API wx.ready(() => { wx.updateAppMessageShareData({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享图标', success: () => { // 分享成功回调 }, cancel: () => { // 取消分享回调 } }); wx.updateTimelineShareData({ title: '分享标题', link: '分享链接', imgUrl: '分享图标', success: () => { // 分享成功回调 }, cancel: () => { // 取消分享回调 } }); }); }).catch(error => { console.error('获取微信分享配置失败', error); }); } } ``` 这样，当Vue组件加载完成后，会自动初始化微信分享功能，并配置分享的标题、描述、链接和图标等信息。当用户点击分享按钮时，会触发相应的分享回调函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值