微信jsapi开发之判断当前客户端是否支持指定的js接口(第五课)

最新推荐文章于 2023-07-14 10:45:13 发布
最新推荐文章于 2023-07-14 10:45:13 发布
阅读量6.3k 收藏
点赞数
分类专栏： Java 微信开发

由于微信jsapi的使用接口有使用权限，所以我们有必要判断一下客户端是否支持js接口。

基础接口、判断当前客户端版本是否支持指定JS接口

第一、jsapi.jsp代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html >
   < head >
     < base  href="<%=basePath%>">
     < title >微信jsapi测试-V型知识库</ title >
     < meta  name = "viewport"  content = "width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" >
    < script  src = "http://res.wx.qq.com/open/js/jweixin-1.1.0.js" > </ script > 
</ head >
   < body >
   < center >< h3 >欢迎来到微信jsapi测试界面-V型知识库</ h3 ></ center >
   < br >
      < p >timestamp：${ timestamp}</ p >  
      < p >nonceStr：${ nonceStr}</ p >  
     
      < p >signature：${ signature}</ p >  
      < p >appId:${ appId}</ p >  
       
      <!--   
     <input type="button" value="upload" onclick="uploadImg();"/>  
     <input type="button" value="获取当前位置" onclick="getLocation();"/>  
      -->
      < p >基础接口之判断当前客户端是否支持指定的js接口</ p >   
      < input  type = "button"  value = "checkJSAPI"  id = "checkJsApi" >
   < br >
   
   
   < script  type = "text/javascript" >
   wx.config({  
     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
     appId: '${appId}', // 必填，公众号的唯一标识  
     timestamp: '${ timestamp}' , // 必填，生成签名的时间戳  
     nonceStr: '${ nonceStr}', // 必填，生成签名的随机串  
     signature: '${ signature}',// 必填，签名，  
     jsApiList: ['chooseImage','getLocation','openLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
});  
   
wx.ready(function(){  
     // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
   document.querySelector('#checkJsApi').onclick = function () {
     wx.checkJsApi({
       jsApiList: [
         'getNetworkType',
         'previewImage'
       ],
       success: function (res) {
         alert(JSON.stringify(res));
       }
     });
   };
   
});  
  //初始化jsapi接口 状态
wx.error(function (res) {
   alert("调用微信jsapi返回的状态:"+res.errMsg);
});
   
  </ script >
    
   </ body >
</ html >

点击按钮checkJSAPI会触发wx.ready(function(){})方法体中的方法，并且会在界面中弹出是否支持的状态.

网页中的四个必要参数，如下面表格

参数名说明
appId必填，公众号的唯一标识  
timestamp必填，生成签名的时间戳  
nonceStr必填，生成签名的随机串 
signature必填，签名

那么这四个参数是怎么来的呢，请看下面第二步骤。

第二、获取appId、timestamp、nonceStr、signature

我们在跳转到jsapi.jsp界面之前，必须获取上面四个参数才能成功调用微信jsapi的接口，也就是说上面四个参数是调用微信jsapi接口的凭证，缺一不可。appid为应用的id,可登陆微信公众平台查看。剩下的三个参数必须根据微信官方提供的签名算法获取。

在公众号中点击链接跳转到jsapi.jsp界面，例如本文案例链接http://www.vxzsk.com/weChat/wxJsAPIServlet，用户在公众号中点击这个链接地址，跳转到jsapi.jsp界面，我们在wxJsAPIServlet中必须获取上述三个参数，并把参数存储到request对象中，然后jsp界面取出。servlet代码如下：

public  void  doGet(HttpServletRequest request, HttpServletResponse response)
             throws  ServletException, IOException {
         System.out.println( "wxJSAPI====================" );
         String jsapi_ticket =JsapiTicketUtil.getJSApiTicket();;
         Map<String,String> map = Sign.sign(jsapi_ticket,  "http://www.vxzsk.com/weChat/wxJsAPIServlet" );
         String timestamp = map.get( "timestamp" );
         String nonceStr = map.get( "nonceStr" );
         String signature = map.get( "signature" );
         String appId =  "你自己的应用id" ;
         request.setAttribute( "appId" , appId);
         request.setAttribute( "timestamp" , timestamp);
         request.setAttribute( "signature" ,signature);
         request.setAttribute( "nonceStr" , nonceStr);
         request.getRequestDispatcher( "jsapi/jsapi.jsp" ).forward(request, response);
     }

注意用户点击的地址必须和签名算法中的地址保持一致，如果要带参数那么参数也要带上而且参数的顺序不能改变，否则签名算法得到的签名 字符串和用户请求的地址的签名字符串不一致导致调用jsapi失败。

当然我在这里用的servlet跳转，读者也可以把doGET方法中的代码复制到spring的一个普通controller中或者struts中的一个普通的action方法中。

Sign.java代码

package  com.test.util;
/***
  * V型知识库 www.vxzsk.com
  */
import  java.util.UUID;
import  java.util.Map;
import  java.util.HashMap;
import  java.util.Formatter;
import  java.security.MessageDigest;
import  java.security.NoSuchAlgorithmException;
import  java.io.UnsupportedEncodingException;  
   public  class  Sign {
     public  static  Map<String, String> sign(String jsapi_ticket, String url) {
         Map<String, String> ret =  new  HashMap<String, String>();
         String nonce_str = create_nonce_str();
         String timestamp = create_timestamp();
         String string1;
         String signature =  "" ;
 
         //注意这里参数名必须全部小写，且必须有序
         string1 =  "jsapi_ticket="  + jsapi_ticket +
                   "&noncestr="  + nonce_str +
                   "&timestamp="  + timestamp +
                   "&url="  + url;
         System.out.println(string1);
 
         try
         {
             MessageDigest crypt = MessageDigest.getInstance( "SHA-1" );
             crypt.reset();
             crypt.update(string1.getBytes( "UTF-8" ));
             signature = byteToHex(crypt.digest());
         }
         catch  (NoSuchAlgorithmException e)
         {
             e.printStackTrace();
         }
         catch  (UnsupportedEncodingException e)
         {
             e.printStackTrace();
         }
 
         ret.put( "url" , url);
         ret.put( "jsapi_ticket" , jsapi_ticket);
         ret.put( "nonceStr" , nonce_str);
         ret.put( "timestamp" , timestamp);
         ret.put( "signature" , signature);
 
         return  ret;
     }
 
     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();
     }
 
     private  static  String create_timestamp() {
         return  Long.toString(System.currentTimeMillis() /  1000 );
     }
     public  static  void  main(String[] args) {
         String jsapi_ticket =JsapiTicketUtil.getJSApiTicket();
         // 注意 URL 一定要动态获取，不能 hardcode
         String url =  "http://www.vxzsk.com/xx/x.do" ;//url是你请求的一个action或者controller地址，并且方法直接跳转到使用jsapi的jsp界面
         Map<String, String> ret = sign(jsapi_ticket, url);
         for  (Map.Entry entry : ret.entrySet()) {
             System.out.println(entry.getKey() +  ", "  + entry.getValue());
         }
     };
}

