uniapp基础

全局配置和页面配置

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中的样式

1. rpx即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750px恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大。
2. 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用；表示语句结束
3. 支持基本常用的选择器class、.id、element等
4. 在uni-app中不能使用*选择器。
5. page相当于body节点
6. 定义在App.vue中的样式为全局样式，作用于每一个页面。在pages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue中相同的选择器。
7. 全局样式文件，uni.scss里以$开头的样式变量可全局引用
8. 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 需条件编译的代码 #endif	仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif	除了 H5 平台，其它平台均存在的代码
#ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif	在 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	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网站

1. 在 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

#发布为小程序

#发布为微信小程序：

1. 申请微信小程序AppID，参考：微信教程。
2. 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-微信"，输入小程序名称和appid点击发行即可

 如果手动发行，则点击发行按钮后，会在项目的目录 unpackage/dist/build/mp-weixin 生成微信小程序项目代码。在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” => “发布” 小程序标准流程，逐步操作即可，详细查看：微信官方教程。

如果在发行界面勾选了自动上传微信平台，则无需再打开微信工具手动操作，将直接上传到微信服务器提交审核。