H5微信分享、自定义微信分享

article/2025/10/15 4:19:14

在一个h5页面添加微信，分享给微信好友、朋友圈、腾讯微博

下面来实现 。

需要：

1、需要一个企业版的微信公众号（认证过的）

2、一台服务器

企业版的微信公众号原因：

在微信公众平台的接口权限内可以看到，个人版公众号是没有权限自定义微信分享的，所以需要企业版公众号并开通认证。

具体步骤：

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。（这一步骤应该没有什么问题）

步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载（没问题，很简单，一个script就搞定了）

步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名jsApiList: [] // 必填，需要使用的JS接口列表
});

这一步就有很大的问题了，这么多的参数是从哪里来的！

——1.先不管其他的，我们现在所需要的：（appId是微信公众号的appId，可以写死或者服务器返回）

  timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名

这样看来，其实真正需要的是 signature 签名

——2.看下signature 的生成流程：

生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。

1.参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）：../15/54ce45d8d30b6bf6758f68d2e95bc627.html

2.用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

上面的是官方的文档，说要拿到并且缓存 access_token 接口调用凭据 和 jsapi_ticket 临时票据，拿着access_token 去获取jsapi_ticket ，获得jsapi_ticket之后，自己生成个随机字符串（不懂的，网上百度怎么搞）加上时间戳，加上url地址，自己拼接好，最后进行sha1处理，就得到signature， 很是扯皮！另外access_token 一天的次数2000次，jsapi_ticket 一天的次数是100万次，都缓存下来，也可以只缓存token；（我是只缓存了token）

——这里说一下 access_token 

access_token是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token。开发者需要进行妥善保存。access_token的存储至少要保留512个字符空间。access_token的有效期目前为2个小时，需定时刷新，重复获取将导致上次获取的access_token失效。

公众平台的API调用所需的access_token的使用及生成方式说明：

1、建议公众号开发者使用中控服务器统一获取和刷新Access_token，其他业务逻辑服务器所使用的access_token均来自于该中控服务器，不应该各自去刷新，否则容易造成冲突，导致access_token覆盖而影响业务；

2、目前Access_token的有效期通过返回的expire_in来传达，目前是7200秒之内的值。中控服务器需要根据这个有效时间提前去刷新新access_token。在刷新过程中，中控服务器可对外继续输出的老access_token，此时公众平台后台会保证在5分钟内，新老access_token都可用，这保证了第三方业务的平滑过渡；

3、Access_token的有效时间可能会在未来有调整，所以中控服务器不仅需要内部定时主动刷新，还需要提供被动刷新access_token的接口，这样便于业务服务器在API调用获知access_token已超时的情况下，可以触发access_token的刷新流程。

公众号和小程序均可以使用AppID和AppSecret调用本接口来获取access_token。AppID和AppSecret可在“微信公众平台-开发-基本配置”页中获得（需要已经成为开发者，且帐号没有异常状态）。调用接口时，请登录“微信公众平台-开发-基本配置”提前将服务器IP地址添加到IP白名单中，点击查看设置方法，否则将无法调用成功。小程序无需配置IP白名单。

简单来说就是调用微信的分享接口，需要用到一个凭证access_token，而这个凭证是有数量和有效时间限制的，所以需要用自己的服务器做缓存处理，当access_token过期后再去请求新的access_token，需要一台服务器和配置ip白名单。

PHP来做的话：

 a. 先定义个access_tokenjson文件，我选择用json文件存，没有用数据库存

{"access_token": "xxx","expires": 12345
}

 b.jssdk.php文件: 文件夹目录要有修改权限 sudo chmod -R 777 your_dir 

思路：先取缓存的token的时间，与现在的时间对比，如果现在的时间大于缓存时间，则把现在时间+7200赋给缓存的时间，如果超时请求新的token，如果没超时用缓存的token，再生成jsapi_ticket，生成signature签名。

步骤四：通过ready接口处理成功验证 又回到前端页面上

