整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

技术贴：一篇文章看懂链接（超链接）设计

人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。

产品设计时细节是产品经理最头疼的问题，一个button，一个链接都要考虑太多的细节问题。作者整理了常见的一些功能设计问题，一篇文章看懂这些功能设计。来学习吧。

定义

链接也称为超链接，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

样式

链接可以是一个字或是一段字这样的文本，也可以是一个按钮，一张图片，当你点击后跳转到另一个目标，当你把鼠标指针移到某个链接时会变成一个小手，当然在手机上没有这一特点。

1. 文本样式的链接

文本样式的链接一般在搜索引擎的网站呈现蓝色字样，大多会在下面加上下划线以便识别，不过现如今考虑到不影响文本的可读性与用户体验，逐渐取消了下划线。而在一些别的网站考虑到界面设计风格各方面的因素而不用蓝色。

谷歌的文本链接是蓝色，没有下划线

百度的文本链接也是蓝色，关键词是红色，有下划线

而京东的文本链接有灰色，有白色，有黑色

2. 按钮样式的链接

按钮样式的链接比文本样式的更容易识别，每一个按钮都是一样链接。

按钮样式链接

3. 图片样式的链接

图片样式的链接可以是单独的一张图片，也可以是文字与按钮一起组成一张图片，只是鼠标指针扫过图片的任何一个部位都会变成小手。

如桌面弹出这种游戏小窗口的图片式链接

由文字/图/按钮样式一起构成的一张图片式按钮，鼠标可以点击图中任何一部位

打开方式

链接打开的方式有三种：第一种是在当前页面刷新跳转，国外的网站大多是这样的打开式；第二种是在新标签页面打开链接，国内大多采用这种；第三种是提示用APP打开。当然现在出现了一种新的打开方式，那就是二维码扫描。

提示用美拍APP打开

类型

按照连接路径的不同，网页中超链接一般分为以下3种类型：内部链接，锚点链接和外部链接。

链接还可以分为动态链接和静态链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态链接，顾名思义，就是没有动态效果的链接。

1. 内部链接

与外部链接（即反向链接）相反，内部链接是指同一网站域名下的内容页面之间互相链接。如频道、栏目、终极内容页之间的链接，乃至站内关键词之间的Tag链接都可以归类为内部链接，因此内部链接我们也可以称之为站内链接，对内部链接的优化其实就是对网站的站内链接的优化。

2. 锚点链接

HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。

3. 外部链接

外部链接，又常被称为：“反向链接”或“导入链接”，是指通过其他网站链接到你的网站的链接。

外部链接指的是针对搜索引擎，与其它站点所做的友情链接。高质量的外部链接指：和你的网站建立链接的网站知名度高，访问量大，同时相对的外部链接较少，有助于快速提升你的网站知名度和排名的其他网站的友情链接。

如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。

链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。

链接状态

链接在交互上一般会呈现4种状态，即默认状态/悬停时状态/点击时状态/点击后状态。比如谷哥网站的交互体验。如下图：

点击前

悬停时，下面浮现半透明线条

点击时，有波纹晕开的动态效果

点击后，下面线条粗

有时候是3种状态，比如百度网和知乎应用：

默认状态

点击时链接变红

点击后链接变成紫色

IOS系统知乎应用的3种状态，而在Android系统没有用力点击这一状态。

默认状态

点击状态

用力点击会弹出预览小窗口

有些时候只有2种状态，如下图谷歌网：

默认和点击后状态一样

鼠标悬停时出现下划线

默认状态

点击时

而有时候比如在APP里有时候就一直只有一种状态，也可以称静态链接，之前的可以称之为动态链接。在不同的使用场景会因为当时的情况选择最合适的交互体验设计。有的情况下还会加上点击的音效，使用户体验更畅快，这在移动端用的使用情况多一些。

总之链接是网页不可缺少的构成部分，每一个链接的呈现都是经过深思熟虑的。

作者：潘瑶琼（简书作者）

本文由 @潘瑶琼 授权发布于人人都是产品经理，未经作者许可，禁止转载。

