微信开发之判断当前客户端是否支持指定的js接口的方法-微信开发-PHP中文网

首页

微信小程序

微信开发

微信开发之判断当前客户端是否支持指定的js接口的方法

高洛峰

Mar 26, 2017 pm 02:55 PM

微信开发

由于微信js api的使用接口有使用权限，所以我们有必要判断一下客户端是否支持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: &#39;${appId}&#39;, // 必填，公众号的唯一标识  
    timestamp: &#39;${ timestamp}&#39; , // 必填，生成签名的时间戳  
    nonceStr: &#39;${ nonceStr}&#39;, // 必填，生成签名的随机串  
    signature: &#39;${ signature}&#39;,// 必填，签名，  
    jsApiList: [&#39;chooseImage&#39;,&#39;getLocation&#39;,&#39;openLocation&#39;] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
});  
wx.ready(function(){  
    // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
  document.querySelector(&#39;#checkJsApi&#39;).onclick = function () {
    wx.checkJsApi({
      jsApiList: [
        &#39;getNetworkType&#39;,
        &#39;previewImage&#39;
      ],
      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界面，用户在公众号中点击这个链接地址，跳转到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();;

<a href="http://www.php.cn/code/9794.html" target="_blank">Map</a><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;
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;
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;
      }
     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;
     }
    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测试界面"连接为签名算法中的链接地址

微信开发之判断当前客户端是否支持指定的js接口的方法

以上是微信开发之判断当前客户端是否支持指定的js接口的方法的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7681

CakePHP 教程

1393

C# 教程

1209

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

PHP微信开发：如何实现消息加密解密 May 13, 2023 am 11:40 AM

PHP是一种开源的脚本语言，广泛应用于Web开发和服务器端编程，尤其在微信开发中得到了广泛的应用。如今，越来越多的企业和开发者开始使用PHP进行微信开发，因为它成为了一款真正的易学易用的开发语言。在微信开发中，消息的加密和解密是一个非常重要的问题，因为它们涉及到数据的安全性。对于没有加密和解密方式的消息，黑客可以轻松获取到其中的数据，对用户造成威胁

用PHP开发微信群发工具 May 13, 2023 pm 05:00 PM

随着微信的普及，越来越多的企业开始将其作为营销工具。而微信群发功能，则是企业进行微信营销的重要手段之一。但是，如果只依靠手动发送，对于营销人员来说是一件极为费时费力的工作。所以，开发一款微信群发工具就显得尤为重要。本文将介绍如何使用PHP开发微信群发工具。一、准备工作开发微信群发工具，我们需要掌握以下几个技术点：PHP基础知识微信公众平台开发开发工具：Sub

PHP微信开发：如何实现用户标签管理 May 13, 2023 pm 04:31 PM

在微信公众号开发中，用户标签管理是一个非常重要的功能，可以让开发者更好地了解和管理自己的用户。本篇文章将介绍如何使用PHP实现微信用户标签管理功能。一、获取微信用户openid在使用微信用户标签管理功能之前，我们首先需要获取用户的openid。在微信公众号开发中，通过用户授权的方式获取openid是比较常见的做法。在用户授权完成后，我们可以通过以下代码获取用

PHP微信开发：如何实现客服聊天窗口管理 May 13, 2023 pm 05:51 PM

微信是目前全球用户规模最大的社交平台之一，随着移动互联网的普及，越来越多的企业开始意识到微信营销的重要性。在进行微信营销时，客服服务是至关重要的一环。为了更好地管理客服聊天窗口，我们可以借助PHP语言进行微信开发。一、PHP微信开发简介PHP是一种开源的服务器端脚本语言，广泛运用于Web开发领域。结合微信公众平台提供的开发接口，我们可以使用PHP语言进行微信

PHP微信开发：如何实现群发消息发送记录 May 13, 2023 pm 04:31 PM

随着微信成为了人们生活中越来越重要的一个通讯工具，其敏捷的消息传递功能迅速受到广大企业和个人的青睐。对于企业而言，将微信发展为一个营销平台已经成为趋势，而微信开发的重要性也逐渐凸显。在其中，群发功能更是被广泛使用，那么，作为PHP程序员，如何实现群发消息发送记录呢？下面将为大家简单介绍一下。1.了解微信公众号相关开发知识在了解如何实现群发消息发送记录之前，我

PHP微信开发：如何实现投票功能 May 14, 2023 am 11:21 AM

在微信公众号开发中，投票功能经常被运用。投票功能是让用户快速参与互动的好方式，也是举办活动和调查意见的重要工具。本文将为您介绍如何使用PHP实现微信投票功能。获取微信公众号授权首先，你需要获取微信公众号的授权。在微信公众平台上，你需要配置微信公众号的api地址、官方账号和公众号对应的token。在我们使用PHP语言开发的过程中，我们需要使用微信官方提供的PH

如何使用PHP进行微信开发？ May 21, 2023 am 08:37 AM

随着互联网和移动智能设备的发展，微信成为了社交和营销领域不可或缺的一部分。在这个越来越数字化的时代，如何使用PHP进行微信开发已经成为了很多开发者的关注点。本文主要介绍如何使用PHP进行微信开发的相关知识点，以及其中的一些技巧和注意事项。一、开发环境准备在进行微信开发之前，首先需要准备好相应的开发环境。具体来说，需要安装PHP的运行环境，以及微信公众平台提

PHP微信开发：如何实现语音识别 May 13, 2023 pm 09:31 PM

随着移动互联网的普及，微信作为一款社交软件，越来越多的人开始使用，并且微信开放平台也给开发者带来了众多的机会。近年来，随着人工智能技术的发展，语音识别技术逐渐成为了移动端开发的热门技术之一。在微信开发中，如何实现语音识别成为很多开发者关注的问题。本文将介绍如何利用PHP开发微信应用实现语音识别功能。一、语音识别原理在介绍如何实现语音识别之前，我们先了解一下语

See all articles

微信开发之判断当前客户端是否支持指定的js接口的方法

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题