Java微信公众平台开发13 微信JSSDK中Config配置

前端开发工程师和关注前端开发的开发者们在2015年中肯定被腾讯的JSSDk引爆过,搞APP的、搞前端的甚至是是搞后端的都跑过来凑热闹,一时之间也把微信JSSDK捧得特别牛逼,但是在我们的技术眼里它的实现原理和根本是不能够被改变的,这篇文章就不对其js的实现做任何评价和解说了(因为我也不是很懂,哈哈),这里要说的是它的config配置实现,参考文档:http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html  !

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包,通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验;本篇将面向网页开发者介绍微信JS-SDK如何使用及相关注意事项!JSSDK使用步骤:

步骤一:在微信公众平台绑定安全域名
步骤二:后端接口实现JS-SDK配置需要的参数
步骤三:页面实现JS-SDk中config的注入配置,并实现对成功和失败的处理

(一)在微信公众平台绑定安全域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”(如下图),如果需要使用支付类接口,需要确保支付目录在支付的安全域名下,否则将无法完成支付!(注:登录后可在“开发者中心”查看对应的接口权限)

(二)后端接口实现JS-SDK配置需要的参数

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

我们查看js-sdk的配置文档和以上的代码可以发现config的配置需要4个必不可少的参数appId、timestamp、nonceStr、signature,这里的signature就是我们生成的签名!

生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket,所以这里我们将jsapi_ticket的获取放到定时任务中,因为它和token的生命周期是一致的,所以在这里我们将他们放到一起,将原有的定时任务中获取token的代码做如下修改:

package com.cuiyongzhi.wechat.common;
 
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
 
import net.sf.json.JSONObject;
 
import com.cuiyongzhi.web.util.GlobalConstants;
import com.cuiyongzhi.wechat.util.HttpUtils;
 
/**
 * ClassName: WeChatTask
 * @Description: 微信两小时定时任务体
 * @author dapengniao
 * @date 2016年3月10日 下午1:42:29
 */
public class WeChatTask {
  /**
   * @Description: 任务执行体
   * @param @throws Exception
   * @author dapengniao
   * @date 2016年3月10日 下午2:04:37
   */
  public void getToken_getTicket() throws Exception {
    Map<String,String> params = new HashMap<String,String>();
    //获取token执行体
    params.put("grant_type","client_credential");
    params.put("appid",GlobalConstants.getInterfaceUrl("appid"));
    params.put("secret",GlobalConstants.getInterfaceUrl("AppSecret"));
    String jstoken = HttpUtils.sendGet(
        GlobalConstants.getInterfaceUrl("tokenUrl"),params);
    String access_token = JSONObject.fromObject(jstoken).getString(
        "access_token"); // 获取到token并赋值保存
    GlobalConstants.interfaceUrlProperties.put("access_token",access_token);
     
    //获取jsticket的执行体
    params.clear();
    params.put("access_token",access_token);
    params.put("type","jsapi");
    String jsticket = HttpUtils.sendGet(
        GlobalConstants.getInterfaceUrl("ticketUrl"),params);
    String jsapi_ticket = JSONObject.fromObject(jsticket).getString(
        "ticket"); 
    GlobalConstants.interfaceUrlProperties
    .put("jsapi_ticket",jsapi_ticket); // 获取到js-SDK的ticket并赋值保存
     
    System.out.println("jsapi_ticket================================================" + jsapi_ticket);
    System.out.println(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())+"token为=============================="+access_token);
 
  }
 
}

然后我们根据【JS-SDK使用权限签名算法】对参数进行签名得到signature,这里的url必须采用前端传递到后端,因为每次的url会有所变化,如下:

package com.cuiyongzhi.wechat.common;
 
import java.security.MessageDigest;
import java.util.Formatter;
import java.util.HashMap;
import java.util.UUID;
import com.cuiyongzhi.web.util.GlobalConstants;
 
 
/**
 * ClassName: JSSDK_Config
 * @Description: 用户微信前端页面的jssdk配置使用
 * @author dapengniao
 * @date 2016年3月19日 下午3:53:23
 */
public class JSSDK_Config {
 
  /**
   * @Description: 前端jssdk页面配置需要用到的配置参数
   * @param @return hashmap {appid,timestamp,nonceStr,signature}
   * @param @throws Exception  
   * @author dapengniao
   * @date 2016年3月19日 下午3:53:23
   */
  public static HashMap<String,String> jsSDK_Sign(String url) throws Exception {
    String nonce_str = create_nonce_str();
    String timestamp=GlobalConstants.getInterfaceUrl("timestamp");
    String jsapi_ticket=GlobalConstants.getInterfaceUrl("jsapi_ticket");
    // 注意这里参数名必须全部小写,且必须有序
    String string1 = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonce_str
        + "×tamp=" + timestamp + "&url=" + url;
    MessageDigest crypt = MessageDigest.getInstance("SHA-1");
    crypt.reset();
    crypt.update(string1.getBytes("UTF-8"));
    String signature = byteToHex(crypt.digest());
    HashMap<String,String> jssdk=new HashMap<String,String>();
    jssdk.put("appId",GlobalConstants.getInterfaceUrl("appid"));
    jssdk.put("timestamp",timestamp);
    jssdk.put("nonceStr",nonce_str);
    jssdk.put("signature",signature);
    return jssdk;
 
  }
   
