文章目录
- uni-app介绍
- 什么是ui-app
- ui-app社区和规模
- uni-app基础
- ui-app初体验
- 开发方式
- 项目结构介绍
- 项目目录
- 样式和sass
- 样式和sass
- 基本语法
- 数据的展示
- 数据的循环
- 条件编译
- 计算属性
- 事件
- 组件
- 组件的简单使用
- 组件传参
- 父组件向子组件传递参数，通过**属性**的方式
- 子组件向父组件传递参数，通过**触发事件**的方式
- 使用全局数据传递参数
- 组件插槽
- 生命周期
uni-app介绍
什么是ui-app
ui-app是一个使用语法来开发所有前端应用的框架
（网页应用、安卓应用、苹果应用、各种小程序应用（微信、qq、支付宝等））
##线上产品
**** ，开源中国，咪咕商城、中国银联、招商银行等等
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 -> 给uiapp 做网页应用， 提供模板的功能
.gitignore ->git管理文件
->js版本管理 比如es5转es6
\ ->node项目必备的包的描述文件
->定义如何编译css代码,添加什么前缀、版本啊
->编写文字给用户看
->如果项目用js开发，可能会对语法进行规范，在这里进行配置
src中的目录结构：
pages：页面
static：静态资源（不要放样式）
：整个应用启动做的事情
：入口文件（增加函数、方法等可以在这里定义）
:新增页面时，既要在pages增加文件，同时也需要在这里面配置文档路径、标题等。这里面有个globalStyle定义全局窗口样式（标题、文字、颜色等） （路劲谁放在前面谁就是首页）
:这里是uni-app内置的常用样式变量
样式和sass
样式和sass
uniapp中直接支持小程序的rpx和h5的vw、vh
- rpx是小程序中的单位，750rpx=屏幕的宽度
- vh、vw是h5中的单位，100vh=屏幕的高度，100vm=屏幕的宽度
uniapp中内置有sass的配置了，怎么使用？
- 首先全局安装对应的依赖
npm install sass-loader node-sass
- 1
- vue组件中，在style标签上加入属性
<style lang='scss'>
基本演示代码（pages/index2/）：
<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;//使用里面定义好的颜色
}
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
基本语法
数据的展示
- js里data中定义数据
- template通过{{数据}}展示
<view>{{msg}}</view>
- 1
- 在标签属性上通过:data-index=‘数据’使用
<view :data-color="color">color</view>
- 1
数据的循环
- 通过特定的语法v-for将数据显示
- item和index分别为循环项和循环索引
- :key指定唯一的属性，用来提高循环效率
<view v-for="(item,index) in arr" :key="">{{}}--{{}}--{{index}}</view>
- 1
data(){
return{
arr:[
{id:0,text:"苹果"},
{id:1,text:"香蕉"},
{id:2,text:"李子"}
]
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
![在这里插入图片描述](/
条件编译
动态显示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
- 2
- 3
区别
（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;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
<view>{{cnMoney}}</view>
- 1
事件
事件的使用：
1.注册事件@click="handleClick"
中定义事件监听函数
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获取-->
- 1
- 2
methods: {
handleClick(index,event){
console.log(index);
console.log(event);
console.log(event.currentTarget.dataset.index);
}
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
组件
组件的简单使用
- 组件的定义
src目录下新建文件夹componenets
components下新建组件*.vue
<template>
<image src="/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1285056959,3836499669&fm=11&gp=" />
</template>
<script>
export default {
}
</script>
<style>
.img-border{
border-radius: 50%;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
-
组件的引入
页面引入：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 Object
components:{
imgBorder
},
};
</script>
<style lang="scss">
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
组件传参
父组件向子组件传递参数，通过属性的方式
父组件
<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:"/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1285056959,3836499669&fm=11&gp=",
src2:"/timg?image&quality=80&size=b9999_10000&sec=1589372184891&di=fc7c7c3a7b99b72b6900ab289af1a96e&imgtype=0&src=http%3A%2F%%2Fuploads%2Fitem%2F201807%2F05%2F20180705103723_U5EFY.jpeg"
}
},
//3注册组件
//Component Object
components:{
imgBorder
}
}
</script>
<style lang="scss">
/*rpx是小程序中的单位，750rpx=屏幕的宽度*/
/*vh、vw是h5中的单位，100vh=屏幕的高度，100vm=屏幕的宽度*/
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
子组件
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
子组件向父组件传递参数，通过触发事件的方式
子组件通过触发事件的方式向父组件传值，父组件通过监听事件的方式来接收数据
例子：点击图片的时候把图片路径打印到页面
子组件
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
父组件
<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:"/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1285056959,3836499669&fm=11&gp=",
src2:"/timg?image&quality=80&size=b9999_10000&sec=1589372184891&di=fc7c7c3a7b99b72b6900ab289af1a96e&imgtype=0&src=http%3A%2F%%2Fuploads%2Fitem%2F201807%2F05%2F20180705103723_U5EFY.jpeg"
}
},
//3注册组件
//Component Object
components:{
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
使用全局数据传递参数
组件之间还有很多不是父子组件的关系，这些组件之间共享数据就没法使用上面知识点，全局共享数据的方法如下：
–通过挂载vue的原型 上
只要有Vue的地方，可以通过增加一些变量和函数
，就可以通过this.来获取这些变量或者方法。（一般写在）
vue.prototype.baseURL=""
- 1
–通过globalData的方式
global Data:{
base:""
}
- 1
- 2
- 3
中声明globalData,在任意组件可以通过getApp().拿到数据（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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
子组件：
<template>
<view class="form">
<view class="form-title">标题</view>
<view class="form-content">
<slot></slot>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style>
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
生命周期
介绍：
- uniapp框架的生命周期结合了vue和微信小程序的生命周期
- 全局的APP中使用onLaunch表示应用启动时
//整个应用启动
onLaunch: function() {//常用
console.log('App Launch 应用启动')
},
//应用被看到
onShow: function() {
console.log('App Show')
},
//应用被隐藏
onHide: function() {
console.log('App Hide')
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 页面中使用onLoad或者onShow分别表示页面加载完毕时和页面显示时
//页面加载完毕
onLoad() {
console.log("页面加载完毕")
},
//页面被看到
onShow(){
console.log("页面被看到");
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 组件中使用mounted组件挂载完毕时
mounted(){
console.log("my-form组件挂载完毕")
}
- 1
- 2
- 3
- 4