Java微信公共平台开发(13)微信JSSDK中的Config配置

关注前端开发的前端开发工程师和开发人员，一定是在2015年年中被腾讯的jsSDk引爆了。APP-maker、前端开发人员甚至后端开发人员都来凑热闹了，他们也获得了微信JSSDK一阵子，但在我们的技术眼里，它的实现原理和根本无法改变。本文不会对它的JS实现做任何评价和调和(因为我不是很懂。哈哈)，这里我们要讲的是它的config配置实现，参考文档：http://MP . weixin . QQ.com/wiki/11/74 ad 127 cc 054 f6b 80759 c 40 f 77 EC 03 db . html！

微信JS-SDK是微信公众平台为网页开发者提供的基于微信的网页开发工具包。通过使用微信JS-SDK，网页开发者可以使用微信高效地使用手机系统，如拍照、选照、语音、定位等。同时，他们可以直接使用微信独有的微信分享、扫描、卡券、支付等功能，为微信用户提供更好的网页体验；本文将为网页开发者介绍如何使用微信JS-SDK及相关注意事项！JSSDK的使用步骤：

第一步：在微信公众平台绑定安全域名第二步：在后端界面实现JS-SDk配置所需的参数第三步：页面实现JS-SDK中配置的注入配置，并处理成功和失败。

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

登录微信公众平台，进入“微信官方账号设置”的“功能设置”填写“JS界面安全域名”(如下图)。如果需要使用支付接口，需要确保支付目录在支付的安全域名下，否则将无法完成支付！(注意：登录后可以在开发者中心查看相应的界面权限)

(2)在后端接口上实现JS-SDK配置所需的参数

