1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 总结之通过微信公众平台实现h5微信客户端自定义分享标题 描述和图标(前后端实现)

总结之通过微信公众平台实现h5微信客户端自定义分享标题 描述和图标(前后端实现)

时间:2024-04-08 12:53:39

相关推荐

总结之通过微信公众平台实现h5微信客户端自定义分享标题 描述和图标(前后端实现)

前置动作(后端开发)

步骤一:绑定域名

js安全域名配置很重要,前端的服务的域名,非常重要!

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

JS接口安全域名需要和示例格式一模一样,不需要带http/https

备注:登录后可在“开发者中心”查看对应的接口权限。

2、需要开启开发者密钥,配置ip白名单(后端服务器ip,获取access_token等白名单不拦截)。

注意:ip白名单每天都在变化,可以参考官方获取ip方式

https://developers./doc/offiaccount/Basic_Information/Get_the_WeChat_server_IP_address.html

设置JS接口安全域名后,公众号开发者可在该域名下调用微信开放的JS接口。

注意事项:

1、可填写五个域名或路径(例:或/mp),需使用由字母、数字、“-”或中文组成的合法域名,不支持IP地址、端口号及短链域名。

2、填写的域名须通过ICP备案的验证。

3、 将文件MP_verify_Pd7Rn8KfdBv1xmNh.txt(点击下载)上传至填写域名或路径指向的web服务器(或虚拟主机)的目录(若填写域名,将文件放置在域名根目录下,例如/MP_verify_Pd7Rn8KfdBv1xmNh.txt;若填写路径,将文件放置在路径目录下,例如/mp/MP_verify_Pd7Rn8KfdBv1xmNh.txt),并确保可以访问。

4、 一个自然月内最多可修改并保存五次,本月剩余保存次数:5

细节需要注意内容:

简单理解就是,前端h5项目运行的服务器域名,注意是域名,不是IP!

有一个txt文件要放置在提供的域名目录下,可以是根目录,也可以指定目录下面,配置好之后,直接浏览器地址栏访问这个路径,能打开就成功了,此处还有一个坑:

如果把这个txt文件放置在根目录,你的h5访问路径就不能带路径,也就是放置在根路径下面,http://xxx,xxx/index.html是没有问题的,如果h5项目是http://xxx.xxx/mp/index.html,这是行不通;

同理,如果你把这个txt文件放置在某个文件下,如:http://xxx.xxx/mp,放在mp文件夹下,那你的h5也要放在这个路径下面,http://xxx.xxx/mp/index.html;不然肯定有问题;

参考链接:

/web-wjg/p/11346656.html

/tags/OtDacgwsNDE0ODUtYmxvZwO0O0OO0O0O.html

/blog/blog_kijhh0j20hab.html

步骤二:引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res./open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2./open/js/jweixin-1.6.0.js (支持https)。

备注:支持使用 AMD/CMD 标准模块加载方法加载

步骤三: 从后端获取权限配置签名

要从后端获取如下内容:

{"traceID": "09a3cad4-f426-4167-a375-c0676b4709e","retCode": 200,"retMsg": "success","data": {"signature": "a42a05f53400e380a000ef3832740f804ab","appId": "wx6d67b63","jsapi_ticket": "O3SMpm8bG7kJnF36aXbe8-83NpQ5KpEh_hfAfmkSN73KjH2CcJdtqwyli__Tj7uujod5sK7L6T69JQ","url": "https://xxxxxx分享地址","nonceStr": "66e4a737-ca38-467d-a53f-6d5e4d24b0b1","timestamp": "1650878949"}}java签名算法可以下载微信公众平台demo获取签名算法中,需要开发者传入 jsapi_ticket 和 url ,其中 jsapi_ticket 需要通过 http://api./cgi-bin/ticket/getticket?type=jsapi&access_token=ACCESS_TOKEN 接口获取,url 为调用页面的完整 url 注意:1. jsapi_ticket 的有效期为 7200 秒,开发者必须全局缓存 jsapi_ticket ,防止超过调用频率。

因为微信公众平台java的demo只实现了签名算法,还需要自己去获取jsapi_ticket

jsapi_ticket的获取又需要依赖access_token故贴出实现代码如下:

jspi_ticket应该失效前通过看门狗去获取更新,让它一直有效,这里是通过缓存方式,但并发很高时,可以发生缓存穿透,一瞬间耗光获取access_token的次数(可能性极低)

