文章目录

uni-app介绍
- 什么是ui-app
- ui-app社区和规模
uni-app基础
- ui-app初体验
- - 开发方式
- 项目结构介绍
- - 项目目录
- 样式和sass
- - 样式和sass
- 基本语法
- - 数据的展示
  - 数据的循环
  - 条件编译
  - 计算属性
- 事件
- 组件
- - 组件的简单使用
  - 组件传参
  - - - 父组件向子组件传递参数，通过**属性**的方式
    - 子组件向父组件传递参数，通过**触发事件**的方式
    - - 使用全局数据传递参数
  - 组件插槽
- 生命周期

uni-app介绍

什么是ui-app

ui-app是一个使用vue.js语法来开发所有前端应用的框架
（网页应用、安卓应用、苹果应用、各种小程序应用（微信、qq、支付宝等））
##线上产品
csdn ，开源中国，咪咕商城、中国银联、招商银行等等

ui-app社区和规模

380万开发者、几十万应用案例、8.5亿手机端用户、数千款ui-app插件、70+微信/qq群

uni-app基础

ui-app初体验

开发方式

1.使用DCloud的hbuilderX快速开发
2.使用脚手架来快速搭建和开发

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

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

项目结构介绍

项目目录

public ->index.html 给uiapp 做网页应用，提供模板的功能
.gitignore ->git管理文件
babel.config.js ->js版本管理比如es5转es6
package.json\package-lock.json ->node项目必备的包的描述文件
postcss.config.js->定义如何编译css代码,添加什么前缀、版本啊
README.md ->编写文字给用户看
tsconfig.json ->如果项目用js开发，可能会对语法进行规范，在这里进行配置
src中的目录结构：

pages：页面
static：静态资源（不要放样式）
App.vue：整个应用启动做的事情
main.js：入口文件（增加函数、方法等可以在这里定义）
pages.js:新增页面时，既要在pages增加文件，同时也需要在这里面配置文档路径、标题等。这里面有个globalStyle定义全局窗口样式（标题、文字、颜色等）（路劲谁放在前面谁就是首页）
uni.scss:这里是uni-app内置的常用样式变量

样式和sass

uniapp中直接支持小程序的rpx和h5的vw、vh

rpx是小程序中的单位，750rpx=屏幕的宽度
vh、vw是h5中的单位，100vh=屏幕的高度，100vm=屏幕的宽度

uniapp中内置有sass的配置了，怎么使用？

首先全局安装对应的依赖

npm install sass-loader node-sass

vue组件中，在style标签上加入属性<style lang='scss'>

基本演示代码（pages/index2/index.html）：

