技術(shù)貼：一篇文章看懂鏈接（超鏈接）設(shè)計

人人都是產(chǎn)品經(jīng)理【起點學(xué)院】，BAT實戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學(xué)產(chǎn)品、學(xué)運營。

產(chǎn)品設(shè)計時細(xì)節(jié)是產(chǎn)品經(jīng)理最頭疼的問題，一個button，一個鏈接都要考慮太多的細(xì)節(jié)問題。作者整理了常見的一些功能設(shè)計問題，一篇文章看懂這些功能設(shè)計。來學(xué)習(xí)吧。

定義

鏈接也稱為超鏈接，所謂的超鏈接是指從一個網(wǎng)頁指向一個目標(biāo)的連接關(guān)系，這個目標(biāo)可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應(yīng)用程序。而在一個網(wǎng)頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接的文字或圖片后，鏈接目標(biāo)將顯示在瀏覽器上，并且根據(jù)目標(biāo)的類型來打開或運行。

樣式

鏈接可以是一個字或是一段字這樣的文本，也可以是一個按鈕，一張圖片，當(dāng)你點擊后跳轉(zhuǎn)到另一個目標(biāo)，當(dāng)你把鼠標(biāo)指針移到某個鏈接時會變成一個小手，當(dāng)然在手機上沒有這一特點。

1. 文本樣式的鏈接

文本樣式的鏈接一般在搜索引擎的網(wǎng)站呈現(xiàn)藍(lán)色字樣，大多會在下面加上下劃線以便識別，不過現(xiàn)如今考慮到不影響文本的可讀性與用戶體驗，逐漸取消了下劃線。而在一些別的網(wǎng)站考慮到界面設(shè)計風(fēng)格各方面的因素而不用藍(lán)色。

谷歌的文本鏈接是藍(lán)色，沒有下劃線

百度的文本鏈接也是藍(lán)色，關(guān)鍵詞是紅色，有下劃線

而京東的文本鏈接有灰色，有白色，有黑色

2. 按鈕樣式的鏈接

按鈕樣式的鏈接比文本樣式的更容易識別，每一個按鈕都是一樣鏈接。

按鈕樣式鏈接

3. 圖片樣式的鏈接

圖片樣式的鏈接可以是單獨的一張圖片，也可以是文字與按鈕一起組成一張圖片，只是鼠標(biāo)指針掃過圖片的任何一個部位都會變成小手。

如桌面彈出這種游戲小窗口的圖片式鏈接

由文字/圖/按鈕樣式一起構(gòu)成的一張圖片式按鈕，鼠標(biāo)可以點擊圖中任何一部位

打開方式

鏈接打開的方式有三種：第一種是在當(dāng)前頁面刷新跳轉(zhuǎn)，國外的網(wǎng)站大多是這樣的打開式；第二種是在新標(biāo)簽頁面打開鏈接，國內(nèi)大多采用這種；第三種是提示用APP打開。當(dāng)然現(xiàn)在出現(xiàn)了一種新的打開方式，那就是二維碼掃描。

提示用美拍APP打開

類型

按照連接路徑的不同，網(wǎng)頁中超鏈接一般分為以下3種類型：內(nèi)部鏈接，錨點鏈接和外部鏈接。

鏈接還可以分為動態(tài)鏈接和靜態(tài)鏈接。動態(tài)超鏈接指的是可以通過改變HTML代碼來實現(xiàn)動態(tài)變化的鏈接，例如我們可以實現(xiàn)將鼠標(biāo)移動到某個文字鏈接上，文字就會象動畫一樣動起來或改變顏色的效果，也可以實現(xiàn)鼠標(biāo)移到圖片上圖片就產(chǎn)生反色或朦朧等等的效果。而靜態(tài)鏈接，顧名思義，就是沒有動態(tài)效果的鏈接。

1. 內(nèi)部鏈接

與外部鏈接（即反向鏈接）相反，內(nèi)部鏈接是指同一網(wǎng)站域名下的內(nèi)容頁面之間互相鏈接。如頻道、欄目、終極內(nèi)容頁之間的鏈接，乃至站內(nèi)關(guān)鍵詞之間的Tag鏈接都可以歸類為內(nèi)部鏈接，因此內(nèi)部鏈接我們也可以稱之為站內(nèi)鏈接，對內(nèi)部鏈接的優(yōu)化其實就是對網(wǎng)站的站內(nèi)鏈接的優(yōu)化。