、前言

  1. 微信公众号开发 (1) 微信接入认证成为开发者
  2. 微信公众号开发 (2) 消息处理
  3. 微信公众号开发 (3) 菜单处理

本文将实现


  1. 网页授权
  2. 获取用户基本信息

网页授权流程


  1. 填写网页授权回调域名
  2. 引导用户进入授权页面同意授权，获取code
  3. 通过code 换 取网页授权access_token 和 openid （注：与基础支持中的access_token不同）
  4. 刷新网页授权access_token，避免过期（可选择性操作）
  5. 通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）

二、填写网页授权回调域名

测试号在如下地址中，体验接口权限表 -> 网页帐号 -> 修改http://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

注：勿加 http:// 等协议头！

三、授权相关接口


温馨小提示：接口相关参数说明可直接查看微信官方文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

1、用户授权页面


https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect


参数
是否必须 说明
appid
是
公众号的唯一标识
redirect_uri
是
授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理 response_type
是
返回类型，请填写code
scope
是
应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ） state
否
重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节 #wechat_redirect 是
无论直接打开还是做页面302重定向时候，必须带此参数


2、通过code换取网页授权access_token和openid


【GET请求】https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code


参数
是否必须 说明
appid
是
公众号的唯一标识
secret
是
公众号的appsecret
code
是
填写第一步获取的code参数 grant_type 是
填写为authorization_code


3、刷新access_token（如果需要）


【GET请求】https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN


参数
是否必须 说明
appid
是
公众号的唯一标识
grant_type
是
填写为refresh_token
refresh_token 是
填写通过accesstoken获取到的refreshtoken参数


4、获取用户信息(需scope为 snsapi_userinfo)


【GET请求】https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN


参数
描述
access_token 网页授权接口调用凭证,注意：此accesstoken与基础支持的accesstoken不同 openid
用户的唯一标识
lang
返回国家地区语言版本，zhCN 简体，zhTW 繁体，en 英语


5、检验授权凭证（access_token）是否有效


【GET请求】https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=OPENID


参数
描述
access_token 网页授权接口调用凭证,注意：此accesstoken与基础支持的accesstoken不同 openid
用户的唯一标识



注：下面部分只贴出了重要代码部分，完整案例可参考文末提供的源码



四、引导用户进入授权页面同意授权 -> 获取code


方式①：通过创建链接式菜单(view)

方式②：直接发送授权url消息，用户点击进入授权


https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx62d91f5c16d6e8e0&redirect_uri=http://m9adhq.natappfree.cc/api/weixin/basic/getOpenId&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

授权相关的几个api接口如下：

五、通过code换取网页授权access_token和openid（与基础支持中的access_token不同）

用户同意授权后，页面将跳转至 redirect_uri/?code=CODE&state=STATE

code说明 ： code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。

注：小编这里拿到access_token和openid之后将页面重定向到了获取用户信息的接口，然后返回json用户信息数据~

public void getOpenId(HttpServletRequest request, HttpServletResponse response) {
    String code = request.getParameter("code");
    String state = request.getParameter("state");

    log.debug("======================================= \n code值：" + code);

    String responseContent = restTemplate.getForObject(Constants.AUTH_GET_ACCESS_TOKEN_AND_OPENID
            .replace("APPID", Constants.APP_ID)
            .replace("SECRET", Constants.APP_SECRET)
            .replace("CODE", code), String.class);
    JSONObject result = JSON.parseObject(responseContent);
    String accessToken = result.getString("access_token");
    String openid = result.getString("openid");
    String refreshToken = result.getString("refresh_token");

    log.debug("======================================= \n access_token值：" + accessToken + "\n  openid值：" + openid);

    String redirectUrl = "http://m9adhq.natappfree.cc/api/weixin/basic/getUserInfo?openid=" + openid + "&access_token=" + accessToken;
    try {
        // 授权之后重定向到指定URL（这里是跳转到获取用户基本信息接口）
        response.sendRedirect(redirectUrl);
    } catch (IOException e) {
        e.printStackTrace();
    }
}


