介绍
小程序开发者在开发小程序的过程中经常需要在小程序中插入链接,比如点击某个文字可以跳转到指定的页面或者是跳转到其他网站等功能,本文将会介绍小程序中如何插入链接。
小程序中插入链接的方法
使用<a>
标签插入链接
使用<a>
标签可以在小程序中插入链接,<a>
标签有两个属性href和target,href用来指定链接地址,target用来指定打开方式,可选的值有_blank、_self、_parent、_top。下面是示例代码。
<a href="url" target="_blank">链接文字</a>
其中url为链接地址
例如:
<a href="https://www.baidu.com" target="_blank">百度链接</a>
点击“百度链接”就会跳转到百度页面
使用navigator插入链接
小程序中还可以使用navigator插入链接,navigator扮演了类似于<a>
标签的角色,它可以识别所有类型的URL,包括但不限于http、tel、sms、mailto等等。下面是示例代码。
<navigator url="url" open-type="navigate">链接文字</navigator>
其中url为链接地址,open-type属性用来指定打开方式,可选的值有navigate、redirect、switchTab和reLaunch。navigate表示保留当前页面,跳转到应用内的某个页面,类似于<a>
标签的_blank,redirect表示关闭当前页面,跳转到应用内的某个页面,类似于<a>
标签的_self,switchTab表示跳转到应用内的某个tab页,reLaunch表示关闭所有页面,打开应用内的某个页面。下面是使用navigator插入链接的示例。
<navigator url="https://www.baidu.com" open-type="navigate">百度链接</navigator>
效果与直接使用<a>
标签插入链接相同,点击“百度链接”就会跳转到百度页面。
使用<a>
标签和navigator的区别
虽然<a>
标签和navigator看起来有点类似,但是它们有着本质的区别。首先,<a>
标签是HTML标签,它是运行在浏览器环境中的,而小程序中使用的是微信提供的类似于Webview的JS运行环境,所以将<a>
标签直接拿来用是不行的。其次,<a>
标签只能打开http(s)、ftp、mailto、tel、sms、javascript、mqq、weixin等少量协议,而navigator可以识别任意类型的URL。
小结
本文介绍了小程序中插入链接的两种方法,分别是使用<a>
标签和navigator,这两种方法的实现方式略有区别,但都能够达到插入链接的目的。