2. 錨點鏈接

HTML中的鏈接，正確的說法應(yīng)該稱作"錨點"，它命名錨點鏈接（也叫書簽鏈接）常常用于那些內(nèi)容龐大繁瑣的網(wǎng)頁，通過點擊命名錨點，不僅讓我們能指向文檔，還能指向頁面里的特定段落，更能當(dāng)作"精準(zhǔn)鏈接"的便利工具，讓鏈接對象接近焦點。便于瀏覽者查看網(wǎng)頁內(nèi)容。類似于我們閱讀書籍時的目錄頁碼或章回提示。在需要指定到頁面的特定部分時，標(biāo)記錨點是最佳的方法。

3. 外部鏈接

外部鏈接，又常被稱為：“反向鏈接”或“導(dǎo)入鏈接”，是指通過其他網(wǎng)站鏈接到你的網(wǎng)站的鏈接。

外部鏈接指的是針對搜索引擎，與其它站點所做的友情鏈接。高質(zhì)量的外部鏈接指：和你的網(wǎng)站建立鏈接的網(wǎng)站知名度高，訪問量大，同時相對的外部鏈接較少，有助于快速提升你的網(wǎng)站知名度和排名的其他網(wǎng)站的友情鏈接。

如果按照使用對象的不同，網(wǎng)頁中的鏈接又可以分為：文本超鏈接，圖像超鏈接，E-mail鏈接，錨點鏈接，多媒體文件鏈接，空鏈接等。

鏈接是一種對象，它以特殊編碼的文本或圖形的形式來實現(xiàn)鏈接，如果單擊該鏈接，則相當(dāng)于指示瀏覽器移至同一網(wǎng)頁內(nèi)的某個位置，或打開一個新的網(wǎng)頁，或打開某一個新的WWW網(wǎng)站中的網(wǎng)頁。

鏈接狀態(tài)

鏈接在交互上一般會呈現(xiàn)4種狀態(tài)，即默認(rèn)狀態(tài)/懸停時狀態(tài)/點擊時狀態(tài)/點擊后狀態(tài)。比如谷哥網(wǎng)站的交互體驗。如下圖：

點擊前

懸停時，下面浮現(xiàn)半透明線條

點擊時，有波紋暈開的動態(tài)效果

點擊后，下面線條粗

有時候是3種狀態(tài)，比如百度網(wǎng)和知乎應(yīng)用：

默認(rèn)狀態(tài)

點擊時鏈接變紅

點擊后鏈接變成紫色

IOS系統(tǒng)知乎應(yīng)用的3種狀態(tài)，而在Android系統(tǒng)沒有用力點擊這一狀態(tài)。

默認(rèn)狀態(tài)

點擊狀態(tài)

用力點擊會彈出預(yù)覽小窗口

有些時候只有2種狀態(tài)，如下圖谷歌網(wǎng)：

默認(rèn)和點擊后狀態(tài)一樣

鼠標(biāo)懸停時出現(xiàn)下劃線

默認(rèn)狀態(tài)

點擊時

而有時候比如在APP里有時候就一直只有一種狀態(tài)，也可以稱靜態(tài)鏈接，之前的可以稱之為動態(tài)鏈接。在不同的使用場景會因為當(dāng)時的情況選擇最合適的交互體驗設(shè)計。有的情況下還會加上點擊的音效，使用戶體驗更暢快，這在移動端用的使用情況多一些。

總之鏈接是網(wǎng)頁不可缺少的構(gòu)成部分，每一個鏈接的呈現(xiàn)都是經(jīng)過深思熟慮的。

作者：潘瑤瓊（簡書作者）

本文由 @潘瑤瓊授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

、前言

微信公眾號開發(fā) (1) 微信接入認(rèn)證成為開發(fā)者
微信公眾號開發(fā) (2) 消息處理
微信公眾號開發(fā) (3) 菜單處理

