uni-app入门详解

一、简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

二、项目构建

1. 创建项目详见： https://uniapp.dcloud.io/quickstart

2. 目录结构

3. xx.vue页面构成

1.后缀.vue是vue的自定义文件类型，类html语法描述一个Vue
2.vue文件三部分组成：template 视图层 组件script 逻辑层style 样式层
3.常用的基础组件
view -> div （ view相当于html中的div ）
text -> span
image -> img

三、uniapp 生命周期

1. 应用的生命周期

onLaunch: function() {    
console.log('App Launch')    
	//登录    
	//用户信息    
	//存储我们的用户信息
	}
,onShow: function() 
{    
	console.log('App Show')    
	//时间戳    
	//停留时长
},onHide: function() {    
	console.log('App Hide')    
	//进入后台后需要做什么
},
onError(e) {    
	console.log('error',e)
} 

2. 页面的生命周期

//页面加载
onLoad() {    
	console.log("onLoad");    
	// 请求后台接口   
	 // 渲染前的操作},
	 //页面渲染完成
	 onReady() {    
	 console.log("onReady");    
	 // 获取节点信息
},
 //页面显示
 onShow(){    
 	console.log("onShow");
 },
 //页面隐藏
 onHide() {    
 	console.log("onHide");
 },
 //页面卸载
 onUnload() {   
	console.log("onUnload");
}

3. uniapp完整支持Vue生命周期

四、uniapp 路由与页面跳转

1. uni.navigateTo(OBJECT)

  保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

2. uni.redirectTo(OBJECT)

  关闭当前页面，跳转到应用内的某个页面。

3. uni.reLaunch(OBJECT)

  关闭所有页面，打开到应用内的某个页面。

4. uni.switchTab(OBJECT)

  跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

5. uni.navigateBack(OBJECT)

  关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

五、基础语法

1. 数据绑定

<text class="title">{{title}}</text> 

export default {    
  data() {       
    return {            
      title: 'Hello'       
    }    
  }
}

2. 属性渲染

<image :src="src"></image>

export default {    
  data() {        
    return {           
      src: './aa.jpg'       
    }    
  }
}

3. 动态样式

<view :class="content"><view :class="[content,bg]"> 
<!--数组-->
<view :class="{'cc':cc}"> 
<!--对象写法-->
</view>

export default {   
  data() {       
    return {            
      content: 'content',            
      bg:'bg'，            
      cc:true        
    }    
  }
}
<style>
.content{    
  color:red;
}.
bg{    
  color:blue;
}
</style>

4.条件渲染

v-if 与 v-else（详见 https://cn.vuejs.org/v2/guide/conditional.html ）

v-for 列表渲染

<view v-for="(item,index) in items" :key="index">{{item}}{{index}}</view>

export default {   
  data() {        
    return {           
      items:['aaa','bbb','ccc','ddd']        
    }     
  },
}

5.事件处理

@click为点击事件，事件名为ccc，方法统一放在methods中

<button type="primary" @click="ccc('uniapp')">被点击</button>
<button type="primary" @click="ccc('uniapp')">被点击</button>

export default {    
  data() {        
  return {            
    show:false        
  }    
},    
methods: {        
  ccc(e){            
    console.log('被点击'+e)            
    this.inti()            
    console.log('被点击'+this.show)        
  },        
  inti(){          
    this.show = true        
  } 
}

注：uniapp的Api详见： https://uniapp.dcloud.io/api/README

六、样式与布局

1. 尺寸：px固定长度，rpx自适应长度（ rpx主要用于微信小程序）

2. App.vue 存放全局样式

3. 外部样式引用 ：

在style标签下加上： @import ‘@/common/asp.css’;

4. uniapp完整支持flex布局

flex布局详见http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

七、自定义组件

1. 在项目的根目录创建文件夹components，然后新建list.vue组件页面

注：自定义组件页面与vue页面基本一致，就是多了props属性，接受来自页面的传参。

2. 将组件内容写入template里

<!-- 组件 -->
<template>
 <view class="list" @click="onClick">
  <text>{{name}}</text>
 </view>
</template>

<script>
 export default {
  props:{  //接受使用组件的页面传入参数
   name:{  //参数name
    type:String,
    default:''
   }
  },
  data() {
   return {
    
   }
  },
  methods:{
   onClick(){
    this.$emit('onClick',this.name)  
    //派发事件（参数一：事件名；参数二:参数）传递给组件
    // console.log('组件内容被点击'+this.name)
   }
  }
  
 }
</script>
<style>
.list{
 height: 50px;
 line-height: 50px;
 border-bottom: 1px solid #999999;
 margin: 15px;
}
</style>

这样基本的组件布局就完成了

3. 引用： 在需要引入的页面，这里使用index.vue页面为例

<!--使用组件 参数name的值传给list组件 -->
<template>
 <view>
  <list name="uniapp" @onClick="onClick"></list>
  <list name="vue" @onClick="onClick"></list>
  <list name="nodeJs" @onClick="onClick"></list>
 </view>
</template>

<script>
 //首先在script标签中输入代码，引用组件并注册组件
 //1.引用组件
 import list from '@/components/list.vue'  //@绝对路径
 export default {
  //2.注册组件
  components:{
   list
  }，
  data() {
   return {
    
   }
  },
  methods: {  //方法
   onClick(e){  //接受list传递来的派发事件
    console.log(e)
   }
  }
<script>

效果如下