六、获取微信用户基本信息


public WeixinUserInfoVO getUserInfo(String openId, String accessToken) {
    WeixinUserInfoVO weixinUserInfoVO = null;
    String responseContent = restTemplate.getForObject(Constants.AUTH_GET_USER_INFO
            .replace("ACCESS_TOKEN", accessToken)
            .replace("OPENID", openId), String.class);
    weixinUserInfoVO = JSON.parseObject(responseContent, WeixinUserInfoVO.class);
    return weixinUserInfoVO;
}

其中WeixinUserInfoVO基本信息类

@Data
@ApiModel(description = "微信用户基本信息")
public class WeixinUserInfoVO {

    @ApiModelProperty(value = "用户的唯一标识")
    private String openid;

    @ApiModelProperty(value = "用户昵称")
    private String nickname;

    @ApiModelProperty(value = "用户的性别，值为1时是男性，值为2时是女性，值为0时是未知")
    private Integer sex;

    @ApiModelProperty(value = "用户个人资料填写的省份")
    private String province;

    @ApiModelProperty(value = "普通用户个人资料填写的城市")
    private String city;

    @ApiModelProperty(value = "国家，如中国为CN")
    private String country;

    @ApiModelProperty(value = "用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空。若用户更换头像，原有头像URL将失效。")
    private String headimgurl;

    @ApiModelProperty(value = "用户特权信息，json 数组，如微信沃卡用户为（chinaunicom）")
    private String privilege;

    @ApiModelProperty(value = "只有在用户将公众号绑定到微信开放平台帐号后，才会出现该字段。")
    private String unionid;

    @ApiModelProperty(value = "返回国家地区语言版本，zh_CN 简体，zh_TW 繁体，en 英语")
    private String language;

}

响应数据如下：

这里获取到用户信息之后，也就可以写页面，然后进行自己的业务交互了... (openid：微信用户的唯一标识)

七、刷新access_token（如果需要）

由于accesstoken拥有较短的有效期，当accesstoken超时后，可以使用refreshtoken进行刷新，refreshtoken有效期为30天，当refresh_token失效之后，需要用户重新授权。

public String refreshAccessToken(String appId, String refreshToken) {
    String responseResult = restTemplate.getForObject(Constants.AUTH_REFRESH_ACCESS_TOKEN
            .replace("APPID", appId)
            .replace("REFRESH_TOKEN", refreshToken), String.class);
    JSONObject jsonObject = JSON.parseObject(responseResult);
    return jsonObject.getString("access_token");
}


八、检验授权凭证（access_token）是否有效


public WeixinResponseResult checkAccessToken(String openId, String accessToken) {
     String responseResult = restTemplate.getForObject(Constants.AUTH_CHECK_ACCESS_TOKEN
             .replace("ACCESS_TOKEN", accessToken)
             .replace("OPENID", openId), String.class);
     WeixinResponseResult weixinResponseResult = JSON.parseObject(responseResult, WeixinResponseResult.class);
     if (weixinResponseResult.getErrcode() != 0) {
         log.error("授权凭证无效：" + responseResult);
         throw new MyException(weixinResponseResult.getErrcode(), weixinResponseResult.getErrmsg());
     }
     return weixinResponseResult;
 }


九、总结


  1. 微信公众号开发网上有很多教程，但针对于每一个开发者的环境以及语言不同而有所差异，建议认真看微信提供的官方文档去学习，大致也就是查看文档 封装数据 调微信api接口 业务处理
  2. 关于微信公众号开发小编也已经写了几篇了，大家在学习完微信官方提供的原始api之后，GitHub以及Gitee等上面有很多大神已经封装好了优秀的开源sdk，这时候我们有了一定的微信开发基础就可以去阅读参考学习
  3. 小编建议大家在学习遇到问题，查看别人如何实现以及解决问题的时候，更多的是去学习思维方式处理逻辑，而不是拿到就跑，虽然写代码也不过就是复制黏贴运行完无bug就万事大吉，但我们也要 知其然知其所以然 ！

