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);

})

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Uni-app 是一种跨平台的前端开发框架,可以使用 Vue.js 来开发多个平台的应用程序,如小程序、H5、App 等。Uni-app 提供了一套统一的 API 和组件库,使得开发者可以在不同平台上共享代码和逻辑,提高开发效率。 以下是 Uni-app基本用法: 1. 安装 Uni-app:在命令行工具中使用 npm 或者 yarn 安装 Uni-app 的命令行工具。 2. 创建项目:使用命令行工具创建一个新的 Uni-app 项目,可以选择不同的模板和目标平台。 3. 开发页面:在项目目录中找到 `pages` 文件夹,里面存放着不同页面的文件夹。在每个页面文件夹中,可以编写对应的 `vue` 文件,其中包括模板、样式和逻辑。 4. 页面导航:Uni-app 提供了 `uni.navigateTo`、`uni.redirectTo`、`uni.switchTab` 等 API 来实现页面之间的导航。 5. 数据绑定:Uni-app 使用Vue.js 相同的数据绑定语法,在 `vue` 文件中使用双大括号语法 `{{ }}` 来插入变量,并使用指令来实现条件渲染、循环等功能。 6. 组件化开发:Uni-app 支持组件化开发,你可以创建自定义组件,并在页面中进行复用。 7. API 调用:Uni-app 提供了一套统一的 API,可以调用不同平台的原生功能,如获取用户位置、拍照、支付等。 8. 平台差异处理:由于不同平台的特性和限制不同,Uni-app 提供了 `uni-platform` 和 `uni-xxxx` 等全局对象来处理平台差异问题。 9. 打包和发布:使用命令行工具进行项目打包,并将生成的文件发布到各个平台的开发者账号上。 这些是 Uni-app基本用法,希望对你有所帮助!如果你还有其他问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值