微信掃碼實現跳轉

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

前提：從微信公眾號那邊獲取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為空！）

前言

在以下幾種情況下，需要能夠在網頁內快速定位跳轉：

如果網頁實在是太長了，后面和前面的敘述需要相互引用，實現網頁內跳轉可以便于閱讀和查看。
如果通過鏈接跳轉到另外的長網頁，也希望能夠快速定位到相關內容，則需要提供在鏈接網頁中跳轉的方式。

JohnTsai在他的博文 MarkDown技巧：實現網頁內跳轉[1] 中給出了兩種使用MARKDOWN編輯器來獲得網頁內的跳轉方式。下面基于他介紹的方法，來給出網頁內跳轉實現方法。

01網頁內跳轉

1.基本HTML標簽實現方式

這個方式是由John Tsai給出的，分成兩步：

定義一個錨(id)： <span id="jump">跳轉到的地方</span>
使用markdown語法： **點擊跳轉**[](#jump "點擊跳轉")

2.使用csdnnote命令

方法1： 選中CSDN markdown編輯器的一段文字，然后在使用csdnnote命令，輸入： #：直接將選中的文字轉換成HTML的跳轉語句，并將錨（空錨）放置在剪切板上，在后面粘貼到需要跳轉的地方。 #* ：將選中的問題轉換成加粗跳轉語句，其它的與前面相同。

方法2: 不選中任何CSDN markdown中的問題，直接運行輸入： #提示文字：將提示文字轉換成HTML跳轉語句，并粘貼在CSDN當前位置，生成錨拷貝到剪切板，以備后面粘貼到合適的地方。 #*提示文字：與前面相同，只是將提示文字加粗。

如果前面的提示文字是空，則只在當前位置粘貼錨。

###錨字符：在當前位置粘貼錨，文字是錨文字.

02轉移到另外網頁內的跳轉

實現跳轉到另外網頁內的特點位置，只是在傳統的MARKDOWN的鏈接格式中，在URL字符串后面增加：#錨文字，即可。比如下面示例中的情況。（可以點擊右側字符測試一下： 跳轉到另外網頁內部錨位置[2] ）

ounter(line

 **跳轉到另外網頁內部錨位置**<sup>[3]</sup>

※ 小結

采用MARKDOWN編輯文檔內部，利用HTML錨標示設定的方式，可以實現網頁內，網頁外的錨點之間的跳轉。這就大大方便對于網頁內容引用的精確性。

對于其它網頁的應用，必須知道其它網頁內的錨的位置。如果其它網頁是由你自己MARKDOWN編輯的，這個位置是已知的。但對于別人的網頁如何定義出其中的錨的標示，則還需要進一步的探究和實驗。

使用PYTHON命令中的csdnnote可以大大提高設定錨和跳轉的操作。

對于csdnnote其它功能，比如如何在MARKDOWN內部設定注釋，注解。請參照以下csdnnote的源程序來使用。

*[注釋]: 注釋是直接使用鼠標彈出對應的屆時文字 *[注解]: 注解是在文章之后給出的解釋文字

參考資料

[1]

MarkDown技巧：實現網頁內跳轉: https://www.cnblogs.com/JohnTsai/p/4027229.html#jump

[2]

跳轉到另外網頁內部錨位置: https://zhuoqing.blog.csdn.net/article/details/107294049#1234

、錨點鏈接的概念

我們在瀏覽一個網頁的時候，通常會遇到比較長的網頁，一直向下拉滾動條一直向下，而在最底部的位置通常會有一個一鍵返回到頂部

或者返回到哪里的按鈕，這個按鈕就是利用的 錨點鏈接 功能。

二、錨點鏈接的語法

就兩個值：第一個就是錨點下在哪里？第二個就是點在哪里？

<body>

<!-- 2、跳轉的目標位置：點-->

<a id="test">這里是頂部</a>

<!-- 1、跳轉的按鈕：錨-->

<a href="#test">回到頂部</a>

</body>

三、錨點的用法實例

源代碼：↓

備注：如果手機上看格式錯亂，建議粘貼到電腦版編輯器里觀看。

在線咨詢

上一篇：HTML 屬性
下一篇：JavaScript代碼怎樣引入到HTML中？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商