Mari kita bincangkan tentang kaedah penghantaran uniapp

Uniapp ialah penyelesaian yang menyediakan pembangunan merentas platform Ia membolehkan kami menulis kod sekali dan menjalankannya pada berbilang platform, seperti iOS, Android dan Web. Bagi pembangun, ini adalah perkara yang sangat baik kerana ia menjimatkan banyak masa dan tenaga. Dalam pembangunan Uniapp, kami selalunya perlu memindahkan data dan kaedah antara halaman, jadi artikel ini akan memperkenalkan anda kepada beberapa kaedah pemindahan.

1. Gunakan Vuex untuk menghantar data

Dalam Uniapp, kami boleh menggunakan Vuex untuk berkongsi data ialah mod pengurusan negeri yang dibangunkan khas untuk aplikasi Vue.js . Kita boleh mentakrifkan keadaan, mutasi, tindakan, getter, dsb. dalam stor untuk memindahkan data. Dalam setiap komponen, jika kita perlu mendapatkan data, kita hanya perlu menggunakan mapState, mapMutations, mapActions, mapGetters dan fungsi lain untuk mendapatkan dan mengubah suai data dengan mudah.

Tentukan keadaan dalam fail store.js:

state:{
    count:0
},
mutations:{
    increment(state){//自增
        state.count++
    },
    decrement(state){//自减
        state.count--
    }
},
actions:{
    asyncIncrement({commit}){//异步自增
        setTimeout(()=>{
            commit('increment')
        },1000)
    },
    asyncDecrement({commit}){//异步自减
        setTimeout(()=>{
            commit('decrement')
        },1000)
    }
}

Dapatkan dan ubah suai data dalam halaman penggunaan:

import {mapState,mapMutations,mapActions} from 'vuex'
export default {
    data(){
        return{
        }
    },
    computed:{
        ...mapState([
            'count'
          ])
    },
    methods:{
        ...mapMutations([
            'increment',
            'decrement'
        ]),
        ...mapActions([
            'asyncIncrement',
            'asyncDecrement'
        ])
    }
}

2. Gunakan parameter uni.navigateBack untuk lulus

Apabila halaman melompat, kita boleh menggunakan objek parameter dalam kaedah uni.navigateBack untuk menghantar data Parameter ini ialah objek jenis Objek dan boleh diperolehi apabila halaman seterusnya onLoaded.

Pada halaman penghantaran:

uni.navigateBack({
    delta:1,
    success(res){
        console.log('回跳成功')
    },
    fail(res){
        console.log('回跳失败')
    },
    complete(res){
        console.log('回跳完成')
    },
    animation:true,//使用动画返回
    aniationDuration:2000,//动画持续时间
    aniationType:'pop-out',//动画类型
    title:'返回页面',//导航栏标题
    formData:{//携带的参数
        id:1,
        name:'张三'
    }
})

Pada halaman penerimaan:

onLoad:function(options){
    console.log(options)
    if(options.formData){
        this.formData = options.formData
    }
}

3 Gunakan acara tersuai untuk penghantaran

Dalam Uniapp, kami boleh menggunakan $ memancarkan peristiwa tersuai yang mencetuskan, dan $on boleh digunakan dalam komponen untuk mendengar acara ini. Peristiwa dicetuskan melalui $emit dalam komponen induk Apabila komponen anak dipanggil dalam komponen induk, objek komponen anak dilalui melalui $emit, dan kemudian objek didengar dan diterima dalam komponen anak.

Dalam komponen penghantaran:

methods：{
    sendEvent(){
        this.$emit('event',this.formData) //传递this.formData给监听方
    }
}

Dalam komponen penerima:

mounted(){
    this.$on('event',data=>{
        console.log(data) //接收数据并进行操作
    })
}

Ringkasan:

Di atas ialah kaedah penghantaran yang biasa digunakan dalam Uniapp pembangun Dikatakan bahawa semasa pembangunan, adalah perlu untuk memilih kaedah penyampaian yang berbeza secara fleksibel dan memilih penyelesaian yang paling mudah dan paling sesuai untuk situasi yang berbeza. Perlu dinyatakan bahawa Vuex ialah salah satu fungsi teras Uniapp Apabila memindahkan data antara berbilang komponen, menggunakannya adalah pendekatan yang paling disyorkan untuk mengelakkan kehilangan prestasi yang disebabkan oleh kod yang terlalu kompleks.

Atas ialah kandungan terperinci Mari kita bincangkan tentang kaedah penghantaran uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!