JsapiTicketUtil.java代码

package  com.test.util;
import  java.io.BufferedReader;
import  java.io.IOException;
import  java.io.InputStreamReader;
import  java.net.MalformedURLException;
import  java.net.URL;
import  java.net.URLConnection;
 
import  net.sf.json.JSONObject;
import  com.test.weixin.TestAcessToken;
/***
  * @author V型知识库  www.vxzsk.com
  *
  */
public  class  JsapiTicketUtil {
     
     /***
      * 模拟get请求
      * @param url
      * @param charset
      * @param timeout
      * @return
      */
      public  static  String sendGet(String url, String charset,  int  timeout)
       {
         String result =  "" ;
         try
         {
           URL u =  new  URL(url);
           try
           {
             URLConnection conn = u.openConnection();
             conn.connect();
             conn.setConnectTimeout(timeout);
             BufferedReader in =  new  BufferedReader( new  InputStreamReader(conn.getInputStream(), charset));
             String line= "" ;
             while  ((line = in.readLine()) !=  null )
             {
             
               result = result + line;
             }
             in.close();
           }  catch  (IOException e) {
             return  result;
           }
         }
         catch  (MalformedURLException e)
         {
           return  result;
         }
       
         return  result;
       }
      /***
       * 获取acess_token 
       * 来源www.vxzsk.com
       * @return
       */
      public  static  String getAccessToken(){
             String appid= "你公众号基本设置里的应用id" ; //应用ID
             String appSecret= "你公众号基本设置里的应用密钥" ; //(应用密钥)
             String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" +appid+ "&secret=" +appSecret+ "" ;
             String backData=TestAcessToken.sendGet(url,  "utf-8" ,  10000 );
             String accessToken = (String) JSONObject.fromObject(backData).get( "access_token" );  
             return  accessToken;
      }
     
