[032] 微信公衆帳號開發教程第8篇-文本消息中使用網頁超鏈接

本文主要介紹網頁超鏈接的作用以及如何在文本消息中使用網頁超鏈接。

網頁超鏈接的作用

我想但凡是熟悉HTML的朋友，對超鏈接一定不會陌生。而今天我們要討論和使用的只是超鏈接中的其中一種---網頁超鏈接，即使用HTML中的<a>標籤將某段文字鏈接到其他網頁上去，示例如下：

<a href="http://blog.csdn.net/lyq8479">柳峯的博客</a>

上面是一段標準的HTML代碼，實現了一個網頁超鏈接，即將“柳峯的博客”5個字鏈接到了博客主頁URL，當“柳峯的博客”5個字時，會打開http://blog.csdn.net/lyq8479所指向的網頁。

如何在文本消息中使用網頁超鏈接

其實，不知道如何在文本消息中使用網頁超鏈接的開發者幾乎100%都熟悉HTML，特別是對HTML中的<a>標籤再熟悉不過了。那到底在微信公衆帳號的文本消息中使用超鏈接有什麼特別之處呢？爲什麼如此多的朋友都曾經在這個問題上栽過跟頭？我們先來看在微信中兩種錯誤使用超鏈接的方法：

錯誤用法1（a標籤的href屬性值未被引號引起）：

<a href=http://blog.csdn.net/lyq8479>柳峯的博客</a>

錯誤用法2（a標籤的href屬性值被單引號引起）：

<a href='http://blog.csdn.net/lyq8479'>柳峯的博客</a>

在做Web開發時，以上兩種寫法都是可以的，但是放在微信公衆帳號的文本消息中，這兩種寫法都是錯誤的，網頁超鏈接並不會起作用，而且在Android手機上還會將HTML代碼原樣顯示出來，如下圖所示：

Android手機上的效果：

iPhone手機上的效果：

可以看出，在微信上，HTML的a標籤屬性值不用引號引起，或者使用單引號引起，都是錯誤的寫法（在iPhone上，a標籤屬性href的值用單引號是正常的）。正確的用法是將a標籤href屬性的值用雙引號引起，代碼如下：

<a href="http://blog.csdn.net/lyq8479">柳峯的博客</a>

這樣在Android和iPhone手機上，都可以正確顯示超鏈接，並且點擊該超鏈接，會使用微信內置瀏覽器打開http://blog.csdn.net/lyq8479。

提示：在測試微信公衆帳號時，不要只是在自己的手機上測試通過就認爲完全沒問題了，因爲目前微信公衆帳號上有好幾處在Android和iOS平臺上表現不一致。

如果覺得文章對你有所幫助，請留言或關注微信公衆帳號xiaoqrobot支持柳峯哦！