uni-app的基本使用

1、目录结构

pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
manifest.json 文件是应用的配置文件,用于指定应用的名称、图标、权限等。
App.vue是我们的跟组件,所有页面都是在App.vue下进行切换的,是页面入口文件,可以调用应用的生命周期函数。
main.js是我们的项目入口文件,主要作用是初始化vue实例并使用需要的插件。
uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格,uni.scss文件里预置了一批scss变量预置。
pages所有的页面存放目录
static静态资源目录,例如图片等
components组件存放目录

 

 2、条件注释定义

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

条件注释的语法

写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。

  • #ifdef:if defined 仅在某平台存在

  • #ifndef:if not defined 除了某平台均存在

  • %PLATFORM%:平台名称  例:APP-PLUS   仅出现在 App 平台下的代码

3、事件总线

    除了父子组件传参之外,兄弟组件之间共享信息也是我们经常会遇到的。如果遇到这类问题,我们现在可以借助vuex,或者把数据统一放在他们父组件中处理。这两种方式都可以解决兄弟组件传递信息的问题。我们今天要介绍的是另一种方式-事件总线,事件总线也是我们开发过程中经常会用到的一种开发模式。

什么是事件总线?

事件总线可以作为组件沟通的桥梁,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的灾难,因此才需要更完善的Vuex作为状态管理中心,将通知的概念上升到共享状态层次。

用法:

父元素中

在son中定义

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

在son1的生命周期写上下面代码 

uni.$on('update',function(data){

    console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);

})