【uniapp】uniapp基础入门到精通，由浅入深
一、前言
很早就想学习一下uniapp了，一直没有时间,最近刚好项目需要用到，所以最近就开始学习，顺便记录一下。
二、什么是uni-app？
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。
DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群，开发者可以放心选择。
uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。
如果没有uniapp，我们想在app，h5，小程序里运行我们的项目，那么我们至少要开发4套不同平台的代码，uni真正的好处就是我们只需要开发一套代码就可以在主流的平台上全平台运行。
官方开发文档：https://uniapp.dcloud.net.cn/
三、开发者工具
1、下载安装
所谓工欲善其事，必先利其器。我们开发uniapp肯定要有一个得心应手的开发者工具。我们开发uniapp的工具就是HBuilderX
节约时间，我就不解释怎么安装了。
2、认识界面布局
四、创建第一个uni-app项目
uniapp是基于vue框架，所以如果你会vue的话，来学uniapp会很简单
uniapp的开发规范和小程序相似，所以如果你跟着学过小程序，再来学uniapp就能很快的入门。
1、创建一个新的uniapp项目
在点击工具栏里的文件 -> 新建 -> 项目
然后在弹出的创建页面做以下配置
建议：
- 项目名称：随便取，可以用汉字，但是尽量用英文或者拼音
- 项目路径：一般保持默认即可，不过我个人比较喜欢放在桌面，这样后面找代码方便些。
- 选择模板：学习期间用默认空白模板即可，后面我们学的差不多了，就可以使用官方提供的模板，进行快速开发了。
- vue版本：因为我们的uniapp是基于vue开发的，所以这里要选择vue版本，既然我们学习，就建议大家学习最新的，用vue 3这个版本就可以了
- 学习期间，我们不使用uniCloud和gitCode代码托管平台，所以这两个选项不用勾选即可。所有这些设置完，就可以点击创建了。
创建好的项目如下
学过微信小程序开发的同学大概可以看出来，uniapp项目其实和小程序项目很相似的。
一些组件，语法也很相似，因为uniapp就是基于vue框架的，而小程序呢也是借鉴了vue。所以你学过石头哥的小程序课程，再来学uni，肯定学的很快的。
2、项目目录介绍
一个完整的uni项目的目录结构如下，我们后期随着学习的深入会逐个带大家学习，所以目前阶段，大家只需要大致知道就行，没有必要死记硬背下来。
大家可以先对照着官方给出的目录结构，大致的知道我们创建的第一个项目里每个文件都是什么作用。
我这里用通俗的话给大家说下我们新建项目的目录结构，方便大家理解
- pages：所有页面存放的目录，我们目前只有一个index页面，后面再创建别的页面，比如个人中心，列表页，详情页等，都是放在这个pages文件里
- static：静态资源目录，例如图标，图片，音视频等
- App.vue：我们的根组件，用来配置App全局样式以及监听，所有页面的切换都是在这里进行的。
- index.html：就是我们的uniapp使用的vue框架生成的单页面文件，有点类似我们的网页的index页。
- main.js：项目初始化入口文件，主要用来初始化一些需要的东西
- manifest.json ：用来指定应用名称、appid、logo、版本等打包信息，后面我们配置微信小程序，支付宝小程序等，可以在这里配置
- pages.json ：配置页面路由、导航条、选项卡等页面类信息，决定页面文件的路径，窗口样式，导航栏，底部的tabbar等。
- uni.scss ：这里是uni-app内置的常用样式变量，方便控制应用的整体风格，比如颜色，边框等
五、项目的预览
我们项目的预览常用的有下面几个方式。为了降低大家的学习成本，我们学习阶段主要运行到内置浏览器，后面会慢慢教大家运行到小程序或者手机上。
1、运行项目到内置浏览器
安装完成，然后再次点击运行到内置浏览器，就可以在内置浏览器上预览我们的项目了
这时候我们下面也多了一个调试器，调试器主要就是用来打印一些日志信息，来帮助我们调试项目，辅助修复bug。
2、运行到微信小程序开发者工具
我们开发好的项目不仅要运行在浏览器里，还需要运行到小程序里，所以我们这里以微信小程序为例，其他的支付宝，百度小程序等，都是一样的原理。
如下图所示，直接点击运行–》运行到小程序模拟器–》微信开发者工具
正常我们第一次运行，会弹出以下弹窗。我们要关联下开发者工具。
所以要先去安装小程序开发者工具。点击上图的链接即可。然后去下载对应的版本即可。
安装后，配置路径
点击确定，就可以编译运行到我们的小程序开发者工具了。有时候第一次运行会报如下错误。打不开小程序开发者工具。
这个时候就要按照上的提示，配置下了。打开微信开发者工具 -> 设置 -> 安全设置，将服务端口开启。
打开服务端口
然后，先停止运行
然后再重新运行到微信小程序即可。
编译后，可以看到我的uniapp项目就可以编译成微信小程序，运行起来了。
并且会编译成微信小程序的代码。这就是uniapp的强大之处。
我们后面运行到支付宝，抖音小程序等都是一样的流程。
3、运行在手机或者模拟器
打开模拟器或者手机
配置模拟器的端口
各模拟器 端口号：
-
夜神模拟器端口号：62001
-
海马模拟器端口号：26944
-
逍遥模拟器端口号：21503
-
MuMu模拟器端口号：7555
-
天天模拟器端口号：6555
运行到模拟器
六、页面内容构成
1、页面布局，样式，js逻辑
uniapp的页面布局，样式，逻辑都是写在同一个.vue文件里
2、打印日志
日志打印的语法如下
console.log("我的打印出来的日志内容")
我们在控制台日志里打印出来了我们写的日志，并且后面也告知我们这行代码写在了第18行。这样在日后的开发过程中，都可以快速的方便我们校验代码，定位问题，解决问题。
七、全局配置文件（pages.json）
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
1、globalStyle（全局样式）
官方文档：https://uniapp.dcloud.net.cn/collocation/pages.html#globalstyle
用于设置应用的状态栏、导航条、标题、窗口背景色等。以下我都只列举了个人认为比较常见的属性。
1.1 导航栏：背景颜色、标题颜色、标题文本
示例：
注意：如果你没有修改完全成功，或者都不生效，可能是设置了页面的配置样式导致的，它会覆盖掉全局样式配置中相同属性的样式。这是因为页面配置优先级高于全局配置。我们删除掉页面配置样式即可。
1.2 导航栏：开启下拉刷新、下拉背景、下拉样式
示例效果
注意：改完之后记得重新编译这很重要，不要点模拟器上边的重新加载，那没用，要点代码下方终端里面的重新运行（其实也就重新编译）。不然你按我下面的配置了大概率会发现没有生效。
局部下拉刷新
前结束的是全局下拉刷新，但是我们不推荐，我们希望那个页面有需要就开启，没有需要不要开启。
停止当前页面的下拉刷新
官方文档：https://uniapp.dcloud.net.cn/api/ui/pulldown.html#onpulldownrefresh
我们启用enablepulldownrefresh 会一直转圈，我们需要在页面书写，当处理完数据刷新后，调用uni.stopPullDownRefresh 停止当前页面的下拉刷新。
手动触发下拉刷新
官方文档：https://uniapp.dcloud.net.cn/api/ui/pulldown.html#onpulldownrefresh
调用uni.startPullDownRefresh(OBJECT)后触发下拉刷新动画，效果与用户手动下拉刷新一致。
2、pages（页面路由）
官方文档：https://uniapp.dcloud.net.cn/collocation/pages.html#pages
uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：
Tips：
- pages节点的第一项为应用入口页（即首页）
- 应用中新增/减少页面，都需要对 pages 数组进行修改
- 文件名不需要写后缀，框架会自动寻找路径下的页面资源
2.1 新建页面
官方文档：https://uniapp.dcloud.net.cn/collocation/pages.html
每次新建页面，均需在pages.json中配置pages列表；未在pages.json -> pages 中注册的页面，uni-app会在编译阶段进行忽略。
比如开发目录为：
则需要在 pages.json 中填写，同时也可以配置一下页面样式。
{
"pages": [
{
"path": "pages/index/index",
"style": { ... }
}, {
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录界面"
}
}
]
}
完成，我们先通过浏览器打开看看，输入该路径即可看到刚刚创建的页面。
而且发现它成功覆盖了全局样式的导航栏标题文字。
2.2 删除页面
删除页面时，需做两件工作：
- 删除.vue文件、.nvue、.uvue文件
- 删除pages.json -> pages列表项中的配置 （如使用HBuilderX删除页面，会在状态栏提醒删除pages.json对应内容，点击后会打开pages.json并定位到相关配置项）
2.3 页面改名
操作和删除页面同理，依次修改文件和 pages.json
3、tabBar
官方文档：https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar
如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。
Tips
- 当设置 position 为 top 时，将不会显示 icon
- tabBar 中的 list 是一个数组，只能配置最少 2 个、最多 5 个 tab，tab 按数组的顺序排序。
- tabbar 切换第一次加载时可能渲染不及时，可以在每个 tabbar 页面的 onLoad 生命周期里先弹出一个等待雪花（hello uni-app 使用了此方式）
- tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的 onShow，不会再触发 onLoad。
- 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做- - 顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。
常用属性
其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：
3.1 示例
注意：改完之后记得重新编译这很重要，不要点模拟器上边的重新加载，那没用，要点代码下方终端里面的重新运行（其实也就重新编译）。不然你按我下面的配置了大概率会发现没有生效。
- 最基本的使用
- 添加icon图标
- 设置默认颜色和选中颜色
- 设置背景颜色
- tabbar 上边框的颜色
可选值black/white
- tabBar顶部显示
注意：可选值bottom、top，top 值仅微信小程序支持
3.2 设置中间按钮
我们看到很多小程序，它的底部导航栏很多都有哪种中间图标突起的，例如这样：
它是怎么做到的呢？
其实也是tabbar里面的配置项，midButton属性，和list属性评级即可。
midButton 属性说明
示例
注意：中间按钮 仅在 list 项为偶数时有效，且目前仅在app、H5显示，微信小程序不支持。且midButton没有pagePath，需监听点击事件，自行处理点击后的行为逻辑，具体可以参考：https://uniapp.dcloud.net.cn/api/ui/tabbar.html#ontabbarmidbuttontap
如果我们希望小程序端也有这个功能怎么办呢？其实可以自定义tabbar，把原生的tabbar隐藏掉。具体实现这里就不写了。当然你也可以去uniapp插件市场搜索人家弄好的插件，这样更简单一点，跟着要求一步一步调整即可。
八、页面样式与布局
1、尺寸单位
官方文档：https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D
uni-app 支持的通用 css 单位包括 px、rpx。
rpx即响应式px，一种根据屏幕宽度自适应的动态单位，以750宽的品目为基准，750rpx恰好为屏幕宽度，屏幕变宽，rpx实际显示效果会等比放大。
对比效果
效果
可以看到px没有自适应的效果，容器的宽度一直不变，宽度不会根据不同设备的屏幕宽度调整占比，效果很差，所以实际开发都推荐使用rpx，这样能用很好的适配性。
2、样式导入
官方文档：https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#%E6%A0%B7%E5%BC%8F%E5%AF%BC%E5%85%A5
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。
比如我新建一个css文件，随便写点测试内容
样式导入，可以看到生效了
3、选择器
官方开发文档：https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#%E9%80%89%E6%8B%A9%E5%99%A8
目前支持的选择器有：
注意：
-
在 uni-app 中不能使用 * 选择器。
-
微信小程序自定义组件中仅支持 class 选择器
-
page 相当于 body 节点，例如：
<!-- 设置页面背景颜色，使用 scoped 会导致失效 -- > page { background-color: #ccc; } -
web端可以使用html、body、:root等选择器。由于页面的css样式隔离，且html节点并未添加data-xxx属性，html、:root写在页面style内无效，只能写在App.vue内。
4、全局样式与局部样式
官方文档：https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#全局样式与局部样式
定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
注意：
- App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。
- nvue 页面暂不支持全局样式
5、使用sass
我们在项目根目录下，可以看到一个 uni-scss文件。
uni-scss 是 uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
那么如何使用呢？
首先安装sass插件
使用，记得在style标签中加上属性 lang="scss"
九、uniapp的生命周期
1、应用的生命周期
官方文档：https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle
生命周期的概念：一个对象从创建、运行、销毁的整个过程。
生命周期函数：在生命周期中每个阶段会伴随着函数的触发，这些函数被称为生命周期函数。
uni-app支持如下应用生命周期函数
默认工程App.vue里已经给我们写好了几个生命周期函数
比如我们可以新增一个onError生命周期函数
当 uni-app 报错时触发，效果如下
2、页面的生命周期
官方文档：https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle
uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数
示例效果，切换到别的界面或者最小化页面再打开时，调用onHide
上拉加载
这里我觉得有必要单独介绍一下onReachBottom生命周期函数，可以用于实现上拉加载效果
我们发现还没有触底就开始说触底了，这是因为有默认的触底距离 。我们可以在pages.json中设置默认触底距离为0
然后再来测试一下，触底之后，我们可以给他加载下一页数据。
十、组件
官方的组件如下：https://uniapp.dcloud.net.cn/component/view.html，我们接下来就会把一些常用的组件讲给大家。
1、view组件
官方文档：https://uniapp.dcloud.net.cn/component/view.html
view组件：相当于一个盒子，可以用来装一些别的组件。它类似于传统html中的div，用于包裹各种元素内容。所有的视图组件，包括view、swiper等，本身不显示任何可视化元素。它们的用途都是为了包裹其他真正显示的组件。
2、text组件
官方文档：https://uniapp.dcloud.net.cn/component/text.html
text组件：文本组件。用于包裹文本内容。
属性说明
space 值说明
3、input组件
官方文档：https://uniapp.dcloud.net.cn/component/input.html
input组件：单行输入框。
输入框input有很多属性，我这里把一些常用的属性带着大家学习下。其他的大家可以自己去看官方文档详细学习。
我们以type属性为例，我们的type属性有下面一些属性值。
比如我们给input的type设置为number属性值，那么我们在输入内容的时候，只可以输入数字。
4、button组件
官方文档：https://uniapp.dcloud.net.cn/component/button.html
button 组件：是按钮组件，自带默认的按钮效果。
button按钮有很多属性，我这里把一些常用的属性带着大家学习下。其他的大家可以自己去看官方文档详细学习
如我们设置的一些常用的按钮属性
5、图片image组件
官方文档：https://uniapp.dcloud.net.cn/component/image.html
image组件：主要用来显示图片，可以是本地图片，也可以是网络图片。
我们的image组件常用的就是src，mode，lazy-load这三个属性，所以接下来会重点给大家讲解下这三个属性。
src属性显示本地或者网络图片
当我们不给image设置宽高时，image组件的默认宽度是320px，高度240px。
mode设置图片裁剪、缩放的模式
<image mode="scaleToFill" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"></image>
lazy-load图片懒加载
<scroll-view scroll-y="true" class="scroll-Y">
<image lazy-load="true" src="https://picx.zhimg.com/80/v2-01550ac39ce4b96584cbca1cbc2f4ad1_720w.webp?source=1def8aca"></image>
</scroll-view>
image组件是支持图片懒加载的，图片懒加载。只针对page与scroll-view下的image有效，其实就是当我们一个列表页有很多图片时，我们可以使用懒加载，来加快页面加载速度。使用懒加载时，我们只需要给image设置lazy-load就可以了。
6、icon图标
官方文档：https://uniapp.dcloud.net.cn/component/icon.html
属性说明
各平台 type 有效值说明：
效果
由于 icon 组件各端表现存在差异，可以通过使用 字体图标 的方式来弥补各端差异。
字体图标
uniapp默认提供的图标就这些，如果希望使用个性化的图标，那么就可以使用字体图标。
uniapp 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：
- 支持 base64 格式字体图标。
- 支持网络路径字体图标。
- 小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。
- 网络路径必须加协议头 https。
- 从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。
- 从 http://www.iconfont.cn 上下载的字体文件，都是同名字体（字体名都叫 iconfont，安装字体文件时可以看到），在 nvue 内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。
- 使用本地路径图标字体需注意：
- 为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；
- 字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；
- 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
@font-face { font-family: test1-icon; src: url('~@/static/iconfont.ttf'); }
话不多说，我们直接演示
进入阿里云矢量图标库，选择想要的图标加入购物车，然后点击下载代码
下载的文件如下
除了html页面（当然不去掉也可以）其他都复制到项目的中（一般是放在static文件夹里）
字体文件的引用路径推荐使用以 ~@ 开头的绝对路径
我选择在App.Vue的文件中引用，这样就可以全局使用它
ok，这样就算配置完成了，我们就可以在页面中使用了。
我们打开下载下来的文件中的html页面，找到图标对应的字体样式进行使用，使用时去掉前面的 . 号。
使用效果
字体图标的颜色、大小等，我们也可以通过css样式去改变。
十一、数据绑定，函数，事件
1、数据绑定
组件外的数据绑定(文本插值)
我们在页面布局里写数据，一般情况下可以直接写，比如下面我们可以用很多个text里显示很多数据。
但是假设我们有一个这样的需求，需要把测试字样改成其他。那就得改很多遍，这样就导致效率低下了。所以我们这里可以用数据动态绑定来提升效率。
数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值，就是用{{}}包裹你的值，然后这个值就可以动态的显示了。
我们想改字，就只需要改title的值就行了。如下所示。
这样我们就明白用数据绑定的好处，其实我们后面的开发中，除了那种死的不会变的直接写死外，其他的后面可能需要改变的最好都用数据绑定。
关于数据绑定的语法需要大家记住，一定要多练，因为后面会经常用的。
这里其实使用了vue的数据绑定，而vue官方又叫这种数据绑定为文本插值。其实就是把数据动态的绑定到我们组件外。
组件内的数据绑定(v-bind属性绑定)
我们上面一节学习的文本插值式的数据绑定，那是把我们的数据动态的绑定到组件外。
如果我们想动态的绑定组件内的属性数据呢。比如我们的image图片组件的src属性，我们的图片链接不想写死，想动态的去替换。这个时候就可以用v-bind: 动态地绑定属性了，可以用于响应式地更新。
v-bind:也可以缩写为‘ : ’
这里要注意文本插值和属性绑定是有区别的
- 文本插值绑定数据，需要用{{}}
- v-bind属性绑定，不需要{{}}
2、绑定数据的读取
我们上面通过{{}}或者v-bind绑定数据到data里，我们绑定的数据有时候也需要用，而使用绑定的数据，可以通过this.数据名来使用
可以看到我们通过this.url就可以获取data里的数据。
3、函数的学习
函数的两种使用方式如下图：
我们的函数一般是写在js逻辑区域的methods里，比如我们定义一个getname函数，有下面两种写法。
推荐第一种方式定义函数，这更简单。
4、点击事件
接下来我们学习事件，我们常用的事件如下，这里我们先重点讲解下@click点击事件和@input获取输入值的事件
我们可以使用 v-on 指令来监听点击事件，从而执行 JavaScript 代码。v-on 指令可以缩写为 @ 符号。
v-on:click="methodName"
或
@click="methodName"
推荐大家用@简写的方式
不填写时，默认第一个参数就是 event 对象。
<template>
<div>
<button @click="onClick">点击</button>
</div>
</template>
<script>
export default {
methods: {
onClick(e) {
console.log(e);
}
}
}
</script>
特殊变量 $event。 内联处理器中的方法 和 API 指令 v-on 中都有介绍。
必须是 $event 的写法，该参数位置可随意，也可放在第一个。
<template>
<div>
<button @click="onClick('hello', $event)">点击</button>
<!-- <button @click="onClick($event, 'hello')">点击</button> -->
</div>
</template>
<script>
export default {
methods: {
onClick(str, e) {
console.log(str, e);
}
}
}
</script>
5、获取用户输入信息
获取input输入框里用户输入的内容有两种方式
- @input结合函数
- v-model数据绑定获取输入内容(推荐)
@input结合函数获取输入内容
我们获取用户输入会用到@input事件，其实我们在学习input组件时，官方有给出这个属性的。
看官方的文档，可以知道@input主要是为了获取用户的输入内容。
@input的定义如下图，其中的getname就是我们定义的函数，用来接收用户输入的。
在布局里定义好bindinput事件以后，在js页面再定义一个和事件名一样的函数即可。
然后就可以监听用户输入了
v-model双向绑定数据获取输入内容
-
v-model是什么
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。 -
为什么使用v-model
v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。 -
v-model的原理简单描述
v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化
具体的语法如下：
这样当我们用户输入内容后，输入的内容就可以绑定到name上，后面直接使用就行了。
下面来对比下@input和v-model的代码
可以发现v-model比着@input，很明显的节省了一步定义函数getname，所以这里推荐大家使用v-model来获取input输入内容。
另外，v-model 还可以用于各种不同类型的输入数据的获取，用于在表单类元素(单选、多选、下拉选择、输入框等)上双向绑定数据，后面学习中用到我会再做具体讲解。
十二、网络请求调用外部接口
官方文档：https://uniapp.dcloud.net.cn/api/request/request.html
1、uni.request(OBJECT)
发起网络请求。
OBJECT 参数说明
data 数据说明
最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。转换规则如下：
对于 GET 方法，会将数据转换为 query string。例如 { name: ‘name’, age: 18 } 转换后的结果是 name=name&age=18。
对于 POST 方法且 header[‘content-type’] 为 application/json 的数据，会进行 JSON 序列化。
对于 POST 方法且 header[‘content-type’] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。
method 有效值
注意：method有效值必须大写，每个平台支持的method有效值不同，详细见下表。
success 返回参数说明
测试示例
2、二次封装请求对象
如果像上面那样，每次调用我都要去写请求的ip地址端口号，显得有些麻烦。
假如说ip地址或者端口号变了，那就得每一个请求都要逐一修改，这是很恐怖的！
所以，我们需要统一进行二次封装，对这些公共的参数统一进行设置或者修改。减少冗余，提高效率。
新增utils/request.js
const BASE_URL = 'http://localhost:8000'
export const myRequest = (options) => {
return new Promise((resove,reject)=>{
uni.request({
url: BASE_URL + options.url,
method: options.method || 'GET',
data: options.data || {},
success: (res) => {
if(res.data.code != 1){
return uni.showToast({
title:'获取数据失败'
})
}
resove(res)
},
fail: (err) => {
uni.showToast({
title:'请求接口失败'
}),
reject(err)
}
})
})
}
修改main.js，将我们刚刚测封装的请求对象挂载到vue原型上
测试调用
又因为我们的请求是通过Promise返回的，所以我们可以异步的去调用方法。
演示结果
十三、数据缓存
官方文档：https://uniapp.dcloud.net.cn/api/storage/storage.html
1、uni.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
OBJECT 参数说明
示例
调用后浏览器查看存储数据位置
微信小程序查看
2、uni.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容。
OBJECT 参数说明
success 返回参数说明
示例
3、uni.removeStorage(OBJECT)
从本地缓存中异步移除指定 key。
OBJECT 参数说明
示例
十四、图片的上传和预览
官方文档：https://uniapp.dcloud.net.cn/api/media/image.html
1、uni.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。
App端如需要更丰富的相机拍照API（如直接调用前置摄像头），参考plus.camera
微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替。
OBJECT 参数说明
crop 参数说明
success 返回参数说明
File 对象结构如下
示例
<template>
<view>
<button :onClick="uploadImg">选择图片</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad(options) {
console.log("页面加载了", options);
},
methods: {
uploadImg(){
console.log("点击")
uni.chooseImage({
count: 6, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
console.log(res);
}
});
}
}
}
</script>
<style>
</style>
其中，res.tempFilePaths就是图片文件的临时路径集合。
2、uni.saveFile
注：前面获取的都只是文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 uni.saveFile，在应用下次启动时才能访问得到。
官方文档：https://uniapp.dcloud.net.cn/api/file/file.html#savefile
平台差异说明
注意：不支持H5。
saveFile 会把临时文件移动，因此调用成功后传入的 tempFilePath 将不可用。
我们可以选择使用微信小程序进行测试
<template>
<view>
<button :onClick="uploadImg">选择图片</button>
<image :src="savedFilePath"/>
</view>
</template>
<script>
export default {
data() {
return {
savedFilePath:""
}
},
onLoad(options) {
console.log("页面加载了", options);
},
methods: {
uploadImg(){
console.log("点击")
uni.chooseImage({
success: function (res) {
var tempFilePaths = res.tempFilePaths;
uni.saveFile({
tempFilePath: tempFilePaths[0],
success: function (res) {
this.savedFilePath = res.savedFilePath; }
});
}
});
}
}
}
</script>
如果uni.chooseImage在微信小程序上点击没反应，大概率是隐私协议的问题，可以看看：小程序uni.chooseImage无法调起窗口选择图片，也不执行，这是为什么呢？
十五、插件推荐
1、uView
介绍
uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。但目前除微信小程序，其它小程序平台的兼容可能存在一些问题，后续会针对这方面持续优化。
缺点就是目前uView仅支持Vue2，不知道未来会不会支持Vue3。
官方文档：https://www.uviewui.com/components/intro.html
安装
在uni-app插件市场](https://ext.dcloud.net.cn/plugin?id=1593)右上角选择uni_modules版本下的使用HBuilderX导入插件，导入到对应的项目中即可。
下载安装方式配置
安装scss/sass编译插件
uView依赖SCSS，您必须要安装此插件，否则无法正常运行。
请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装， 如不生效，重启HX即可。
引入uView主JS库
在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。
// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。
/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';
引入uView基础样式
注意！
在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "@/uni_modules/uview-ui/index.scss";
</style>
配置easycom组件模式
此配置需要在项目根目录的pages.json中进行。
温馨提示
- uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
- 请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。
- 如果您是通过uni_modules形式引入uView，可以忽略此配置
// pages.json
{
// 如果您是通过uni_modules形式引入uView，可以忽略此配置
"easycom": {
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
如何使用
通过前面的配置之后，在某个页面可以直接使用组件，无需通过import引入组件。
<template>
<view>
<u-button @click="show = true">打开ActionSheet</u-button>
<u-button type="primary" text="确定"></u-button>
<u-button type="primary" :plain="true" text="镂空"></u-button>
<u-button type="primary" :plain="true" :hairline="true" text="细边"></u-button>
<u-button type="primary" :disabled="disabled" text="禁用"></u-button>
<u-button type="primary" loading loadingText="加载中"></u-button>
<u-button type="primary" icon="map" text="图标按钮"></u-button>
<u-button type="primary" shape="circle" text="按钮形状"></u-button>
<u-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
<u-button type="primary" size="small" text="大小尺寸"></u-button>
</view>
</template>
效果
其他组件的使用可以直接参考官方文档：https://www.uviewui.com/components/color.html
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
31
0- 0
已为社区贡献1条内容
所有评论(0)