uni-app?main.js中全局變量的使用方法示例
更新時間：2025年07月28日 10:12:37 作者：Bingo_BIG
在進行uni-app開發(fā)時,全局變量的合理使用對于提升開發(fā)效率和項目管理具有重要意義,這篇文章主要給大家介紹了關于uni-app?main.js中全局變量的使用方法,需要的朋友可以參考下
main.js
import App from './App';
import store from './store';
import request from '@/http/request.js';
// #ifndef VUE3
import Vue from 'vue';
Vue.config.productionTip = false;
Vue.prototype.$store = store;
Vue.prototype.$adpid = '1111111111';
Vue.prototype.$backgroundAudioData = {
playing: false,
playTime: 0,
formatedPlayTime: '00:00:00'
};
Vue.prototype.$request = request;
// 設置全局變量和函數（Vue 2）
Vue.prototype.$globalData = null;
Vue.prototype.$setGlobalData = (data) => {
Vue.prototype.$globalData = data;
};
Vue.prototype.$getGlobalData = () => {
return Vue.prototype.$globalData;
};
Vue.prototype.$globalData2 = null;
Vue.prototype.$setGlobalData2 = (data) => {
Vue.prototype.$globalData2 = data;
};
Vue.prototype.$getGlobalData2 = () => {
return Vue.prototype.$globalData2;
};
Vue.prototype.$globalData3 = null;
Vue.prototype.$setGlobalData3 = (data) => {
Vue.prototype.$globalData3 = data;
};
Vue.prototype.$getGlobalData3 = () => {
return Vue.prototype.$globalData3;
};
////////////////
App.mpType = 'app';
const app = new Vue({
store,
...App
});
app.$mount();
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue';
export function createApp() {
const app = createSSRApp(App);
app.use(store);
app.config.globalProperties.$adpid = '1111111111';
app.config.globalProperties.$backgroundAudioData = {
playing: false,
playTime: 0,
formatedPlayTime: '00:00:00'
};
app.config.globalProperties.$request = request;
// 注意：在 Vue 3 中，全局變量和函數應該直接設置在 app.config.globalProperties 上，
// 而不是像 Vue 2 那樣通過 Vue.prototype。但是，為了保持一致性，并且能夠在組件中
// 通過 this.$xxx 的方式訪問，我們仍然可以在這里設置它們。
// 不過，通常建議通過組合式 API 的 getCurrentInstance 來訪問這些全局屬性。
app.config.globalProperties.$globalData = null;
app.config.globalProperties.$setGlobalData = (data) => {
app.config.globalProperties.$globalData = data;
};
app.config.globalProperties.$getGlobalData = () => {
return app.config.globalProperties.$globalData;
};
app.config.globalProperties.$globalData2 = null;
app.config.globalProperties.$setGlobalData2 = (data) => {
app.config.globalProperties.$globalData2 = data;
};
app.config.globalProperties.$getGlobalData2 = () => {
return app.config.globalProperties.$globalData2;
};
app.config.globalProperties.$globalData3 = null;
app.config.globalProperties.$setGlobalData3 = (data) => {
app.config.globalProperties.$globalData3 = data;
};
app.config.globalProperties.$getGlobalData3 = () => {
return app.config.globalProperties.$globalData3;
};
////////////////
return {
app
};
}
// #endif
調用
import {
reactive,
ref,
getCurrentInstance
} from 'vue';
const instance = getCurrentInstance();
//給全局變量賦值
let item={};
instance.appContext.config.globalProperties.$setGlobalData(item);
//取全局變量參數
const globalData = instance.appContext.config.globalProperties.$getGlobalData();vue頁面--調用頁面
<template>
<z-paging ref="paging" v-model="dataList" @query="queryList">
<template #top>
<view class="searchForm">
<view>
<uni-easyinput v-model="tj0MachineNumbe" name="tj0MachineNumbe" placeholder="輸入機臺號"
prefixIcon="scan" @confirm="onInput">
</uni-easyinput>
</view>
<view class="select-itme">
<view>
<button type="primary" @click="printLabels" plain="true">打印容器標簽</button>
</view>
<view>
<button type="primary" @click="startPickingMaterials">開始揀料</button>
</view>
</view>
</view>
<view style="margin: 0 10rpx; ">
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
:active-color="activeColor">
</uni-segmented-control>
</view>
</template>
<view class="content">
<view class="container">
<!-- 渲染列表 -->
<view v-for="(item, index) in dataList" :key="item.objId" class="student-item"
@tap="toggleSelection(item.objId)">
<view class="example-body">
<uni-row class="demo-uni-row">
<uni-col :span="14">
<!-- 序號 -->
<view class="field">揀料單: {{ item.orderNumber }}</view>
</uni-col>
<uni-col :span="10">
<!-- 機臺 -->
<view class="field">機臺: {{ item.tj0MachineNumbe }}</view>
</uni-col>
<uni-col :span="14">
<!-- 工單號 -->
<view class="field">工單號: {{ item.tj0OrderCode}}</view>
</uni-col>
<uni-col :span="10">
<!-- 類型 -->
<view class="field">類型: {{ item.tj0type }}</view>
</uni-col>
</uni-row>
</view>
<view class="item-arrow">
<!-- 復選框 -->
<checkbox :value="item.objId" @tap="toggleSelection(item.objId)"
:checked="isSelected(item.objId)" class="checkbox"></checkbox>
</view>
</view>
<!-- 顯示已選擇的項數 -->
<view class="selected-count" style="display: none;">已選擇：{{ selectedIds.length }} 項</view>
<!-- 全選/取消全選按鈕 -->
<!--<button @click="toggleSelectAll">{{ isAllSelected ? '取消全選' : '全選' }}</button>-->
</view>
</view>
</z-paging>
</template>
<script setup>
import {
ref,
reactive,
computed,
getCurrentInstance
} from 'vue';
import {
queryPage,
seachJobTaskList
} from "@/api/pickingTask";
const instance = getCurrentInstance();
const paging = ref(null);
const dataList = ref([]);
const activeColor = ref("#0049dd");
const items = ['待揀料', '揀料中', '揀料完成'];
const current = ref(0);
const tj0MachineNumbe = ref("");
//查詢
const onInput = (e) => {
paging.value.reload();
};
const onClickItem = (e) => {
current.value = e.currentIndex; // 獲取當前選中的索引
paging.value.reload();
};
// @query所綁定的方法不要自己調用??！需要刷新列表數據時，只需要調用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {
// 組件加載時會自動觸發(fā)此方法，因此默認頁面加載時會自動觸發(fā)，無需手動調用
// 這里的pageNo和pageSize會自動計算好，直接傳給服務器即可
// 模擬請求服務器獲取分頁數據，請?zhí)鎿Q成自己的網絡請求
const params = {
"attrSet": [],
"condition": [],
"sorts": [{
"name": "createAt",
"sort": "desc"
}],
"page": {
"pageNo": pageNo,
"pageSize": pageSize
}
};
if (tj0MachineNumbe.value != '') {
params.condition.push({
"compare": "LIKE",
"field": "tj0MachineNumbe",
"value": tj0MachineNumbe.value
});
}
if (current.value == 0) {
//收貨中
params.condition.push({
"compare": "EQUAL",
"field": "orderStatus",
"value": 'Created' //“已創(chuàng)建”
});
} else if (current.value == 1) {
//待收貨
params.condition.push({
"compare": "EQUAL",
"field": "orderStatus",
"value": 'CKZ' //出庫中”
});
}
if (current.value == 2) {
//已收貨
params.condition.push({
"compare": "EQUAL",
"field": "orderStatus",
"value": 'CKWC' //CKWC “出庫完成”
});
}
queryPage(params).then(res => {
console.log("============", JSON.stringify(res));
if (res.code == 0) {
// 將請求的結果數組傳遞給z-paging
paging.value.complete(res.data);
} else { //異常信息
paging.value.complete(false);
uni.showToast({
title: res.msg
});
}
}).catch(res => {
// 如果請求失敗寫paging.value.complete(false);
// 注意，每次都需要在catch中寫這句話很麻煩，z-paging提供了方案可以全局統(tǒng)一處理
// 在底層的網絡請求拋出異常時，寫uni.$emit('z-paging-error-emit');即可
paging.value.complete(false);
});
};
// 記錄選中的id
const selectedIds = ref([]);
// 計算是否已全選
const isAllSelected = computed(() => {
return selectedIds.value.length === dataList.length;
});
// 判斷是否被選中
const isSelected = (id) => {
return selectedIds.value.includes(id);
};
// 切換選中狀態(tài)
const toggleSelection = (id) => {
const index = selectedIds.value.indexOf(id);
if (index === -1) {
selectedIds.value.push(id); // 如果沒選中，加入選中
} else {
selectedIds.value.splice(index, 1); // 如果已選中，取消選中
}
};
// 切換全選狀態(tài)
const toggleSelectAll = () => {
if (isAllSelected.value) {
selectedIds.value = []; // 取消全選
} else {
selectedIds.value = dataList.map(item => item.objId); // 全選
}
};
//打印容器標簽
const printLabels = (e) => {
};
//開始揀料
const startPickingMaterials = (e) => {
//console.log(JSON.stringify(selectedIds.value)) //勾選的數據ID
if (selectedIds.value.length == 0) {
uni.showToast({
title: '至少選擇一條數據',
icon: 'none', // 無圖標，只顯示文本
duration: 2000, // 顯示2秒
mask: true, // 顯示遮罩層，避免點擊背景關閉
});
return;
}
instance.appContext.config.globalProperties.$setGlobalData(selectedIds.value);
uni.navigateTo({
url: '/pages/pickingTask/pickingExecution'
});
// let listObjId = JSON.stringify(selectedIds.value);
// //console.log(encodeURIComponent(listObjId)) ;
// uni.navigateTo({
// url: '/pages/pickingTask/pickingExecution?data=' + encodeURIComponent(listObjId)
// })
};
</script>
<style scoped lang="scss">
view {
box-sizing: border-box;
color: $uni-text-color;
}
button {
font-size: $uni-btn-font-size !important;
}
.searchForm {
background-color: white;
padding: 20rpx 10rpx;
}
.select-itme {
display: flex;
margin-top: 10rpx;
}
.select-itme>view:nth-child(1) {
margin-right: 5rpx;
}
.select-itme>view {
flex: 1;
}
.col-item {
margin: 5px;
}
.container {
padding: 5px;
}
.student-item {
margin-bottom: 8rpx;
border: 1px solid #ddd;
padding: 10px;
border-radius: 6px;
display: flex;
align-items: center;
background-color: white;
}
.student-item view:nth-child(1) {
flex: 90%;
}
.student-item view:nth-child(1) {
flex: 10%;
}
.field {
margin: 5px 0;
font-size: 14px;
}
.checkbox {
margin-left: 10px;
}
.selected-count {
margin-top: 20px;
color: #007aff;
}
</style>vue頁面-取值頁面
<template>
<z-paging ref="paging" v-model="dataList" @query="queryList">
<view class="container" v-for="(row, index) in dataList" :key="index" @click="cardClick(row)">
<!-- 表格 -->
<view class="table">
<!-- 遍歷每一行數據 -->
<view class="table-row">
<!-- 每行的物料號和總需求數量 -->
<view class="row-header">
<view class="material-info">
<text class="label blueBar">物料號:</text>
<text class="value">{{ row.matrialCode }}</text>
</view>
<view class="material-info">
<text class="label">總需求數量:</text>
<text class="value">{{ row.totalqty }}</text>
</view>
</view>
<!-- 嵌套的表格 -->
<view class="nested-table">
<view class="nested-table-header">
<view class="table-cell2">類型</view>
<view class="table-cell2">數量</view>
<view class="table-cell">推薦庫位</view>
<view class="table-cell">工單</view>
</view>
<view class="nested-table-body">
<view class="nested-table-row" v-for="(item, index) in row.taskline" :key="index">
<view class="table-cell2">{{ item.materialType }}</view>
<view class="table-cell2">{{ item.operateQuantity }}</view>
<view class="table-cell">{{ item.tj0RecommendStorageLocation }}</view>
<view class="table-cell">{{ item.tj0OrderCode }}</view>
</view>
</view>
</view>
</view>
</view>
<view class="item-arrow">
<uni-icons type="right" size="25" color="gray"></uni-icons>
</view>
</view>
</z-paging>
<view>
<!-- 提示信息彈窗 -->
<uni-popup ref="refMessage" type="message">
<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
</uni-popup>
</view>
</template>
<script setup>
import {
nextTick,
onMounted,
reactive,
ref,
getCurrentInstance
} from "vue";
import {
seachJobTaskList
} from "@/api/pickingTask";
const instance = getCurrentInstance();
const paging = ref();
const dataList = ref([]);
//提示消息
const refMessage = ref();
const msgType = ref();
const messageText = ref();
var objIds = [];
const messageToggle = (type, msg) => {
messageText.value = msg;
msgType.value = type;
refMessage.value.open('top');
};
// @query所綁定的方法不要自己調用??！需要刷新列表數據時，只需要調用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {
// 組件加載時會自動觸發(fā)此方法，因此默認頁面加載時會自動觸發(fā)，無需手動調用
// 這里的pageNo和pageSize會自動計算好，直接傳給服務器即可
// 模擬請求服務器獲取分頁數據，請?zhí)鎿Q成自己的網絡請求
const params = objIds;
console.log("objIds----------", JSON.stringify(objIds));
seachJobTaskList(params).then(res => {
console.log("============", JSON.stringify(res));
if (res.code == 0) {
// 將請求的結果數組傳遞給z-paging
paging.value.complete(res.data);
} else { //異常信息
paging.value.complete(false);
uni.showToast({
title: res.msg
});
}
}).catch(res => {
// 如果請求失敗寫paging.value.complete(false);
// 注意，每次都需要在catch中寫這句話很麻煩，z-paging提供了方案可以全局統(tǒng)一處理
// 在底層的網絡請求拋出異常時，寫uni.$emit('z-paging-error-emit');即可
paging.value.complete(false);
});
};
const tableData = ref([]);
const cardClick = (item) => {
instance.appContext.config.globalProperties.$setGlobalData2(item);
uni.navigateTo({
url: '/pages/pickingTask/taskExecution'
});
// console.log("item ----------", JSON.stringify(item));
// let infoData = JSON.stringify(item)
// let newStr = encodeURIComponent(infoData);
// uni.navigateTo({
// url: '/pages/pickingTask/taskExecution?data=' + newStr
// });
}
onMounted(() => {
//取全局變量參數
const globalData = instance.appContext.config.globalProperties.$getGlobalData();
let arrayId = globalData;
objIds = arrayId.map((ite) => {
return {
"objId": ite
};
});
/*
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1]; // 當前頁面
//console.log("currentPage --------", currentPage);
//父頁面data參數
if (currentPage.options && currentPage.options.data) {
let infoData = decodeURIComponent(currentPage.options.data);
console.log("infoData----------", JSON.stringify(infoData));
let arrayId = JSON.parse(infoData);
objIds = arrayId.map((ite) => {
return {
"objId": ite
};
});
if (item.value.remark != null && item.value.remark != "") {
BtnDisabled.value = true;
}
}
*/
console.log("onReady");
});
</script>
<style scoped lang="scss">
view {
box-sizing: border-box;
//color: $uni-text-color;
}
.searchForm {
background-color: $uni-bg-color;
padding: 12rpx;
}
.container {
padding: 12rpx 0 12rpx 12rpx;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid $uni-border-color;
border-radius: 6px;
background-color: $uni-bg-color;
margin-bottom: 5px;
margin: 20rpx 10rpx;
}
.table {
overflow: hidden;
flex: 98%;
}
.item-arrow {
flex: 2%;
margin-left: 5px;
}
.table-row {}
.row-header {
display: flex;
color: $uni-tab-activeColor;
}
.row-header>view:nth-child(1) {
flex: 65%;
}
.row-header>view:nth-child(2) {
flex: 35%;
}
.material-info {
display: flex;
margin-right: 20px;
}
.label {
//font-weight: bold;
margin-right: 5px;
}
.value {
color: $uni-tab-activeColor;
}
.nested-table {
overflow-x: auto;
overflow: hidden;
}
.nested-table-header {
@extend .nested-table-row;
font-weight: bold;
margin-top: 6rpx;
}
.nested-table-body {
flex-direction: column;
}
.nested-table-row {
display: flex;
padding: 8px 5px;
border-bottom: 1px solid $uni-border-color;
}
.table-cell {
flex: 1;
text-align: center;
/* 允許文本換行 */
white-space: normal;
/* 或者使用 overflow-wrap: break-word; */
word-wrap: break-word;
overflow-wrap: break-word;
min-width: 200rpx;
}
.table-cell2 {
flex: 1;
text-align: center;
max-width: 130rpx;
}
.nested-table-row:last-child .table-cell {
border-bottom: none;
}
.table-cell:last-child {
// border-right: none;
}
//藍色條塊
.blueBar {
margin-left: 2rpx;
}
.blueBar::before {
white-space: pre;
content: " ";
background-color: $uni-border-bar-color; // $uni-color-primary ;
width: 4px;
/* 豎塊的寬度 */
height: 12px !important;
border-radius: 10px;
margin-right: 15rpx;
}
</style>總結
到此這篇關于uni-app main.js中全局變量的使用的文章就介紹到這了,更多相關uni-app main.js全局變量使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在JavaScript中查找字符串中最長單詞的三種方法(推薦)
這篇文章主要介紹了在JavaScript中查找字符串中最長單詞的三種方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
這篇文章主要介紹了JavaScript對象反射用法,實例分析了反射DOM對象和自定義對象的具體用法,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
本篇文章主要是對JS判斷表單輸入是否為空的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
最近在搞一個網站,需要在內容區(qū)域實現(xiàn)劃詞高亮功能,所以下面這篇文章主要給大家介紹了關于如何用純JS實現(xiàn)語雀的劃詞高亮功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這里給大家推薦一款自己封裝的js時間日期格式化的函數，非常的簡潔實用，分享給有需要的小伙伴2014-12-12
本文給大家分享一段js代碼關于識別瀏覽器的類型是手機瀏覽器還是電腦瀏覽器，有需要的朋友可以參考下本文2016-11-11
本文主要是為了讓大家更好的理解js的面向對象，通過實現(xiàn)拖拽效果向大家展示js面向對象，非常不錯，這里推薦給大家。2015-02-02
在網站的管理后臺應用此功能居多，如一次性處理多個產品，或對文章的刪除對產品的下架等處理，一條一條的點顯然有一些麻煩，如果能每一行放一個checkbox，然后統(tǒng)一處理就好辦的多了，今天我就用簡單的篇幅來講解一下這個功能的實現(xiàn)原理和實現(xiàn)過程。2015-05-05
下面我將提供一個簡單的JavaScript網頁設計案例,該案例將實現(xiàn)一個動態(tài)的待辦事項列表（Todo List）,用戶可以在頁面上添加新的待辦事項,標記它們?yōu)橐淹瓿?以及刪除它們,這篇文章主要介紹了Java?Script網頁設計案例,需要的朋友可以參考下2024-08-08
基于JavaScript代碼實現(xiàn)pc與手機之間的跳轉
本文通過一段代碼實例給大家介紹pc跳轉手機代碼，手機跳轉pc網站代碼的相關知識，對js跳轉代碼相關知識感興趣的朋友一起通過本篇文章學習吧2015-12-12