uniapp教程 入门一篇文章就够了

uni-app是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可编译到iOS、Android、H5、以及各种小程序等多个平台。

即使不跨端,uni-app同时也是更好的小程序开发框架

1.目录及文件

一个uni-app工程,默认包含如下目录及文件:

├─ components ··················· uni-app组件目录

└──comp-a.vue  ··················· 可复用的a组件

├── pages ·······················  业务页面文件存放目录

├─ index ······················ 使用到的字体文件

└── index.vue ····················· index页面

├─ list ······················· 使用到的图片文件

└── list.vue ····················· list页面

├─ static ··· 存放应用引用静态资源(如图片、视频等)的地方,注意:静态资源只能存放于此

├─ main.js ······················· Vue初始化入口文件

├─ App.vue ··· 应用配置,用来配置App全局样式以及监听

├─ manifest.json ················ 配置应用名称、appid、logo、版本等打包信息

└─ pages.json················· 配置页面路由、导航条、选项卡等页面类信息

2.应用生命周期

函数名 说明
onLaunch 当uni-app 初始化完成时触发(全局只触发一次)
onShow 当 uni-app 启动,或从后台进入前台显示
onHide 当 uni-app 从前台进入后台

应用生命周期仅可在App.vue中监听,在其它页面监听无效。

3.页面生命周期

函数名 说明 平台支持
onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参
onShow 监听页面显示
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载
onPullDownRefresh 监听用户下拉动作 ,一般用于下拉刷新
onReachBottom 页面上拉触底事件的处理函数

onPageScroll

监听页面滚动 ,参数为 Object
onTabItemTap 当前是 tab 页时,点击 tab 时触发。
onShareAppMessage 用户点击右上角分享 微信小程序

注意

先触发 uni-app onReady ,后触发 vue 的 mounted

建议使用uni-app的onLoad 代替 vue的 created

生命周期官方链接

本文只是一个简单入门教程,后面会具体详解开发流程。

未经允许不得转载:大自然的搬运工 » uniapp教程 入门一篇文章就够了

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址