uniappの配信方法について話しましょう

Uniapp は、クロスプラットフォーム開発を提供するソリューションであり、一度コードを作成するだけで、iOS、Android、Web などの複数のプラットフォームで実行できるようになります。開発者にとって、これは時間と労力を大幅に節約できるため、特に良いことです。 Uniappの開発では、ページ間でデータやメソッドを転送する必要があることが多いため、この記事ではいくつかの転送方法を紹介します。

1. Vuex を使用してデータを渡す

Uniapp では、Vuex を使用してデータを共有できます。Vuex は、Vue.js アプリケーション用に特別に開発された状態管理モードです。グローバル データのステータスを管理できます。 。ストア内で状態、突然変異、アクション、ゲッターなどを定義してデータを転送できます。各コンポーネントでデータを取得する必要がある場合、mapState、mapMutations、mapActions、mapGetters などの関数を使用するだけで、データを簡単に取得および変更できます。

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

使用状況ページでデータを取得および変更する:

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

2. uni.navigateBack パラメーターを使用して ## を渡します

#ページがジャンプするとき、uni.navigateBack メソッドのパラメータ オブジェクトを使用してデータを渡すことができます。このパラメータは Object タイプのオブジェクトであり、次のページが onLoaded されるときに取得できます。

送信ページ:

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

受信ページ:

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

3. 配信にカスタム イベントを使用する

Uniapp では、$ を使用できます。 Emit はカスタム イベントをトリガーし、$on をコンポーネントで使用してこれらのイベントをリッスンできます。イベントは、親コンポーネントの $emit を通じてトリガーされます。親コンポーネントで子コンポーネントが呼び出されると、子コンポーネントのオブジェクトが $emit を介して渡され、そのオブジェクトが子コンポーネントでリッスンされて受信されます。

送信コンポーネント内:

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

受信コンポーネント内:

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

概要:

上記は、Uniapp で一般的に使用される配信方法です。開発者 開発時には、さまざまな配信方法を柔軟に選択し、状況に応じて最も簡単で最適なソリューションを選択する必要があると言われています。 Vuex は Uniapp のコア機能の 1 つであることに注意してください。複数のコンポーネント間でデータを転送する場合、過度に複雑なコードによるパフォーマンスの低下を避けるために、Vuex を使用することが最も推奨されるアプローチです。

以上がuniappの配信方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。