步骤一:绑定域名

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

步骤二:引入JS文件

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

请注意,如果你的页面启用了https,务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,否则将无法在iOS9.0以上系统中成功使用JSSDK

如需使用摇一摇周边功能,请引入 jweixin-1.1.0.js

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

步骤三:通过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: '',// 必填,签名,见附录1jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

步骤四:通过ready接口处理成功验证

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

步骤五:通过error接口处理失败验证

wx.error(function(res){// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。});

步骤六:具体接口调用,调用之前要获取接口调用凭据,具体如下

1.配置文件 application-common.properties 配置一些接口常量信息

#\u5FAE\u4FE1AppID
AppID=wx0a5aabbccddees#\u5FAE\u4FE1AppSecret
AppSecret=f1ec0d65d104589ds0opke907dslsjeln09

2.工具类ConfigHelper,读取配置文件:

package com.hengxin.qianee.commons;import java.util.ResourceBundle;/*** 读取配置文件* @author hzg**/
public class ConfigHelper {private static Object lock = new Object();private static ConfigHelper config = null;private static ResourceBundle rb = null;private ConfigHelper(String configFileName) {rb = ResourceBundle.getBundle(configFileName);}public static ConfigHelper getInstance(String configFileName) {synchronized(lock) {if(null == config) {config = new ConfigHelper(configFileName);}}return (config);}public String getValue(String key) {return (rb.getString(key));}}

3.获取签名信息

package com.hengxin.qianee.talent.wechat.utils;import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.UnsupportedEncodingException;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;import javax.servlet.http.HttpServletRequest;import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.HttpStatus;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.springframework.beans.factory.annotation.Autowired;import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.hengxin.qianee.cache.impl.MyCache;
import com.hengxin.qianee.commons.ConfigHelper;
import com.hengxin.qianee.service.thirdparty.pay.llpay.conn.CustomHttpClient;public class WechatSignUtil {@AutowiredMyCache cache;public static JSONObject sendGetRequest(String url){HttpClient httpClient = CustomHttpClient.GetHttpClient();HttpGet get = new HttpGet(url);get.setHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");BufferedReader br = null;try {// 发送请求,接收响应HttpResponse resp = httpClient.execute(get);int ret = resp.getStatusLine().getStatusCode();if(ret == HttpStatus.SC_OK){// 响应分析HttpEntity entity = resp.getEntity();br = new BufferedReader(new InputStreamReader(entity.getContent(), "UTF-8"));StringBuffer responseString = new StringBuffer();String str = br.readLine();while (str != null) {responseString.append(str);str = br.readLine();}return JSON.parseObject(responseString.toString());}}catch(Exception e){e.printStackTrace();}finally {if (br != null) {try {br.close();} catch (IOException e) {// do nothing}}}return new JSONObject();}/*** 获取签名信息* @return 返回签名等*/public Map<String,String> getWechatSign(HttpServletRequest request,MyCache cache) throws UnsupportedEncodingException{String appid = ConfigHelper.getInstance("config").getValue("AppID");String appSecret = ConfigHelper.getInstance("config").getValue("AppSecret");String url_Template_GetAccessToken ="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=%s&secret=%s";String url_Template_GetAccessTicket = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=%s&type=jsapi";String accessToken = cache.getString("wechatAccessToken");if(accessToken == null){//获取tokenString url_GetAccessToken = String.format(url_Template_GetAccessToken, appid,appSecret);JSONObject accessTokenMap = WechatSignUtil.sendGetRequest(url_GetAccessToken);accessToken = accessTokenMap.getString("access_token");cache.setString("wechatAccessToken", 6000, accessToken);}String accessTicket = cache.getString("wechatAccessTicket");if(accessTicket == null){//获取ticketString url_GetAccessTicket = String.format(url_Template_GetAccessTicket, accessToken);JSONObject url_GetAccessTicketMap = WechatSignUtil.sendGetRequest(url_GetAccessTicket);accessTicket = url_GetAccessTicketMap.getString("ticket");cache.setString("wechatAccessTicket", 6000, accessTicket);}// 时间戳Long timeStamp = new Date().getTime()/1000;String url = request.getRequestURL().toString();//随机字串String noncestr = UUID.randomUUID().toString();//签名String signature = getSignature(noncestr,accessTicket,url,timeStamp);Map<String,String> result = new HashMap<String,String>();result.put("appId", appid);result.put("timestamp", timeStamp.toString());result.put("nonceStr", noncestr);result.put("signature", signature);return result;}/*** 生成签名* @param nonceStr 随机字串* @param jsapi_ticket 票据* @param url * @param timestamp 时间戳* @return*/private String getSignature(String nonceStr,String jsapi_ticket,String url,Long timestamp){String template = "jsapi_ticket=%s&noncestr=%s×tamp=%s&url=%s";String result = String.format(template, jsapi_ticket,nonceStr,timestamp,url);return org.apache.commons.codec.digest.DigestUtils.shaHex(result);}
}

总结:先配置好域名,先根据appid和appSecret拼成的串发送请求获取到一个JSONObject对象,通过该对象调用getString("access_token")方法取到token;

根据token拼成的url发送一个http get请求得到JSONObject对象,通过调用该对象的.getString("ticket")方法得到ticket

根据时间戳、随机串、当然访问的url和ticket生产签名,也就是接口调用的凭据。最后jsp页面调用如下:

<script type="text/javascript"src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<style type="text/css"></style>
<script type="text/javascript">wx.config({debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId : "${appId}", // 必填,公众号的唯一标识timestamp : "${timestamp}", // 必填,生成签名的时间戳nonceStr : "${nonceStr}", // 必填,生成签名的随机串signature : "${signature}",// 必填,签名,见附录1jsApiList : [ 'onMenuShareTimeline', 'onMenuShareAppMessage','onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ]});var obj = {title : '标题',desc : '欢迎关注!',link : 'http://m.test.com',imgUrl : 'https://qianee-official.oss-cn-beijing.aliyuncs.com/data/2016-05-21%2Fe382d374-f3c5-45bb-b8cedlsjelnge',};wx.ready(function(){wx.onMenuShareAppMessage(obj);// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口wx.onMenuShareTimeline(obj);// 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口wx.onMenuShareQQ(obj);// 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口wx.onMenuShareWeibo(obj);});

微信分享接口配置和调用相关推荐

  1. php微信分享接口调用,TP5的微信分享接口和JSSDK使用

    TP5的微信分享接口和JSSDK使用 项目开发中,经常会用到微信分享接口,使用官方提供的SDK可以实现微信分享到朋友圈或者好友以后,能够正常显示页面的Logo图片.标题和描述内容,而不仅仅只是简单粗暴 ...

  2. 微信分享接口调用(自测通过可以用)

    微信分享 后台逻辑 import java.io.UnsupportedEncodingException; import java.security.MessageDigest; import ja ...

  3. vue 调用微信分享接口 分享截图图片

                                          vue 调用微信分享接口 分享截图图片 现在好多应用 都需要分享 图片等等的需求 . 大体需要 这几个步骤 获取分享图片 将 ...

  4. vue 分享微信传参_vue 中使用微信分享接口(简单实用)

    前言 开发微信小程序时,基本上都要接入微信的SDK,而微信也提供了非常多的接口供我们去完成我们想要的功能.微信分享功能常常是我们在开发中常见的需求之一,本文将围绕微信分享接口使用展开,给自己以后碰到需 ...

  5. 微信公众号开发笔记(二):微信分享接口实现和问题

    上篇文章写到了公众号开发的基本配置(不明白的可以参考https://blog.csdn.net/TOP__ONE/article/details/78183209),这里继续写微信分享接口功能代码实现 ...

  6. 微信分享接口SDK(前端js和后端php)

    微信分享接口SDK 1,帮兄弟对接微信公众号上的分享朋友圈接口对接:签名一定要用微信签名工具去生成比对下代码中签名规则是否一致:好,下面讲下对接顺序: 2,首先:我分享的页面是index.html,所 ...

  7. H5微信分享接口开发JS-SDK PHP[附源码]

    背景 H5开发中几乎所有项目都要用到自定义分享,见过的分享接口有php引入和ajax调用两种,使用不方便且对代码环境有要求.故共享一版可通过javascript文件引入方式来实现自定义分享的接口(这是 ...

  8. 关于微信分享接口开发

    首先要注意的几点: 1.微信开放的分享接口到底是干什么的 微信分享接口文档:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613 ...

  9. 微信分享接口示例(设置标题、缩略图、连接、描述),附demo下载

    前几天因为项目所需要实现微信分享接口,在网上搜了一大堆,实现办法大致分为两种,第一:在body之后加一个img标签并且设置display:none,这种方法感觉不科学所以我没有测试过.第二:使用微信的 ...

最新文章

  1. php和python和java-python和java,php,c,c#,c++的对比
  2. linux下top命令参数解释
  3. (原)数据结构——线索二叉树
  4. 安卓2.3刷机包_红米K20Pro 安卓Q刷机包下载+刷机教程
  5. js 栈(进制转换)
  6. 弹簧和线程:TaskExecutor
  7. C和汇编混合编程---栈平衡
  8. 开发日志_Jan.8.2017
  9. 两个class写在同一个java文件中
  10. 报应!GitHub上线围剿Python计划,已有4万人跟进,你呢?
  11. 什么是架构?网络架构中都有什么?终于有人讲明白了
  12. 设计模式之创建型单例模式
  13. windows编译librtmp
  14. matlab生成16进制正弦波表
  15. html chm如何打开方式,解答chm文件如何打开
  16. 2019年最新全国省市区街道共46462条数据(统计局MySQL数据库)
  17. 本地音乐播放器+android8.1,APlayer v1.5.6.8-15681 安卓本地音乐播放器 | 智享阁
  18. 泰信科技携手浙大建高校IT运维平台
  19. js中yyyy-MM-dd格式的日期转换
  20. 背叛的下场,你敢不敢看

热门文章

  1. 软考中级 真题 2016年下半年 系统集成项目管理工程师 基础知识 上午试卷
  2. 制作嵌入式Linux根文件系统
  3. iOS查看系统所有字体(带效果图)
  4. 连接打印机提示:找不到驱动程序,windows在网络上找不到Canon LBP2900的驱动程序,若要手动查找,请单击“确定”。否则,请单击“取消”并咨询你的网络管理员或者访问打印机制造商的网站
  5. python---引用其他py文件中的函数
  6. Windows 怎么查看是否已经真正激活
  7. CentOS7救援模式修复系统丢失文件
  8. Android kotlin上传头像实现
  9. Python语言快速入门上
  10. npm 报错 Module build failed: Error: No PostCSS Config found in