小程序页面跳转有哪几种方式

第一种方式：

使用导航组件，标签，页面链接来实现（可以发现点击时有背景）

<view class="btn-area">
 <navigator url="../news/news">跳转到新闻页面</navigator>
</view>

组件--导航组件：作用页面链接。

https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

第二种方式：

给页面布局加监听bindtap事件，然后在方法里面，通过wx.navigatorTo来实现跳转（保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面）

在welcome.wxml中加监听bindtap事件

  <view class="journey-container" bindtap="onTap">
    <text class="journey">开启小程序之旅</text>
  </view>

在welcome.js中实现跳转

  onTap:function(){
    wx.navigateTo({
     url: '../news/news',
     success: function(res) {
   
     },
     fail: function(res) {
   
     },
     complete: function(res) {
   
     },
    })
  },

第三种方式：

通过wx.redirectTo实现跳转（关闭当前页面，跳转到应用内某个页面）

https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.redirectTo.html

  <view class="journey-container" bindtap="jump">
    <text class="journey">开启小程序之旅</text>
  </view>

在welcome.js中实现跳转

  jump: function (event) { 
    wx.redirectTo({ 
    url: '../news/news', 
    success: function (res) { 
    // success 
    }, 
    fail: function () { 
    // fail 
    }, 
    complete: function () { 
    // complete 
    } 
    }) 
    },

第四种方式：

通过wx.navigateBack返回上一级（关闭当前页面。返回上一页面或多级页面）。

wx.navigateBack({ 
 delta: 1, // 回退前 delta(默认为1) 页面 
 success: function (res) { 
 // success 
 }, 
 fail: function () { 
 // fail 
 }, 
 complete: function () { 
 // complete 
 } 
 })