Mr.Raindrop

Vue2 與 uni-app 筆記#

Vue2#

Vue 透過組件允許創建可重用塊標記。大多數時候，Vue 組件是使用一個特殊的 HTML 模板的語法寫的。當需要比 HTML 語法允許的更多的控制時，可以編寫 JSX 或純 JavaScript 函數來定義組件。一個 Vue 應用由一個通過 new Vue 創建的根 Vue 實例，以及可選的嵌套的、可重用的組件樹組成。

template 是一级节点，用于写 tag 组件，script 和 style 是并列的一级节点，也就是有 3 个一级节点。

• HTML 是一種標記語言，用來結構化我們的網頁內容並賦予內容含義，例如定義段落、標題和數據表，或在頁面中嵌入圖片和視頻。

• CSS 是一種樣式規則語言，可將樣式應用於 HTML 內容，例如設置背景顏色和字體，在多個列中佈局內容。

• JavaScript 是一種腳本語言，可以用來創建動態更新的內容，控制多媒體，製作圖像動畫，還有很多。

DOM#

文檔對象模型（Document Object model，簡稱 DOM）是針對 HTML 和 XML 文檔的一個 API（應用程序編程接口）。文檔對象模型（DOM）通過將文檔的結構（例如表示網頁的 HTML）以對象的形式存儲在內存中，將網頁與腳本或編程語言連接起來。DOM 使用邏輯樹的形式來表示文檔。樹的每個分支末端都是一個節點，每個節點都包含對象。DOM 方法允許以編程方式來訪問樹。借助這些方法，你可以改變文檔的結構、樣式或內容。

指令#

指令 (Directives) 是帶有 v- 前綴的特殊 attribute。指令 attribute 的值預期是單個 JavaScript 表達式 (v-for 是例外情況)。

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

計算屬性與方法屬性#

計算屬性是基於它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。相比之下，每當觸發重新渲染時，調用方法將總會再次執行函數。因此，計算屬性對於性能要求更低。

getter 和 setter 的含義#

Getter#

1. 含義:
   • Getter 是計算屬性的主要組成部分，它是一個函數，用於獲取計算屬性的值。
   • 當你訪問計算屬性時，實際上是在調用 getter 方法。
2. 用途:
   • Getter 方法通常用於基於其他數據屬性計算出一個新值。
   • Getter 方法可以訪問組件的所有數據和其他計算屬性。
   • 當依賴的數據發生變化時，Vue.js 會自動調用 getter 方法來更新計算屬性的值。

Setter#

1. 含義:
   • Setter 是一個可選的部分，它也是一個函數，用於設置計算屬性的值。
   • 當你試圖改變一個只讀的計算屬性時，Vue.js 會自動調用 setter 方法。
2. 用途:
   • Setter 方法通常用於更新其他數據屬性的值，而不是直接改變計算屬性本身。
   • 當計算屬性被賦值時，Vue.js 會調用 setter 方法。

箭頭函數表達式 =>#

() => {
  statements
}

param => {
  statements
}
(param1, paramN) => {
  statements
}

箭頭函數可以是 async 的，方法是在表達式前加上 async 關鍵字。

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

異步操作和 Async/Await#

promise#

Promise 是現代 JavaScript 中異步編程的基礎。它是一個由異步函數返回的對象，可以指示操作當前所處的狀態。在 Promise 返回給調用者的時候，操作往往還沒有完成，但 Promise 對象提供了方法來處理操作最終的成功或失敗。

Promise 的優雅之處在於 then() 本身也會返回一個 Promise，這個 Promise 將指示 then() 中調用的異步函數的完成狀態。由此可以鏈式使用 promise。

promise 有 ** 待定（pending）、已兌現（fulfilled）和已拒絕（rejected）** 三種狀態。

Async 和 Await#

在一個函數的開頭添加 async，就可以使其成為一個異步函數。

在 uni-app 中，async 和 await 的底層邏輯與原理與其他 JavaScript 環境相同。

在 Vue 組件的生命周期中，有一些鉤子函數是異步的，比如 created 和 mounted。這些鉤子函數允許你在組件被創建或掛載到 DOM 之後執行異步操作。

