uni-app从0到入门--01

最新推荐文章于 2024-08-05 09:48:11 发布

Princesk

最新推荐文章于 2024-08-05 09:48:11 发布

阅读量341

点赞数 1

文章标签：小程序

本文链接：https://blog.csdn.net/Princesk/article/details/108771871

版权

uni-app从0到入门–01

一、目录结构及其规范和改变

app wxss 小程序全局样式文件

mainifest.json 云端标识配置文件

pages.json 页面注册到项目的配置文件

main.js 真个程序运行都需要加载的全局配置文件

static 静态文件夹

pages 主要页面位置

默认750px为100%填充，

1、页面规范（vue单文件规范）：一个view且一个根view，所有内容写在他下面、一个script的js文件、一个style下面是css样式

<template>
    <view>
    </view>
</template>

<script>
    eport default{
    
    }
</script>

<style>
</style>

2、外部应用规范

js方向：（在uni-app的common目录有一个工具类util.js）

<script>
    //这个工具类进来后变成了对象util
    var util = require('../../../common/util.js');//require这个模块
    var formatedPlayTime = util .formaTime(playTime);//对象再次上面对象的模块
</script>

//而这个util.js 要把之前的function封装进对象的方法
function formaTime（time）{
return time;
}
moudel.exports = {
formaTime : formatTime
}

css方向：

<style>
    @wimport "./common/uni.css"
</style>

因为vue支持组件导入，可以写一个简单的组件封装使用:

<template>  
    <view>  
        <uni-badge text="abc" :inverted="true"></uni-badge><!--3.使用组件-->  
    </view>  
</template>  
<script>  
    import uniBadge from "../../../components/uni-badge.vue";//1.导入组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）  
    export default {  
        data() {  
            return {  

            }  
        },  
        components: {  
            uniBadge //2.注册组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）  
        }  
    }  
</script>

3、组件标签变化（重要）

div -> view

span 、font -> text

a -> navigator

img ->image

input的属性type变成confirmtype

form、button、checkbox、radio、label、textarea、canvas、video不变

select->picker

ifrrame -> web-view

ul、li -> view

4、新增组件

scroll-view 可区域滚动视图容器

swiper 可滑动区域视图容器

icon 图标

rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）

progress 进度条

slider 滑块指示器

switch 开关选择器

camera 相机

live-player 直播

map 地图

cover-view 可覆盖原生组件的视图容器

cover-view需要多强调几句，uni-app的非h5端的video、map、canvas、textarea是原生组件，层级高于其他组件。如需覆盖原生组件，则需要使用cover-view组件

5、css变化

默认flex布局

二、pages.json配置文件

1、tabar导航栏

注意最多五个图标

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oRrCf6qB-1600922731432)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200901201423159.png)]

"tabBar":{
		"color":"#000000",
		"selectedColor":"#555555",//选中颜色
		"list":[
			{
				"pagePath":"pages/index/index",//页面路径地址
				"iconPath":"static/1cet9msvd91_40_40.png",//未选择前显示图片
				"selectedIconPath":"static/1cet9ls7k45_40_40.png",//被选择后显示图片
				"text":"首页"//图标显示文字
			},
			{
				"pagePath":"pages/about/about",
				"iconPath":"static/1cet9msvd91_40_40.png",
				"selectedIconPath":"static/1cet9ls7k45_40_40.png",
				"text":"尾页",
				
				
			}
		]
		
	}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kB2iDZ6X-1600922731436)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200902083655249.png)]

2、condition（仅在开发使用的启动模式配置）模拟数据传递等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hp3FK4r2-1600922731441)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200902084518616.png)]

	"condition":{
		"current":0,
		"list":[{
			"name":"index",//模式名称，，为小程序添加编译模式在微信开发者工具里选择
			"path":"pages/index/index",//启动页面必选
			"query":"interval=4000&autoplay-false"//启动参数在页面onload函数得到
		},
		{
			"name":"swiper",
			"path":"pages/about/about",
			"query":"interval=4000&autoplay-false"
		}]
	}

三、uni-app中的生命周期

onload 监听页面加载

onshow 监听页面显示

onReady 监听页面初次渲染完成

onHide 监听页面隐藏

onUnload 监听页面卸载

