uni-app开发微信公众号(H5)时，返回上一个页面并传递参数

需求：从页面1跳转到页面2，然后页面2返回页面1时带参数

1.实现方法

一、页面1跳转到页面2时，使用调用 navigateTo 跳转，以下为官方解释navigateTo的作用

二、通过getCurrentPages()获取上一页页面实例，并调用实例方法

2.代码实现

// pages.json文件

"pages": [
	{
		"path": "pages/page1",
		"style": {
			"navigationBarTitleText": "页面1"
		}
	},
	{
		"path": "pages/page2",
		"style": {
			"navigationBarTitleText": "页面2"
		}
	}
]

// page1.vue文件

<template>
  <view class="page1-wrapper">
    <view class="select-btn" @click="selectStar">选择喜欢的球星</view>
    <view style="padding-top: 10px">
      <view>选择的球星id：{{selectData.id}}</view>
      <view>选择的球星名字：{{selectData.name}}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "page1",
  data() {
    return {
      selectData: {
        id: '',
        name: ''
      }
    }
  },
  methods: {
    selectStar() {
      // 跳转到选择球星页面
      // 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。
      uni.navigateTo ({
        url: '/pages/page2'
      })
    },
    setStar(data) {
      this.selectData.id = data.id;
      this.selectData.name = data.name;
    }
  }
}
</script>
<style lang="scss" scoped>
.page1-wrapper{
  width: 100%;
  padding: 10px;
  background-color: #fff;
  .select-btn{
    width: 150px;
    height: 26px;
    text-align: center;
    border: 1px solid #1989FA;
    border-radius: 15px;
  }
}
</style>

// page2.vue文件

<template>
  <view class="page2-wrapper">
    <view class="star-item" v-for="item in starData" :key="item.id" @click="clickConfirm(item)">
      <view>{{item.name}}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "page2",
  data() {
    return {
      starData: [
        {id: 0, name: 'Kobe'},
        {id: 1, name: 'Paul'},
        {id: 2, name: 'Curry'},
        {id: 3, name: 'Kyrie Irving'},
        {id: 4, name: '徐杰'}
      ]
    }
  },
  methods: {
    clickConfirm(item) {
      let pages = getCurrentPages(); // 获取所有页面栈实例列表
      let prevPage = pages[ pages.length - 2 ];  // 上一页页面实例
      const params = {...item};
      prevPage.$vm.setStar(params);
      uni.navigateBack({ // 返回上一页
        delta: 1
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.page2-wrapper {
  background-color: #fff;
  padding: 0rpx 30rpx;
  border-bottom: 1px solid #F5F5F5;
  .star-item {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;
    border-bottom: 1px solid #F5F5F5;
  }
}
</style>

3.最终效果

在页面1点击按钮跳转去页面2

在页面2进行选择之后，会返回页面1

将页面2返回的参数显示出来

以上均为个人工作记录，小白仍需努力！