uni-app 5+App全局变量、常量、共享数据、跨webview传参的综述

在uni-app 5+App开发中，全局变量、常量、共享数据以及跨webview传参是常见的需求，它们有助于提升代码的可维护性和数据的流通性。以下是针对这些需求的代码案例综述：

全局变量和常量

全局变量和常量可以通过在main.js或单独的配置文件中定义，并在需要的地方通过global对象或Vue.prototype进行访问。

在main.js中定义全局变量和常量：

// main.js
Vue.prototype.$GLOBAL = {
    apiBaseURL: 'https://api.example.com',
    userToken: ''
};

Vue.prototype.$CONSTANTS = {
    APP_NAME: 'MyUniApp',
    VERSION: '1.0.0'
};

在组件中访问全局变量和常量：

// 任意组件中
export default {
    methods: {
        fetchData() {
            const url = this.$GLOBAL.apiBaseURL + '/data';
            console.log('App Name:', this.$CONSTANTS.APP_NAME);
        }
    }
}

共享数据

对于共享数据，可以使用Vuex进行状态管理，它允许你在多个组件之间共享和同步数据。

安装Vuex并创建store：

npm install vuex --save

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        sharedData: {}
    },
    mutations: {
        setSharedData(state, data) {
            state.sharedData = data;
        }
    },
    actions: {
        updateSharedData({ commit }, data) {
            commit('setSharedData', data);
        }
    }
});

在组件中使用Vuex：

// 组件中
import { mapState, mapActions } from 'vuex';

export default {
    computed: {
        ...mapState(['sharedData'])
    },
    methods: {
        ...mapActions(['updateSharedData']),
        updateData() {
            this.updateSharedData({ key: 'value' });
        }
    }
}

跨webview传参

在5+App中，跨webview传参可以通过plus.webview对象实现。

发送参数：

// 发送端
const targetWebview = plus.webview.getWebviewById('target_webview_id');
targetWebview.evalJS(`receiveParams('${JSON.stringify({ key: 'value' })}')`);

接收参数：

// 接收端
window.receiveParams = function(params) {
    const data = JSON.parse(params);
    console.log(data.key); // 输出: value
};

以上代码展示了如何在uni-app 5+App中实现全局变量、常量、共享数据以及跨webview传参的基本方法。这些技术能够显著提升应用的可维护性和数据流通性。