uniapp如何請求伺服器文檔
❶ uniapp/vue request請求封裝
1.創建一個request.js文件
const baseUrl = ' '//定義一個請求地址
const request = (url = '', date = {}, type = 'get', header = {
}) => {
return new Promise((resolve, reject) => {
uni.request({
method: type,
url: baseUrl + url,
data: date,
header: header,
dataType: 'json',
}).then((response) => {
setTimeout(function() {
uni.hideLoading();
}, 200);
let [error, res] = response;
resolve(res.data);
}).catch(error => {
let [err, res] = error;
reject(err)
})
});
2.在全局注冊main.js
引入js文件，並注冊
import request from 'common/request.js'
Vue.prototype.$req = request
3.在頁面使用
this.$req('/list', {
// 傳參參數名：參數值,如果沒有，就不需要傳
"id": this.id
}).then(res => {
// 列印調用成功回調
console.log(res)
})
}
export default request
❷ uniapp封裝請求後台介面
1.新建一個目錄utils,然後該目錄下新建一個request.js文件，進行封裝。
2.在utils文件夾下一起建一個auth.js文件用來獲取token
3.建一個api的目錄，然後相應pages是什麼頁面就建一個對應名字的目錄和文件，list.js文件就是我們請求介面
4.然後在頁面上list.vue上調用介面。
❸ uniapp請求+uView2.0請求封裝
uniapp開發基礎模板，對uniapp請求進行了簡單封裝，實現請求攔截及響應處理，同時引用了 uView2.0 封裝的http請求，可以通過配置切換；
通過在api介面文件里修改引入請求方式，更改是使用uniapp請求還是使用uView封裝的請求
gitee地址
uniapp插件地址
❹ uni-app請求Promise封裝
// 創建默認地址 url 常量
const BASE_URL = "http://localhost:8082"
export const requist = ({ url , method , data }) => {
// return promise 從而可以實現promise非同步操作
return new Promise((resolve, reject) => {
uni.request({
// 傳入的url地址
url: BASE_URL + url,
// 請求方法可填可不填(get)
method: method || "GET",
// 請求數據可填可不填 默認空對象
data: data || {},
// 響應成功回調函數
success: (res) => {
// 配置統一的 相應結果 如果 !=0(失敗) 將會統一的提示動作
if (res.data.status != 0) {
return uni.showToast({
title: "獲取數據失敗",
icon: "none"
})
}
// 將請求結果resolve出去
resolve(res);
},
// 如果error也會統一的提示
fail: (err) => {
return uni.showToast({
title: "請求介面失敗",
icon: "none"
})
reject(err)
}
})
})
}
❺ uni-app 入門到精通 （二）
18 年時候有幸接觸到 uniapp , 寫了一篇 《uni-app 入門到精通》 ，由於一些原因，該方案並沒有執行，該項目一系列文章也就沒有再寫下去，所以遭受到了許多人評論的吐槽，到如今公司項目的需求又要根據 uniapp 寫 H5 嵌入到 app 中，所以想根據項目實際開發分享一下，有興趣的夥伴可以參考和吐槽。
這一篇文章主要分享一下內容
uniapp 模板項目有兩種初始化方式
由於無法舍棄 VSCode ，我們採用 vue-cli 來初始化項目， HBuilderX 大家可以參照官方文檔
這種方式是可以通過 vue 腳手架命令指定模板，這個是 dcloudio 的官方提供模板
我們選擇默認模板即可，
成功後我們執行
打開瀏覽器地址，直接運行即可。
一般剛接觸前端的小夥伴可能會對 postcss 不太了解，這里簡單介紹一下，
當然 PostCSS 具體使用是需要引入一些插件的，例如常用的是 autoprefixer postcss-preset-env 等, 具體如何使用大家可以自行參考資料，畢竟這塊知識還是挺多的就不具體展開解釋了。
通常我們在寫移動端時候需要做的是頁面適配方案的確定， uni-app 支持的通用 css 單位包括 px、rpx ， 之前的 upx 方案已經被廢棄掉，官方解釋是目前市面上已經基本上支持了微信的 rpx 方案，所以 upx 中轉方案已經意義不大了，不過還可以繼續使用，不過已經不再推薦。
rpx 之初是由微信小程序提出一種方案，即根據寬度來進行適配以 750 寬屏幕為基準， 750rpx 恰好為屏幕寬度, uni-app 規定屏幕基準寬度 750rpx 。所以說如果你們的UI 設計以 750*1334 iphone 6/6s 為基準設計的話，你只需要將屏幕上 px 寫為 rpx 即可，不用做任何換算，如果不是的話，你就需要做如下換算：
uniapp 有自己一套路由管理機制，而未採用 vue-route 方案，個人認為這套方案還是比較成熟和好用的，以及可以滿足我們日常的需求:
保留當前頁面，跳轉到應用內的某個頁面，使用uni.navigateBack可以返回到原頁面。
2.uni.redirectTo(OBJECT)
關閉當前頁面，跳轉到應用內的某個頁面。
3.uni.reLaunch(OBJECT)
關閉所有頁面，打開到應用內的某個頁面。
注意： 如果調用了 uni.preloadPage(OBJECT)) 不會關閉，僅觸發生命周期 onHide
4.uni.switchTab(OBJECT)
跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面。
注意： 如果調用了 uni.preloadPage(OBJECT)不會關閉，僅觸發生命周期 onHide
5.uni.navigateBack(OBJECT)
關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。
5.uni.preloadPage(OBJECT)
預載入頁面，是一種性能優化技術。被預載的頁面，在打開時速度更快。
以上路由API 已經滿足我們的需求，當然進行路由跳轉的前提是我們需要在 pages.json 進行路由配置, 包括路由和具體的樣式配置
而進行具體路由跳轉我們需要如下，需要多加一個 /
需要特別注意的一點是, 利用瀏覽器 在 進行 移動H5頁面調試時候，會出現頁面刷新之後頁面棧會消失，此時navigateBack不能返回，如果一定要返回可以使用history.back()導航到瀏覽器的其他歷史記錄。
uniapp 提供網路請求的 api 是 uni.request ，具體支持的請求方法可以參考官網 method 有效值
不過我們通常不會直接使用，而是進過一系列的封裝以方便我們的使用，具體封裝介面使用會在隨根據頁面數據請求一並展示。
❻ uniapp網路調試問題匯總
分析 ：app端無法解析業務數據data；但是響應頭與h5端相比多了3個android相關的參數，即 X-Android-Sent-Millis 、 X-Android-Response-Source 和 X-Android-Received-Millis 。
解決 ：修改該uni-app項目的配置文件mainfest.json，選擇App常用其他設置，自定義組件模式默認是開啟的， 關閉自定義組件模式 並 重啟開發工具 即解決app端無法解析業務數據的問題，此時app端獲取到的響應頭的參數與h5端是一樣的。
(1) 請求伺服器A中的介面a（app端和h5端都能請求到業務數據）
(2) 請求伺服器B中的介面b
問題 ：app端請求的業務數據data一直為「200 OK」，但h5端可以請求到業務數據。
分析 ：應該是響應頭的問題。
總結 ：h5端正常解析，但是app端數據解析異常，可能原因是不同語言對header解析不一樣（有些語言是弱語言，兼容性沒有那個大）。
❼ uniapp 頁面跳轉傳值和接收
首先介紹最原始的跳轉方法，類似於html中的 a 標簽，不過在uniapp中需要將 a 標簽換成
<navigator url='跳轉的地址'>……</navigator>
下面我們來重點介紹下跳轉傳值的方法
<view @tap="toOpportnity(item.id)">轉商機</view>；
寫一個onLoad函數
對象傳參的接收方法
單個參數的接收，這里使用id來進行介紹
首先要把傳遞過來的id進行賦值
請求介面，介面的url地址後面要加上傳遞過來的id【 /${this.id}/ 】
完整步驟如下：
對象傳參報錯解決方案（詳細請看本篇文章： https://www.cnblogs.com/sxdpanda/p/13304425.html ）
GET : 請求頁面， 並返回頁面內容【問伺服器要數據】。
POST : 大多用於提交表單或上傳文件，數據包含在請求體中【把數據提交給伺服器】。
HEAD : 類似於GET請求，只不過返回的響應中沒有具體的內容，用於獲取報頭。
PUT : 從客戶端向伺服器傳送的數據取代指定文檔中的內容【修改伺服器上的數據】。
DELETE : 請求伺服器刪除指定的頁面。
CONNECT : 把伺服器當作跳板，讓伺服器代替客戶端訪問其他頁面。
OPTIONS : 允許客戶端查看伺服器的性能。
TRACE : 回顯伺服器收到的請求，主要用於測試或診斷。
❽ uni-app request 請求庫-- iros使用
version ：1.1.1
iros的主要功能是讓uni-app開發者更方便的請求數據
使用方法：
1、npm i iros
2、在項目目錄下新建iros文件夾
3、創建config.js(存放iros的配置文件)
4、在main.js中引入config.js文件，將iros掛載到vue原型上
5、在頁面中使用
iros集成了一些常用的小工具
❾ uniapp上傳圖片至伺服器，獲得在線圖片鏈接預覽（實戰）
功能需求：
前端選擇本地文件，將選擇好的文件顯示在界面上進行預覽，可同時選擇四張進行預覽。
思路如下：
前端選擇本地的png、jpg、等格式的圖片，將圖片以二進制的形式傳到後端伺服器，後端對二進制圖片進行處理，返回給前端一個伺服器鏈接在線圖片，在瀏覽器就可以打開鏈接訪問的那種。然後前端將這個圖片鏈接渲染在頁面進行預覽。
首先
我們看一下uniapp的官方文檔：
https://uniapp.dcloud.io/api/media/image?id=chooseimage
大概是這樣的
先寫一個模擬的demo
1：首先我是是用了colorUI的框架，在項目裡面引入
在page底下的vue文件引入
這樣一來，就不需要寫什麼樣式了，直接使用寫好的就行了。
效果是這樣的
每次選完圖片之後顯示在頁面上，我這里設置了最多可以選擇四張，圖片鏈接使用了臨時的blob，接下來就要使用後端小夥伴給的介面，將自己本地的二進制文件傳給他了。
在 chooseImage 選擇好圖片之後，寫一個成功的回調函數，在回到函數裡面添加一個圖片上傳的方法uploadFile，在方法裡面添加url，等參數。
若是請求成功
則返回一個圖片鏈接
添加介面之後 的，demo如下：
❿ uniapp框架下H5上傳文件
背景：
在 uniapp 開發中， uni.chooseImage 選擇文件進行上傳到伺服器。在 app plus 的情況加可以使用 uni.uploadFile 。但是在 H5 的條件下選擇文件的格式為 blob:file:///1234567777 ，沒有辦法使用 uni.uploadFile 。目前可以使用 XMLHttpRequest 上傳。