wx.ready(function(){// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

配置好就可以用分享接口了

分享接口

自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）

 

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用wx.updateAppMessageShareData({ title: '', // 分享标题desc: '', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '', // 分享图标success: function () {// 设置成功}
});

更多接口可以去文档里看

 


http://chatgpt.dhexx.cn/article/M8XCtH3C.shtml

相关文章

使用shareSDK实现微信多图分享到朋友圈Url分享到朋友圈URL分享到好友 问题记录

使用shareSDK实现微信多图分享到朋友圈Url分享到朋友圈URL分享到好友 问题记录

问题概述 其实第三方分享很早就有了，这个按理说这个应该没什么难度，为啥记录一下呢，因为项目中同时出现了 朋友圈多图分享（多张URL集合），朋友圈URL分享，群和个人URL，图片分享。基本…
阅读更多...
iOS ShareSDK实现分享——微信分享

iOS ShareSDK实现分享——微信分享

最近领导让添加ios 微信分享视频的功能，之前做的只有微信分享本地图片的功能。 查看官网并没有找到答案，后来在其官网论坛中http://bbs.mob.com/thread-20938-1-1.html 这里面发现新版的sdk（v3.2.1）中才添加的微信分享本地文件&a…
阅读更多...
微信分享功能

微信分享功能

最近在做手机端页面，需要一个分享功能，其实自身分享是可以的，但是为了分享出的内容丰富，比如缩略图了，描述了等等，如下图所示： 步骤一：绑定域名 先登录微信公众平台进入“公众号…
阅读更多...
Android app分享文件到微信

Android app分享文件到微信

两种实现方案： 1.使用WXFileObject构造分享方法发送到微信； 2.调用系统分享方法，把文件直接发送到微信； 那么下面来分别看看怎么实现： 〇、准备工作 首先，需要在AndroidManifest.xml中配置FileProvider信…
阅读更多...
ShareSDK关于微信分享问题

ShareSDK关于微信分享问题

转自：http://www.eoeandroid.com/thread-310281-1-1.html 发现用sharesdk，做其他平台分享很快；如新浪微博、腾讯微博、有道云笔记、开心网、Google等等，几句代码就搞定； 但是微信有点麻烦，下面我把…
阅读更多...
uniapp实现录音喊话功能

uniapp实现录音喊话功能

直接先上代码： const recorderManager uni.getRecorderManager() onShow() {this.test()},methods: {test() {uni.getSetting({success: (res) > {console.log(res.authSetting, res.authSetting[scope.record]);if (res.authSetting[scope.record] false) {…
阅读更多...
h5调用android录音,html5网页录音插件Recorder

h5调用android录音,html5网页录音插件Recorder

插件描述：html5 js 录音 mp3 wav ogg webm amr 格式，支持pc和Android、ios部分浏览器、和Hybrid App(提供Android IOS App源码)，微信也是支持的，提供H5版语音通话聊天示例 Recorder用于html5录音 支持大部分已实现getUserMedia的移…
阅读更多...
利用RecordRTC.js实现H5录音功能

利用RecordRTC.js实现H5录音功能

前言： 最近遇到 要语音转文字 的需求，语音转文字肯定要先搞定录音功能，在网上找了好久没找到具体的 RecordRTC.js 插件的使用方法，最后只能对着 github 上开源代码小试了一下，录音功能好使所以就记录一下叭 一、Reco…
阅读更多...
vue录音+js-audio-recorder

vue录音+js-audio-recorder

小小记录一下项目中用到的录音功能 1.下载插件 npm i js-audio-recorder 2.展示代码 <template><div style"padding: 20px;"><div style"font-size:14px"><h3>录音时长&#xff1a;{{ recorder && recorder.duration.…
阅读更多...
html 苹果微信录音js,微信js-sdk 录音功能的示例代码

html 苹果微信录音js,微信js-sdk 录音功能的示例代码

需求描述 制作一个H5页面&#xff0c;打开之后可以录音&#xff0c;并将录音文件提交至后台 微信录音最长时长为1min 代码如下 // isVoice&#xff1a; 0-未录音 1-录音中 2-录完音 // 点击录音/录音中 按钮展示 点击录音 // isListen // 0-未试听/试听结束 1-试听中 2-暂停试听…
阅读更多...
已解决：H5移动端网页实现录音功能，js实现录音功能，包括安卓webview接口也可以使用

已解决：H5移动端网页实现录音功能，js实现录音功能，包括安卓webview接口也可以使用

遇到一个需求&#xff0c;需要做一个手机网页录音的功能&#xff0c;嵌入到webview中去&#xff0c;用安卓原生录音倒是可以&#xff0c;但是想着尽量去安卓化开发&#xff0c;就想着用纯的js前端代码去实现录音功能。 在 Web 应用程序中&#xff0c;JavaScript 是运行在浏览器…
阅读更多...
网页录音时的麦克风权限问题解决

网页录音时的麦克风权限问题解决

来源 | https://www.html.cn/web/html/19184.html 在我们进行网页制作时可能会遇到需要录音的情况&#xff0c;而在进行网页录音时又有可能会遇到麦克风权限问题导致无法录音&#xff0c;本文就来为大家介绍一下如何解决麦克风权限问题。 在本地中打开的时候&#xff0c;谷歌、…
阅读更多...
获取摄像头和麦克风权限_js获取浏览器摄像头和麦克风权限

获取摄像头和麦克风权限_js获取浏览器摄像头和麦克风权限

前言 项目中会使用到摄像头或麦克风设备&#xff0c;这就需要我们获取浏览器的摄像头和麦克风权限&#xff0c;权限是无法通过js操控的&#xff0c;必须由浏览器用户设置。 下面我来告诉大家如何获取浏览器的摄像头或麦克风的权限&#xff0c;使浏览器弹出询问窗口。 一、我们想…
阅读更多...
(前端)录音功能实现 js-audio-recorder

(前端)录音功能实现 js-audio-recorder

1. 创建 import Recorder from js-audio-recorder const parameter {sampleBits: 16, // 采样位数&#xff0c;支持 8 或 16&#xff0c;默认是16sampleRate: 8000, // 采样率&#xff0c;支持 11025、16000、22050、24000、44100、48000&#xff0c;根据浏览器默认值&#x…
阅读更多...
Android webview录音权限和音频自动播放

Android webview录音权限和音频自动播放

项目背景&#xff1a;我们通过layabox&#xff0c;制作了H5页面&#xff0c;可以在微信中&#xff0c;手机浏览器中使用&#xff0c;现在需要将H5页面集成到Android的APP中。 遇到的问题&#xff1a; 1.遇到的第一个问题&#xff0c;是获取录音权限的问题&#xff0c;我已经给…
阅读更多...
html 苹果微信录音js,基于JS开发微信网页录音功能的实例代码

html 苹果微信录音js,基于JS开发微信网页录音功能的实例代码

具体代码如下所示&#xff1a; wx.ready(function () { var startRecordflag false var startTime null //btnRecord 为录音按钮dom对象 btnRecord.addEventListener(touchstart, function (event) { event.preventDefault(); startTime newDate().getTime(); // 延时后录音…
阅读更多...
std::string 与 std::wstring 互转

std::string 与 std::wstring 互转

前言: 最近接触了一些 win32 方便的编程,由于不熟 可能会写一写这方便的基础东西 相当于 写日记了 提升一下 他们的声明 string 是 char wstring 是wchar_t 什么是wchar_t ? string 转 wstring inline std::wstring StringToWString(const std::string& str) {int len…
阅读更多...
C++ 字符串string、字符char、宽字符数组wstring、宽字符wchar_t互相转换（2021.4.20）

C++ 字符串string、字符char、宽字符数组wstring、宽字符wchar_t互相转换（2021.4.20）

C单字符串和宽字符串学习 2021.4.20 1、char 和 string1.1 单字符 char1.2 单字符数组 char[] 和 char*1.2.1 char[]1.2.2 char* 1.3 单字符串 string1.4 char[] 转 string1.5 cha[] 转char*1.6 string 转 char*1.7 string 转 char[] 2、wchar_t 和 wstring2.1 宽字符 wchar_t2…
阅读更多...
string和wstring相互转换以及wstring显示中文问题

string和wstring相互转换以及wstring显示中文问题

如果你只是使用C来处理字符串&#xff0c;会用到string。不过string是窄字符串ASCII&#xff0c;而很多Windows API函数用的是宽字符Unicode。这样让string难以应对。作为中国的程序员&#xff0c;我们第一个想到的字符串就是中文&#xff0c;而不是英文。所以经常会遇到中文字…
阅读更多...
C++里面，什么时候使用std::wstring

C++里面，什么时候使用std::wstring

看你要使用什么字符编码了&#xff0c; std::wstring主要用于 UTF-16编码的字符,而std::string主要用于存储单字节的字符( ASCII字符集 )&#xff0c;但是也可以用来保存UTF-8编码的字符。&#xff08;UTF-8和UTF-16是UNICODE字符集的两种不同的字符编码&#xff09; 如果你的…
阅读更多...
推荐文章

Copyright @ 2022~2023