Lassen Sie uns über die Liefermethode von Uniapp sprechen

Uniapp ist eine Lösung, die plattformübergreifende Entwicklung ermöglicht. Sie ermöglicht es uns, Code einmal zu schreiben und ihn auf mehreren Plattformen wie iOS, Android und Web auszuführen. Für Entwickler ist das besonders vorteilhaft, denn es spart viel Zeit und Energie. Bei der Entwicklung von Uniapp müssen wir häufig Daten und Methoden zwischen Seiten übertragen. In diesem Artikel werden einige Übertragungsmethoden vorgestellt.

1. Verwenden Sie Vuex, um Daten zu übergeben. In Uniapp können wir Vuex verwenden, um Daten zu teilen. Wir können im Speicher Status, Mutationen, Aktionen, Getter usw. definieren, um Daten zu übertragen. Wenn wir in jeder Komponente Daten abrufen müssen, müssen wir nur MapState, MapMutations, MapActions, MapGetters und andere Funktionen verwenden, um Daten einfach abzurufen und zu ändern.

Status in der Datei „store.js“ definieren:

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)
    }
}

Daten auf der Nutzungsseite abrufen und ändern:

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

2. Verwenden Sie zum Übergeben den Parameter uni.navigateBack.

Wenn die Seite springt, können wir uni.navigateBack verwenden Methode Das Parameterobjekt in wird zum Übergeben von Daten verwendet. Dieser Parameter ist ein Objekt vom Typ Objekt und kann während des OnLoad-Vorgangs der nächsten Seite abgerufen werden.

Auf der Sendeseite:

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:'张三'
    }
})

Auf der Empfangsseite:

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

3. Benutzerdefinierte Ereignisse für die Zustellung verwenden

In Uniapp können wir $emit verwenden, um benutzerdefinierte Ereignisse auszulösen, und wir können $on in der Komponente verwenden, um Hören Sie sich diese Veranstaltung an. Das Ereignis wird durch $emit in der übergeordneten Komponente ausgelöst. Wenn die untergeordnete Komponente in der übergeordneten Komponente aufgerufen wird, wird das untergeordnete Komponentenobjekt über $emit übergeben und dann wird das Objekt in der untergeordneten Komponente abgehört und empfangen.

In der Sendekomponente:

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

In der Empfangskomponente:

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

Zusammenfassung:

Entwickler müssen während der Entwicklung flexibel verschiedene Bereitstellungsmethoden auswählen Das ist am einfachsten umzusetzen und für die Situation am besten geeignet. Es ist erwähnenswert, dass Vuex eine der Kernfunktionen von Uniapp ist. Bei der Übertragung von Daten zwischen mehreren Komponenten ist die Verwendung von Vuex der am meisten empfohlene Ansatz, um Leistungseinbußen durch zu komplexen Code zu vermeiden.

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Liefermethode von Uniapp sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!