VUE2.0 如何实现微信网页的分享

已于 2023-04-27 21:42:40 修改
阅读量1.6k 收藏 1
点赞数 1
文章标签： 微信 javascript vue.js 前端
于 2023-04-27 16:11:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Allix/article/details/130408266
版权
本文介绍了在Vue2.0项目中实现微信网页分享的详细步骤，包括微信认证的重要性，引入SDK，签名配置，JS-SDK的使用，以及常见问题的解决方案。特别提醒，正确配置签名信息和理解函数调用顺序是关键。
摘要由CSDN通过智能技术生成

跟微信开发环境集成真是个苦差事，今天实现了网页的微信分享机制，坑比较多，写一写，大家方便避坑：

【1】先声明一点，微信认证之后才能开启这个功能，不管你接口显示是否已获得，没通过微信认证肯定分享不了

 【2】网页引入sdk包，可以动态引入，也可以直接写在index.html中，按自己需要来

【3】实现JS-SDK签名，这里有2个服务器缓存机制，一是token缓存，一是jsapi_ticket缓存，这里封装好一个服务器API，开放给前端调用即可，我这里实现的函数是initWXJSSDKConfigInfo，可以根据我的url返回签名。

我的例子里，用了appId做入参，不安全，可以用其它替换机制，这个函数返回完整的认证信息：

