新版H5微信网页JS-SDK自定义分享功能实现

vue3 h5跳转到小程序,h5分享微信自定义标题和图标 配置微信sdk需要的方法和组件updateAppMessageShareData、updateTimelineShareData、 wx-open-launch-weapp。这是一起非常绕闹的需求,虽说不难 ,但是一堆坑啊,我每天都在跳坑,本来这篇文章就只讲h5跳转小程序的,但是分享都一起了,那就一起讲了吧,话不多说,先上笔记。安装好之后 在需要的页面中 引入weixin-js-sdk 别人都封装了文件 我在这就不封装了 直接在需要的文件中使用 没问题了 自己再去封装。 阅读详情

1.先用  微信官方文档demo,下载下来去改就行,

概述 | 微信开放文档

2.(后端)填写上认证后的,公众号appid,appsecret。 

3.(前端代码) 配置好需要的接口(调试打开debug,查看是否有问题)

 4. 一般微信分享链接出现config:invalid signature错误的解决方法

1、APPID和APPSECRET填错

这个错误可以到官方的调试页面获取access_token看看是否是正确,点击获取获取access_token

根据返回的结果可以判断页面内的APPID和APPSECRET有没有出错,没有出错的话可以点击获取jsapi_ticket

利用前面拿到的access_token 采用http GET方式请求获得jsapi_ticket,如果出错的话会返回对应的说明。

点击进行确认签名算法校验

点击查看全局返回码说明

2、超过了每日的access_token获取上限

官方限定每日2000次请求,所以如果没有缓存access_token的话,还是比较容易过限的。

3、查看微信公共号状态是否不正常

比如验证过期了,被封禁了等。

4、确认config中nonceStr

js中驼峰标准大写S, timestamp与用以签名中的对应noncestr, timestamp一致。

5、确认url是页面完整的url

请在当前页面alert(location.href.split('#')[0])确认,包括'http(s)://'部分,以及'?'后面的GET参数部分,但不包括'#'hash后面的部分,这里在文章《静态页面实现微信分享带缩略图、标题和描述》最后已做说明,大家可以自行修改好。

6、配置curl是否使用ssl的带证书(https协议)访问开关(注意)

找到官方提供的jssdk.php,找到代码:


  curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);
  curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);
 

将true改为false,因为一般我们是没有安装证书的(https协议),所以将true改为false就好,反之,如果网站安装了证书,则将false改为true。

7、将网站所在服务器IP地址加入白名单(注意)

8、反向代理问题(注意)

如果以上查验绝没有解决问题,则查看下自己的服务器是否反向代理没有设置好,nginx配置反向代理代码:

proxy_set_header Host $http_host;

或者如下示例

