1.页面跳转

页面跳转优先采用 navigator 组件
小程序提供了两种页面路由方式:
a. navigator 组件

<navigator url="/pages/life/life">普通跳转</navigator>
<navigator url="/pages/life/life" open-type="navigate">跳转</navigator>
<navigator url="/pages/todo/todo" open-type="switchTab">切换底部栏</navigator>
<navigator url="/pages/base/base" open-type="redirect">语法-不留历史记录</navigator>

b.通过js进行页面跳转

<button size="mini" bindtap="goPage" type="primary">js跳转</button>
goPage(){
    /*
    // 普通跳转
    wx.navigateTo({
      url: '/pages/base/base',
    })
    //底部栏跳转
    wx.switchTab({
      url: '/pages/todo/todo',
    })*/
    //重定向跳转
    wx.redirectTo({
      url: '/pages/index/index',
    })
  },

2.小程序的页面传参

可以通过页面跳转时将参数传递到对应页面

<view class="list">
  <navigator url="/news/pages/detail/detail?id={{item.docid}}&title={{item.title}}" 
  class="item" wx:for="{{list}}" wx:key="docid">
    {{item.title}}
  </navigator>
</view>

页面通过options接收参数
下面代码options.id以及options.title均是从上一个页面传递而来的参数

onLoad(options) {
      console.log(options.id);
      // 设置标题文字
      wx.setNavigationBarTitle({
        title: options.title,
      })
},
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