ホームページ > WeChat アプレット > WeChatの開発 > 現在のクライアントが指定された js インターフェイスをサポートしているかどうかを判断する WeChat 開発メソッド

現在のクライアントが指定された js インターフェイスをサポートしているかどうかを判断する WeChat 開発メソッド

高洛峰
リリース: 2017-03-26 14:55:32
オリジナル
1986 人が閲覧しました

WeChatjsapiインターフェースの使用により、使用許可を得ています。クライアントの js インターフェースがサポートされているかどうかを判断する必要があります

基本インターフェース、現在のクライアントのバージョンが指定された JS インターフェースをサポートしているかどうかを判断します

まず、jsapi.jspcode

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

<%@ 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(){})メソッドでメソッドをトリガーします身体と状態サポートされているかどうかがインターフェイスにポップアップ表示されます。

Webページ内の4つの必要なパラメータ(以下の表など)

パラメータ名説明
appI d 必須、公式アカウントの一意の識別子
タイムスタンプが必須、署名を生成するタイムスタンプ
nonceStrが必須、署名を生成するランダムな文字列
signature は必須です。署名は

では、これら 4 つのパラメーターは何ですか? さあ、以下の 2 番目のステップを参照してください

2 番目に、appId、timestamp、nonceStr、signature を取得します

WeChat jsapi インターフェースを正常に呼び出すには、jsapi.jsp インターフェースにジャンプする前に、上記の 4 つのパラメーターを取得する必要があります。つまり、上記の 4 つのパラメーターは、WeChat jsapi インターフェースを呼び出すための資格情報です。アプリケーションの ID を使用して、WeChat パブリック プラットフォームにログインして、提供されている署名アルゴリズムを取得します。

jsapi.jsp インターフェイスに移動します。ユーザーは、公式アカウントのリンク アドレスをクリックして、jsapi.jsp インターフェイスにジャンプします。 wxJsAPIServlet で上記の 3 つのパラメーターを取得し、そのパラメーターを request オブジェクト に格納し、次のようにサーブレット コードを取り出します。

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代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

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代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

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);

    }

}

ログイン後にコピー


3番目、レンダリングは次のとおりです

現在のクライアントが指定された js インターフェイスをサポートしているかどうかを判断する WeChat 開発メソッド

写真の「WeChat jsapiテストインターフェイス」は署名アルゴリズムのリンクアドレスに接続されています

現在のクライアントが指定された js インターフェイスをサポートしているかどうかを判断する WeChat 開発メソッド

現在のクライアントが指定された js インターフェイスをサポートしているかどうかを判断する WeChat 開発メソッド

以上が現在のクライアントが指定された js インターフェイスをサポートしているかどうかを判断する WeChat 開発メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート