uni-app基础知识

1.uni-app初体验

1.1 开发方式

• DCloud公司开发的HBuilderX来快速开发
• 使用脚手架来快速搭建和来发

1.2 脚手架搭建项目

• 全局安装 npm install -g @vue/cli
• 创建项目 vue create -p dcloudio/uni-preset-vue my-project
• 启动项目（微信小程序） npm run dev:mp-weixin
• 微信小程序开发者工具导入项目

1.3 搭建过程可能出现问题
    容易出现vue和vue-template-complier版本不一致问题
此时根据提示，重新安装对应的vue版本即可npm install vue@2.6.10然后再重启运行项目npm run dev:mp-weixin

2.项目结构介绍

官网文档 https://uniapp.dcloud.io

3. 样式和sass

3.1 样式和sass

• 支持小程序的rpx和h5的vw、vh
• 内置有sass的配置了，只需要安装对应的的依赖即可 npm install sass-loader node-sass
• vue组件中，在style标签上加入属性< style lang =’scss’ >即可

/* rpx小程序中的单位 750rpx=屏幕的宽度 */
/* vw  h5单位 100vw=屏幕的宽度  100vh=屏幕的高度 

4. 基本语法

4.1介绍

• 数据的展示
• 数据的循环
• 条件编译
• 计算属性

4.2数据展示

• 在js的data中定义数据
• 在template中通过{{数据}}来显示
• 在标签的属性上通过 :data-index=’数据’ 来使用

<template>
   <view class="content">
         <!-- 2.使用数据 {{msg}} -->
          <view>{{msg}}</view>
          <view>{{msg}}</view>
          <view>{{isRich}}</view>
          <view>{{person.name}}</view>
          <view>{{person.skill}}</view>
          <!-- 在标签上，通过属性的方式来使用数据 -->
          <view :data-color="color">color</view>
    </view>
</template>

<script>
 export default {
         //1.data定义数据
         data(){
             return{
                     //存放数据                
                     msg:"程序员",
                     //数字
                    money:10000,
                    //boolean
                    isRich:false, 
                    //对象
                    person:{  
                        name:"孙悟空", 
                        skill:"七十二变"
                    }, 
                    //颜色 
                    color:"aqua" 
             }
        }
 }
 </script>

4.3 数据循环

• 通过v-for来指定要循环的数组
• item和index分别为 循环项 和 循环索引
• :key指定唯一的属性，用来提高循环效率

<template>
   <view class="content">
       <view>
           <!-- list通过view标签来显示 -->
           <view v-for="(item,index) in list" :key="item.id">
               {{item.id}} -- {{item.text}}--{{index}}
           </view>
       </view>
    </view>
</template>

<script>
   export default {
       //1.data定义数据
       data(){
           return{
               //数组
               list:[
                   {
                       id:0,
                       text:"苹果"
                   },
                   {
                      id:1,
                      text:"香蕉"
                   },
                  {
                       id:2,
                       text:"樱桃"
                   }
               ]
           }
       }
   }
</script>

4.4 条件编译

• 通过v-if来决定显示和隐藏，不适合做频繁的切换显示
• 通过v-show来决定显示和隐藏，适合做频繁的切换显示

<template>
    <view class="content">
        <view>
            <view v-if="false">v-if</view>
            <view v-show="false">v-show</view>
        </view>
    </view>
</template>

4.5 计算属性

• 可以理解为是对data中的数据提供了一种加工或者过滤的能力
• 通过computed来定义计算属性

<template>
    <view class="content">
        <view>￥{{money}}</view>
        <view>{{cnMoney}}</view>
        <view> 
           <view v-for="item in filterList" :key="item.id">
                {{item.text}}
            </view>
        </view>
     </view>
</template>

<script>
    export default {
        //1.data定义数据
        data(){
            return{
                //数字
                money:10000,
                //数组
                list:[
                    {id:0,text:"苹果"},
                    {id:1,text:"香蕉"},
                    {id:2,text:"樱桃"}
                ]
            };
        },
        //2.计算属性
        computed:{
            //把cnMoney看成是在data中的普遍的数据一样来使用即可
            cnMoney(){
                //￥ 10000
                return "￥"+this.money
            },
            //过滤数组
            filterList(){
            //只要 id > 0 都不要显示
                 return this.list.filter(v=>v.id<=0);
            }
        }
    }
</script>

5. 事件

• 注册事件 @click=”handleClick”
• 定义事件监听函数 需要在”methods”中定义

<template>
    <view class="content">
        <!-- 1.给view标签绑定事件 -->
        <view @click="handleClick">点击我试试</view>
    </view>
</template>
<script>
    export default {
        //2.在methods里来定义事件回调
        methods:{
            handleClick(){
                console.log("我要继续努力");
            }
        }
    }
</script>

• 事件的传参

<template>
    <view class="content">
        <!-- 1.给view标签绑定事件 -->
        <view data-index="11" @click="handleClick(1,$event)">点击我试试1</view>
        <view data-index="22" @click="handleClick(2,$event)">点击我试试2</view>
    </view>
</template>
<script>
    export default {
        //2.在methods里来定义事件回调
        methods:{
            handleClick(index,event){
               console.log(index);
               console.log(event);
               console.log(event.currentTarget.dataset.index);
            }
        }
    }
</script>

6. 组件

6.1 组件的简单使用

• 组件的定义
  -在src目录下新建文件夹components用来存放组件
  -在components目录下直接新建组件*.vue

<template>
      <image class="img-border" src="http://pic39.nipic.com/20140226/18071023_164300608000_2.jpg"></image>
</template>

• 组件的引入
  -在页面中引入组件“ import 组件名 from ‘组件路径’ ”
• 组件的注册
  -在页面中的实例中，新增属性components
  -属性components是一个对象，把组件放进去注册
• 组建的使用
  -在页面的标签中，直接使用引入的组件 “<组件> <组件/>”

<template>
    <view class="content">
        <!-- 4.使用组件 -->
        <!-- <imgBorder></imgBorder> -->
        <img-border></img-border>
    </view>
</template>
<script>
//2.引入自定义组件
import imgBorder from "@/components/img-border";
    export default {
        //3.注册组件
        components:{
            imgBorder
        }
    }
</script>

6.2 组件传参

• 父向子传递参数 通过属性的方式
  -父页面向子组件ul-com通过属性名list传递了一个数组数据
  -子组件通过props进行接收数据

子组件：

<template>
      <!-- 把props中的src看成是data中的变量一样的来使用 -->
      <image class="img-border" :src="src"></image>
</template>
<script>
export default {
    //声明一下要接收的父组件传递过来的属性
    props:{
        src:String
    }
}
</script>
<style>
.img-border{
    border-radius: 50%;
}
</style>

父组件：

<template>
   <view class="content">
       <!-- 4.使用组件 -->
       <!-- <imgBorder></imgBorder> -->
       <img-border :src="src1"></img-border>
       <img-border :src="src2"></img-border>
   </view>
</template>
<script>
//2.引入自定义组件
import imgBorder from "@/components/img-border";
   export default {
       data(){
           return{
                src1:"http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
               src2:"http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg"
           } 
      }, 
      //3.注册组件
       components:{ 
          imgBorder
       } 
  };
</script>

• 子向父传递参数 通过触发事件的方式
  -子组件通过触发事件的方式向父组件传递数据
  -父组件通过监听事件的方式来接收数据

子组件：

<template>
      <!-- 把props中的src看成是data中的变量一样的来使用 -->
      <image @click="handleClick" class="img-border" :src="src"></image>
</template>
<script>
export default {
    props:{
        src:String
    },
    methods:{
        handleClick(){
            //子向父传递数据 通过触发事件
            // this.$emit("自定义的事件名称","要传递的参数");
            this.$emit("srcChange",this.src);
        }
    }
}
</script>
<style>
.img-border{
    border-radius: 50%;
}
</style>

父组件：

<template>
    <view class="content">
        <!-- 4.使用组件 -->
        <!-- <imgBorder></imgBorder> -->
        <view>
            子组件传递过来的路径:{{src}}
        </view>
        <img-border @srcChange="handleSrcChange" :src="src1"></img-border>
        <img-border @srcChange="handleSrcChange" :src="src2"></img-border>
    </view>
</template>
 <script>
 //2.引入自定义组件
 import imgBorder from "@/components/img-border";
    export default {
        data(){
            return{
                src:"",
                src1:"http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
                src2:"http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg"            
                }
        },
        //3.注册组件
        components:{
            imgBorder
        },
        methods:{
            handleSrcChange(e){
                this.src=e;
            }
        }
    };
</script>

• 使用全局数据传递参数
  -通过挂载vue的原型上

mian.js

//定义全局数据，通过vue的原型来实现
Vue.prototype.baseurl="www.baidu.com"

Index.vue

<script>
//2.引入自定义组件
import imgBorder from "@/components/img-border";
    export default {
        //onLoad 页面加载完毕就会触发 生命周期
        onLoad(){
            console.log(this.baseurl);
        }
    };
</script>

-通过globalData的方式
App.vue

<script>
    export default {
        ... ... 
       globalData:{
            base:"www.360.com"
        }
    }
</script>

Index.vue

<script>
//2.引入自定义组件
import imgBorder from "@/components/img-border";
    export default {
        //onLoad 页面加载完毕就会触发 生命周期
        onLoad(){
            //获取globaldata 
           console.log(getApp().globalData.base);
        }
    };
</script>

-vuex
-本地存储

6.3 组件插槽

• 标签其实也是数据中的一种，想实现动态的给子组件传递标签，就可以使用插槽slot
• 通过slot来实现占位符

Index.vue

<template>
   <view class="content">
       <my-form>
           <view>
               <input type="text">
               <radio></radio>
               <checkbox></checkbox>
           </view> 
      </my-form>
   </view>
</template>
<script>
import { myForm } from "@/components/my-form";
    export default {
       components:{
           myForm
       }
   };
</script>

my-form.vue

<template>
   <view class="form">
       <view class="form_title">标题</view>
       <view class="form_content">内容</view>
       <slot></slot>
   </view>
</template>

7. 生命周期

7.1 介绍

• uni-app框架的生命周期结合了vue和微信小程序的生命周期
• 全局的APP使用onLaunch表示应用启动时
• 页面中使用onLoad或者onShow分别表示页面加载完毕时和页面显示时
• 组件中使用mounted组件挂载完毕时

7.2 完整的生命周期

• uni-app
  https://uniapp.dcloud.io/frame?id=%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f
• vue
  https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
• 微信小程序 https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html