  private static String byteToHex(final byte[] hash) {
    Formatter formatter = new Formatter();
    for (byte b : hash) {
      formatter.format("%02x",b);
    }
    String result = formatter.toString();
    formatter.close();
    return result;
  }
   
  private static String create_nonce_str() {
    return UUID.randomUUID().toString();
  }
 
}

然后我们将后端签名的方法集成到Controller层,形成代码如下:

package com.cuiyongzhi.wechat.controller;
 
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import com.cuiyongzhi.Message;
import com.cuiyongzhi.wechat.common.JSSDK_Config;
 
/**
 * ClassName: WeChatController
 * @Description: 前端用户微信配置获取
 * @author dapengniao
 * @date 2016年3月19日 下午5:57:36
 */
@Controller
@RequestMapping("/wechatconfig")
public class WeChatController {
 
  /**
   * @Description: 前端获取微信JSSDK的配置参数
   * @param @param response
   * @param @param request
   * @param @param url
   * @param @throws Exception
   * @author dapengniao
   * @date 2016年3月19日 下午5:57:52
   */
  @RequestMapping("jssdk")
  public Message JSSDK_config(
      @RequestParam(value = "url",required = true) String url) {
    try {
      System.out.println(url);
      Map<String,String> configMap = JSSDK_Config.jsSDK_Sign(url);
      return Message.success(configMap);
    } catch (Exception e) {
      return Message.error();
    }
 
  }
 
}

到这里我们后端对jssdk的签名参数的封装就基本完成了,下一步就只需要我们前端调用就可以了!

(三)页面实现JS-SDk中config的注入配置,并实现对成功和失败的处理

在第二步中我们将后端接口代码完成了,这里新建jssdkconfig.jsp,在jsp页面用ajax方式获取并进行配置,并开启debug模式,打开之后就可以看到配置是否成功的提示,简单代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" />
<title>JSSDk配置</title>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
  function jssdk() {
    $.ajax({
      url : "http://wechat.cuiyongzhi.com/wechatconfig/jssdk",type : 'post',dataType : 'json',contentType : "application/x-www-form-urlencoded; charset=utf-8",data : {
        'url' : location.href.split('#')[0]
      },success : function(data) {
        wx.config({
          debug : true,appId : data.data.appId,timestamp : data.data.timestamp,nonceStr : data.data.nonceStr,signature : data.data.signature,jsApiList : [ 'checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','hideMenuItems','showMenuItems','hideAllNonBaseMenuItem','showAllNonBaseMenuItem','translateVoice','startRecord','stopRecord','onRecordEnd','playVoice','pauseVoice','stopVoice','uploadVoice','downloadVoice','chooseImage','previewImage','uploadImage','downloadImage','getNetworkType','openLocation','getLocation','hideOptionMenu','showOptionMenu','closeWindow','scanQRCode','chooseWXPay','openProductSpecificView','addCard','chooseCard','openCard' ]
        });
      }
    });
  }
 
  function isWeiXin5() {
    var ua = window.navigator.userAgent.toLowerCase();
    var reg = /MicroMessenger\/[5-9]/i;
    return reg.test(ua);
  }
 
  window.onload = function() {
    //   if (isWeiXin5() == false) {
    //      alert("您的微信版本低于5.0,无法使用微信支付功能,请先升级!");
    //     }
    jssdk();
  };
</script>
</head>
<body>
</body>
</html>

最后我们运行代码,查看运行结果:

如果提示是这样,那么标识我们的配置是成功的,那么到这里微信jssdk的配置就基本完成了,下一篇讲述【微信web开发者工具】的使用,欢迎你的翻阅,如有疑问可以留言讨论!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


