小程序开发之新页面链接打开的方法「代码示例」

背景介绍

微信小程序是现在移动应用开发中的热门话题，它是一种全新的开发模式，可以在微信中进行轻量级应用的开发和分享。在小程序开发中，我们经常需要在一个页面中添加跳转链接以打开新页面，那么在实际开发中，我们该如何实现呢？

新页面链接打开的方法

方法一：使用navigator组件进行跳转

小程序提供了一个专门用于页面跳转的组件——navigator，我们可以使用这个组件实现在当前页面中打开新页面。

在wxml文件中，我们需要引入navigator组件，并设置url属性为打开的新页面路径，如下所示：

<navigator url="/pages/newPage/newPage"></navigator>

在js文件中，我们可以调用wx.navigateTo方法进行页面跳转，如下所示：

wx.navigateTo({
  url: '/pages/newPage/newPage'
})

这个方法将会打开新页面，但是同时保留其原有栈，用户可以通过“返回”按钮返回原页面。

如果想要在新页面中添加返回按钮，可以在新页面的wxml文件中添加一个“返回”按钮并绑定点击事件，点击后调用wx.navigateBack方法返回原页面，如下所示：

<iew bindtap="back">
  返回
</view>

back: function () {
  wx.navigateBack({
    delta: 1
  })
}

方法二：使用web-view进行跳转

除了使用navigator组件进行跳转外，我们还可以使用小程序中的web-view组件进行跳转。但与navigator组件不同的是，web-view可以在小程序中打开任何外部链接，包括非小程序链接。

在wxml文件中，我们需要引入web-view组件，并设置src属性为要打开的页面链接，如下所示：

<web-view src="https://www.baidu.com"></web-view>

代码示例

下面是一个基本的navigator组件的代码示例（以点击按钮实现跳转）：

<view class="container">
  <button bindtap="jump">点击跳转到新页面</button>
</view>

Page({
  jump: function () {
    wx.navigateTo({
      url: '/pages/newPage/newPage'
    })
  }
})

下面是一个web-view组件的代码示例：

<web-view src="https://www.baidu.com"></web-view>

总结

以上是小程序开发中常用的两种打开新页面的方法，开发者可以根据实际需要进行选择。当然，在实际开发中还有许多其他的跳转方法，比如页面传参、页面重定向等等，这些方法我们将在后续文章中进行介绍。