小程序基础学习（页面跳转传参）

目录

正向传参

原理：直接在url里面拼接参数即可

接受参数

​编辑

已经跳转到的页面用onLoad函数来接受即可然后写回页面展示即可

逆向传参

原理：通过使用 getCurrentPages()这个方法来获取返回页面列表，然后再用页面.setData（{}）设置返回页面的值和逻辑

​编辑

 第一次打开的页面

返回后打开的页面

页面代码（跳转前）

 页面代码（跳转后）

---

正向传参

原理：直接在url里面拼接参数即可

接受参数

已经跳转到的页面用onLoad函数来接受即可然后写回页面展示即可

 

逆向传参

原理：通过使用 getCurrentPages()这个方法来获取返回页面列表，然后再用页面.setData（{}）设置返回页面的值和逻辑

 第一次打开的页面

返回后打开的页面

 

页面代码（跳转前）

<!--pages/me/me.wxml-->
<navigation-bar title="牧原" back="{{false}}" color="black" background="#FFF"></navigation-bar>

<view>
<view>
<button size="mini" type="primary" bindtap="onTiaoZhuan">页面跳转</button>
</view>
<view>{{message}}</view>
</view>

 

// pages/ten/ten.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    name :"冯运山",
    age:99,
    gender :"男",
    message :"哈喽"
  },
  onTiaoZhuan(){
    console.log("要跳转了")
    const name = this.data.name
    const age = this.data.age
    const gender = this.data.gender
    wx.navigateTo({
      url: `/pages/tentiaozhaun/tentiaozhaun?name=${name}&age=${age}&gender=${gender}`,
    })
  },

})

/* pages/ten/ten.wxss */

{
  "usingComponents": {   "navigation-bar": "/components/navigation-bar/navigation-bar"}
}

 页面代码（跳转后）

<!--pages/tentiaozhaun/tentiaozhaun.wxml-->
<navigation-bar title="牧原" back="{{false}}" color="black" background="#FFF"></navigation-bar>  

<view>
  <view>
    {{name}}
  </view> 
  <view>
    {{age}}
  </view>
  <view>
    {{gender}}
  </view>
<button size="mini" type="primary" bind:tap="onBack"> 返回</button>
</view>

// pages/tentiaozhaun/tentiaozhaun.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    name :"",
    age: 1,
    gender:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({name:options.name})
    this.setData({age:options.age})
    this.setData({gender :options.gender})
  },
  onBack(){
    wx.navigateBack()
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    const pages = getCurrentPages()
    const page = pages[pages.length-2]
    page.setData({message:"你好啊"}) 
  },
})

/* pages/tentiaozhaun/tentiaozhaun.wxss */

{
  "usingComponents": {   "navigation-bar": "/components/navigation-bar/navigation-bar"}
}