注意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 | 右上角收藏 |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现