server {
        listen       80;
        server_name  test.test.com;

        location / {
            root   html;
            index  index.html index.htm;
            proxy_read_timeout 300;
            proxy_connect_timeout 300;
            proxy_set_header  X-Real-IP  $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_redirect off;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

 9、js接口安全这边配置好你的域名(注意)

 基本这些好了以后,过一会就配置好了能用了。

更改了分享朋友圈的内容,但是内容都没有变,就二次转发就变回来了。

10. 最后一步通过连接分享,是不行的,是要先把url,变成二维码访问后,再去分享,就正常了,没问题了。

最终效果如下:

  

如果运用微信JSSDK,让H5进行微信分享 第一步 引入JS文件 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js 第二步 通过config接口注入权限验证配置 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致 阅读详情

相关推荐

H5微信分享自定义标题和图片的实现及遇到的各种坑

一、前情提要 很多时候我们刚做出来的h5微信分享出去标题显示的是网页名称,描述是网页的URL,也没有图片,这样很不好看。如下图: 我们期望像APP分享的那样,可以自定义标题内容、描述以及好看的图片。如下图: 要实现这个效果则需要用到微信公众号的JS-SDK。微信官方文档 二、实现步骤 首先需要一个微信公众号的id及公众号号的密钥。这里我们主要说前端的代码实现。后端代码具体实现方式可以参考:ja...

cuteJingle的博客 4169

微信开发相关:使用微信 JS-SDK 接口

通过微信 JS-SDK 接口,可以在自己写的 JS 程序中使用很多微信的功能。例如微信里的卡片式链接、拍照上传下载图片、录制播放上传下载音频、获取地理位置、使用摇一摇、扫一扫、微信支付等功能。

runsong911的博客 8719

uniApp H5微信网页授权,微信支付

用于记录 uniapp 编译成H5后,完成微信授权和微信支付,微信浏览器中主要看场景二 业务场景介绍 业务需要在H5中完成支付功能(微信支付) 使用场景介绍 1、H5运行在普通浏览器中; 2、H5运行在微信浏览器中。 分析过程 场景一:H5运行在普通浏览器中 H5普通浏览器支付过程并不复杂,大致流程如下: a、前端发起支付请求给后端,后端收到后,调用微信支付接口下单; b、微信支付接口会返回一个支付链接给到后端; c、后端把微信返回的支付链接通过支付请求(a)接口返回给前端; d、前端拿到链接之后,跳转.

qq_42514643的博客 8531

无需公众号实现微信JSSDK分享卡片!Safari浏览器分享到微信自动成卡片!

要在微信分享卡片,需要接入微信自家的JSSDK,比较麻烦,还需要认证公众号,但是如果你没有这样的条件,那么你也可以试试使用iOS的Safari浏览器轻松实现,只需要在html中加入3个meta即可。

TANKING,开源开发者! 1543

H5页面实现微信分享功能及踩坑历程

看了官网,写的也挺简单的,也在网上搜索了一些demo,然后开始写; 我理解的误区; 我一直以为可以跟app分享一样,有个分享按钮点击触发分享;搜索了很多博客,得到结论,前几年好像是可以通过按钮引导分享,但是微信后来禁用了,只能在网页右上角点击分享; 相信很多人看到这,跟我有一样的想法,那还要分享接口有什么用,微信网页本身自带了微信分享功能; 还是有用的,可以自定义编辑分享内容(例如标题,内容,图片等) 开始回归正题; 第一步JSSDK引入,我用的最新sdk文件 <script s..

qq_41806475的博客 3499

vue h5项目在微信内置浏览器实现自定义分享微信好友、朋友圈功能

一个描述: 所有的 h5 页面在微信内置浏览器内,前端未做任何配置下,点击右上角三点,默认是有分享功能的,如下图: 因项目要将分享相关信息入库,所以需要自定义分享,即拼接分享页面路径+活动id+分享者id。当被分享者通过自定义分享路径进入到页面后,调用分享成功接口,将分享相关信息传到后台。 注意: 1、h5页面在微信内置浏览器中,页面路径里会自动拼接上code=AAA&state=STATE&appid=BBB这样一串内容,并且页面路径中会有两个 ?号,所以获取当前页面路径后,拼接分享页面

weixin_43848571的博客 4085

【Vue】H5浏览器实现【微信分享】功能的终极解决方案

分享H5浏览器完成微信分享卡片功能,特别需要注意:iOS设备出现invalid signature签名错误,很可能是因为 wx.config中的realAuthUrl与当前页面url不一致造成的!

小安驾到的博客 1万+

JS实现:HTML页面一键分享到微博、QQ空间、QQ好友

JS实现:HTML页面一键分享到微博、QQ空间、QQ好友

weixin_48596030的博客 2142

使用uni app实现H5微信分享功能

一、描述 要实现自定义微信分享功能,需要使用到微信官方提供的 js-sdk,微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包,通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。 二、准备工作 下载 HBuilderX 并安装 j...

xy1073028328的博客 1万+

3步搞定专利数据爬取:用Selenium绕过国家知识产权局反爬(附完整代码)

本文详细介绍了3种高效获取专利数据的技术方案,重点解析了使用Selenium绕过国家知识产权局反爬的实战方法,并提供了完整代码示例。文章还探讨了Requests+lxml轻量级方案和混合技术策略,帮助开发者根据需求选择最佳数据爬取方案,特别适合需要专利统计数据的开发者参考。

weixin_29029995的博客 1109

行列式详解:从定义到应用

本文系统介绍了行列式的核心概念和应用。首先从二阶、三阶行列式入手,逐步扩展到n阶行列式的定义,讲解了余子式和代数余子式的概念。其次,详细阐述了行列式的重要性质,包括转置不变性、行列交换变号等基本性质以及乘积性质等推论。在计算方法方面,介绍了按行展开法、化上三角矩阵法等实用技巧,并列举了特殊行列式的计算案例。最后重点讨论了行列式在克拉默法则、矩阵可逆性判断、几何体积计算及线性相关性判断等领域的应用。文章强调理解行列式的几何意义和灵活运用性质的重要性,并给出了学习建议和常见误区提示。行列式作为连接代数与几何的桥

aichitang2024的博客 3034

微信内H5页面自定义分享功能vue3(解决H5页面分享朋友圈,debug一直是ok,分享内容是一段链接问题)

在接入微信 JS-SDK 并进行相关分享功能开发时,很多文档都详细讲解了如何引入微信 JS-SDK 文件、如何配置 config 参数以及如何调用分享接口。然而,即便按照文档提供的步骤正确配置了所有内容,仍然可能出现分享出去的只是一个简单的链接,而不是你预期的具体内容(如图片、标题、描述等)。这种问题常常是由于以下几个原因引起的:JS-SDK 配置不完整或错误:确保你在调用分享接口前正确配置了 wx.config,并且权限签名(jsapi_ticket)以及其他必要参数正确无误。

qq_53816329的博客 2215

从零开始利用MATLAB进行FPGA设计(六)用ADC采集信号教程1

用AN9238采集信号的方法(1),包含PLL、FIFO、ILA的基础教程。

WZT725的博客 3094

微信H5 分享(自定义标题、图片、链接) 与 禁止分享(微信隐藏功能按钮) 功能的写法

使用场景: 最近有个H5项目在微信浏览器上运行,在项目开发过程中有一个奇特的需求,就是打开这个项目网页的用户分享和 静止分享(就是有些页面要求要有分享【可自己定义标题、图片、链接】,而有些页面要求要不让用户分享)。 自定义分享到是经常做,但要不让用户分享还真没做过,经过一翻折腾最终搞定了,代码如下: 注:无论是信自定义分享还是静止分享都要引入微信的js-sdk文件,官网下载地址:ht...

沐枫 6068

开源大语言模型GLM-5:从架构解析到部署微调全指南

大语言模型(LLM)作为当前人工智能领域的核心技术,通过海量数据预训练获得强大的语言理解和生成能力。其核心原理基于Transformer架构,通过自注意力机制捕捉长距离依赖关系,在通用语言任务上展现出卓越性能。这一技术价值在于为开发者提供了强大的基座模型,能够通过微调快速适配特定领域需求,显著降低AI应用开发门槛。在实际应用场景中,大模型被广泛用于智能对话、代码生成、内容创作等任务。本文以开源项目GLM-5为例,深入探讨其架构特点,并详细介绍了如何使用LoRA技术进行参数高效微调,以及通过量化优化实现模型在

weixin_28683165的博客 350

第 5 篇:责任链模式 (Chain of Responsibility) —— 协议栈的流水线

本文介绍了责任链模式在嵌入式通信协议解析中的应用。针对传统"面条式"代码维护困难的问题,提出将各协议解析器解耦为独立处理单元,通过链表形式串联。文章详细展示了模式实现:定义抽象处理者接口、实现具体协议处理器、构建链表管理器。该方案具有内存占用低(O(1)栈空间)、可动态扩展、支持优先级调整等优势,并探讨了性能优化策略及动态插件系统等扩展应用,为嵌入式通信协议处理提供了清晰的架构方案。

一路往蓝-Anbo 的博客 177

H5之唤起微信功能

最近在做项目中总能遇到H5需要调起微信公众号、调起微信小程序、调起微信分享等等的有关微信的一些需求。今天,我们就着重来谈谈H5之调起微信分享功能的实现。 使用微信分享,可以获得更好的传播效果。 步骤一. 用户信息获取 1. 注册测试公众号 我们在 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 可以申请一个测试账号,在测试号管理的页面中能够看到我们appId等信息,这里有个接口配置信息修改的选项需要我们去填写 这里就要麻烦后端的

weixin_45731450的博客 8398

RK3588 buildroot 双网口bonding调试

本文介绍了Rockchip Buildroot中配置网络冗余的方法,通过bonding技术将多个物理网口合并为逻辑接口。主要内容包括:1)7种常见bonding模式的特点及适用场景;2)RK3588的具体配置流程,包括内核配置(启用bonding驱动、修改dts)、添加ifenslave工具;3)系统编译和网络状态检查。