wx . config({ debug 3360 true，//开启调试模式，所有被调用API的返回值都会在客户端告警时发出。要查看传入的参数，可以在pc端打开，参数信息会通过log打印出来，只在pc端打印。AppId: ' '，//必选，微信官方账号唯一标识timestamp://必选，时间戳nonceStr: ' '，//必选，随机字符串signature: ' '，//必选，签名，见附录1 jsapilist :[]///必选查看js-sdk的配置文档和上面的代码，可以发现config的配置需要四个必不可少的参数：AppId、时间戳、nonceStr和签名，这里的签名就是我们生成的签名！

生成签名之前，一定要知道jsapi_ticket，这是微信官方账号用来调用微信JS接口的临时票证。一般情况下，jsapi_ticket的有效期为7200秒，通过access_token获取。由于获取jsapi_ticket的api调用非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自己的业务。开发人员必须在自己的服务中全局缓存jsapi_ticket。因此，这里我们把jsapi_ticket的获取放在定时任务中，因为它与token的生命周期是一致的，所以这里我们把它们放在一起，修改一下原始定时任务中获取token的代码如下：

包裹。com。崔永志。微信。常见；导入Java。文字。SimpleDateformat导入Java。乌提尔。日期；导入Java。乌提尔。HashMap导入Java。乌提尔。地图；导入净。SF。JSON。JSON对象；导入com。崔永志。网络。乌提尔。全局常数；进口。com。崔永志。微信。乌提尔。httputils/** *类名：微信任务* @描述：微信两小时定时任务体* @作者大鹏鸟* @日期2016年3月10日下午1:42:29 */公开课微信任务{ /** * @Description:任务执行体* @ param @抛出异常* @作者大鹏鸟* @日期2016年3月10日下午2:04:37 */public void getToken _ getTicket()引发异常{ MapString，String params=new HashMapString，String()；//获取代币执行体params.put('grant_type '，' client _ credential ')；params.put('appid '，全局常量。getinterfaceURl(' appid ')；params.put('secret '，全局常量。getinterfaceurl(' AppSecret ')；字符串js token=Httputils。SendGet(全局常量。GetInterfaceURl(' TokenURl ')，参数)；string access _ token=JSonobject。FromObject(js标记).getString(' access _ token ')；//获取到代币并赋值保存全局常数。接口属性。put(' access _ token '，access _ token)；//获取jsticket的执行体参数。clear()；params.put('access_token '，access _ token)；params.put('type '，' jsapi ')；string js ticket=Httputils。SendGet(全局常量。GetInterfaceURl('票证URl ')，参数)；string jsapi _ ticket=JSonobject。FromObject(jsticket).getString(')票证');全局常数。接口属性.put('jsapi_ticket '，jsapi _ ticket)；//获取到js-SDK的票并赋值保存系统。出去。println(' jsapi _ ticket==============================================================' jsapi _ ticket)；System.out.println(新的简单日期格式(' yyyy-MM-DD hh :MM :s ')."格式（新日期())"标记为===================================' access _ token)；} }然后我们根据【JS-SDK使用权限签名算法】对参数进行签名得到签名，这里的全球资源定位器(统一资源定位符)必须采用前端传递到后端，因为每次的全球资源定位器(统一资源定位符)会有所变化，如下：

包裹。com。崔永志。微信。常见；导入Java。保安。messagedigest导入Java。乌提尔。格式化程序；导入Java。乌提尔。HashMap导入Java。乌提尔。UUID；导入com。崔永志。网络。乌提尔。全局常数；/** *类名： JSSDK _ Config * @描述：用户微信前端页面的jssdk配置使用* @作者大鹏鸟* @日期2016年3月19日下午3:533:23 */公共类JSSDK _ Config {/* * * @描述：前端jssdk页面配置需要用到的配置参数* @ param @返回hashmap {appid，时间戳，nonceStr，签名} * @ param @抛出例外* @作者大鹏鸟* @日期2016年3月19日下午3:533:23 */公共静态HashMapString，String jsSDK_Sign(字符串url)引发异常{ String nonce _ str=create _ nonce _ str()；字符串时间戳=全局常数。getinterfaceurl('时间戳')；string jsapi _ ticket=全局常量。GetInterfaceURl(' jsapi _ ticket ')；//注意这里参数名必须全部小写，且必须有序字符串1=' jsapi _ ticket=' jsapi _ ticket ' non crest=' nonce _ str ' timestamp=' timestamp ' URL=' URL；MessageDigest crypt=MessageDigest。getinstance(' SHA-1 ')；地穴。reset()；地穴。更新(字符串1。getbytes(' UTF-8 ')；字符串签名=Bytetohex(crypt。digest())；HashMapString，String jssdk=new HashMapString，String()；jssdk.put('appId '，全局常量。GetInterfaceURl(' appId ')；jssdk.put('timestamp '，timestamp)；jssdk。put(' non estr '，nonce _ str)；jssdk.put('signature '，signature)；返回jssdk}私有静态字符串字节十六进制（最终字节[]哈希){ Formatter Formatter=new Formatter()；用于(字节b : hash){ formatter.format('x',b)；}字符串结果=格式化程序。tostring()；格式化程序。close()；返回结果；}私有静态string create _ nonce _ str(){ return uuid。randomuuid().toString()；} }然后我们将后端签名的方法集成到控制器层，形成代码如下：

包裹。com。崔永志。微信。控制器；导入Java。乌提尔。地图；导入组织。弹簧框架。刻板印象。控制器；导入组织。弹簧框架。网络。绑定。注释。请求映射；导入组织。弹簧框架。网络。绑定。注释。请求参数；导入com。崔永志。消息；导入com.cuiyongzhi。微信。_ Config/** *类名：微信控制器* @描述：前端用户微信配置获取* @作者大鹏鸟* @日期2016年3月19日下午5:57:36 */@ Controller @请求映射('/微信配置)公共类微信控制器{/* * * @描述：前端获取微信JSSDK的配置参数* @param @param响应* @param @param请求* @ param @ param url * @ param @抛出异常* @作者大鹏鸟* @日期2016年3月19日下午5:57:52 */@请求映射(' JSSDK ')公共消息JSSDK_config(@RequestParam(值='url '，必选=真)字符串URL){尝试{系统。出去。println(网址)；映射字符串，字符串配置映射=JSSDK _ config。JSSDK _ Sign(网址)；返回Message.success(配置映射);} catch(异常e){返回消息。错误()；} } }到这里我们后端对jssdk的签名参数的封装就基本完成了，下一步就只需要我们前端调用就可以了！

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

在第二步中我们将后端接口代码完成了，这里新建jssdkconfig.jsp，在jsp页面用创建交互式、快速动态网页应用的网页开发技术方式获取并进行配置，并开启调试模式，打开之后就可以看到配置是否成功的提示，简单代码如下：

% @ page语言=' Java ' ContentType=' text/html；charset=UTF-8 '页面编码=' UTF-8 ' %！DOCTYPE html html health reta http-equiv=' Content-TYPe ' Content=' text/html；charset=UTF-8 ' meta name=' viewport ' content=' width=device-width '/title jssdk配置/title脚本src=' http :3358 RES . wx。QQ。com/open/js/jweixin-1。0 .0 .js '/script script src=' http :3358 libs。百度。com/jquery/2。1 .4/jquery。量滴js '/script脚本类型=' text/JavaScript '函数jssdk(){ $ .Ajax({ URL : ' http://微信。崔永志。com/微信config/jssdk '，类型： 'post '，dataType : 'json '，内容类型： ' application/x-www-form-URL编码；charset=utf-8 '，数据： { ' URL ' :位置。href。split(' # ')[0]}，成功：函数（数据){ wx.config({ debug : true，appId : data.data.appId，时间戳： data。数据。时间戳，非estr :数据。数据。非estr，签名：数据。数据。签名，jsApiList : } })；}函数isweixin 5(){ var ua=window。领航员。用户代理。tolowercase()；var reg=/micro messenger \/[5-9]/I；返回reg。测试(ua)；}窗口。onload=function(){//if(isweixin 5()==false){//alert('您的微信版本低于5.0,无法使用微信支付功能，请先升级!');//} jssdk()；};/script/headbody/body/html最后我们运行代码，查看运行结果：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。