本文將實現(xiàn)

網(wǎng)頁授權(quán)
獲取用戶基本信息

網(wǎng)頁授權(quán)流程

填寫網(wǎng)頁授權(quán)回調(diào)域名
引導(dǎo)用戶進(jìn)入授權(quán)頁面同意授權(quán)，獲取code
通過code 換取網(wǎng)頁授權(quán)access_token 和 openid （注：與基礎(chǔ)支持中的access_token不同）
刷新網(wǎng)頁授權(quán)access_token，避免過期（可選擇性操作）
通過網(wǎng)頁授權(quán)access_token和openid獲取用戶基本信息（支持UnionID機制）

二、填寫網(wǎng)頁授權(quán)回調(diào)域名

測試號在如下地址中，體驗接口權(quán)限表 -> 網(wǎng)頁帳號 -> 修改http://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

注：勿加 http:// 等協(xié)議頭！

三、授權(quán)相關(guān)接口

溫馨小提示：接口相關(guān)參數(shù)說明可直接查看微信官方文檔 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

1、用戶授權(quán)頁面

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

參數(shù)
是否必須說明
appid
是
公眾號的唯一標(biāo)識
redirect_uri
是
授權(quán)后重定向的回調(diào)鏈接地址，請使用 urlEncode 對鏈接進(jìn)行處理 response_type
是
返回類型，請?zhí)顚慶ode
scope
是
應(yīng)用授權(quán)作用域，snsapi_base （不彈出授權(quán)頁面，直接跳轉(zhuǎn)，只能獲取用戶openid），snsapi_userinfo （彈出授權(quán)頁面，可通過openid拿到昵稱、性別、所在地。并且，即使在未關(guān)注的情況下，只要用戶授權(quán)，也能獲取其信息） state
否
重定向后會帶上state參數(shù)，開發(fā)者可以填寫a-zA-Z0-9的參數(shù)值，最多128字節(jié) #wechat_redirect 是
無論直接打開還是做頁面302重定向時候，必須帶此參數(shù)

2、通過code換取網(wǎng)頁授權(quán)access_token和openid

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

參數(shù)
是否必須說明
appid
是
公眾號的唯一標(biāo)識
secret
是
公眾號的appsecret
code
是
填寫第一步獲取的code參數(shù) 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

參數(shù)
是否必須說明
appid
是
公眾號的唯一標(biāo)識
grant_type
是
填寫為refresh_token
refresh_token 是
填寫通過accesstoken獲取到的refreshtoken參數(shù)

4、獲取用戶信息(需scope為 snsapi_userinfo)

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

參數(shù)
描述
access_token 網(wǎng)頁授權(quán)接口調(diào)用憑證,注意：此accesstoken與基礎(chǔ)支持的accesstoken不同 openid
用戶的唯一標(biāo)識
lang
返回國家地區(qū)語言版本，zhCN 簡體，zhTW 繁體，en 英語

5、檢驗授權(quán)憑證（access_token）是否有效

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

參數(shù)
描述
access_token 網(wǎng)頁授權(quán)接口調(diào)用憑證,注意：此accesstoken與基礎(chǔ)支持的accesstoken不同 openid
用戶的唯一標(biāo)識

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

四、引導(dǎo)用戶進(jìn)入授權(quán)頁面同意授權(quán) -> 獲取code

方式①：通過創(chuàng)建鏈接式菜單(view)

方式②：直接發(fā)送授權(quán)url消息，用戶點擊進(jìn)入授權(quán)

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

授權(quán)相關(guān)的幾個api接口如下：

五、通過code換取網(wǎng)頁授權(quán)access_token和openid（與基礎(chǔ)支持中的access_token不同）

用戶同意授權(quán)后，頁面將跳轉(zhuǎn)至 redirect_uri/?code=CODE&state=STATE

code說明： code作為換取access_token的票據(jù)，每次用戶授權(quán)帶上的code將不一樣，code只能使用一次，5分鐘未被使用自動過期。