<template><view class="content"><view class="rpx">rpx</view> <view class="vw">vw</view><view class="sass" >sass</view></view>
</template><script>export default {data() {return {title: 'Hello'}},onLoad() {},methods: {}}
</script><style lang="scss">/*rpx是小程序中的单位，750rpx=屏幕的宽度*/.rpx{width: 750rpx;height: 100px;background-color: aqua;}.vw{/*vh、vw是h5中的单位，100vh=屏幕的高度，100vm=屏幕的宽度*/width: 50vw;height: 100px;background-color: tan;}.content{.sass{background-color: red;color:$uni-text-color-grey;//使用uni.scss里面定义好的颜色}}
</style>

基本语法

数据的展示

js里data中定义数据
template通过{{数据}}展示

<view>{{msg}}</view>

在标签属性上通过:data-index=‘数据’使用

 <view :data-color="color">color</view>

数据的循环

通过特定的语法v-for将数据显示
item和index分别为循环项和循环索引
:key指定唯一的属性，用来提高循环效率

  <view v-for="(item,index) in arr" :key="item.id">{{item.id}}--{{item.text}}--{{index}}</view>

data(){return{arr:[{id:0,text:"苹果"},{id:1,text:"香蕉"},{id:2,text:"李子"}]}
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020051300474736.png

条件编译

动态显示DOM元素

v-if
v-show

<view v-show="false">v-show</view>
<view v-if="false">v-if</view>
<view v-show="isShow">显示或隐藏</view>

区别

（1）手段：

v-if是动态的向DOM树内添加或者删除DOM元素；

v-show是通过设置DOM元素的display样式属性控制显隐；

（2）编译过程：

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；

v-show只是简单的基于css切换；

（3）编译条件：

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);

v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

（4）性能消耗：

v-if有更高的切换消耗；

v-show有更高的初始渲染消耗；

（5）使用场景：

v-if适合运营条件不大可能改变；

v-show适合频繁切换。

计算属性

可以理解是对data数据的加工或者过滤能力
通过computed来定义计算属性

data(){money:1000
},
computed:{//把cnMoney看成是data中的普通数据一样使用cnMoney(){return "$"+this.money;}}

 <view>{{cnMoney}}</view>

事件

事件的使用：
1.注册事件@click="handleClick"
2.methods中定义事件监听函数

3.事件的传参

 <view  data-index="11"  @tap="handleClick(1,$event)">click me</view>
<view data-index="11" @tap="handleClick(2,$event)">click me</view><!--data-index自定义属性传参通过event.currentTarget.dataset.index获取-->

methods: {handleClick(index,event){console.log(index);console.log(event);console.log(event.currentTarget.dataset.index);             }
},

组件

组件的简单使用

组件的定义
src目录下新建文件夹componenets
components下新建组件*.vue

<template><image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1285056959,3836499669&fm=11&gp=0.jpg"  />
</template><script>
export default {}
</script><style>
.img-border{border-radius: 50%;
}
</style>

组件的引入
页面引入：import 组件名 form '组件路径'
组件的注册
页面实例中，新增属性compontents
属性components是一个对象，把组件放进去注册
组件的使用
在页面标签中，直接使用引入的组件<组件><组件>

<template><view class="content"><img-border></img-border></view>
</template><script>
//引入自定义组件
import imgBorder from "@/components/img-border"//@代表找到src路径export default {//注册组件//Component Objectcomponents:{imgBorder},};
</script><style lang="scss"></style>

组件传参

父组件向子组件传递参数，通过属性的方式

父组件

<template><view class="content">
<!--组件使用--><img-border :src="src1"></img-border><!--传参src给子组件img-border--><img-border :src="src2"></img-border></view>
</template><script>
//2引入自定义组件
import imgBorder from "@/components/img-border"//@代表找到src路径export default {data(){return{src1:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1285056959,3836499669&fm=11&gp=0.jpg",src2:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589372184891&di=fc7c7c3a7b99b72b6900ab289af1a96e&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F05%2F20180705103723_U5EFY.jpeg"}},//3注册组件//Component Objectcomponents:{imgBorder}}
</script><style lang="scss">/*rpx是小程序中的单位，750rpx=屏幕的宽度*//*vh、vw是h5中的单位，100vh=屏幕的高度，100vm=屏幕的宽度*/
</style>

子组件

<template>
<!--要把props中传入的指=值看成是data中的变量一样来使用--><image class="img-border" :src="src"  />
</template><script>
export default {//声明要接受的 父组件传递过来的属性props:{src:String//这个src跟父组件中那个属性名保持一致}}
</script><style>
.img-border{border-radius: 50%;
}</style>

子组件向父组件传递参数，通过触发事件的方式

子组件通过触发事件的方式向父组件传值，父组件通过监听事件的方式来接收数据

例子：点击图片的时候把图片路径打印到页面

子组件

<template>
<!--要把props中传入的指=值看成是data中的变量一样来使用--><image class="img-border" :src="src"  @click="handleClick"/>
</template><script>
export default {//声明要接受的 父组件传递过来的属性props:{src:String//这个src跟父组件中那个属性名保持一致},methods:{handleClick(){/*子组件向父组件传递数据 通过触发事件this.$emit("自定义的事件名称"，"要传递的参数");*/this.$emit("srcChange",this.src);}}}
</script><style>
.img-border{border-radius:50%;
}
</style>

父组件

<template><view class="content"><!--组件使用--><view class="hh">子组件传递过来的路径：{{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"//@代表找到src路径export default {data(){return{src:"",src1:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1285056959,3836499669&fm=11&gp=0.jpg",src2:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589372184891&di=fc7c7c3a7b99b72b6900ab289af1a96e&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F05%2F20180705103723_U5EFY.jpeg"}},//3注册组件//Component Objectcomponents:{imgBorder},methods:{handleSrcChange(e){console.log(e)this.src=e;}}}
</script><style lang="scss">/*rpx是小程序中的单位，750rpx=屏幕的宽度*//*vh、vw是h5中的单位，100vh=屏幕的高度，100vm=屏幕的宽度*/.hh{font-size: 10px;height: 5vh;}
</style>

使用全局数据传递参数

组件之间还有很多不是父子组件的关系，这些组件之间共享数据就没法使用上面知识点，全局共享数据的方法如下：
–通过挂载vue的原型上
只要有Vue的地方，可以通过vue.prototype增加一些变量和函数
，就可以通过this.来获取这些变量或者方法。（一般写在main.js）

vue.prototype.baseURL="http://baidu.com"

–通过globalData的方式

global Data:{base:"www.360.com"
}

App.vue中声明globalData,在任意组件可以通过getApp().globalData.base拿到数据（getApp()方法返回一个应用实例）

–vuex
–本地存储

组件插槽

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

父组件：

<template><view class="content"><my-form><view><!--这级以下标签就代替了了组件my-form的slot---><input type="text"><!--小程序中输入框没有默认颜色--><radio></radio><checkbox></checkbox></view></my-form></view>
</template><script>
import myForm from "@/components/my-form"export default {components:{myForm},}
</script><style lang="scss">/*rpx是小程序中的单位，750rpx=屏幕的宽度*//*vh、vw是h5中的单位，100vh=屏幕的高度，100vm=屏幕的宽度*/</style>

子组件：

<template><view class="form"><view class="form-title">标题</view><view class="form-content"><slot></slot>    </view> </view>
</template><script>
export default {}
</script><style></style>

生命周期

介绍：

uniapp框架的生命周期结合了vue和微信小程序的生命周期
全局的APP中使用onLaunch表示应用启动时

//整个应用启动onLaunch: function() {//常用console.log('App Launch 应用启动')},//应用被看到onShow: function() {console.log('App Show')},//应用被隐藏onHide: function() {console.log('App Hide')}

页面中使用onLoad或者onShow分别表示页面加载完毕时和页面显示时

 //页面加载完毕onLoad() {console.log("页面加载完毕")},//页面被看到onShow(){console.log("页面被看到");},

组件中使用mounted组件挂载完毕时

 mounted(){console.log("my-form组件挂载完毕")}

uniapp入门学习相关推荐

uni-app入门学习
文章目录 uni-app uni-app的基本使用 1.uni-app介绍 [官方网页](https://uniapp.dcloud.io/resource) 2.环境搭建 1)利用HbuilderX ...
uni-app入门学习总结
马不停蹄的学习,总会没体力的时候,最近感觉学习慢慢力不从心,动力不足了,固然如此但未曾停止. 接下来向大家汇报近一个月学习uni-app的相关心得,首先作为安卓开发的我,开发过小程序,转为开发uni- ...
UniAPP 快速入门学习
目录 UniAPP 快速入门学习一.UniAPP 介绍 (1)什么是 UniAPP ? (2)为什么要选择 UniAPP ? (3)UniAPP 功能框架 (4)UniAPP 开发环境搭建二.Un ...
uni-app入门介绍
uni-app入门介绍软件开发的时间通常是这样的:一开始的 90% 开发工作用掉了整个计划 90% 的时间,剩下的 10% 同样需要整个计划 90% 的时间,而最终发布前的修改也是如此.-- 汤姆 ...
Uni-APP入门知识整理
目录前言 - 课程介绍一.课程背景二.学前须知三.课程大纲 UniAPP 快速入门学习一.UniAPP 介绍 (1)什么是 UniAPP ? (2)为什么要选择 UniAPP ? (3)Un ...
uni-app入门简介
uni-app入门简介一:uni-app介绍什么是uni-app? 为什么要选择uni-app? uni-app功能框架一套代码,运行到多个平台快速上手框架简介 1.开发规范 2.目录结构 ...
python速成要多久2019-8-28_2019最全Python入门学习路线，不是我吹，绝对是最全
近几年Python的受欢迎程度可谓是扶摇直上,当然了学习的人也是愈来愈多.一些学习Python的小白在学习初期,总希望能够得到一份Python学习路线图,小编经过多方汇总为大家汇总了一份Python学 ...
MAYA 2022基础入门学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,48.0 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.41 GB |时长:4.5小时包含 ...
3dmax Vray建筑可视化入门学习教程
面向初学者的3Ds Max Vray最佳Archviz可视化课程从安装到最终图像的一切都将从头开始教授,不需要任何经验大小解压后:3.25G 时长4h 6m 1280X720 MP4 语言:英语+ ...

uniapp入门学习

文章目录

uni-app介绍

什么是ui-app

ui-app社区和规模

uni-app基础

ui-app初体验

开发方式

项目结构介绍

项目目录

样式和sass

样式和sass

基本语法

数据的展示

数据的循环

条件编译

计算属性

事件

组件

组件的简单使用

组件传参

父组件向子组件传递参数，通过属性的方式

子组件向父组件传递参数，通过触发事件的方式

使用全局数据传递参数

组件插槽

生命周期

uniapp入门学习相关推荐

最新文章

热门文章