uniapp進行互動回報

前言:在進行開發中,難免會遇到與客戶進行互動的問題,好的互動不僅可以增加使用者體驗也可以讓程式更加完美。比如PC端常用的ElementUI中的Message,今天我們來看一看uniapp原生的互動。

目錄:

• ​​一.uni.showToast(OBJECT)​​

• ​​1.概述​​
• ​​2.OBJECT參數​​

• ​​(1).icon值說明​​
• ​​(2).position 值說明（僅App生效）​​

• ​​3.舉例​​

• ​​二.uni.hideToast()​​

• ​​1.概述​​
• ​​2.舉例​​

• ​​三.uni.showLoading(OBJECT)​​

• ​​1.概述​​
• ​​2.OBJECT參數說明​​
• ​​3.舉例​​

• ​​四.uni.hideLoading()​​

• ​​1.概述​​
• ​​2.舉例​​

一.uni.showToast(OBJECT)

1.概述

顯示消息提示框

2.OBJECT參數

參數	類型	必填	說明
title	String	是	提示的内容，長度與 icon 取值有關。
icon	String	否	圖示,參數見下方說明
image	String	否	自定義圖示的本地路徑（app端暫不支援gif）
mask	Boolean	否	是否顯示透明蒙層，防止觸摸穿透，預設：false
duration	Number	否	提示的延遲時間，機關毫秒，預設：1500
position	String	否	純文字輕提示顯示位置，填寫有效值後隻有 title 屬性生效，且不支援通過 uni.hideToast 隐藏。參數詳見下方說明。
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

(1).icon值說明

值	說明
success	顯示成功圖示，此時 title 文本在小程式平台最多顯示 7 個漢字長度。
error	顯示錯誤圖示，此時 title 文本在小程式平台最多顯示 7 個漢字長度。
fail	顯示錯誤圖示，此時 title 文本無長度顯示。
exception	顯示異常圖示。此時 title 文本無長度顯示。
loading	顯示加載圖示，此時 title 文本在小程式平台最多顯示 7 個漢字長度。
none	不顯示圖示，此時 title 文本在小程式最多可顯示兩行，App僅支援單行顯示。

(2).position 值說明（僅App生效）

值	說明
top	居上顯示
center	居中顯示
bottom	居底顯示

3.舉例

​

​注意​

​:預設為success圖示

uni.showToast({
  title:'打開消息提示'
})      

二.uni.hideToast()

1.概述

顧名思義,這個api就是隐藏消息提示框

2.舉例

uni.hideToast()      

三.uni.showLoading(OBJECT)

1.概述

顯示 loading 提示框,通常我們可以使用在進行網絡請求或者在進行下一步操作中使用。

2.OBJECT參數說明

參數	類型	必填	說明
title	String	是	提示的文字内容，顯示在loading的下方
mask	Boolean	否	是否顯示透明蒙層，防止觸摸穿透，預設：false
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

3.舉例

uni.showLoading({
  title:'加載中...'
})      

四.uni.hideLoading()

1.概述

2.舉例

const uploadImage = (url, data) => {
  uni.showLoading({
    title: '加載中'
  });
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url: BASE_URL + url,
      filePath: data,
      name: 'file',
      formData: {},
      success: (uploadFileRes) => {
        let parms = uploadFileRes.data
        resolve(parms)
        uni.hideLoading();
      },
      fail: () => {
        uni.hideLoading();
        uni.showToast({
          title: '圖檔上傳失敗',
          icon: 'none'
        })
      }
    });
  })
}