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，可用的标签（基础组件）类似于小程序

<template>
		<view><text>文字</text></view>
	</template>
1
2
3

可用的标签：
	1)内置组件(高仿小程序)  view、text、navigator、icon、image、input、button、swiper、map
	2)官方+第三方扩展组件库(uni-ui库):uni-icons、uni-drawer、uni-list/uni-list-item、....
	3)自定义组件，例如：    ①创建   ②声明   ③使用
1
2
3
4

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

export  default {
   	props:   //组件的自定义属性
   	data:    //组件的模型数据(MVVM中的Model)
   	computed:  // 计算属性
   	onLoad(){：//生命周期类似于小程序
   		uni.pageScrollTo( )
   		uni.navigateTo( )
   		uni.navigateBack( )
   		uni.redirectTo( )
   		uni.switchTab( )
   		uni.reLaunch( )
   		uni.request( )
   	} 
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

  <style  scoped  lang="scss">
  	:not(not){ box-sizing: border-box; }
  	page { margin: 10rpx;color: $...;  background-color: $..; }
  	//	组件(components)的样式中不能使用“标签选择器”；但页面(pages)的样式中可以使用
  	// 自定义组件/扩展组件大多不能使用style和class属性
  </style>
  1
  2
  3
  4
  5
  6

一、uni-app中的条件编译

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

  在template中使用条件编译：
	<!-- #ifdef  平台 -->
	<!-- #endif -->
  在script中使用条件编译：
	// #ifdef  平台
	// #endif
  在style中使用条件编译：
	/* #ifdef  平台 */
	/* #endif */
1
2
3
4
5
6
7
8
9

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

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

data:  age=25

方向1：Model => View
方向2：View => Model
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：是一种页面效果，不刷新/不提交就可以实现页面的布局更新