uniapp の vue3.2 WeChat アプレット開発: ルーティング ジャンプ パラメーター、ページ通信: 前のページのデータを変更し、ページに戻って渡されるデータを監視します。

シナリオ:最近作成した小さなプログラムの e-commerce モジュールは、注文を確認するときにアドレスを変更できます。デフォルトのアドレスをクリックすると、アドレス管理にジャンプします。アドレス管理でアドレスをクリックすると、ページがロールバックして戻ります。選択したアドレス。アドレス管理に移動してデフォルトのアドレスを変更し、戻って新しいデフォルトのアドレスを表示する順序を確認します。

1. ページ ジャンプ -- パラメーターを渡すと、アドレス管理でアドレスをクリックしてパラメーターを返したり渡したりすることができます。

const addressFn = () => {
    uni.navigateTo({
        url: "/pages/my/address/index?isBackAddress=true",
    })
}

ページジャンプで渡されたパラメータを受け取る

import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from "vue";
onLoad((options: any) => {
    isBackAddress.value = options.isBackAddress
});
const isBackAddress = ref<boolean>(false)

2. クリックして戻る -- リスト項目をクリックして前のページに戻り、クリックした項目をページ通信を通じて前のページに渡します。

const adddressBackFn = (data: addressListType) => {
    if (!isBackAddress.value) return  //点击是否返回
    let pages = getCurrentPages(); // 当前页面
    let prevPage = pages[pages.length - 2]; // 上一页
    prevPage.$vm.refreshDefaultAddress = true //修改上一页面的值
    setTimeout(() => {
        uni.$emit('UpAddressData', data)//触发自定义事件，附加参数都会传给监听器回调函数
    }, 300)
    uni.navigateBack({//返回上一页面
        delta: 1
    })
}

3. 左上隅の戻るボタンをクリックして戻りを監視します -- ナビゲーション バーをカスタマイズします

// ui 
 <view class="box-bg">
        <uni-nav-bar :border="false" backgroundColor="#F4F5F7" left-icon="left" title="地址管理" @clickLeft="backFn" />
    </view>

//js 获取获取胶囊按钮的高度
const nav_topHeight = ref<string>(uni.getStorageSync('MenuButton').height + 'rpx')

const backFn = () => {
    let pages = getCurrentPages(); // 当前页面
    let prevPage = pages[pages.length - 2]; // 上一页
    if (prevPage.$vm.refreshDefaultAddress) {
        prevPage.$vm.refreshDefaultAddress = false
    }
    uni.navigateBack({//返回上一页面
        delta: 1
    })
}

//css 
.box-bg {
    margin-top: v-bind(nav_topHeight);
}

4. 値が変更されているかどうかを確認し、変更されている場合は、変更された値を使用して監視します。

onShow(async () => {
    // 判断是否被修改
    if (refreshDefaultAddress.value) {
        uni.$off('UpAddressData')//先销毁一次监听，再进行新的一次监听，否则会出现重复监听的现象
        //监听修改后传递过来的数据   
        uni.$once('UpAddressData', (data => {
            defaultAddress.value = data
        }))
    } else {
        // 请求默认地址
        const res = await RequesApi.AddRessApi({
            "DoType": "5",
            "LanguageType": "zh_Hans_CN"
        })
        defaultAddress.value = res.data.Data[0]
    }
})
const refreshDefaultAddress = ref<boolean>(false)
const defaultAddress = ref<addressListType>() //地址数据
defineExpose({ refreshDefaultAddress }) //把数据暴露出去