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 上传。