<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
  • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
  • 二維碼掃描在線識別(條形碼掃描器在線使用)


    上一章介紹了通過分享好友實現微信跳轉,這一章將介紹通過掃碼實現微信跳轉。

    前提:從微信公眾號那邊獲取appid,secret,grantType三個參數備用。

    1、獲取微信跳轉鏈接接口

    該接口主要是獲取能重定向到掃碼后頁面的接口鏈接。

    @GET
    @Path(value = "getData")
    @Produces(MediaType.APPLICATION_JSON)
    public Response getData() {
      Map<String, String> result = new HashMap<>();
      try {
          //......業務代碼......
          String recUrl = "https://XXXX.com/項目名/oauth";//實現重定向的連接,該接口實現看第3節講
          result.put("url", recUrl);
          return Response.ok(result).build();
      } catch (Exception e) {
          result.put("code", 0);
          result.put("msg", "異常");
         return Response.ok(result).build();
      }
     } 

    2、二維碼頁面

    該頁面可以通過掃碼進行跳轉,或者復制鏈接在微信中打開實現跳轉。

    <input style="width: 1px;height: 1px;" id="url" value="" type="text" />
    <div id="root">
        <div id="pic">
            <div id="Code"></div>
        </div>
        <div id="txt">掃碼跳轉或者識別圖片跳轉</div>
        <div id="copyLink">
            復制鏈接(微信中點擊鏈接可直接跳轉)
        </div>
    </div>
    function convertCanvasToImage() {
        var image = new Image();
        var canvas = document.getElementsByTagName('canvas')[0];
        image.src = canvas.toDataURL("image/png");
        return image;
    }
    
    $(function() {
        //可以直接復制鏈接在微信中,然后點擊鏈接可跳轉到與掃碼的同一個界面
        var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="
            + appid + "&redirect_uri=" + linkUrl; //linkUrl是后臺getData方法的url
            +"&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect";
        $("#url").val( url);
        $("#pic").qrcode({
            render: "canvas", //table方式
            width: 170, //寬度
            height: 170, //高度
            text: url //任意內容
        });
        var img = convertCanvasToImage();
        $("canvas").remove();  
        $('#Code').append(img);
        $("#copyLink").click(function() {
            var copyText = $("#url");
            copyText.select();//選擇
            document.execCommand("Copy");//執行復制
            alert("復制成功!");
        })
    });

    微信自動調用oauth2/authorize接口,運行完接口后得到一次性的code,會自動重定向到redirect_uri?code=XXX&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect

    3、跳轉的oauth接口

    該接口可通過一次性的code獲取用戶的openId,然后重定向到掃碼后的頁面。(微信會兩次回調這個接口,第一次的code是有值的,第二次code為空?。?/p>

    @GET
    @Path(value = "oauth")
    public void oauth(@Context HttpServletResponse httpResponse, @QueryParam("code") String code) {
        String indexUrl = "https://XXXX.com/項目名/ProduceDeatil.html"; //微信掃碼跳轉的頁面
        String wxUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=%s&secret=%s&code=%s&grant_type=%s";
        wxUrl = String.format(wxUrl, appId, secret, code, grantType);
        String response = HttpUtil.sendGet(wxUrl);
        if (response == null) {
            logger.error("微信access_token接收失敗");
            return;
        }
        JSONObject jsonObject = JSONObject.parseObject(response);
        String openid = (String) jsonObject.get("openid");
        try {
            httpResponse.sendRedirect(indexUrl + "?openid=" + openid);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费