this.$api.common.login(this.loginForm).then(async res => {   // async 異步  箭頭函數去除掉function關鍵字，在形參列表和函數體之間使用=>連接
    if (res.code == 200) {
    // 存儲token和賬號
    this.saveToken(res.token);
    this.saveAccount();
    // 獲取用戶信息
    let profile = await this.getProfile();   // 等待異步完成
    uni.$u.vuex('profile', profile);
    // 跳轉主頁
    uni.switchTab({
    url: '/pages/tabBar/home/index'
    });

async 函數是一個特殊的函數，它總是返回一個 Promise。即使你不顯式地返回一個 Promise，async 函數也會返回一個已解決的 Promise，其值為 undefined。

await 關鍵字只能在 async 函數內部使用。它用於等待一個 Promise 的結果。當 await 一個 Promise 時，JavaScript 引擎會暫停執行 async 函數，直到 Promise 解決或被拒絕。

async 和 await 的底層原理基於 Promise。Promise 是 JavaScript 中處理異步操作的標準方式之一，它有三種狀態：pending（掛起）、fulfilled（已解決）和 rejected（已拒絕）。Promise 對象代表了一個最終可能會完成或失敗的異步操作，並附帶了完成或失敗時的值。

await 關鍵字用於等待一個 Promise 的結果。當你在 async 函數中使用 await 關鍵字時，JavaScript 引擎會暫停執行 async 函數，直到 Promise 被解決或被拒絕。如果 Promise 被解決，await 表達式的值將是解決值；如果 Promise 被拒絕，await 表達式會拋出一個錯誤，這可以通過 try...catch 語句來處理。

插槽（slot）#

    <!-- 根據不同條件渲染圖片 -->
    <u--image v-if="device.imgUrl" :src="device.imageUrl" radius="10" mode="aspectFill"
    width="70" height="70">
    <!-- 插槽（slot）顯示不同狀態時顯示的圖像 -->
    <view slot="error" style="font-size: 12px;">加載失敗</view>
    <template v-slot:loading>
    <u-loading-icon></u-loading-icon>
    </template>

HTML 元素是 ——Web 組件技術套件的一部分 —— 它是一個在 web 組件內部的佔位符，你可以使用自己的標記來填充該佔位符，從而創建單獨的 DOM 樹並將其一起呈現。

$ 符號#

在 Vue.js 中，$ 符號的使用主要是基於 Vue 實例或 Vue 組件實例的一些特定屬性和方法。這些屬性和方法通常以 $ 開頭，以區分它們與普通的數據屬性、計算屬性、方法等的不同。這些以 $ 開頭的屬性和方法往往是由 Vue 框架自身提供的，用於執行 Vue 相關的操作或訪問 Vue 實例的內部狀態。

template 中：的使用#

Vue.js 中屬性綁定的詳細解析：冒號 `:` 和非冒號的區別_vue 屬性 冒號 - CSDN 博客

v-bind attribute 被稱為指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊 attribute。

在設置參數時是否添加：主要取決於是在設置 HTML 屬性（attributes）還是 Vue 特有的指令。它們會在渲染的 DOM 上應用特殊的響應式行為。

不需要:的情況#

靜態 HTML 屬性：當你直接在元素上寫屬性時，如<div id="app">，這裡的id="app"是一個靜態的 HTML 屬性，其值在編譯時就已經確定，不會隨著 Vue 實例中的數據變化而變化。

Vue 指令但非屬性綁定：對於某些 Vue 指令，如v-model、v-if、v-for等，它們不是用於綁定 HTML 屬性的，而是 Vue 特有的模板指令，用於實現數據綁定、條件渲染、列表渲染等功能。這些指令不需要:前綴，因為它們不是 HTML 屬性的綁定。

需要:的情況#

動態 HTML 屬性綁定：當你想要根據 Vue 實例中的數據動態地設置 HTML 元素的屬性時，就需要使用v-bind指令。為了簡化，Vue 允許使用:作為v-bind的縮寫。例如，<div :id="dynamicId">中的:id="dynamicId"表示id屬性的值將綁定到 Vue 實例的dynamicId數據屬性上。如果dynamicId的值發生變化，那麼<div>的id屬性也會相應地更新。

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

動態綁定和靜態綁定在性能上有所差異。動態綁定會增加一定的渲染開銷，因為 Vue.js 需要監視表達式的變化並進行響應式更新。靜態綁定則不會有這樣的性能開銷，因為它們是靜態的值。

免密碼登錄相關#

從本地緩存中讀取 token 值，並將其存儲到 Vuex 狀態管理器中，以便在需要的地方可以方便地訪問此 token 值。

getToken () {
    // 本地緩存獲取token
    this.token = uni.getStorageSync('token');
    // vuex存儲token
    uni.$u.vuex('vuex_token', this.token);
}

token、session 和 cookie 三者之間的區別#

• 安全性：Token 通常比 Cookie 更安全，因為它包含了加密簽名，並且可以設計為不持久化存儲。而 Cookie 存儲在客戶端，更容易受到攻擊。

• 可擴展性：Token 機制更適合於無狀態架構和分佈式系統，因為它不需要服務器維護會話狀態。

• 跨域問題：Token 可以輕鬆解決跨域問題，而傳統的 Session Cookie 受到同源策略的限制。

this.$refs.form#

this.$refs.form 是一個引用，指向了模板中帶有 ref="form" 的表單元素或組件。

在 Vue 組件的模板中使用 ref 屬性時，Vue 會在該組件實例的 $refs 對象中創建一個對應的屬性，該屬性的值就是對應的子組件實例或 DOM 元素。

注意：$refs 的值在組件渲染完成之前是 undefined。因此，你不能在 created 鉤子中直接訪問 $refs，而應該在 mounted 鉤子或之後的生命周期中訪問。

頁面結構#

頁面 | uni-app 官網 (dcloud.net.cn)

一個頁面內，有 3 個根節點標籤：

• 模板組件區 <template>
• 腳本區 <script>
• 樣式區 <style>

在 vue 文件中，template、script、style 這 3 個是平級關係。在 vue2 中，template 的二級節點只能有一個節點，一般是在一個根 view 下繼續寫頁面組件。但在 vue3 中，template 可以有多個二級節點，省去一個層級。

在腳本區中，開發者應謹慎編寫 export default {} 外面的代碼，這裡的代碼有 2 個注意事項：

1. 影響應用性能。這部分代碼在應用啟動時執行，而不是頁面加載。如果這裡的代碼寫的太複雜，會影響應用啟動速度，占用更多內存。
2. 不跟隨組件、頁面關閉而回收。在外層的靜態變量不會跟隨頁面關閉而回收。如果必要你需要手動處理。比如 beforeDestroy 或 destroyed 生命周期進行處理。

export#

在 ES6（ECMAScript 6）中，export 與 export default 均可用於導出變量 (含常量)、函數、類、文件、模塊等，然後在其它文件或模塊中通過 import 變量 (含常量)| 函數 | 類 | 文件 | 模塊名的方式，將其導入，以便能夠對其進行使用。export 可以有多個，然而 export default 只能有一個。

install#

在 Vue.js 中，使用 const install = (Vue, vm) => { ... } 和 export default { install } 是一種常見的模式來定義和導出 Vue 插件。這種方法允許創建一個可以在 Vue 應用程序中使用的插件。

install 函數通常接收兩個參數：

• Vue 構造函數，可以用來擴展 Vue 的原型、註冊全局組件、指令等。
• vm: 可選參數，通常用於訪問 Vue 實例的上下文，但在 Vue 3 中已被廢棄。

在函數體中，可以執行各種操作來配置 Vue 或者註冊自定義行為。當你在其他地方導入 (比如main.js) 這個模塊時，可以通過 Vue.use() 方法來安裝這個插件。

prototype#

在 JavaScript 中，原型是一種特殊的機制，用於實現對象之間的繼承和共享屬性及方法。每個 JavaScript 對象都有一個內部屬性 [[[Prototype]]]，它指向另一個對象，這個對象被稱為原型對象。當試圖訪問一個對象的屬性或方法時，如果該對象本身沒有這個屬性或方法，JavaScript 引擎會沿著原型鏈向上查找，直到找到這個屬性或方法為止。Java 作為一種面向對象的編程語言，也有一種類似於 JavaScript 中原型機制的概念，但它採用的是類繼承和接口實現的方式。Java 中並沒有直接與 JavaScript 的 prototype 相對應的概念，但我們可以探討 Java 中的一些機制，它們在某種程度上實現了類似的功能。

prototype 是一個特殊的屬性，它存在於所有函數對象上。當創建一個函數時，這個函數會自動獲得一個 prototype 屬性。這個 prototype 屬性是一個對象，它的用途是作為新創建對象的原型。當你使用構造函數創建對象時，新創建的對象會繼承 prototype 對象上的屬性和方法。

在 Vue.js 中，可以利用 JavaScript 的原型機制來擴展 Vue 的原型，使得所有的 Vue 實例可以共享某些屬性和方法。這通常通過將屬性或方法添加到 Vue.prototype 來實現。

Vue.prototype.$api = {
    // 導入模塊
    common,
    scene,
    group,
    deviceUser,
    deviceLog,
    device,
    deviceJob,
    account,
    energyConsumptionAnalysis
};

上述代碼，向 Vue 的原型上添加了一个名为 $api 的属性，并将自定义的模块加入之中。之后，可以在 Vue 的任何实例中都可以通过 $api 访问这些方法。

 this.$api.common.xxx()   // 访问自定的方法

Props#

uni-app 官網 (dcloud.net.cn)

組件基礎 | Vue.js (vuejs.org)

props 可以是數組或對象，用於接收來自父組件的數據。Props 可以在子組件上聲明註冊，在父組件定義其中聲明參數的值，父級 prop 的更新會向下流動到子組件中，但不能反向。props 可以是簡單的數組，或者使用對象作為替代，對象允許配置高級選項，如類型檢測、自定義驗證和設置默認值。

ref#

uni-app 官網 (dcloud.net.cn)

用來給元素或子組件註冊引用信息，引用信息將會註冊在父組件的 $refs 對象上。

<!-- index 父組件頁面 -->
<template>
	<view>
		<base-input ref="usernameInput"></base-input>
		<button type="default" @click="getFocus">獲取焦點</button> 
	</view>
</template>
<script>
	export default {
		methods:{
			getFocus(){
				//通過組件定義的ref調用focus方法
				this.$refs.usernameInput.focus()
			}
		}
	}
</script>

vuex#

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

Vuex 與全局變量區別

每一個 Vuex 應用的核心就是 store（倉庫），它包含著你的應用中大部分的狀態 (state)。

狀態管理有 5 個核心：state、getter、mutation、action、module。

Uni-app#

頁面生命周期#

每個 Vue 實例在被創建時都要經過一系列的初始化過程 —— 例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數。

mounted#

在組件的 DOM 元素被掛載到文檔 DOM 中之後被調用。下面代碼中如果發現 token 則直接跳轉頁面。

	mounted () {    // mounted 鉤子在組件的DOM元素被掛載（即插入到文檔DOM中）之後被調用。
		this.getToken();  // 獲取本地緩存token
		if (this.token != '' && this.token != null) {     
			// 跳轉主頁
			uni.switchTab({
				url: '/pages/tabBar/home/index'
			});
		} else {
			this.getCode();
			this.getAccount();
		}
	},

onShow、onHide、onUnload#

注意頁面顯示，是一個會重複觸發的事件。

a 頁面剛進入時，會觸發 a 頁面的 onShow。

當 a 跳轉到 b 頁面時，a 會觸發 onHide，而 b 會觸發 onShow。

但當 b 被關閉時，b 會觸發 onUnload，此時 a 再次顯示出現，會再次觸發 onShow。

在 tabbar 頁面（指 pages.json 裡配置的 tabbar），不同 tab 頁面互相切換時，會觸發各自的 onShow 和 onHide。

create#

在實例創建完成後被立即調用。

onReady#

监听页面初次渲染完成並執行所編寫的代碼，此時組件已掛載完成，DOM 樹已可用。

uni-app 框架，首先根據 pages.json 的配置，創建頁面。根據頁面中的 template 組件創建 dom。之後，觸發 onload。

Tabbar 的設置#

uni-app 底部導航欄 tabBar 的顯示和使用步驟_uni-app 判斷是否為 tabbar 界面 - CSDN 博客

tabBar 中的 list 是一個數組，只能配置最少 2 個、最多 5 個 tab，tab 按數組的順序排序。Tabbar 的設置位於page.js文件中。Tabbar 頁面要加入文檔中的 pages 數組中。

刪除頂部導航欄#

uni-app 開發 - 頂部導航欄 - 掘金 (juejin.cn)

pages.json 頁面路由 | uni-app 官網 (dcloud.net.cn)

通過在manifest.json 中設置如下參數可以避免 app 與手機頂部狀態欄或是水滴屏等遮擋的問題。也可以在頂部添加視覺塊填充頂部狀態欄區域解決該問題。

"app-plus" : {
    "statusbar": {  
        "immersed": false  
    }
}

uni.setStorageSync 和 Vuex store 存儲異同#

uni.setStorageSync 是 uni-app 提供的一個本地存儲 API，用於在客戶端存儲數據。它類似於 Web Storage API 中的 localStorage 和 sessionStorage。Vuex 是 Vue.js 的官方狀態管理模式，用於集中管理應用的所有組件的狀態。本地存儲是在客戶端存儲數據的一種方式，而狀態管理是一種模式，用於集中管理應用程序的狀態。

• 存儲位置： uni.setStorageSync 存儲數據在客戶端本地存儲中；Vuex store 存儲數據在內存中。
• 持久化： uni.setStorageSync 中的數據是持久化的；Vuex store 中的數據在頁面刷新後會丟失。
• 響應式： Vuex store 中的數據是響應式的；uni.setStorageSync 中的數據不是響應式的。
• 狀態管理： Vuex store 提供了複雜的狀態管理功能；uni.setStorageSync 主要用於簡單的數據存儲。
• 安全性： uni.setStorageSync 中的數據更容易受到攻擊；Vuex store 中的數據更受保護，因為數據在內存中而不是客戶端本地存儲。

uni.setStorage (OBJECT) @setstorage | uni-app 官網 (dcloud.net.cn)

使用 uni-app 的全局數據管理#

客戶端存儲 - 學習 Web 開發 | MDN (mozilla.org)

在 main.js 或 App.vue 中初始化：

使用全局變量或 store#

在 store 文件夾下的 JS 文件夾中可以看到所存儲的全局變量。

緩存#

一文讀懂 Uniapp 的 setStorage、setStorageSync、getStorage 以及 getStorageSync（附 Demo）_uni.getstorage-CSDN 博客

通過緩存數據以在其他頁面使用。

• uni.setStorage({key, data, success, fail, complete})：將數據異步存儲到本地緩存中，可提供成功、失敗和完成時的回調函數
• uni.getStorage({key, success, fail, complete})：從本地緩存中異步獲取數據，可提供成功、失敗和完成時的回調函數
• uni.setStorageSync(key, data)：將數據同步存儲到本地緩存中，即時執行，沒有回調函數
• uni.getStorageSync(key)：從本地緩存中同步獲取數據，即時執行，沒有回調函數

// 異步方法
uni.setStorage({
  key: 'key',
  data: 'value',
  success: function () {
    console.log('數據存儲成功');
  },
  fail: function (error) {
    console.log('數據存儲失敗：', error);
  }
});

// 獲取數據
uni.getStorage({
  key: 'key',
  success: function (res) {
    console.log('獲取數據成功：', res.data);
  },
  fail: function (error) {
    console.log('獲取數據失敗：', error);
  }
});

// 同步方法
uni.setStorageSync('projectId', this.projectId);  // 緩存數據
let x = uni.getStorageSync('projectId')；  // 提取數據

下拉單選框組件的使用#

選擇使用 uniapp 社區的select-lay - DCloud 插件市場 插件。該插件可以實現自定義數據索引對象，對於一些傳入複雜的數據結構單選展示具有很好的效果。

<select-lay :value="tval" name="name" :options="datalist" @selectitem="selectitem"></select-lay>

自定義數據結構的寫法為：

<select-lay :zindex="998" :value="choicedID" name='Name' placeholder="請選擇拓撲名稱"
    slabel="t_name" svalue="t_id"
    :options="project" @selectitem="choicet_Name"></select-lay>

value 要與選擇框最終傳給的變量值相同，否則選擇之後在 UI 上面無法顯示選擇後的結果。

組件層級設置#

在 UI 中不同組件顯示過程中，通過參數設置不同的層可以使一部分組件顯示在另一部分組建的上方。

uniapp 中部分組件可以通過z-index參數來設置組件的層級。z-index 屬性設置元素在渲染時的 z 軸順序。在同一個層疊上下文下 z-index 較大的元素會覆蓋在 z-index 較小的元素上面。簡單來說，就是當該參數設置的值越大，則會顯示在更上層。

app 端 z-index 默認值為 0，web 端默認值為 auto。

z-index | uni-app-x (dcloud.net.cn)

props 參數的使用#

props 可以是數組或對象，用於接收來自父組件的數據。props 可以是簡單的數組，或者使用對象作為替代，對象允許配置高級選項，如類型檢測、自定義驗證和設置默認值。

表單檢查與校驗#

.some 方法

.some() 方法是 JavaScript 陣列的一個方法，用於測試陣列中的元素是否至少有一個滿足提供的測試函數。如果至少有一個元素讓測試函數返回 true，那麼 .some() 方法就會返回 true；否則返回 false。

// 是否有任何數字大於 10
const numbers = [1, 5, 10, 15, 20];
const hasNumberGreaterThanTen = numbers.some(number => number > 10);
console.log(hasNumberGreaterThanTen); // 輸出: true

檢查對應兩組變量之間是否相同

// 檢查哪些屬性發生了改變
const changedProperties = ['email', 'nickname', 'phone'].some(prop => {
    return this.accountForm[prop] !== this.profile[prop];
});

彈窗的實現#

Popup 彈出層 | uView 2.0 - 全面兼容 nvue 的 uni-app 生態框架 - uni-app UI 框架 (uviewui.com)

通過 uview 中 u-popup 組件實現

<u-popup :show="popShow" mode="center">
        <view >
            <text>確認取消？</text>
            <u-button  type="primary" style="margin-top: 5rpx;" text="返回" @click="popShow = false"></u-button>
            <u-button type="error" style="margin-top: 5rpx;" text="確認" @click="cancelAppoint(cancelId)"></u-button>
        </view>
</u-popup>

彈出消息後延時跳轉#

uni.showToast({
    title: ' 预约成功！',
    duration: 1000
});
setTimeout(function() {
    uni.reLaunch({
        url: '/pages/tabBar/home/index'
    });
}, 1000);

post 傳遞 query 形式數據#

問題#

使用 post 攜帶 query 數據發送請求。

背景#

使用 uview 發送請求，默認是可以提前對請求進行設置。下面是 uview 官網提供的配置。通過定義並導出配置即可實現在對所有請求的全局配置。在不配置 headers 中 datatype 的情況下，uview 默認 post 發送的是 body 的請求。如果要使用 post 請求發送數據則需要修改 headers 中 Content-Type 的值。

const install = (Vue, vm) => {
    baseURL: '',
    header: {},
    method: 'GET',
    dataType: 'json',
    // #ifndef MP-ALIPAY
    responseType: 'text',
    // #endif
    // 注：如果局部custom與全局custom有同名屬性，則後面的屬性會覆蓋前面的屬性，相當於Object.assign(全局，局部)
    custom: {}, // 全局自定義參數默認值
    // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
    timeout: 60000,
    // #endif
    // #ifdef APP-PLUS
    sslVerify: true,
    // #endif
    // #ifdef H5
    // 跨域請求時是否攜帶憑證（cookies）僅H5支持（HBuilderX 2.6.15+）
    withCredentials: false,
    // #endif
    // #ifdef APP-PLUS
    firstIpv4: false, // DNS解析時優先使用ipv4 僅 App-Android 支持 (HBuilderX 2.8.0+)
    // #endif
    // 局部優先級高於全局，返回當前請求的task,options。請勿在此處修改options。非必填
    // getTask: (task, options) => {
    // 相當於設置了請求超時時間500ms
    //   setTimeout(() => {
    //     task.abort()
    //   }, 500)
    // },
    // 全局自定義驗證器。參數為statusCode 且必存在，不用判斷空情況。
    validateStatus: (statusCode) => { // statusCode 必存在。此處示例為全局默認配置
        return statusCode >= 200 && statusCode < 300
    }
}

解決方法#

post 發送 query 請求時 headers 中 Content-Type 的值為application/x-www-form-urlencoded, 而發送 body 請求時值為application/json。由於上述為全局設置，而項目中使用 post 發送 query 形式的數據較少，因此，可以在發送 query 請求時單獨設置 headers 中 Content-Type 的值。

// query形式的http傳參
export function http_a_post_query(path,params){	
	let formBody = Object.keys(params).map(key => key + '=' + params[key]).join('&');
	console.log('http_a_post=', projectConfig.baseUrl_a + path);
	return http.post(projectConfig.baseUrl + path, params,{header:{'content-type': 'application/x-www-form-urlencoded'}});
}

圖片上傳#

• 使用 uni.chooseImage 從文件中選擇圖片，並使用 uni.uploadFile 上傳圖片。選擇圖片結束後。

  獲取文件路徑後，以content-type=multipart/form-data的形式，使用 post 協議上傳至服務器。同時，接收服務器返回的圖片地址。

		uploadPic() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				success: res => {
					console.log(projectConfig.baseUrl + '/v1/dms/upload/picture/local');
					uni.uploadFile({
						url: projectConfig.baseUrl + '/v1/dms/upload/picture/local',
						filePath: res.tempFilePaths[0],
						name: 'files',
						header: {
							'Authorization': 'Bearer ' + uni.getStorageSync('token'),
						},
						complete: (res) => {
							console.log('res:', JSON.parse(res.data)[0]);
							this.form.device_image = JSON.parse(res.data)[0];
							this.$u.toast('圖片上傳完畢！');
							this.upPicMsg = '重新上傳'
						}
					})
				}
			})
		},

