一章介紹了通過分享好友實現(xiàn)微信跳轉(zhuǎn)，這一章將介紹通過掃碼實現(xiàn)微信跳轉(zhuǎn)。

前提：從微信公眾號那邊獲取appid，secret，grantType三個參數(shù)備用。

1、獲取微信跳轉(zhuǎn)鏈接接口

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

@GET
@Path(value = "getData")
@Produces(MediaType.APPLICATION_JSON)
public Response getData() {
  Map<String, String> result = new HashMap<>();
  try {
      //......業(yè)務代碼......
      String recUrl = "https://XXXX.com/項目名/oauth"；//實現(xiàn)重定向的連接，該接口實現(xiàn)看第3節(jié)講
      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、二維碼頁面

該頁面可以通過掃碼進行跳轉(zhuǎn)，或者復制鏈接在微信中打開實現(xiàn)跳轉(zhuǎn)。

<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">掃碼跳轉(zhuǎn)或者識別圖片跳轉(zhuǎn)</div>
    <div id="copyLink">
        復制鏈接（微信中點擊鏈接可直接跳轉(zhuǎn)）
    </div>
</div>

function convertCanvasToImage() {
    var image = new Image();
    var canvas = document.getElementsByTagName('canvas')[0];
    image.src = canvas.toDataURL("image/png");
    return image;
}

$(function() {
    //可以直接復制鏈接在微信中，然后點擊鏈接可跳轉(zhuǎn)到與掃碼的同一個界面
    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 //任意內(nèi)容
    });
    var img = convertCanvasToImage();
    $("canvas").remove();  
    $('#Code').append(img);
    $("#copyLink").click(function() {
        var copyText = $("#url");
        copyText.select();//選擇
        document.execCommand("Copy");//執(zhí)行復制
        alert("復制成功！");
    })
});

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

3、跳轉(zhuǎn)的oauth接口

該接口可通過一次性的code獲取用戶的openId，然后重定向到掃碼后的頁面。（微信會兩次回調(diào)這個接口，第一次的code是有值的，第二次code為空！）

前言

在以下幾種情況下，需要能夠在網(wǎng)頁內(nèi)快速定位跳轉(zhuǎn)：

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

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

01網(wǎng)頁內(nèi)跳轉(zhuǎn)

1.基本HTML標簽實現(xiàn)方式

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

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

2.使用csdnnote命令

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

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

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

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

02轉(zhuǎn)移到另外網(wǎng)頁內(nèi)的跳轉(zhuǎn)

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

• ounter(line

 **跳轉(zhuǎn)到另外網(wǎng)頁內(nèi)部錨位置**<sup>[3]</sup> 

※ 小結

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

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

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

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

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

參考資料

[1]

MarkDown技巧：實現(xiàn)網(wǎng)頁內(nèi)跳轉(zhuǎn): https://www.cnblogs.com/JohnTsai/p/4027229.html#jump

[2]

跳轉(zhuǎn)到另外網(wǎng)頁內(nèi)部錨位置: https://zhuoqing.blog.csdn.net/article/details/107294049#1234

、錨點鏈接的概念

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

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

二、錨點鏈接的語法

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

<body>

<!-- 2、跳轉(zhuǎn)的目標位置：點-->

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

<!-- 1、跳轉(zhuǎn)的按鈕：錨-->

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

</body>

三、錨點的用法實例

源代碼：↓

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