微信扫码实现跳转

一章介绍了通过分享好友实现微信跳转，这一章将介绍通过扫码实现微信跳转。

前提：从微信公众号那边获取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小时内与您取得联系。

整合营销服务商