501846585_QQAndroid_java 458

微信JS-SDK updateAppMessageShareData安卓不能自定义分享

最近开发一个项目时,有微信H5网页自定义分享功能,使用了微信JS-SDK的分享到好友和分享到朋友圈功能。 微信开发文档这样写的 自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0) wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.updateAppMessageShareData({ title: '', // 分享标题 desc: ''...

Mangojjx的博客 6739

【ESP32设备通信】-LoRaWAN网关

在物联网 (IoT) 时代,连接设备和收集数据变得比以往任何时候都更加容易和重要。 LoRaWAN(远程广域网)技术已成为远程、低功耗物联网通信的强大解决方案。 在本教程中,我们将使用 ESp32 构建 LoRaWAN 网关电路,并使用 ESP32 和 BME280 传感器构建传感器节点电路。 对于这两个电路,我们将使用基于 SX1278 (Ra-02) LoRa 模块在设备之间进行无线通信。 我们还将向您展示如何将传感器数据传输到流行的物联网平台 ThingSpeak。

视觉与物联智能 1582

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

微信分享第三方连接(H5页面)自定义缩略图、标题、描述(显示分享框,而不是链接)(微信JS-SDK)

现在微信不支持自定义按钮分享组件(也就是说不能点击某个按钮分享),只能通过微信右上角的三个小点,点击后选择分享给朋友,朋友圈等。当前从企业微信分享到微信好友和微信朋友圈是有问题的,一些手机(有些是因为app版本,企微版本4.0.10版本就不可以)对应设置的信息(标题、描述、缩略图)不会显示。当前微信JS-SDK版本是,企微的是(两个是同一个,只是版本不同)

qq_17627195的博客 2万+

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

微信H5网页链接如何自定义分享标题,简介和图片

微信H5网页链接怎么才能自定义分享标题,简介和图片? 需求概述 微信中可以直接转发网页链接,用户在微信内置浏览器中打开后可以通过微信浏览器中右上角进行分享到朋友,朋友圈,QQ等。但直接这样分享的话,用户看到的只是一条链接,没有任何的图文内容。 如下图,图1是别人分享给我的链接效果,图2是我分享给别人的效果。两种方案的用户体验我想都不用我多说了,一眼就能看的出来. 方案实现 ...

weixin_45597286的博客 3138

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

基于vue的h5网页微信分享链接图标丢失问题解决

基于vue的h5网页微信分享链接图标丢失问题解决微信JS-SDK说明文档怎样调用微信JS-SDK重点 对于目前的移动互联网,客户端分成了安卓、IOS和h5三大块,为了引流,安卓和ios往往会分享到微信、QQ、微博等社交工具,第一次分享时图标、标题和描述是IOS和安卓配置的,对于web前端所做的分享页无需做任何操作。 但如果我们在微信打开这个链接之后,再次分享出去,分享的描述会变成链接地址,分享的图标也不见了。 查了相关文章,有说直接再网页body标签里面直接写img标签,设置样式,然而并不行,就选择用了

qq_33315564的博客 3819

用webview内嵌h5页面,webviw实现分享微信支付功能 , h5传参跳转web-view 微信小程序

<web-view src="https://www.meishahui.com/wap/index.html" bindmessage="h5PostMessage"></web-view>

weixin_44690999的博客 6971

vue+h5+js-sdk 实现分享的功能(分享至好友/朋友圈)

用户在h5 页面中实现微信的分享至好友、分享至朋友圈的功能、且实现的方式为卡片的形式(附带效果图、踩过的坑、注意事项)

Missbelover的博客 6805
上一篇: Promise 对象概述
下一篇: 网页引入公共头部或底部的常用方法
chenrui310
博客等级 码龄15年 165粉丝 48原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值