注意uniapp同样支持js的if、for 等语法,支持字符串、数组、时间等变量及各种处理方法,只是不支持浏览器专用对象
main.js
作用:main.js是uni-app的入口文件,主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex
1.Vue.config.productionTip = false可以阻止 vue 在启动时生成生产提示,从而减小应用的体积,并避免警告检查的运行开销
App.vue
作用:App.vue是uni-app的主组件,可以调用应用生命周期函数、配置全局样式、配置全局的存储globalData
注意:应用生命周期仅可在App.vue中监听,在页面监听无效
uni.scss
作用:在代码中无需 import 该文件即可在scss代码中使用这里的样式变量来控制应用的风格
page.json
作用:对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| globalStyle | Object | 否 | 设置默认页面的窗口表现 |
| pages | Object Array | 是 | 设置页面路径及窗口表现 |
| easycom | Object | 否 | 组件自动引入规则 |
| tabBar | Object | 否 | 设置底部 tab 的表现 |
| condition | Object | 否 | 启动模式配置 |
| subPackages | Object Array | 否 | 分包加载配置 |
| preloadRule | Object | 否 | 分包预下载规则 |
manifest.json
作用:manifest.json是应用的配置文件,用于指定应用的名称、图标、权限等,同时也可以在这里为 Vue 为H5 设置跨域拦截处理器
条件编译
作用:用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台
| 值 | 平台 |
|---|---|
| APP-PLUS | App |
| H5 | H5 |
| MP-WEIXIN | 微信小程序 |
| MP-ALIPAY | 支付宝小程序 |
| MP-BAIDU | 百度小程序 |
| MP-TOUTIAO | 抖音小程序 |
| MP-QQ | QQ小程序 |
//#ifdef + 平台代码,以//#endif结尾
// #ifdef MP-ALIPAY
代码段...
// #endif
常用标签
注意:uniapp不推荐使用html标签
div转换<view></view>
span转换<text></text>
a 转换<navigator></navigator>
组件与通信
1.在component目录下存放组件
注意:uni-app 只支持 vue 单文件组件(.vue 组件)
全局注册与引入
导入 import xxx from 'xxx'
注册 components:{ xxx }
使用 <xx />
2.父子通信
父传子-->子组件定义props['自定义名'],父组件在调用的子组件上 :自定义名='传递的数据';
子传父-->子组件使用this.$emit('自定义事件',payload),父组件在调用的子组件上 @自定义事件 = '父组件的要触发函数名'
3.slot插槽
匿名插槽默认名为default
父组件中的<Child>内容</Child>覆盖到子组件中的<slot></slot>上
具名插槽为处理多个插槽slot
子组件中的<slot name="xxx">默认内容</slot>
父组件通过v-slot : name 的方式添加内容
<Child>
<template v-slot:xxx>插到名为xxx的插槽的内容</template>
</Child>
作用域插槽,使用子组件的数据
子组件中<slot name= 'xxx' :value='yyy'>默认值</slot>
父组件中通过v-slot语法将子组件插槽xxx的值赋值给slotValue
<template v-slot:xxx ='slotValue'>
{{ slotValue.value1 }}
</template>
全局事件
任何地方都可以使用uni.$on 来创建全局事件
任何地方都可以使用uni.$emit 来触发全局事件
应用生命周期
| 函数名 | 说明 |
|---|---|
| onLaunch | uni-app 初始化完成时触发(全局只触发一次) |
| onShow | uni-app 启动,或从后台进入前台显示 |
| onHide | uni-app 从前台进入后台 |
| onError | uni-app 报错时触发 |
| onUniNViewMessage | 对nvue页面发送的数据进行监听,可参考 nvue 向 vue 通讯 |
| onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数 |
| onPageNotFound | 页面不存在监听函数 |
| onThemeChange | 监听系统主题变化 |
页面生命周期
| 函数名 | 说明 |
|---|---|
| onLoad | 监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参) |
| onShow | 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面 |
| onReady | 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发 |
| onHide | 监听页面隐藏 |
| onUnload | 监听页面卸载 |
| onResize | 监听窗口尺寸变化 |
| onPullDownRefresh | 下拉刷新 |
| onReachBottom | 下拉下一页 |
| onTabItemTap | 点击 tab 时触发,参数为Object |
| onShareAppMessage | 点击右上角分享 |
| onPageScroll | 监听页面滚动,参数为Object |
| onBackPress | 监听页面返回 |
| onNavigationBarSearchInputChanged | 监听原生标题栏搜索输入框输入内容变化事件 |
| onNavigationBarSearchInputConfirmed | 用户点击软键盘上的“搜索”按钮时触发 |
| onNavigationBarSearchInputClicked | 监听原生标题栏搜索输入框点击事件 |
| onShareTimeline | 转发到朋友圈 |
| onAddToFavorites | 右上角收藏 |