      /***
       * 获取jsapiTicket
       * 来源 www.vxzsk.com
       * @return
       */
     public  static  String getJSApiTicket(){ 
         //获取token
         String acess_token= JsapiTicketUtil.getAccessToken();
         String urlStr =  "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" +acess_token+ "&type=jsapi" ;  
         String backData=TestAcessToken.sendGet(urlStr,  "utf-8" ,  10000 );  
         String ticket = (String) JSONObject.fromObject(backData).get( "ticket" );  
         return   ticket;  
           
     }  
     
     public  static  void  main(String[] args) {
         String jsapiTicket = JsapiTicketUtil.getJSApiTicket();
         System.out.println( "调用微信jsapi的凭证票为：" +jsapiTicket);
 
     }
 
}

第三、效果图如下

图中的"微信jsapi测试界面"连接为签名算法中的链接地址，例如本案例的地址为http://www.vxzsk.com/weChat/wxJsAPIServlet  


转自：http://www.vxzsk.com/104.html

dragonpeng2008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsapi:微信jsapi接口
07-02
微信jsapi接口 ###使用方法 引入库 [removed] 调用方法 分享到appmessage JSAPI.sendAppMessage(opt,callback); 分享到朋友圈 JSAPI.shareTimeline(opt,callback); 分享到腾讯微博 JSAPI.shareWeibo(opt,callback); ...
JS 客户端检测
Blog
08-18 259
客户端检测是JavaScript开发中最受争议的一个话题，由于浏览器之间存在差别，通常需要根据不同的浏览器的能力分别编写不同的代码。有不少客户端检测方法，但下列是经常使用的。 　　1.能力检测：编写代码之前先检测特定浏览器的能力。例如，脚本在调用某个函数之前，可能要检测该函数是否存在。这种检测方法将开发人员从考虑具体的浏览器类型和版本中解放出来，让他们先把注意力集中到相应的能力是否存在上。能力检
Vue 微信实现JSAPI签名认证
仗剑走天涯的博客
07-01 2287
准备工作： 1、申请微信公众号 可以使用微信测试的公众号：https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index 2、配置JS接口安全域名（正式账号还要设置IP访问白名单等） 3、得到appID和appsecret 4、关注公众号，绑定开发者 步骤如下： 1、获取access_token (服务端实现) 2、获取api_ticket（服务端实现） 3、使用url，timestamp，nonc
企业微信JS-SDK
雄的博客
12-02 5494
企业微信JS-SDK是企业微信面向网页开发者提供的基于企业微信内的网页开发工具包。 通过使用企业微信JS-SDK，网页开发者可借助企业微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用企业微信分享、扫一扫等企业微信特有的能力，为企业微信用户提供更优质的网页体验。 使用说明 所有的JS接口只能在企业微信应用的可信域名下调用(包括子域名)，且可信域名必须有ICP备案且在管理端验证域...
wx.checkjsapi是写在config里面吗_我们用5分钟写了一个跨多端项目
weixin_39696197的博客
12-05 2539
作者｜许国栋(chameleon 成员)编辑｜覃云cml 作为真正让一套代码运行多端的框架，提供标准的 MVVM 模式，统一开发各类终端。同时，拥有各端独立的运行时框架 (runtime)、数据管理 (store)、组件库 (ui)、接口 (api)。此外，cml在跨端能力加强、能力统一、表现一致等方面做了许多工作。今天，为了让大家的项目优雅升级，快速接入，给你带来一份丰盛的 cml 迁...
wx.checkjsapi是写在config里面吗_视频给你，5分钟写一个跨多端项目
weixin_39720510的博客
11-20 384
cml 作为真正让一套代码运行多端的框架，提供标准的 MVVM 模式，统一开发各类终端。同时，拥有各端独立的运行时框架 (runtime)、数据管理 (store)、组件库 (ui)、接口 (api)。此外，cml在跨端能力加强、能力统一、表现一致等方面做了许多工作。今天，为了让大家的项目优雅升级，快速接入，给你带来一份丰盛的 cml 迁移指南~源码地址：https://github.c...
tp5 微信支付 JSAPI支付接口 下载即用
12-15
封装好的微信JSAPI支付接口 下载放到项目里就能用
java微信支付DEMO, 微信JSAPI支付, 微信退款, 微信提现, 微信付款查询
08-03
微信native支付, 微信JSAPI支付, 微信退款, 微信提现, 微信付款查询, 所有方法都已经封装实现, main方法可直接调用体验, maven项目
微信JSAPI Ticket接口签名详解
12-10
本文实例为大家分享了微信JS接口签名的具体代码，供大家参考，具体内容如下 1、微信 JS 接口签名校验工具 2、具体开发 2.1 获取access_token，然后jsapi_ticket /** * 获取access_token，然后jsapi_ticket */ ...
微信开发之获取JSAPI TICKET
12-20
签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典...
【微信分享】的踩坑和总结
qq_36959274的博客
10-28 548
本文主要介绍微信分享踩的坑，希望对大家有所帮助 要做微信分享内容自定义，需要使用微信JS-SDK 官方指导文档： [微信JS-SDK说明文档](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html) # 公众号设置里面设置js安全域名 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Mark...
微信JS接口
aibiba0894的博客
01-18 411
微信JS接口 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置来源：http://www.cnblogs.com/txw1958/p/weixin-js.html 概述 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图...
怎么用python制作简单的程序-如何用 Python 写一个简易的抽奖程序
weixin_37988176的博客
10-30 341
不知道有多少人是被这个头图骗进来的：）事情的起因是这样的，上周有同学问小编，看着小编的示例代码敲代码，感觉自己也会写了，如果不看的话，七七八八可能也写的出来，但是一旦自己独立写一段程序，感觉到无从下手。其实这个很正常，刚开始学习写代码，都是跟着别人的套路往下写，看的套路少，很难形成自己的套路，这就和做数学题是一样的，做一道题就想会所有的题目，这个可能性微乎其微，都是通过大量的练习来摸索到自己的套路...
web前端实现微信签名 调用wx提供的API
[email protected]的博客
07-14 641
web前端实现微信签名 调用wx提供的API（2）获取access_token、通过access_token获取jsapi_ticket，拿到签名所需要的数据进行ASCII排序后SHA1加密。（4）获取当前页面对应的url。（3）按ascii码从小到大排序。（3）拿到签名后进行微信配置。（2）生成时间戳或时间。
wx.checkjsapi是写在config里面吗_从零开始写的跨平台嵌入式机器视觉库（YMKV）
weixin_39942318的博客
11-29 229
这篇是开篇扯淡。因为常年玩单片机吧，像网上的教程吧，比如正点原子，野火....，他们整体教程个人感觉偏向于互联网，接口。安富莱有DSP相关的教程，会偏一些算法，还有硬石的电机控制也比较不错。但是人工智能边缘计算这块却少的可怜。在我大二那会儿，因为兴趣原因，写了一个在STM32上跑的机器视觉库，当时我用的是keil环境，所以随便取了一个keil version的名字。所以就一直沿用该名字，没有修改过...
企业微信H5_网页jssdk调用 判断当前客户端版本是否支持指定JS接口
Gblfy_Blog
02-28 936
接上一篇：企业微信H5_网页jssdk调用，ticket签名config及示例https://gblfy.blog.csdn.net/article/details/123170569 文章目录一、接入环境1. 阅读文档2. 接入要求二、前端接入和调试2.1. 代码效果2.2. 实战演练2.3. 信息分析2.4. 真实用途 一、接入环境 1. 阅读文档 官网文档： https://developer.work.weixin.qq.com/document/path/94312 2. 接入要求 ..
wx.checkjsapi是写在config里面吗_阿里面经，详细到每个环节(已拿offer)，其实进阿里也没那么难...
weixin_39805644的博客
11-27 278
Java开发面经验，从各个环节进行了详细介绍，这次面试中规中矩没有冷僻为难人的问题，你会发现进阿里并不难自我介绍：哪个学校(本、硕)，哪个专业，名字，技术栈(java+redis+mysql+nginx，方便面试官深挖的，会就此深入问基础问题，例如zookeeper等中间件，样式不求多，但说出的要不怕深入问)一面师兄基础加项目面：Redis是单线程的，为什么会这么快答：1、纯内存操作。2、单线程操...
微信JS接口说明
思科网络
07-16 3077
概述 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。 此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。 使用说明 在使用微信JS-
微信JSAPI支付流程
最新发布
09-06
微信JSAPI支付是一种使用微信内置浏览器或微信客户端内的网页进行支付的方式。流程如下: 1. 用户在商户的网站或应用内点击支付按钮，触发支付请求。 2. 商户服务器收到支付请求后，向微信支付服务器发起下单请求，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值