統計圖實現#

指南 - uCharts 跨平台圖表庫

** 思路：** 對後端返回的數據格式化成組件所接受的數據格式，通過圖表組件實現。

HTML 部分#

<qiun-data-charts :ontouch="true" type="line" :opts="line_opts2" :localdata="trendData" />

• :ontouch="true" 表示組件是否應該響應觸摸事件。
• type="line" 指定了圖表的類型為折線圖。
• :opts="line_opts2" 是一個包含圖表配置的對象，在本地的 js 中設定，例如軸的標籤、網格線等。
• :localdata="trendData" 是一個包含要顯示的數據集的對象

數據格式#

第一種格式

    let res = {
        categories: ["2016","2017","2018","2019","2020","2021"],   // 橫坐標的標籤
        series: [
          {
            name: "目標值",
            data: [35,36,31,33,13,34]    // 第一條數據
          },
          {
            name: "完成量",
            data: [18,27,21,24,6,28]     // 第二條數據
          }
        ]
      };

第二種格式

localdata:[
  {value:35, text:"2016", group:"目標值"},
  {value:18, text:"2016", group:"完成量"},
  {value:36, text:"2017", group:"目標值"},
  {value:27, text:"2017", group:"完成量"},
  {value:31, text:"2018", group:"目標值"},
  {value:21, text:"2018", group:"完成量"},
  {value:33, text:"2019", group:"目標值"},
  {value:24, text:"2019", group:"完成量"},
  {value:13, text:"2020", group:"目標值"},   // 根據group類確定兩類或是多類數據
  {value:6, text:"2020", group:"完成量"},
  {value:34, text:"2021", group:"目標值"},
  {value:28, text:"2021", group:"完成量"}
]

表格的實現#

問題#

uniapp 自帶的表格無法完成合併單元格等操作，直接使用 rowspan 和 colspan 會在不同端中產生兼容性問題。

uniapp uni-table 表格組件 合併單元格_uni-table 合併單元格 - CSDN 博客

方法#

直接使用 HTML 中的table、tr、td標籤來實現。需要注意的是：v-for 不能在以下標籤裡使用：

thead
tbody
tfoot
th
td

在實際使用中如果希望使用循環來顯示後端返回的不同長度的數據，可以在外側再嵌套一層。

<template v-for="(type, typeIndex) in deviceParam">
    <tr :key="typeIndex">
        <!-- 類型標題行，使用rowspan屬性來合併單元格 -->
        <th :rowspan="type.deviceParamInfoVos.length + 1">
            {{ type.device_param_type_name }}
        </th>
        <!-- 使用v-for遍歷每個參數 -->
    <tr v-for="param in type.deviceParamInfoVos" :key="param.device_param">
        <td>{{ param.device_param_name }}</td>
        <td>{{ param.device_param_value + param.device_param_unit }}</td>
    </tr>
    </tr>
</template>