注：小編這里拿到access_token和openid之后將頁面重定向到了獲取用戶信息的接口，然后返回json用戶信息數(shù)據(jù)~

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 {
        // 授權(quán)之后重定向到指定URL（這里是跳轉(zhuǎn)到獲取用戶基本信息接口）
        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 = "用戶的唯一標(biāo)識")
    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 = "用戶頭像，最后一個數(shù)值代表正方形頭像大小（有0、46、64、96、132數(shù)值可選，0代表640*640正方形頭像），用戶沒有頭像時該項為空。若用戶更換頭像，原有頭像URL將失效。")
    private String headimgurl;

    @ApiModelProperty(value = "用戶特權(quán)信息，json 數(shù)組，如微信沃卡用戶為（chinaunicom）")
    private String privilege;

    @ApiModelProperty(value = "只有在用戶將公眾號綁定到微信開放平臺帳號后，才會出現(xiàn)該字段。")
    private String unionid;

    @ApiModelProperty(value = "返回國家地區(qū)語言版本，zh_CN 簡體，zh_TW 繁體，en 英語")
    private String language;

}

響應(yīng)數(shù)據(jù)如下：

這里獲取到用戶信息之后，也就可以寫頁面，然后進(jìn)行自己的業(yè)務(wù)交互了... (openid：微信用戶的唯一標(biāo)識)

七、刷新access_token（如果需要）

由于accesstoken擁有較短的有效期，當(dāng)accesstoken超時后，可以使用refreshtoken進(jìn)行刷新，refreshtoken有效期為30天，當(dāng)refresh_token失效之后，需要用戶重新授權(quán)。

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");
}

八、檢驗授權(quán)憑證（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("授權(quán)憑證無效：" + responseResult);
         throw new MyException(weixinResponseResult.getErrcode(), weixinResponseResult.getErrmsg());
     }
     return weixinResponseResult;
 }

九、總結(jié)

微信公眾號開發(fā)網(wǎng)上有很多教程，但針對于每一個開發(fā)者的環(huán)境以及語言不同而有所差異，建議認(rèn)真看微信提供的官方文檔去學(xué)習(xí)，大致也就是查看文檔封裝數(shù)據(jù) 調(diào)微信api接口業(yè)務(wù)處理
關(guān)于微信公眾號開發(fā)小編也已經(jīng)寫了幾篇了，大家在學(xué)習(xí)完微信官方提供的原始api之后，GitHub以及Gitee等上面有很多大神已經(jīng)封裝好了優(yōu)秀的開源sdk，這時候我們有了一定的微信開發(fā)基礎(chǔ)就可以去閱讀參考學(xué)習(xí)
小編建議大家在學(xué)習(xí)遇到問題，查看別人如何實現(xiàn)以及解決問題的時候，更多的是去學(xué)習(xí)思維方式處理邏輯，而不是拿到就跑，雖然寫代碼也不過就是復(fù)制黏貼運行完無bug就萬事大吉，但我們也要知其然知其所以然！

本文案例demo源碼

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

近做一個項目，要通過掃一掃查詢對應(yīng)的信息，由于現(xiàn)在已經(jīng)有一部分二維碼已被生成，為了兼顧已生成的二維碼，所以需要使用網(wǎng)頁的掃一掃功能去完成項目。

項目使用技術(shù)棧：vue2

方案一、js 原生

熱心的同事幫我已經(jīng)找好了網(wǎng)頁掃一掃 DEMO，給我說已經(jīng)測試過了，Andriod 和 IOS 都可以正常使用。

使用 QRScanner 插件

其原理是通過 navigator.mediaDevices.getUserMedia 來獲取用戶的攝像頭使用權(quán)限：

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

使用自己的蘋果11 測試完全正常，放置服務(wù)器上，讓同事掃碼的時候，真的是異常百態(tài)！存在的問題：

1、網(wǎng)頁必須使用瀏覽打開，不可以使用微信內(nèi)置瀏覽器。如果是微信打開，會提示 “對不起，未識別到掃描設(shè)備”。

2、有些手機，攝像頭一直是前置攝像頭，通過 facingMode 設(shè)置無效：

{ facingMode: { exact: "environment" } }

3、非手機內(nèi)置瀏覽器，如：QQ、UC、百度等瀏覽器APP內(nèi)，會存在找不到掃瞄設(shè)備。