onPullDownRefresh 监听用户下来动作

onReachBottom 页面上拉触底事件处理函数

onShareAppMessge 用户点击右上角分享

onPageScroll 监听页面滚动

onTabletemTap 当前是tap页点击tab触发

四、模板语法和数据绑定

具体参考vue数据绑定

v-if、v-for、v-hide、

五、class与style绑定

这里view相当于div


<template>
    <view>
        <view :class="{red:isred}"></view>
    </view>
</template>
<script>
    export default{
        data: {
            test:false,
            isRed:false
        }
    }
</script>

<template>
    //三元运算符要用中括号O
	<view class="content">
		<view :class="[isred ? 'green':'red' ]">
			
			5555555
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				isred: true
			}
		},
		onLoad() {
			console.log('onload');
		},
		onShow(){
			console.log('show');
		},
		onHide() {
			console.log('hide');
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	},
	.red{
		color: #ff0000;
	},
	.green{
		
		color:#0000ff;
	}

</style>

STYLE动态绑定

<template>
	<view class="content">
		<view :class="[isred ? 'green':'red' ]">
			
			5555555
		</view>
		<view v-for="(item,index) in menus" class="menus" :class="[active == index ? 'menudiv' : '']"
		 @click="menuClick" :id="'menu_'+index">
		 <!-- 这里的id是与下面的e.target.id一致，参考vue的动态绑定-->
			{{item}}
		</view>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				title: 'Hello',
				isred: true,
				menus:[
					'car ','read','news'
				],
				active: '0'
			}
		},
		onLoad() {
			console.log('onload');
			_self = this;
		},
		onShow(){
			console.log('show');
		},
		onHide() {
			console.log('hide');
		},
		methods: {
			menuClick: function(e){
				var aId = e.target.id;
				aId=aId.substr(5);
				_self.active=aId;
				console.log(aId);
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	},
	.red{
		color: #ff0000;
	},
	.green{
		
		color:#0000ff;
	}
	.menudiv{
		color: #ff0000;
	}

</style>

六、事件绑定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-68IdqlV1-1600922731445)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200904100809702.png)]

<template>
	<view class="demo" @click="clicktest"  id="test12345" @longtap="longtap">
		<view class="demo2" id="789" @click="clicktest">//事件绑定
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			clicktest:function(e){
				console.log(e.target.id);
			}
		}
	}
</script>

<style>
	.demo{
		width: 200px;
		height: 200px;
		background-color: #2C405A;
	}
	.demo2{
		width: 100px;
		height: 100px;
		background-color: #4CD964;
	}
</style>

七、基础组件

https://uniapp.dcloud.io/component/view

1、容器组件

（1）scroll-view

支持横纵向滚动

纵向滚动

<template>
	<view>
		<scroll-view class="scroll" scroll-x="100" scroll-y="100">
			<view>1</view>
			<view>1</view>
			<view>1</view>
			<view>1</view>
			<view>1</view>
			<view>1</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.scroll{
		height: 1000px;
		width: 100%;
		background-color: #007AFF;
		margin: 0 auto;
		
		display: flex;//只能使用flex布局
		flex-wrap: nowrap;//调整属性
		white-space: nowrap;
		
	}
	.scroll view{
		width: 200px;
		height: 100px;
		background-color: #4CD964;
		/* margin: 20px 20px; */
		display: inline-block;
	}
</style>

（2）swiper自动播放（属性太多了自己看用哪个）

<view>
    		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="1000" :duration="500">
                //自动衔接播放、自动播放、等待时间间隔、滑动播放时间
				<swiper-item>
					<view class="swiper-item uni-bg-red">A</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">B</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">C</view>
				</swiper-item>
			</swiper>
		</view>
</view>
<style>
    	.swiper {
		height: 300rpx;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	.uni-margin-wrap {
		width:690rpx;
		margin:0 30rpx;
	}
	.uni-bg-red{
		background-color: #FF0000;
	}.uni-bg-blue{
		background-color: #00FF00;
	}.uni-bg-green{
		background-color: #0000FF;
	}
</style>

（3）其他自己去翻

2、容器组件

r-item>
C


##### （3）其他自己去翻

#### 2、容器组件

##### （1）button

Princesk

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