一章介紹了通過分享好友實現(xiàn)微信跳轉(zhuǎn),這一章將介紹通過掃碼實現(xiàn)微信跳轉(zhuǎn)。
前提:從微信公眾號那邊獲取appid,secret,grantType三個參數(shù)備用。
該接口主要是獲取能重定向到掃碼后頁面的接口鏈接。
@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();
}
}
該頁面可以通過掃碼進行跳轉(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
該接口可通過一次性的code獲取用戶的openId,然后重定向到掃碼后的頁面。(微信會兩次回調(diào)這個接口,第一次的code是有值的,第二次code為空!)
前言
在以下幾種情況下,需要能夠在網(wǎng)頁內(nèi)快速定位跳轉(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)方法。
這個方式是由John Tsai給出的,分成兩步:
方法1: 選中CSDN markdown編輯器的一段文字,然后在使用csdnnote命令,輸入: #: 直接將選中的文字轉(zhuǎn)換成HTML的跳轉(zhuǎn)語句,并將錨(空錨)放置在剪切板上,在后面粘貼到需要跳轉(zhuǎn)的地方。 #* :將選中的問題轉(zhuǎn)換成加粗跳轉(zhuǎn)語句,其它的與前面相同。
方法2: 不選中任何CSDN markdown中的問題,直接運行輸入: #提示文字:將提示文字轉(zhuǎn)換成HTML跳轉(zhuǎn)語句,并粘貼在CSDN當前位置,生成錨拷貝到剪切板,以備后面粘貼到合適的地方。 #*提示文字:與前面相同,只是將提示文字加粗。
如果前面的提示文字是空,則只在當前位置粘貼錨。
###錨字符: 在當前位置粘貼錨,文字是錨文字.
實現(xiàn)跳轉(zhuǎn)到另外網(wǎng)頁內(nèi)的特點位置,只是在傳統(tǒng)的MARKDOWN的鏈接格式中,在URL字符串后面增加:#錨文字,即可。 比如下面示例中的情況。(可以點擊右側(cè)字符測試一下: 跳轉(zhuǎn)到另外網(wǎng)頁內(nèi)部錨位置[2] )
**跳轉(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>
源代碼:↓
備注:如果手機上看格式錯亂,建議粘貼到電腦版編輯器里觀看。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。