最低0.47元/天 解锁文章
小小IT流
关注
vue2.0仿微信界面聊天室|vue聊天实例
weixin_34292402的博客
04-07 7041
基于vue2.0+vue-cli+vuex+vue-router+webpack+es6+wcPop等技术开发的仿微信聊天界面|仿微信聊天室vue-chatRoom，实现了微信聊天功能，新增了消息下拉刷新，消息表情发送，图片、视频预览，打赏、红包等功能。 技术栈： MVVM框架：Vue.js 2.0 状态管理：Vuex 页面路由：Vue-router 弹窗插件：wcPop 打包工具：webp...
vue 微信分享
yusun1234的博客
08-17 1395
一个h5界面要求点击右上角三个点后点击微信好友分享带标题和图片给好友。vue项目中，分享携带头部标题、简介和缩略图等信息。
vue 实现微信分享
m0_73333688的博客
07-31 1606
在这个后端接口中，你需要使用你的微信公众号的AppID和AppSecret来进行签名验证，并生成一个包含参数的JSON返回给前端。在Vue组件中配置微信分享参数：在需要进行分享的Vue组件中，可以使用Vue的生命周期钩子函数（如created或mounted）来配置微信分享的参数。配置后端接口：上述代码中的YOUR_BACKEND_API_URL需要由你自己的后端接口来提供微信分享的参数。您可以参考微信官方文档中关于JS-SDK的介绍和使用说明，以了解更多关于微信分享的信息和配置方法。
H5网页实现微信分享，分享朋友圈功能（分享带图片，附源码）
最新发布
2401_85616285的博客
06-25 3779
光给面试题不给答案不是我的风格。这里面的面试题也只是凤毛麟角，还有答案的话会极大的增加文章的篇幅，减少文章的可读性光给面试题不给答案不是我的风格。这里面的面试题也只是凤毛麟角，还有答案的话会极大的增加文章的篇幅，减少文章的可读性。
微信网页分享
diaochengzao6501的博客
03-19 501
在微信中分享某个网页，如果不调用微信的接口，分享的网页会默认显示。默认的标题是网页的title，图片会默认选取网页中大于300*300的图片，如果图片小，取不到图片，在微信中会显示默认的灰色图案。网页的简介部分会默认为网页的链接。调用微信的接口以后，分享的标题、图片、简介都可以自定义设置。下面结合在项目中的开发实践，简要总结一下如何进行微信接口的调用，实现自定义网页分享。 调用微信接口...
vue2.0 微信分享
dengwei4048的博客
04-28 146
需求：首页，列表页，详情页的分享，活动页分享并进行相关操作，比如分享一次活动次数加1 首先：阅读微信开发文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 步骤一：绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。JS接口安全域名即你外网生产环境请求接...
VUE 2.0 微信网页共享组件
04-27
网上很多在VUE中开发网页分享的文章，有很多不能用了，重新整了一个，捣腾这个组件弄了3、4天，这里关键点说一下： 【1】微信必须开通认证，否则不行，接口连接那里标明已开通也不行 【2】对应的网页里，一定要加入...
vue-微信：基于Vue2.0高仿微信App的单页应用
02-27
一款基于Vue2.0高仿微信App的单页应用 概述 本项目是使用Vue.js2.0框架，搭配库 ，模仿微信app的交互，做到以假乱真的效果。 项目地址https://github.com/zhaohaodang/vue-WeChat 手机预览 首选红色，加载较快 蓝色...
vue实现微信二次分享以及自定义分享的示例
10-17
主要介绍了vue实现微信二次分享以及自定义分享的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue实现将自己网站（h5链接）分享到微信中形成小卡片（超详细）
热门推荐
穆雄雄的博客
12-21 1万+
我们在分享公众号信息到微信或者群中的时候，会出现一个小卡片，如下所示：但是呢，这种小卡片只能走微信的接口来实现，比如我们从公众号、小程序中分享的内容可以是这样的。如果我们将自己的博客分享到微信的话，只会出现个链接。那么，试问一下你，分享出来个这样的链接，你会去点吗？会不会以为这就是个钓鱼链接。今天，我们就来看看，如何将我们自己的站，搞一个和微信一样的分享卡片出来。
vue项目做微信分享功能
沉睡的博客
12-28 1430
vue项目做微信分享功能 安装sdk npm install weixin-js-sdk --save 方法 1.新建js文件wxapi.js 2.在wxapi.js中引入sdk以及配置一些基本信息(相关的配置内容是后台返的) 3.然后在需要分享的页面引入wxapi.js，调用里面的方法 大概代码如下： /** * 微信js-sdk * 参考文档：https://mp.weixi...
vue 微信分享功能
Suger的博客
12-02 3036
微信分享
vue-h5-分享（分享好友，分享朋友圈）
weixin_54145360的博客
10-27 2044
最近做的一个需求h5分享微信好友，朋友圈，实现过程有几点注意事项，记录下来。
vue搭建的公众号微信分享功能
Z.Dragon 的博客
08-14 1583
微信分享，这里要注意的是，获取签名参数时，前端传的URL是#前面部分，所以要截取一下，否则即使能分享，分享的信息也是默认的，不能修改成传过来的标题和其他想要修改的数据 import request from '../request/http' import Vue from 'vue' import { Toast } from 'vant' Vue.use(Toast) import api...
Vue2中实现微信分享支付功能
weixin_30861459的博客
06-10 463
Vue2中实现微信分享支付功能 　　近期做了一个微信公众号前后分离项目，前端采用Vue2开发，后端SpringBoot，今天迫不及待的来给大家分享一下这次在开发中遇到的一些坑以及解决办法。 　　在这里，一些公众号的基本配置我就不多说了，不懂的可以看一下微信开发文档。 　　话不多说，咱们开始吧！ 安装微信JS-SDK 　　首先需要通过npm安装微信的JS-SD...
Vue 项目中实现的微信、微博、QQ空间分享功能（亲测有效）
wwyxjjz的博客
11-24 2730
需求：文章添加分享功能(包括微信、微博、QQ空间) 如下图所示： 点击图标分别跳转到如下界面：(实现效果如下) 话不多说直接代码(可以封装成组件) <template> <div class="shareBox"> 分享到： <span class="hover-pointer" @click="shareToMicroblog()...
Vue脚手架H5页面页面微信分享操作
m0_63498341的博客
11-19 408
Vuecli H5页面页面微信分享操作（干货）
使用vue开发网页微信分享功能
weixin_45017293的博客
12-06 1582
首先，你会vue 其次你要有 微信公众号1. appid 2. 密钥 相当于你的微信认证身份证 不废话了！！ 下面直接怼方法 没有公众号的先看这个 [公众号开通教程]添加链接描述 在公众号 基本配置里面看自己的id 记得设置ip白名单 也就是你的安全域名 下面就直接怼vue代码 配置 npm install weixin-js-sdk 下载报错的用cnpm也行 1 要分享的页面引入// 微信 import wx from 'weixin-js-sdk'; 也可以main.js引入 1 2 3
springboot+vue微信扫码登录实现
06-23
在Spring Boot项目中集成Vue.js并实现微信扫码登录的步骤如下： 1. **设置前端环境**: - 安装Vue CLI：`npm install -g @vue/cli` - 创建一个新的Vue项目：`vue create my-project` - 进入项目目录：`cd my-...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小小IT流

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值