uni-app全局变量/方法/模块/组件

1. 公用模块—实现模块全局共享

定义公用模块：在 uni-app 项目根目录下创建 common 目录，然后在 common 目录下新建 helper.js 用于定义公用的属性或方法。

helper.js

// 域名
const apiUrl = "http://www.miyil.com";

// 时间
const now = Date.now || function () {  
    return new Date().getTime();  
};

// 数组对象
const isArray = Array.isArray || function (obj) {  
    return obj instanceof Array;  
};

// 字符串
const Hello = function(){
 console.log('你好');
}

export default {  
    apiUrl,  
    now,
    isArray,  
    Hello   
}

vue

template

<view>{{time}}</view>

script

import helper from "@/common/helper.js"
// import helper from "../../common/helper.js"
export default{
	data(){
		return{
			time:""
		}
	},
	onLoad() {
		console.log(helper.apiUrl) // 打印域名
		console.log("now:" + helper.now());	// 打印时间戳
		this.time = helper.now();
		helper.Hello();	// 打印字符
	},
}

2. 挂载 Vue.prototype—定义全局变量和公用方法

直接扩展到 Vue.prototype 上，每个 Vue 对象都会“继承”下来，更方便适应。

main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false;
//自定义的属性
Vue.prototype.appName='coldchain';

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

index.vue

console.log(this.appName);

3. 全局变量机制globalData来定义并引用全局变量

在 App.vue 中声明全局变量

export default {
	globalData: {  
            name: 'liy'  
        },
	onLaunch: function() {
		console.log('App Launch')
	},
	onShow: function() {
		console.log('App Show')
	},
	onHide: function() {
		console.log('App Hide')
	}
}

全局变量赋值

getApp().globalData.name= 'ming'//赋值

获取全局变量的值

console.log(getApp().globalData.name) //取值

4. Vuex—全局状态管理机制

(1) 在根目录下创建 stroe/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 创建一个 store
const store = new Vuex.Store({
    // (1)初始 state 对象
    state:{
        hasLogin: false,
        token: "",
        company:"未知",
        userInfo: {
            "name": "未知",
            "role": "未知",
            "age": 0
        },
    },
    // (2)定义一些mutation
    mutations:{
        change(state,company){
            state.company = company;
        },
        login(state,token,userInfo) {
            state.hasLogin = true;
            state.token = token;
            state.userInfo = userInfo;
        },
        logout(state) {
            state.hasLogin = false;
            state.token = "";
        },
        celarUserInfo(state) {
            state.userInfo = {
                "name": "",
                "role": "",
                "age": 0
            };
        },
    }
})

// 导出该模块:以便其他文件可对其进行使用
export default store

在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等；并在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式将其导入，以便能够对其进行使用；但在一个文件或模块中，export、import可以有多个，export default仅有一个。

(2) 在main.js中挂在Vuex

import store from './store'
Vue.prototype.$store = store;

(3)index.vue

<template>
    <view>
        <text>名称:{{company}}</text>
		{{userInfo.name}}
        <button type="primary" @tap="onChange()">更改</button>
    </view>
</template>

    import {mapState,mapMutations} from 'vuex';
    export default {
        data() {
            return {
                
            }
        },
        computed:{
            ...mapState(['company','userInfo'])
        },
        methods: {
            onChange : function(){
                this.$store.commit('change', 'jk');//通过 store.commit 方法触发状态变更
				this.$store.commit('celarUserInfo')
            }
        },
        onLoad() {
        
        }
    }

5. 全局组件的定义与使用

自定义组件

(1) 根目录新建components/page-head/page-head.vue

<template name="page-head">
    <view class="page-head-container">
        <view class="page-head-title">{{title}}</view>
    </view>
</template>

export default {
    name: "page-head",
    props: {
        title: {
            type: String,
            default: ""
        }
    }
}

.page-head-container{
    padding:35upx; 
    text-align: center;
}
.page-head-title {
    display: inline-block;
    padding: 0 40upx;
    font-size: 30upx;
    height: 88upx;
    line-height: 88upx;
    color: #BEBEBE;
    box-sizing: border-box;
    border-bottom: 2upx solid #D8D8D8;
}

(2) index.vue

<template>
    <view>
        <page-head title="hello"></page-head>
    </view>
</template>

	import pageHead from "../../components/page-head/page-head.vue"
    export default {
        // 注册为子组件
        components: { 
            pageHead
        },  
        data() {
            return {
                
            }
        },
        methods: {

        },
        onLoad() {
        
        }
    }

全局组件

(1) main.js

import pageHead from '@/components/page-head/page-head.vue'
Vue.component('page-head', pageHead)

(2) index.vue

<page-head title="hello"></page-head>