本文案例demo源码

https://gitee.com/zhengqingya/java-workspace

近做一个项目，要通过扫一扫查询对应的信息，由于现在已经有一部分二维码已被生成，为了兼顾已生成的二维码，所以需要使用网页的扫一扫功能去完成项目。

项目使用技术栈：vue2

方案一、js 原生

热心的同事帮我已经找好了网页扫一扫 DEMO，给我说已经测试过了，Andriod 和 IOS 都可以正常使用。

使用 QRScanner 插件

其原理是通过 navigator.mediaDevices.getUserMedia 来获取用户的摄像头使用权限：

navigator.mediaDevices.getUserMedia(constraints)
.then(res => {  })
.catch(err => {  })

使用自己的 苹果11 测试完全正常，放置服务器上，让同事扫码的时候，真的是异常百态！存在的问题：

1、网页必须使用浏览打开，不可以使用微信内置浏览器。如果是微信打开，会提示 “对不起，未识别到扫描设备”。

2、有些手机，摄像头一直是前置摄像头，通过 facingMode 设置无效：

{ facingMode: { exact: "environment" } }

3、非手机内置浏览器，如：QQ、UC、百度等浏览器APP内，会存在找不到扫瞄设备。

4、最重要的是用户体验差。用户需要在浏览器打开，授权之后，才能进行扫码。

5、开发需要调试的设备较多。navigator.mediaDevices.getUserMedia 兼容性差。


方案二、vue-qr 插件

官方文档：https://www.npmjs.com/package/vue-qr

该插件不仅支持 vue2 ，还支持 vue3 。功能强大，能够生成二维码，还能够扫描、识别二维码，解析二维码。

git 地址：https://github.com/MuGuiLin/QRCode

  • 有一个 HTML 版本。
  • 有一个 vue.js 版本。

测试地址：Demo：https://muguilin.github.io/QRCode

存在问题：

1、网页必须使用浏览打开，不可以使用微信内置浏览器。如果是微信打开，会提示 “对不起，未识别到扫描设备”。

2、非手机内置浏览器，如：QQ、UC、百度等浏览器APP内，会存在找不到扫瞄设备。

3、最重要的是用户体验差。用户需要在浏览器打开，授权之后，才能进行扫码。


方案三、微信扫一扫

我把测试地址发到公司群，让同事帮我测试的时候，我发现程序员测试都说没问题，非程序员基本都是直接使用微信，点击扫一扫的时候，统一都是：“ 对不起，未识别到扫描设备 ”。转念一想，扫一扫好像是给开发同事做的。

转换思路，让用户在微信内直接点进去之后就可以进行扫码！所以选择 微信网页开发 -> 调用微信扫一扫。

优点：

1、用户使用方便，直接可以使用微信扫码。

2、开发方便，不用再考虑兼容安卓和ios的各种浏览器。

实现步骤：

  • 1、引入

引入方式1：

index.html 入口文件处引入 js 插件

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

在 wx 使用页面处，可以直接通过 window.wx 引用。

引入方式2：

npm install weixin-js-sdk

在需要使用的页面处，引入 wx 模块：import wx from 'weixin-js-sdk'

  • 2、配置
wx.config({
 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
 appId: '', // 必填，公众号的唯一标识
 timestamp: , // 必填，生成签名的时间戳
 nonceStr: '', // 必填，生成签名的随机串
 signature: '',// 必填，签名
 jsApiList: [] // 必填，需要使用的JS接口列表
});
  • 3、调用方法
wx.scanQRCode({
 needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
 scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
 success: function (res) {
  var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
 }
});

具体的实现步骤以及可能遇到的问题都总结到《手把手教你调用微信扫一扫！三分钟包会》，需要的自行查阅。


在线咨询
上一篇：「Arc Search」:一键搜索，网页秒建，AI浏览器新体验!
下一篇：CSS世界中那些说起来很冷的知识

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 周口 阿瓦提县 崆峒区 江东区 武胜县 承德县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服