Uniapp

项目目录

pages所有的页面存放目录

static静态资源日录，例如图片等

App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的。是页面入口文件，可以调用应用的生命周期 函数。

main.js是我们的项目入口文件。主要作用是初始化vue实例并使用富要的插件。

manifest.json文件是应用的配置文件。用于指定应用的名称、图标、权限等。

pages.json文件用来对uni-app进行全局配置。决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar等

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边枢风格。uni.scss 文件里预置了一批 SC变量预置. unpackage就是打包目录。在这里有各个平台的打包文件

新建文件

components 组件文件夹

**组件存放目录 为了实现多蹦兼容。综合考虑编译速度、运行性能等因素，uni -app约定了如下开发规范: ●页面文件遵循Yue单文件组件(SFO规范 ●组件标签歡近小程序规范，详见uni-app组件规范 ●按口能力(JS API)靠近微信小程序规范。但雷将前缀wox 普换为uni. 详见uni-app按口规范 ●数据绑定及事件处理同Wue.js 规范，同时补充了App及页面的生命周期 ●为兼容多端运行，建议使用flex布局进行开发

组件引入

<Test/>
import Test from '/pages/test/test'
components:{
    Test
}

组件通信

父传子

<son :msg="信息">    父组件传输信息
​
exprot default{
    prop:['msg']    子组件接受信息
} 

子传父

<button @click="fn">发送信息<button>
<script>
export default{
    method{
        fn(){
            this.$emit(msg,'信息')  //子组件发送信息 msg:信息
        }
    }
}
</script>
​
<son @aaa='msg'/>
<script>
export default{
    method{
        aaa(msg){
            console.log(msg)     父组件接受数据 信息
        }
    }
}
</script>

uni.$emit(eventName,OBJECT) 触发自定义事件

触发全局的自定义事件。附加参数都会传给监听器回调。

uni.$emit('update',{msg:'页面更新'})

属性	类型	描述
eventName	String	事件名
OBJECT	Object	触发事件携带的附加参数

uni.$on(eventName,callback) 注册自定义事件

监听全局的自定义事件。回调函数会接收所有传入事件触发函数的额外参数。

uni.$on('update',data=>{
    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})

属性	类型	描述
eventName	String	事件名
callback	Function	事件的回调函数

pages.json

pages 页面节点

"pages": [{                             //pages数组中第一项表示应用启动页
        "path": "pages/component/index",
        "style": {
            "navigationBarTitleText": "组件位置"
        }
}],

uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：

属性	类型	默认值	描述
path	String		配置页面路径
style	Object		配置页面窗口表现，配置项参考下方 pageStyle
needLogin	Boolean	false	是否需要登录才可访问

style 每个页面的状态栏

用于设置每个页面的状态栏、导航条、标题、窗口背景色等。

页面中配置项会覆盖 globalStyle 中相同的配置项

属性	类型	默认值	描述	平台差异说明
navigationBarBackgroundColor	HexColor	#F8F8F8	导航栏背景颜色（同状态栏背景色）	APP与H5为#F8F8F8，小程序平台请参考相应小程序文档
navigationBarTextStyle	String	black	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面生命周期。
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期

globalStyle 总状态栏

用于设置应用的状态栏、导航条、标题、窗口背景色等。

属性	类型	默认值	描述	平台差异说明
navigationBarBackgroundColor	HexColor	#F8F8F8	导航栏背景颜色（同状态栏背景色）	APP与H5为#F8F8F8，小程序平台请参考相应小程序文档
navigationBarTextStyle	String	black	导航栏标题颜色及状态栏前景颜色，仅支持 black/white	支付宝小程序不支持，请使用 my.setNavigationBar
navigationBarTitleText	String		导航栏标题文字内容
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意	微信小程序 7.0+、百度小程序、H5、App（2.0.3+）
backgroundColor	HexColor	#ffffff	下拉显示出来的窗口的背景色	微信小程序
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light	微信小程序
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面生命周期。
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期

tabBar 导航栏

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级，以及 tab 切换时显示的对应页。

• 当设置 position 为 top 时，将不会显示 icon

• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

• tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。

  "tabBar": {
      "color":"#fff",
          "list":[{
              "text":"首页",
              "pagePath":"pages/index/index",
              "iconPath":"",
              "selectedIconPath":""
          },{
              "text":"我的",
              "pagePath":"pages/aaa/aaa",
              "iconPath":"",
              "selectedIconPath":""
      }]
  }

属性	类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar 上边框的颜色，可选值 black/white，也支持其他颜色值	App 2.3.4+ 、H5 3.0.0+
blurEffect	String	否	none	iOS 高斯模糊效果，可选值 dark/extralight/light/none（参考:使用说明）	App 2.4.0+ 支持、H5 3.0.0+（只有最新版浏览器才支持）
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top	top 值仅微信小程序支持

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

属性	类型	必填	说明	平台差异
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效

condition 启动模式配置 仅开发期间生效

仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

"condition":{
    "current":0，        //list索引值
    "list":[
        {
            "name":"",  //名字
            "path":"",  //地址
            "query":""  //参数
        }
    ]
}

属性	类型	是否必填	描述
current	Number	是	当前激活的模式，list节点的索引值
list	Array	是	启动模式列表

list说明：

属性	类型	是否必填	描述
name	String	是	启动模式名称
path	String	是	启动页面路径
query	String	否	启动参数，可在页面的 onLoad 函数里获得

组件基本使用

text

text组件相当于行内标签，在同一行显示

除了文本节点以外的其他节点都无法长按选中

属性名	类型	默认值	说明	平台差异说明
selectable	Boolean	false	文本是否可选
user-select	Boolean	false	文本是否可选	微信小程序
space	String		显示连续空格	钉钉小程序不支持
decode	Boolean	false	是否解码	百度、钉钉小程序不支持

space 值说明

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

view

视图容器 类似于传统html中的div

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

button

属性名	类型	默认值	说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标

rich-text 富文本

属性名	类型	默认值	说明	平台兼容
nodes	Array / String	[]	节点列表 / HTML String
space	string		显示连续空格	App、H5、微信基础库2.4.1+详见、QQ小程序、抖音小程序、快手小程序详见
selectable	Boolean	true	富文本是否可以长按选中，可用于复制，粘贴等场景	百度小程序（仅真机支持，基础库 3.150.1 以下版本默认为 false）
image-menu-prevent	Boolean	false	阻止长按图片时弹起默认菜单（将该属性设置为image-menu-prevent或image-menu-prevent="true"），只在初始化时有效，不能动态变更；若不想阻止弹起默认菜单，则不需要设置此属性	百度小程序
preview	Boolean		富文本中的图片是否可点击预览。在不设置的情况下，若 rich-text 未监听点击事件，则默认开启。未显示设置 preview 时会进行点击默认预览判断，建议显示设置 preview	百度小程序
@itemclick	EventHandle		拦截点击事件（只支持 a、img标签），返回当前node信息 event.detail={node}	H5 (3.2.13+)、App-Vue (3.2.13+)

image

属性名	类型	默认值	说明	平台差异说明
src	String		图片资源地址
mode	String	'scaleToFill'	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载。只针对page与scroll-view下的image有效	微信小程序、百度小程序、抖音小程序、飞书小程序
fade-show	Boolean	true	图片显示动画效果	仅App-nvue 2.3.4+ Android有效
webp	boolean	false	在系统不支持webp的情况下是否单独启用webp。默认false，只支持网络资源。webp支持详见下面说明	微信小程序2.9.0
show-menu-by-longpress	boolean	false	开启长按图片显示识别小程序码菜单	微信小程序2.7.0
draggable	boolean	true	是否能拖动图片	H5 3.1.1+、App（iOS15+）
@error	HandleEvent		当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
@load	HandleEvent		当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

mode 有效值

有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
缩放	heightFix	高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

scroll-view 可滚动视图区域。用于区域滚动。

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number/String	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number/String	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number/String		设置竖向滚动条位置
scroll-left	Number/String		设置横向滚动条位置
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
show-scrollbar	Boolean	false	控制是否出现滚动条

样式

●rpx 即响应式px.一种 根据屏幕寬度自适应的动态单位。以750宽的屏幕为基准。750rpx恰好为屏幕宽度。屏 幕变寬。rpx实际显示效果会等比放大。 ●使用@import语句可以导入外联精式表，@import 后跟需要导入的外联样式表的相对路径。用;表示语句结 束 ●支持基本常用的选择器class. id. element等 ●在uni-app 中不能使用。选择器。 ●page相当于body 节点 ●定义在App.vue中的样式为全局样式，作用于每一“个页面。 在pages目录下的vue文件中定义的样式为局部 样式，只作用在对应的页面。并公覆蓝App.vue中相同的选择器。 ●uni-app支持使用字体图标，使用方式与普通web项目相同。需要注意以下儿点: 。字体文件小于40kb. uni-app 公自动将其转化为base64格式: 。字体文件大于等于40kb. 雷开发者自己转换，否则使用将不生效: 。字体文件的引用路径推荐使用以~@开头的绝对路径。

@font-face {
	font-family: test1-icon;
	src: url('~@/static/iconfont.ttf');
}

应用生命周期

// 只能在App.vue里监听应用的生命周期
	export default {
		onLaunch: function(options) {
			console.log('App Launch')
			console.log('应用启动路径：', options.path)
		},
		onShow: function(options) {
			console.log('App Show')
			console.log('应用启动路径：', options.path)
		},
		onHide: function() {
			console.log('App Hide')
		}
	}

函数名	说明	平台兼容
onLaunch	当uni-app 初始化完成时触发（全局只触发一次），参数为应用启动参数，同 uni.getLaunchOptionsSync 的返回值
onShow	当 uni-app 启动，或从后台进入前台显示，参数为应用启动参数，同 uni.getLaunchOptionsSync 的返回值
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发	app-uvue 不支持

页面生命周期

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，其参数为上页面传递的数据，参数类型为Object
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成
onHide	监听页面隐藏
onUnload	监听页面卸载

函数

下拉刷新

onPullDownRefresh()函数 监听该页面用户下拉刷新事件

uni.stopPullDownRefresh() 函数 停止当前页面下拉刷新。

onPullDownRefresh(){
    console.log('触发刷新了')
    setTimeout(()=>{
        uni.stopPullDownRefresh()   //停止刷新
    },2000)
    
}

上拉加载

onReachBottom() 函数 监听页面底部触底事件

可在pages.json里定义具体页面底部的触发距离onReachBottomDistance

onReachBottom(){
    console.log('页面触底了')
}

网络请求

uni.request({})

uni.request({
    url: 'http://127.0.0.1:3000/list',
	success(res) {
		console.log(res);
	}
})

参数名	类型	必填	默认值	说明	平台差异说明
url	String	是		开发者服务器接口地址
data	Object/String/ArrayBuffer	否		请求的参数	App 3.3.7 以下不支持 ArrayBuffer 类型
header	Object	否		设置请求的 header，header 中不能设置 Referer	App、H5端会自动带上cookie，且H5端不可手动修改
method	String	否	GET	有效值详见下方说明
timeout	Number	否	60000	超时时间，单位 ms	H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
dataType	String	否	json	如果设为 json，会对返回的数据进行一次 JSON.parse，非 json 不会进行 JSON.parse
success	Function	否		收到开发者服务器成功返回的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

本地数据缓存

uni.setStorage({}) 异步存储

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口

uni.setStorage({
	key: 'storage_key',
	data: 'hello',
	success: function () {
		console.log('success');
	}
});

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.setStorageSync(KEY,DATA) 同步存储

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象

uni.getStorage(OBJECT) 获取

从本地缓存中异步获取指定 key 对应的内容。

uni.getStorage({
	key: 'storage_key',
	success: function (res) {
		console.log(res.data);
	}
});

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数，res = {data: key对应的内容}
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数	类型	说明
data	Any	key 对应的内容

uni.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

uni.getStorageSync('key');

参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key

uni.removeStorage(OBJECT)

从本地缓存中异步移除指定 key。

uni.removeStorage({
	key: 'storage_key',
	success: function (res) {
		console.log('success');
	}
});

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.removeStorageSync(KEY)

从本地缓存中同步移除指定 key。

uni.removeStorageSync('storage_key');

uni.clearStorage()

清理本地数据缓存。

媒体

uni.chooseImage({})

从本地相册选择图片或使用相机拍照。

参数名	类型	必填	说明	平台差异说明
count	Number	否	最多可以选择的图片张数，默认9	见下方说明
sizeType	Array<String>	否	original 原图，compressed 压缩图，默认二者都有	App、微信小程序、支付宝小程序、百度小程序
extension	Array<String>	否	根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。	H5(HBuilder X2.9.9+)
sourceType	Array<String>	否	album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
crop	Object	否	图像裁剪参数，设置后 sizeType 失效	App 3.1.19+
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数	小程序、App
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

• count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。

uni.previewImage(OBJECT)

预览图片。

<image v-for="(item,index) in list" :src="item" mode="" @click="preview(item)"></image>
preview(current){
    uni.previewImage({
        current,
        urls:this.list 
    })
}

参数名	类型	必填	说明	平台差异说明
current	String/Number	详见下方说明	详见下方说明
showmenu	Boolean	否	是否显示长按菜单，默认值为 true	微信小程序2.13.0
urls	Array<String>	是	需要预览的图片链接列表
indicator	String	否	图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。	App
loop	Boolean	否	是否可循环预览，默认值为 false	App
longPressActions	Object	否	长按图片显示操作菜单，如不填默认为保存相册	App 1.9.5+
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

跨端兼容

条件注释实现跨端兼容

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法： 以 #ifdef 加平台标识开头，以 #endif 结尾

template
<!-- #ifdef H5 -->
<text>只能在H5中看到</text>
<!-- #endif -->
script
// #ifdef H5
console.log("只在H5中打印")
// #endif
style
/* #ifdef H5 */
div{
    width:100%
}
/* #endif */

值	生效条件	版本支持
VUE3	uni-app js引擎版用于区分vue2和3，详情	HBuilderX 3.2.0+
VUE2	uni-app js引擎版用于区分vue2和3，详情
APP-PLUS	uni-app js引擎版编译为App时
APP-ANDROID	App Android 平台 详情
APP-IOS	App iOS 平台 详情
H5	H5（推荐使用 WEB）
WEB	web（同H5）	HBuilderX 3.6.3+
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	抖音小程序
MP-LARK	飞书小程序
MP-QQ	QQ小程序
MP-KUAISHOU	快手小程序
MP-JD	京东小程序
MP-360	360小程序
MP	微信小程序/支付宝小程序/百度小程序/抖音小程序/飞书小程序/QQ小程序/360小程序

导航跳转

navigator 声明式导航

页面跳转。

<navigator url="/pages/list/index">跳转</navigator>

属性名	类型	默认值	说明	平台差异说明
url	String		应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后缀
open-type	String	navigate	跳转方式
delta	Number		当 open-type 为 'navigateBack' 时有效，表示回退的层数

open-type 有效值

值	说明	平台差异说明
navigate	对应 uni.navigateTo 的功能
redirect	对应 uni.redirectTo 的功能 跳转并卸载原页面
switchTab	对应 uni.switchTab 的功能 跳转可返回原页面
reLaunch	对应 uni.reLaunch 的功能	抖音小程序与飞书小程序不支持
navigateBack	对应 uni.navigateBack 的功能 需要配置delta
exit	退出小程序，target="miniProgram"时生效	微信2.1.0+、百度2.5.2+、QQ1.4.7+

uni.navigateTo({})编程式导航 onLoad(url) 接收数据

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

uni.navigateTo({
    url:'/pages/index/index?id=1&a=2'
})

参数	类型	必填	默认值	说明	平台差异说明
url	String	是		需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数
animationType	String	否	pop-in	窗口显示的动画效果，详见：窗口动画	App
animationDuration	Number	否	300	窗口动画持续时间，单位为 ms	App
events	Object	否		页面间通信接口，用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。
success	Function	否		接口调用成功的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

uni.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

uni.redirectTo({
	url: '/pages/index/index?id=1&a=2'
});

参数	类型	必填	说明
url	String	是	需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

uni.switchTab({
	url: '/pages/index/index?id=1&a=2'
});

参数	类型	必填	说明
url	String	是	需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

request 全封装异步方法

// const baseUrl = "http://127.0.0.1:8080/";
const baseUrl = 'http://localhost:3000' //api的固定前部地址
const request = (url, method = "get", data) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseUrl + url, //拼接请求路径
			data: data,
			method: method,
			header: {
				// 'content-type': 'application/json',
				//token: uni.getStorageSync('token')!= null ? uni.getStorageSync('token'): ''//请求头发送token，可选
			},
			success: (res) => {
				resolve(res)
			},
			fail: (error) => {
				reject(error)
			}
		})
	})
}
let post = (url, data) => {
	return request(url, "post", data);
}
let get = (url, data) => {
	return request(url, "get", data);
}

//暴露函数
export default {
  post,
  get,
};

使用方法

与pages目录同级创建api文件目录 内js文件内容

import request from '@/utils/request.js'

//列表数据
export const  CatList_api = data => request.get("/CatList", data);

//图片数据
export const  CatImg_api = data => request.post("/CatImg", data);

在使用的组件中导入js文件

<script>
	import {
		CatGoods_api
	} from '@/api/list.js'  //导入
	export default {
		data() {
			return {
				CatShop: [], 
				currentPage: 1,
				total: 0,
			}
		},
		created() {
			this.init()
		},
		methods: {
			async init() {
                //currentPage传参数
				let CatShop = await CatGoods_api({currentPage: this.currentPage})   
                //将后台数据赋值
                this.CatShop=CatShop              
			}
		},


</script>