全局配置和页面配置
globalStyle
属性 |
类型 |
默认值 |
描述 |
navigationBarBackgroundColor |
HexColor |
#F7F7F7 |
导航栏背景颜色(同状态栏背景色) |
navigationBarTextStyle |
String |
white |
导航栏标题颜色及状态栏前景颜色,仅支持 black/white |
navigationBarTitleText |
String |
导航栏标题文字内容 |
|
backgroundColor |
HexColor |
#ffffff |
下拉显示出来的窗口的背景色 |
backgroundTextStyle |
String |
dark |
下拉 loading 的样式,仅支持 dark / light |
enablePullDownRefresh |
Boolean |
false |
是否开启下拉刷新,详见页面生命周期。 |
onReachBottomDistance |
Number |
50 |
页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期 |
创建新的页面
右键pages文件夹,新建文件夹目录,在新的文件夹目录下右键新建.vue文件,并选择基本模板
view的作用等同于div
配置页面
pages
uni-app 通过 pages 节点配置应用由哪些页面组成,pages 节点接收一个数组,数组每个项都是一个对象,其属性值如下:
属性 |
类型 |
默认值 |
描述 |
path |
String |
配置页面路径 |
|
style |
Object |
配置页面窗口表现,配置项参考下方 pageStyle |
style
用于设置每个页面的状态栏、导航条、标题、窗口背景色等。
页面中配置项会覆盖 globalStyle 中相同的配置项
配置基本的tabbar
如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页。
Tips
- 当设置 position 为 top 时,将不会显示 icon
- tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
属性说明:
属性 |
类型 |
必填 |
默认值 |
描述 |
平台差异说明 |
color |
HexColor |
是 |
tab 上的文字默认颜色 |
||
selectedColor |
HexColor |
是 |
tab 上的文字选中时的颜色 |
||
backgroundColor |
HexColor |
是 |
tab 的背景色 |
||
borderStyle |
String |
否 |
black |
tabbar 上边框的颜色,可选值 black/white,也支持其他颜色值 |
App 2.3.4+ 、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
启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面。
属性说明:
属性 |
类型 |
是否必填 |
描述 |
current |
Number |
是 |
当前激活的模式,list节点的索引值 |
list |
Array |
是 |
启动模式列表 |
list说明:
属性 |
类型 |
是否必填 |
描述 |
name |
String |
是 |
启动模式名称 |
path |
String |
是 |
启动页面路径 |
query |
String |
否 |
启动参数,可在页面的 onLoad 函数里获得 |
注意: 在 App 里真机运行可直接打开配置的页面,微信开发者工具里需要手动改变编译模式,如下图:
组件的基本使用
text组件
文本组件,用于包裹文本内容。
属性说明
属性名 |
类型 |
默认值 |
说明 |
selectable |
Boolean |
false |
文本是否可选 |
user-select |
Boolean |
false |
文本是否可选 |
space |
String |
显示连续空格 |
|
decode |
Boolean |
false |
是否解码 |
space 值说明
值 |
说明 |
ensp |
中文字符空格一半大小 |
emsp |
中文字符空格大小 |
nbsp |
根据字体设置的空格大小 |
view组件
视图容器组件。
属性说明
属性名 |
类型 |
默认值 |
说明 |
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 图标 |
......
size 有效值
值 |
说明 |
default |
默认大小 |
mini |
小尺寸 |
type 有效值
值 |
说明 |
primary |
微信小程序、360小程序为绿色,App、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色,字节跳动小程序为红色,QQ小程序为浅蓝色。如想在多端统一颜色,请改用default,然后自行写样式 |
default |
白色 |
warn |
红色 |
#image组件
图片组件
属性名 |
类型 |
默认值 |
说明 |
src |
String |
图片资源地址 |
|
mode |
String |
'scaleToFill' |
图片裁剪、缩放的模式 |
Tips
- <image> 组件默认宽度 320px、高度 240px;app-nvue平台,暂时默认为屏幕宽度、高度 240px;
- src 仅支持相对路径、绝对路径,支持 base64 码;
mode 模式
模式 |
值 |
说明 |
缩放 |
scaleToFill |
不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
缩放 |
aspectFit |
保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |
缩放 |
aspectFill |
保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
uniapp中的样式
- rpx即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750px恰好为屏幕宽度。屏幕变宽,rpx实际显示效果会等比放大。
- 使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束
- 支持基本常用的选择器class、.id、element等
- 在uni-app中不能使用*选择器。
- page相当于body节点
- 定义在App.vue中的样式为全局样式,作用于每一个页面。在pages目录下的vue文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖App.vue中相同的选择器。
- 全局样式文件,uni.scss里以$开头的样式变量可全局引用
- uni-app支持使用字体图标,使用方式与普通web项目相同,需要注意以下几点:
。字体文件小于40kb,uni-app会自动将其转化为base64格式;
。字体文件大于等于40kb,需开发者自己转换,否则使用将不生效:
。字体文件的引用路径推荐使用以~@开头的绝对路径。
@font-face {
font-family:test1-icon;
src:url('~@/static/iconfont.ttf');
}
uni-app语法
uni-app中的数据绑定
在页面中需要定义数据,和我们之前的vue一摸一样,直接在data中定义数据即可
export default{
data (){
return{
msg:'hello-uni'
}
}
}
插值表达式的使用
v-bind
与vue的语法一致,动态地绑定一个或多个属性,或一个组件 prop 到表达式。
- v-bind缩写为‘ : ’
- 在绑定 prop 时,prop 必须在子组件中声明。
- 可以用修饰符指定不同的绑定类型。
<image v-bind:src="imgUrl"></image>
<!-- 缩写 -->
<image :src="imgUrl"></image>
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
<button v-bind:disabled="isButtonDisabled">Button</button>
v-for
与vue语法一致
在 v-for 里使用数组
v-for 指令可以实现基于一个数组来渲染一个列表。
- v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。
- 第一个参数 item 则是被迭代的数组元素的别名。
- 第二个参数,即当前项的索引 index ,是可选的。
<template>
<view>
<view v-for="(item, index) in items">
{
{ index }} - {
{ item.message }}
</view>
</view>
</template>
<script>
export default {
data() {
return {
items: [{ message: "Foo" }, { message: "Bar" }],
};
},
};
</script>
在 v-for 里使用对象
你也可以用 v-for 来遍历一个对象的 property。
- 第一个参数 value 是被迭代的对象元素的属性值。
- 第二个参数为 property 名称 (也就是键名)。
- 第三个参数作为索引。
<template>
<view>
<view v-for="(value, name, index) in object">
{
{ index }}. {
{ name }}: {
{ value }}
</view>
</view>
</template>
<script>
export default {
data() {
return {
object: {
title: "How to do lists in Vue",
author: "Jane Doe",
publishedAt: "2020-04-10",
},
};
},
};
</script>
v-on
与vue语法一致
v-on 指令,它用于监听 DOM 事件。v-on缩写为‘ @ ’,下文简称为 @事件
<!-- 完整语法 -->
<view v-on:click="doSomething">点击</view>
<!-- 缩写 -->
<view @click="doSomething">点击</view>
事件传参
uniapp生命周期
#应用生命周期(常用)
函数名 |
说明 |
onLaunch |
当uni-app 初始化完成时触发(全局只触发一次) |
onShow |
当 uni-app 启动,或从后台进入前台显示 |
onHide |
当 uni-app 从前台进入后台 |
onError |
当 uni-app 报错时触发 |
#页面生命周期(常用)
uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数,当以组合式 API 使用时,在 Vue2 和 Vue3 中存在一定区别,请分别参考:Vue2 组合式 API 使用文档 和 Vue3 组合式 API 使用文档。
函数名 |
说明 |
onInit |
监听页面初始化,其参数同 onLoad 参数,为上个页面传递的数据,参数类型为 Object(用于页面传参),触发时机早于 onLoad |
onLoad |
监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参),参考示例 |
onShow |
监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面 |
onReady |
监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发 |
onHide |
监听页面隐藏 |
onUnload |
监听页面卸载 |
onResize |
监听窗口尺寸变化 |
onPullDownRefresh |
监听用户下拉动作,一般用于下拉刷新,参考示例 |
onReachBottom |
页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项 |
onTabItemTap |
点击 tab 时触发,参数为Object,具体见下方注意事项 |
下拉刷新
#onPullDownRefresh
在 js 中定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。
- 需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh。
- 当处理完数据刷新后,uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。
uni.startPullDownRefresh(OBJECT)
开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
uni.stopPullDownRefresh()
停止当前页面下拉刷新。
示例
pages.json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"enablePullDownRefresh": true
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#0faeff",
"backgroundColor": "#fbf9fe"
}
}
index.vue
// 仅做示例,实际开发中延时根据需求来使用。
export default {
data() {
return {
text: 'uni-app'
}
},
onLoad: function (options) {
setTimeout(function () {
console.log('start pulldown');
}, 1000);
uni.startPullDownRefresh();
},
onPullDownRefresh() {
console.log('refresh');
setTimeout(function () {
uni.stopPullDownRefresh();
}, 1000);
}
}
上拉加载
onReachBottom()
onReachBottom使用注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance,比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。
网络请求
发送请求
#uni.request(OBJECT)
在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。
OBJECT 参数说明
参数名 |
类型 |
必填 |
默认值 |
说明 |
url |
String |
是 |
开发者服务器接口地址 |
|
data |
Object/String/ArrayBuffer |
否 |
请求的参数 |
|
header |
Object |
否 |
设置请求的 header,header 中不能设置 Referer |
|
method |
String |
否 |
GET |
有效值详见下方说明 |
timeout |
Number |
否 |
60000 |
超时时间,单位 ms |
dataType |
String |
否 |
json |
如果设为 json,会对返回的数据进行一次 JSON.parse,非 json 不会进行 JSON.parse |
responseType |
String |
否 |
text |
设置响应的数据类型。合法值:text、arraybuffer |
sslVerify |
Boolean |
否 |
true |
验证 ssl 证书 |
withCredentials |
Boolean |
否 |
false |
跨域请求时是否携带凭证(cookies) |
firstIpv4 |
Boolean |
否 |
false |
DNS解析时优先使用ipv4 |
enableHttp2 |
Boolean |
否 |
false |
开启 http2 |
enableQuic |
Boolean |
否 |
false |
开启 quic |
enableCache |
Boolean |
否 |
false |
开启 cache |
enableHttpDNS |
Boolean |
否 |
false |
是否开启 HttpDNS 服务。如开启,需要同时填入 httpDNSServiceId 。 HttpDNS 用法详见 移动解析HttpDNS |
httpDNSServiceId |
String |
否 |
HttpDNS 服务商 Id。 HttpDNS 用法详见 移动解析HttpDNS |
|
enableChunked |
Boolean |
否 |
false |
开启 transfer-encoding chunked |
forceCellularNetwork |
Boolean |
否 |
false |
wifi下使用移动网络发送请求 |
enableCookie |
Boolean |
否 |
false |
开启后可在headers中编辑cookie |
cloudCache |
Object/Boolean |
否 |
false |
是否开启云加速(详见云加速服务) |
defer |
Boolean |
否 |
false |
控制当前请求是否延时至首屏内容渲染后发送 |
success |
Function |
否 |
收到开发者服务器成功返回的回调函数 |
|
fail |
Function |
否 |
接口调用失败的回调函数 |
|
complete |
Function |
否 |
接口调用结束的回调函数(调用成功、失败都会执行) |
数据缓存
uni.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。
OBJECT 参数说明
参数名 |
类型 |
必填 |
说明 |
key |
String |
是 |
本地缓存中的指定的 key |
data |
Any |
是 |
需要存储的内容,只支持原生类型、及能够通过 JSON.stringify 序列化的对象 |
success |
Function |
否 |
接口调用成功的回调函数 |
fail |
Function |
否 |
接口调用失败的回调函数 |
complete |
Function |
否 |
接口调用结束的回调函数(调用成功、失败都会执行) |
示例
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
console.log('success');
}
});
uni.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。
参数说明
参数 |
类型 |
必填 |
说明 |
key |
String |
是 |
本地缓存中的指定的 key |
data |
Any |
是 |
需要存储的内容,只支持原生类型、及能够通过 JSON.stringify 序列化的对象 |
try {
uni.setStorageSync('storage_key', 'hello');
} catch (e) {
// error
}
uni.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容。
OBJECT 参数说明
参数名 |
类型 |
必填 |
说明 |
key |
String |
是 |
本地缓存中的指定的 key |
success |
Function |
是 |
接口调用的回调函数,res = {data: key对应的内容} |
fail |
Function |
否 |
接口调用失败的回调函数 |
complete |
Function |
否 |
接口调用结束的回调函数(调用成功、失败都会执行) |
success 返回参数说明
参数 |
类型 |
说明 |
data |
Any |
key 对应的内容 |
示例
uni.getStorage({
key: 'storage_key',
success: function (res) {
console.log(res.data);
}
});
uni.getStorageSync(KEY)
从本地缓存中同步获取指定 key 对应的内容。
参数说明
参数 |
类型 |
必填 |
说明 |
key |
String |
是 |
本地缓存中的指定的 key |
示例
try {
const value = uni.getStorageSync('storage_key');
if (value) {
console.log(value);
}
} catch (e) {
// error
}
uni.removeStorage(OBJECT)
从本地缓存中异步移除指定 key。
OBJECT 参数说明
参数名 |
类型 |
必填 |
说明 |
key |
String |
是 |
本地缓存中的指定的 key |
success |
Function |
是 |
接口调用的回调函数 |
fail |
Function |
否 |
接口调用失败的回调函数 |
complete |
Function |
否 |
接口调用结束的回调函数(调用成功、失败都会执行) |
示例
uni.removeStorage({
key: 'storage_key',
success: function (res) {
console.log('success');
}
});
uni.removeStorageSync(KEY)
从本地缓存中同步移除指定 key。
参数说明
参数名 |
类型 |
必填 |
说明 |
key |
String |
是 |
本地缓存中的指定的 key |
示例
try {
uni.removeStorageSync('storage_key');
} catch (e) {
// error
}
图片的上传和预览
#uni.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。
OBJECT 参数说明
参数名 |
类型 |
必填 |
说明 |
count |
Number |
否 |
最多可以选择的图片张数,默认9 |
sizeType |
Array |
否 |
original 原图,compressed 压缩图,默认二者都有 |
extension |
Array |
否 |
根据文件拓展名过滤,每一项都不能是空字符串。默认不过滤。 |
sourceType |
Array |
否 |
album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项 |
crop |
Object |
否 |
图像裁剪参数,设置后 sizeType 失效 |
success |
Function |
是 |
成功则返回图片的本地文件路径列表 tempFilePaths |
fail |
Function |
否 |
接口调用失败的回调函数 |
complete |
Function |
否 |
接口调用结束的回调函数(调用成功、失败都会执行) |
success 返回参数说明
参数 |
类型 |
说明 |
tempFilePaths |
Array |
图片的本地文件路径列表 |
tempFiles |
Array、Array |
图片的本地文件列表,每一项是一个 File 对象 |
uni.chooseImage({
count: 6, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
}
});
#uni.previewImage(OBJECT)
预览图片。
OBJECT 参数说明
参数名 |
类型 |
必填 |
说明 |
current |
String/Number |
详见下方说明 |
详见下方说明 |
urls |
Array |
是 |
需要预览的图片链接列表 |
indicator |
String |
否 |
图片指示器样式,可取值:"default" - 底部圆点指示器; "number" - 顶部数字指示器; "none" - 不显示指示器。 |
loop |
Boolean |
否 |
是否可循环预览,默认值为 false |
longPressActions |
Object |
否 |
长按图片显示操作菜单,如不填默认为保存相册 |
success |
Function |
否 |
接口调用成功的回调函数 |
fail |
Function |
否 |
接口调用失败的回调函数 |
complete |
Function |
否 |
接口调用结束的回调函数(调用成功、失败都会执 |
条件注释实现跨段兼容
条件编译
条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。
**写法:**以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。
- #ifdef:if defined 仅在某平台存在
- #ifndef:if not defined 除了某平台均存在
- **%PLATFORM%**:平台名称
条件编译写法 |
说明 |
#ifdef APP-PLUS |
仅出现在 App 平台下的代码 |
#ifndef H5 |
除了 H5 平台,其它平台均存在的代码 |
#ifdef H5 || MP-WEIXIN |
在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集) |
%PLATFORM% 可取值如下:
值 |
生效条件 |
VUE3 |
HBuilderX 3.2.0+ 详情 |
APP-PLUS |
App |
APP-PLUS-NVUE或APP-NVUE |
App nvue 页面 |
APP-ANDROID |
App Android 平台 仅限 uts文件 |
APP-IOS |
App iOS 平台 仅限 uts文件 |
H5 |
H5 |
MP-WEIXIN |
微信小程序 |
MP-ALIPAY |
支付宝小程序 |
MP-BAIDU |
百度小程序 |
MP-TOUTIAO |
字节跳动小程序 |
MP-LARK |
飞书小程序 |
MP-QQ |
QQ小程序 |
MP-KUAISHOU |
快手小程序 |
MP-JD |
京东小程序 |
MP-360 |
360小程序 |
MP |
微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序 |
QUICKAPP-WEBVIEW |
快应用通用(包含联盟、华为) |
QUICKAPP-WEBVIEW-UNION |
快应用联盟 |
QUICKAPP-WEBVIEW-HUAWEI |
快应用华为 |
组件的条件编译
示例,如下公众号关注组件仅会在微信小程序中出现:
<view>
<view>微信公众号关注组件</view>
<view>
<!-- uni-app未封装,但可直接使用微信原生的official-account组件-->
<!-- #ifdef MP-WEIXIN -->
<official-account></official-account>
<!-- #endif -->
</view>
</view>
样式的条件编译
/* #ifdef %PLATFORM% */
平台特有样式
/* #endif */
uni中的导航跳转
navigator
声明式导航。页面跳转。
属性说明
属性名 |
类型 |
默认值 |
说明 |
url |
String |
应用内的跳转链接,值为相对路径或绝对路径,如:"../first/first","/pages/first/first",注意不能加 .vue 后缀 |
|
open-type |
String |
navigate |
跳转方式 |
delta |
Number |
当 open-type 为 'navigateBack' 时有效,表示回退的层数 |
|
animation-type |
String |
pop-in/out |
当 open-type 为 navigate、navigateBack 时有效,窗口的显示/关闭动画效果,详见:窗口动画 |
animation-duration |
Number |
300 |
当 open-type 为 navigate、navigateBack 时有效,窗口显示/关闭动画的持续时间。 |
hover-class |
String |
navigator-hover |
指定点击时的样式类,当hover-class="none"时,没有点击态效果 |
hover-stop-propagation |
Boolean |
false |
指定是否阻止本节点的祖先节点出现点击态 |
hover-start-time |
Number |
50 |
按住后多久出现点击态,单位毫秒 |
hover-stay-time |
Number |
600 |
手指松开后点击态保留时间,单位毫秒 |
target |
String |
self |
在哪个小程序目标上发生跳转,默认当前小程序,值域self/miniProgram |
open-type 有效值
值 |
说明 |
navigate |
对应 uni.navigateTo 的功能 |
redirect |
对应 uni.redirectTo 的功能 |
switchTab |
对应 uni.switchTab 的功能 |
reLaunch |
对应 uni.reLaunch 的功能 |
navigateBack |
对应 uni.navigateBack 的功能 |
exit |
退出小程序,target="miniProgram"时生效 |
以下为编程式导航
uni.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
OBJECT参数说明
参数 |
类型 |
必填 |
默认值 |
说明 |
url |
String |
是 |
需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数 |
|
animationType |
String |
否 |
pop-in |
窗口显示的动画效果,详见:窗口动画 |
animationDuration |
Number |
否 |
300 |
窗口动画持续时间,单位为 ms |
events |
Object |
否 |
页面间通信接口,用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。 |
|
success |
Function |
否 |
接口调用成功的回调函数 |
|
fail |
Function |
否 |
接口调用失败的回调函数 |
|
complete |
Function |
否 |
接口调用结束的回调函数(调用成功、失败都会执行) |
object.success 回调函数
参数
Object res
属性 |
类型 |
说明 |
eventChannel |
和被打开页面进行通信 |
示例
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
// 在test.vue页面接受参数
export default {
onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
}
}
uni.switchTab(OBJECT)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
注意: 如果调用了 uni.preloadPage(OBJECT) 不会关闭,仅触发生命周期 onHide
OBJECT参数说明
参数 |
类型 |
必填 |
说明 |
url |
String |
是 |
需要跳转的 tabBar 页面的路径(需在 pages.json 的 tabBar 字段定义的页面),路径后不能带参数 |
success |
Function |
否 |
接口调用成功的回调函数 |
fail |
Function |
否 |
接口调用失败的回调函数 |
complete |
Function |
否 |
接口调用结束的回调函数(调用成功、失败都会执行) |
uni.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。
OBJECT参数说明
参数 |
类型 |
必填 |
说明 |
url |
String |
是 |
需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2' |
success |
Function |
否 |
接口调用成功的回调函数 |
fail |
Function |
否 |
接口调用失败的回调函数 |
complete |
Function |
否 |
接口调用结束的回调函数(调用成功、失败都会执行) |
uni-app中组件中的生命周期
uni中的组件创建与vue中创建一致
组件通讯
父传子,与vue一致
子传父,与vue一致
跨组件传值,与vue兄弟组件传值的事件总线原理一致
uni.$on(eventName,callback)
监听全局的自定义事件,事件由 uni.$emit 触发,回调函数会接收事件触发函数的传入参数。
属性 |
类型 |
描述 |
eventName |
String |
事件名 |
callback |
Function |
事件的回调函数 |
代码示例
uni.$on('update',function(data){
console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
})
发布uni-app
#打包为原生App
在HBuilderX工具栏,点击发行,选择原生app-云端打包,如下图:
出现如下界面,点击打包即可。
云端打包支持安心打包,保护用户隐私,不会上传代码和证书,通过差量包制作方式实现安心打包。详见:HBuilderX App云端打包 - 安心打包使用指南 - DCloud问答
云打包也支持cli模式,通过HBuilderX的cli方式(不是uni-app的cli),可以调用命令行打包,方便持续集成。详见:HBuilderX 文档
虽然安心打包已经满足需求,但如仍然希望自己使用 xcode 或 Android studio 进行离线打包,则在 HBuilderX 发行菜单里找到本地打包菜单,生成离线打包资源,然后参考离线打包文档操作:简介 | uni小程序SDK。
App打包时,注意如果涉及三方sdk,需进行申请并在manifest.json里配置,否则相关功能无法使用。
iOS App打包需要向Apple申请证书。
#发布为Web网站
- 在 manifest.json 的可视化界面,进行如下配置(发行在网站根目录可不配置应用基本路径),此时发行网站路径是 www.xxx.com/h5,如:https://hellouniapp.dcloud.net.cn。
2.在HBuilderX工具栏,点击发行,选择网站-H5手机版,如下图,点击即可生成 H5 的相关资源文件,保存于 unpackage 目录。
注意
- history 模式发行需要后台配置支持,详见:history 模式的后端配置
- 打包后,推荐使用前端网页托管服务,一键上传,自带CDN加速,无需购买虚拟机,无需安装nginx等;
- 若使用传统服务器部署,建议在服务器端开启 gzip 压缩。参考网上的分享:https://juejin.im/post/5af003286fb9a07aac24611b
#发布为小程序
#发布为微信小程序:
- 申请微信小程序AppID,参考:微信教程。
- 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-微信",输入小程序名称和appid点击发行即可
如果手动发行,则点击发行按钮后,会在项目的目录 unpackage/dist/build/mp-weixin 生成微信小程序项目代码。在微信小程序开发者工具中,导入生成的微信小程序项目,测试项目代码运行正常后,点击“上传”按钮,之后按照 “提交审核” => “发布” 小程序标准流程,逐步操作即可,详细查看:微信官方教程。
如果在发行界面勾选了自动上传微信平台,则无需再打开微信工具手动操作,将直接上传到微信服务器提交审核。