UNIAPP day_02(8.31) 条件编辑、数据绑定、生命周期方法

• 基于Node.js的项目： node_modules

• 基于HBuilder的项目： SDK（Software Development Kit，软件开发工具包）

• uni-app是一个基于Vue.js的“多端适配”框架，一套代码可以编译为H5、WebApp、HybridApp、各类小程序，语法：50%是Vue.js、50%是微信小程序

• uni-app中的template —— 基本结构类似于Vue.js，可用的标签（基础组件）类似于小程序

• uni-app中的script —— 基础结构类似于Vue.js，JS API类似于小程序

• uni-app中的style —— 基础结构类似于Vue.js，选择器/样式/尺寸类似于小程序

一、uni-app中的条件编译

一个uni-app项目，可以编译为H5、WebApp、各类小程序…
但是，各种平台底层有些天然不可能兼容的特性，例如：关闭按钮；
有些时候需要针对特定的平台编写特定的代码，在编译时只有符合当前平台的代码才会被保留——条件编译。

二、uni-app中的数据绑定—— 等同于Vue.js中的数据绑定

1. 内容绑定
2. 属性绑定
3. 样式绑定
4. 双向数据绑定

5. 事件绑定
6. 条件渲染
7. 列表渲染

三、uni-app中的生命周期方法

1. 应用级生命周期方法(App.vue) —— 高仿小程序
   onLaunch()： 应用启动
   onShow()： 应用置于前台
   onHide()： 应用置于后台
2. 页面级生命周期方法(pages) —— 高仿小程序
   onLoad()： 页面加载，经常用于：异步请求服务器端数据
   onShow()： 页面显示出来了
   onReady(): 页面准备就绪（每个页面仅执行一次）
   onHide(): 页面隐藏了
   onUnload(): 页面卸载了，经常用于：释放资源(定时器/WS/文件)
   onReachBottom()： 页面滚动到底部了
   onPullDownRefresh(): 页面在顶部下拉刷新了
3. 组件级生命周期方法(components) —— 高仿Vue.js
   创建阶段： beforeCreate() / created()
   挂载阶段： beforeMount() / mounted()
   更新阶段： beforeUpdate() / updated()
   销毁阶段： beforeDestroy() / destroyed()

AJAX：是一种页面效果，不刷新/不提交就可以实现页面的布局更新

文章知识点与官方知识档案匹配，可进一步学习相关知识小程序技能树首页概览3685 人正在系统学习中

来源：加1床铺盖