/*** 常量appId**/private static String APP_ID = "wx673b63";/*** 常量appSecret 开发者密钥**/private static String APP_SECRET = "89168a79f7884";/*** 常量redis缓存超时 单位秒 微信有效期2小时**/private static int TICKET_TIMEOUT = 30*60;/*** 微信 access_token 地址**/private static String ACCESS_TOKEN_URL = "https://api./cgi-bin/token";/*** 微信 ticket 地址**/private static String TICKET_URL = "https://api./cgi-bin/ticket/getticket";/*** 微信 jsApiTicket redis key**/private static String REDIS_TICKET = "jsApiTicket_";@Autowiredpublic RedisTemplate redisTemplate;/*** @Description 微信分享,获取前端JS-SDK配置**/@Overridepublic ResponseResult getWeiXinConfig(String url){//wxInfo[0] appId//wxInfo[1] appsecretString[] wxInfo = new String[]{APP_ID,APP_SECRET};String jsapi_ticket = "";//获取jsapi_ticketString ticketResString = getShareJsApiTicket(wxInfo);//解析ticketif (StringUtils.isNotEmpty(ticketResString)) {Integer code = (Integer) JSONPath.read(ticketResString, "$.errcode");if (code == 0) {jsapi_ticket = JSONObject.parseObject(ticketResString).get("ticket").toString();}}//返回为空,无法获取ticketif (StringUtils.isEmpty(jsapi_ticket)) {throw new TikTokListServiceException(ResultEnum.WEIXIN_TICKET_ERROR);}// 注意 URL 一定要动态获取,不能 hardcodeMap<String, String> ret = WeiXinSignUtil.sign(jsapi_ticket, url,wxInfo[0]);return ResultUtil.getResult(ResultEnum.SUCCESS, ret);}/*** @Description 微信分享,获取JsapiTicket**/private String getShareJsApiTicket(String[] wxInfo) {String jsApiTicket = "";//jsapi_ticket 的有效期为 7200 秒,必须全局缓存 jsapi_ticket ,防止超过调用频率。access_token 次数2000/*** 考虑并发情况* 1、并发后一个access_token获取,在没有获取到ticket之前,前一个access_token 失效,ticket就无法获取。* 考虑后解决方案:* 微信公众平台已解决:中控服务器需要根据这个有效时间提前去刷新新access_token。在刷新过程中,中控服务器可对外继续输出的老access_token,* 此时公众平台后台会保证在5分钟内,新老access_token都可用,这保证了第三方业务的平滑过渡** 2、以后多次出现200+请求同时进来的时候,缓存失效,去请求微信,200*n > 2000后,使用次数就被限制* 考虑后解决方案:(未实施)* a.使用看门狗线程在缓存要过期时,生成新的ticket,替换缓存,请求一直命中缓存* b.在缓存失效后加双重检查锁,生成缓存前只允许一个线程操作对微信请求** 3、后续开发注意 微信运营描述:access_token可能大于2小时,也有可能小于两小时***/try {jsApiTicket = (String) redisTemplate.opsForValue().get(REDIS_TICKET+wxInfo[0]);}catch (Exception e){e.printStackTrace();}if(StringUtils.isNotEmpty(jsApiTicket)){log.warn("ticket from redis jsApiTicket: " + jsApiTicket);return jsApiTicket;}//获取accessTokenString accessToken = getWeiXinAccessToken(wxInfo);if (StringUtils.isEmpty(accessToken)) { // 获取 accessToken 失败return null;}//ticket请求String url = TICKET_URL+"?access_token="+ accessToken + "&type=jsapi";//获取ticketjsApiTicket = httpReqExecute(url);log.warn("ticket from weixin api jsapiTicket is: " + jsApiTicket);if(StringUtils.isNotEmpty(jsApiTicket)) {// 向redis里写内容,第二个参数为过期时间,单位为:秒redisTemplate.opsForValue().set(REDIS_TICKET+wxInfo[0],jsApiTicket,TICKET_TIMEOUT, TimeUnit.SECONDS);return jsApiTicket;}return null;}/*** @Description 微信分享,获取access_token**/private String getWeiXinAccessToken(String[] wxInfo){String url = ACCESS_TOKEN_URL+"?grant_type=client_credential&appid="+ wxInfo[0] + "&secret=" + wxInfo[1];String result = this.httpReqExecute(url);log.warn("from weixin api accessToken: " + result);Integer code = null;try {code = (Integer) JSONPath.read(result, "$.errcode");} catch (RuntimeException e) {e.printStackTrace();}try {if(StringUtils.isNotEmpty(result)) {// 解析access_tokenString accessToken = JSONObject.parseObject(result).get("access_token").toString();return accessToken;}} catch (Exception e) {e.printStackTrace();}return null;}/*** @Description HTTP远程调用**/private String httpReqExecute(String url) {String result = "";DefaultHttpClient httpclient = null ;try {httpclient = new DefaultHttpClient();HttpPost httppost = new HttpPost(url);// 执行HttpResponse response = httpclient.execute(httppost);HttpEntity entity = response.getEntity();if(entity != null && response.getStatusLine().getStatusCode() == 200){result = EntityUtils.toString(entity, "UTF-8");}} catch (Exception e) {log.error(" 微信分享 调用微信 API 失败!", e);} finally { // 关闭连接,释放资源httpclient.getConnectionManager().shutdown();}return result;}

步骤四:通过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接口列表});

分享接口

请注意,原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口,即将废弃。请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、wx.updateTimelineShareData接口。

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

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

自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)

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

常见2个错误及解决方法

invalid signature签名错误。建议按如下顺序检查:

1、确认签名算法正确,可用http://mp./debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。

2、确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。

3、确认url是页面完整的url(请在当前页面alert(location.href.split(‘#’)[0])确认),包括’http(s)😕/‘部分,以及’?‘后面的GET参数部分,但不包括’#'hash后面的部分。

4、确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

确保一定缓存access_token和jsapi_ticket。

5、确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去’#‘hash部分的链接(可用location.href.split(’#')[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。

the permission value is offline verifying这个错误是因为config没有正确执行,或者是调用的JSAPI没有传入config的jsApiList参数中。建议按如下顺序检查:

1、确认config正确通过。

2、如果是在页面加载好时就调用了JSAPI,则必须写在wx.ready的回调中。

3、确认config的jsApiList参数包含了这个JSAPI。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。