在一个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 () {// 设置成功}
});

更多接口可以去文档里看

H5微信分享、自定义微信分享相关推荐

使用微信JSSDK自定义微信分享标题、描述、和图标
最近做一个项目的时候用到微信的分享 ,实现定义分享标题,图片,了解到微信在发布JSSDK后,把包括自定义分享在内的众多网页服务接口进行了统一.如果要想自定义分享自己的网页信息给好友或朋友圈,就最好使用 ...
cocos creator如何实现微信好友自定义转发分享功能
摘要 cocos creator如何实现微信好友转发分享功能.用户在使用小游戏过程中,可转发消息给其他用户或群聊. 环境 cocos Creator 引擎2.4.3 编辑工具HBuild X 转发菜单 ...
android 分享qq微信朋友圈,H5微信JS-SDK实现分享朋友朋友圈以及QQ自定义分享
1.准备工作 APPID公众号id.申请好友分享接口.ip白名单.js接口安全域名设置(必须是通过备案).要先登录微信公众平台进入"公众号设置"的功能设置里填写"JS接口 ...
h5微信js-sdk分享接口php,H5 微信JSSDK自定义分享代码模板
HTML 导入代码模板: var base_url = ""; var shareTitle = "H5 animations with global vision!&q ...
uniapp 转H5 实现微信浏览器自定义分享样式
uniapp 转H5后实现微信浏览器自定义分享样式 uniapp 项目转 h5 1.在manifest.json文件中,找到H5配置一下路径,需要注意这个名字需要和布到线上的文件夹名字一致 2.就是 ...
微信分享第三方连接（H5页面）自定义缩略图、标题、描述（显示分享框，而不是链接）（微信JS-SDK）
首先要说明几个分享相关的问题: 现在微信不支持自定义按钮分享组件(也就是说不能点击某个按钮分享),只能通过微信右上角的三个小点,点击后选择分享给朋友,朋友圈等. 当前从企业微信分享到微信好友和微信朋友 ...
H5实现微信分享自定义地图
这几天紧急开发一个拼团+砍价的H5微信小商城.技术用的是:前端Vue+Vant快速开发组件框架.后端java. 使用微信js-sdk流程图: 微信公众平台测试帐号申请地址:https://mp.wei ...
h5 修改title 微信_H5网页如何在微信中自定义分享链接（可设置标题+简介+图片）...
最近开发h5网页,在分享网页到微信好友时,发现我的分享链接只有标题和链接地址: 图一却不像自定义微信分享链接一样,分享的链接像生成一张卡片,有对应的标题,内容和图片: 图二要达到上图自定义文案与图 ...
H5页面微信自动登录，和微信页面自定义分享样式
#1.首先需要注册微信公众号,在设置与开发>公众号设置>功能设置中配置业务域名.JS接口安全域名.网页授权域名. 备注:登录后可在"开发者中心"查看对应的接口权限. 2 ...
H5网页如何在微信中自定义分享链接（可设置标题+简介+图片）
自定义分享链接是什么? 自定义微信分享链接是指将一条网页链接通过微信接口生成一张卡片,并且该卡片的标题,内容和图片都可以自己编辑.如下图效果 ● 自定义网页链接示例(带标题,内容简介,缩略图) ● 未 ...

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

分享接口

H5微信分享、自定义微信分享相关推荐

最新文章

热门文章