本文从从Bitcask存储模型讲起,谈轻量级KV系统设计与实现。从来没有最好的K-V系统,只有最适合应用业务实际场景的系统,做任何的方案选择,要结合业务当前的实际情况综合权衡,有所取有所舍。
内部的放到gitlab pages的博客,需要统计PV,不蒜子不能准确统计,原因在于gitlab的host设置了strict-origin-when-cross-origin, 导致不蒜子不能正确获取referer,从而PV只能统计到网站的PV。 为了方便统计页面的PV,这里简单的写了一个java程
PCM 自然界中的声音非常复杂,波形极其复杂,通常我们采用的是脉冲代码调制编码,即PCM编码。PCM通过抽样、量化、编码三个步骤将连续变化的模拟信号转换为数字编码。 采样率 采样频率,也称为采样速度或者采样率,定义了每秒从连续信号中提取并组成离散信号的采样个数,它用赫兹(Hz)来表示。采样频率的倒数
本文介绍如何离线生成sst并在线加载,提供一种用rocksdb建立分布式kv系统替换mongodb的思路
验证用户输入是否正确是我们应用程序中的常见功能。Spring提供了`@Valid`和@`Validated`两个注解来实现验证功能,本文详细介绍 [@Valid]和[@Validated]注解的区别 。
引入pdf2dom &lt;dependency&gt; &lt;groupId&gt;net.sf.cssbox&lt;/groupId&gt; &lt;artifactId&gt;pdf2dom&lt;/artifactId&gt; &lt;version&gt;1.8&lt;/version&
grafana 是一款非常优秀的可视化报表工具,有设计精良的可视化工具,今天来聊一聊如何将grafana集成到自己的应用中。 原理是: grafana允许iframe访问,开启auth.proxy, java 后端鉴权后代理grafana 前端通过iframe访问后端代理过的grafana graf
介绍 Call Graph是一款IDEA插件,用于可视化基于IntelliJ平台的IDE的函数调用图。 这个插件的目标是让代码更容易理解,有助于读懂和调试代码。当前只支持Java。针对Typescript、Javascript或Python工具,可以使用作者的另外一款工具Codemap(https:
原理 通过线程安全findAndModify 实现锁 实现 定义锁存储对象: /** * mongodb 分布式锁 */ @Data @NoArgsConstructor @AllArgsConstructor @Document(collection = &quot;distributed-loc
Singleton 单例模式 单例模式是确保每个应用程序只存在一个实例的机制。默认情况下,Spring将所有bean创建为单例。 你用@Autowired获取的bean,全局唯一。 @RestController public class LibraryController { @Autowired
pipeline 分布式任务调度器 目标: 基于docker的布式任务调度器, 比quartzs,xxl-job 更强大的分布式任务调度器。 可以将要执行的任务打包为docker镜像,或者选择已有镜像,自定义脚本程序,通过pipeline框架来实现调度。 开源地址: https://github.c
python训练的模型,转换为onnx模型后,用python代码可以方便进行推理,但是java代码如何实现呢? 首先ONNX 推理,可以使用`onnxruntime` ```xml com.microsoft.onnxruntime onnxruntime 1.15.1 ``` 另外,训练的模型需要
要获取内网地址,可以尝试连接到10.255.255.255:1。如果连接成功,获取本地套接字的地址信息就是当前的内网IP。 python实现: ```python import socket def extract_ip(): st = socket.socket(socket.AF_INET, s
为什么要有索引 gremlin 其实是一个逐级过滤的运行机制,比如下面的一个简单的gremlin查询语句: g.V().hasLabel(&quot;label&quot;).has(&quot;prop&quot;,&quot;value&quot;) 运行原理就是: 找出所有的顶点V 然后过滤出
最近在分析一个应用中的某个接口的耗时情况时,发现一个看起来极其普通的对象创建操作,竟然每次需要消耗 8ms 左右时间,分析后发现这个对象可以通过对象池模式进行优化,优化后此步耗时仅有 0.01ms。
点赞再看,动力无限。Hello world : ) 微信搜「 程序猿阿朗 」。 本文 Github.com/niumoo/JavaNotes 和 未读代码网站 已经收录,有很多知识点和系列文章。 此篇文章介绍 Java JMX 技术的相关概念和具体的使用方式。 当前文章属于Java 性能分析优化系列
如何将Java JAR 转化为 win/mac/linux 独立可执行程序?不需要预装 JRE 运行?
点赞再看,动力无限。 微信搜「 程序猿阿朗 」。 本文 Github.com/niumoo/JavaNotes 和 未读代码博客 已经收录,有很多知识点和系列文章。 Java 19 在2022 年 9 月 20 日正式发布,Java 19 不是一个长期支持版本,直到 2023 年 3 月它将被 JD
点赞再看,动力无限。Hello world : ) 微信搜「 程序猿阿朗 」。 本文 Github.com/niumoo/JavaNotes 和 未读代码博客 已经收录,有很多知识点和系列文章。 前言 Java 反编译,一听可能觉得高深莫测,其实反编译并不是什么特别高级的操作,Java 对于 Cla
JSON 对于开发者并不陌生,如今的 WEB 服务、移动应用、甚至物联网大多都是以 **JSON** 作为数据交换的格式。学习 JSON 格式的操作工具对开发者来说是必不可少的。这篇文章将介绍如何使用 **Jackson** 开源工具库对 JSON 进行常见操作。