4、最重要的是用戶體驗差。用戶需要在瀏覽器打開，授權(quán)之后，才能進(jìn)行掃碼。

5、開發(fā)需要調(diào)試的設(shè)備較多。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、網(wǎng)頁必須使用瀏覽打開，不可以使用微信內(nèi)置瀏覽器。如果是微信打開，會提示 “對不起，未識別到掃描設(shè)備”。

2、非手機內(nèi)置瀏覽器，如：QQ、UC、百度等瀏覽器APP內(nèi)，會存在找不到掃瞄設(shè)備。

3、最重要的是用戶體驗差。用戶需要在瀏覽器打開，授權(quán)之后，才能進(jìn)行掃碼。

方案三、微信掃一掃

我把測試地址發(fā)到公司群，讓同事幫我測試的時候，我發(fā)現(xiàn)程序員測試都說沒問題，非程序員基本都是直接使用微信，點擊掃一掃的時候，統(tǒng)一都是：“ 對不起，未識別到掃描設(shè)備 ”。轉(zhuǎn)念一想，掃一掃好像是給開發(fā)同事做的。

轉(zhuǎn)換思路，讓用戶在微信內(nèi)直接點進(jìn)去之后就可以進(jìn)行掃碼！所以選擇 微信網(wǎng)頁開發(fā) -> 調(diào)用微信掃一掃。

優(yōu)點：

1、用戶使用方便，直接可以使用微信掃碼。

2、開發(fā)方便，不用再考慮兼容安卓和ios的各種瀏覽器。

實現(xiàn)步驟：

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, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
 appId: '', // 必填，公眾號的唯一標(biāo)識
 timestamp: , // 必填，生成簽名的時間戳
 nonceStr: '', // 必填，生成簽名的隨機串
 signature: '',// 必填，簽名
 jsApiList: [] // 必填，需要使用的JS接口列表
});

3、調(diào)用方法

wx.scanQRCode({
 needResult: 0, // 默認(rèn)為0，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果，
 scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼，默認(rèn)二者都有
 success: function (res) {
  var result = res.resultStr; // 當(dāng)needResult 為 1 時，掃碼返回的結(jié)果
 }
});

具體的實現(xiàn)步驟以及可能遇到的問題都總結(jié)到《手把手教你調(diào)用微信掃一掃！三分鐘包會》，需要的自行查閱。

在線咨詢

上一篇：「Arc Search」:一鍵搜索，網(wǎng)頁秒建，AI瀏覽器新體驗!
下一篇：CSS世界中那些說起來很冷的知識

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

技術(shù)貼：一篇文章看懂鏈接（超鏈接）設(shè)計

定義

樣式

1. 文本樣式的鏈接

2. 按鈕樣式的鏈接

3. 圖片樣式的鏈接

打開方式

類型

1. 內(nèi)部鏈接

2. 錨點鏈接

3. 外部鏈接

鏈接狀態(tài)

、前言

本文將實現(xiàn)

網(wǎng)頁授權(quán)流程

二、填寫網(wǎng)頁授權(quán)回調(diào)域名

三、授權(quán)相關(guān)接口

1、用戶授權(quán)頁面

2、通過code換取網(wǎng)頁授權(quán)access_token和openid

3、刷新access_token（如果需要）

4、獲取用戶信息(需scope為 snsapi_userinfo)

5、檢驗授權(quán)憑證（access_token）是否有效

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

四、引導(dǎo)用戶進(jìn)入授權(quán)頁面同意授權(quán) -> 獲取code

方式①：通過創(chuàng)建鏈接式菜單(view)

方式②：直接發(fā)送授權(quán)url消息，用戶點擊進(jìn)入授權(quán)

五、通過code換取網(wǎng)頁授權(quán)access_token和openid（與基礎(chǔ)支持中的access_token不同）

六、獲取微信用戶基本信息

七、刷新access_token（如果需要）

八、檢驗授權(quán)憑證（access_token）是否有效

九、總結(jié)

本文案例demo源碼

方案一、js 原生

方案二、vue-qr 插件

方案三、微信掃一掃

您的項目需求