『UniApp』核心语法

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

"globalStyle": {
	// 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
	"navigationBarTextStyle": "white",
	
	// 导航栏标题文字内容
	"navigationBarTitleText": "BNTang",
	
	// 导航栏背景颜色（同状态栏背景色）
	"navigationBarBackgroundColor": "#00aa7f",
	
	// 下拉显示出来的窗口的背景色
	"backgroundColor": "#ff0000",
	
	// 是否开启下拉刷新
	"enablePullDownRefresh": true,
	
	// 下拉 loading 的样式，仅支持 dark / light
	"backgroundTextStyle": "light",
	
	// 导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址
	"titleImage": "https://xiaohuihuit.github.io/images/avatar.jpg"
}

// pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
"pages": [{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "首页",

		// 导航栏背景颜色（同状态栏背景色）
		"navigationBarBackgroundColor": "#007AFF",
		"h5": {
			"pullToRefresh": {
				"color": "#007AFF"
			},
			// 导航栏
			"titleNView": {
				"titleText": "我的"
			}
		}
	}
}, {
	"path": "pages/course/course",
	"style": {
		"navigationBarTitleText": "选课"
	}
},
{
	"path": "pages/friends/friends",
	"style": {
		"navigationBarTitleText": "朋友圈"
	}
},
{
	"path": "pages/study/study",
	"style": {
		"navigationBarTitleText": "学习"
	}
},
{
	"path": "pages/mine/mine",
	"style": {
		"navigationBarTitleText": "我的"
	}
}],

"tabBar": {
	"color": "#333333",
	"selectedColor": "#FF0000",
	"backgroundColor": "#d3d3d3",
	"borderStyle": "black",
	"fontSize": "14px",
	"position": "bottom",
	"list": [{
			"text": "首页",
			"pagePath": "pages/index/index",
			"iconPath": "static/tabs/home.png",
			"selectedIconPath": "static/tabs/home-selected.png"
		},
		{
			"text": "选课",
			"pagePath": "pages/course/course",
			"iconPath": "static/tabs/course.png",
			"selectedIconPath": "static/tabs/course-selected.png"
		},
		{
			"text": "朋友圈",
			"pagePath": "pages/friends/friends",
			"iconPath": "static/tabs/friends.png",
			"selectedIconPath": "static/tabs/friends-selected.png"
		},
		{
			"text": "学习",
			"pagePath": "pages/study/study",
			"iconPath": "static/tabs/study.png",
			"selectedIconPath": "static/tabs/study-selected.png"
		},
		{
			"text": "我的",
			"pagePath": "pages/mine/mine",
			"iconPath": "static/tabs/mine.png",
			"selectedIconPath": "static/tabs/mine-selected.png"
		}
	]
}

<template>
	<view class="box1" hover-class="box1-active" :hover-stay-time="2000">
		<view class="box2" hover-class="box2-active" hover-stop-propagation :hover-start-time="1000">
			BNTang
		</view>
	</view>
</template>

<script>
</script>

<style>
	.box1 {
		width: 200px;
		height: 200px;
		background-color: #FF0000;
	}

	.box1-active {
		background-color: #00FF00;
	}

	.box2 {
		width: 100px;
		height: 100px;
		background-color: #0000FF;
	}

	.box2-active {
		background-color: pink;
	}
</style>

<template>
	<view>
		<text selectable user-select space="nbsp" style="font-size: 14px;">日前，国务院 &nbsp; &amp; &apos; &ensp; &emsp;
			办公厅印发《关于加快发展保障性租赁住房的意见》。其中提到，大城市中的新市民、青年人等群体住房困难问题突出，将加快完善以公租房、保障性租赁住房和共有产权住房为主体的住房保障体系，尤其是加快发展保障性租赁住房。</text>
	</view>
</template>

<script>
</script>

<style>
</style>

<template>
	<view>
		<view id="btn">
			<button type="default">BNTang</button>
			<button type="default" size="mini">BNTang</button>
			<button type="default" size="mini" :plain="true">BNTang</button>
			<button type="default" size="mini" :plain="true" disabled>BNTang</button>
			<button type="default" loading>BNTang</button>
			<button type="primary">BNTang</button>
			<button type="warn" @click="log('https://www.cnblogs.com/BNTang')">BNTang</button>
		</view>
	</view>
</template>

<script>
	export default{
		methods: {
			log(val){
				console.log(val);
			}
		}
	}
</script>

<style>
</style>

<template>
	<view>
		<image :src="imgUrl" style="width: 200px; height: 200px;background-color: #4CD964;"/>
		<image :src="imgUrl" style="width: 200px; height: 200px;background-color: #4CD964;" mode="aspectFit"/>
		<image :src="imgUrl" style="width: 200px; height: 200px;background-color: #4CD964;" mode="aspectFill"/>
		<image :src="imgUrl" style="width: 200px; height: 200px;background-color: #4CD964;" mode="widthFix"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: 'https://avatars.githubusercontent.com/u/78400939?v=4'
			}
		}
	}
</script>

<style>
</style>

<template>
	<view>
		<view class="box1">
			<text>朋友圈界面</text>
		</view>
		<view class="box2">
			<text>朋友圈界面</text>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.box1 {
		width: 200px;
		height: 200px;
		background-color: red;
		font-size: 30px;
		color: #FFFFFF;
	}

	.box2 {
		margin-top: 20rpx;
		width: 400rpx;
		height: 400rpx;
		background-color: green;
		font-size: 60rpx;
		color: #FFFFFF;
	}
</style>

<template>
	<view>
		<view style="width: 300rpx; height: 300rpx; background-color: red; margin-top: 30rpx;">
			<text>BNTang</text>
		</view>
		<view class="box4">
			<text>BNTang box4</text>
		</view>
		<view class="box5">
			<text>外部样式</text>
		</view>
	</view>
</template>

<script>
</script>

<style>
	@import url("../../common/base.css");

	.box4 {
		margin-top: 20rpx;
		width: 400rpx;
		height: 400rpx;
		background-color: pink;
		font-size: 60rpx;
		color: #FFFFFF;
	}
</style>

/* 引入字体文件 */
@import url("static/fonts/iconfont.css");

<template>
	<view>
		<view class="iconfont icon-hunhetu-zhezhu" style="font-size: 300rpx; color: red;"></view>
		<view class="iconfont icon-bingtu-nandinggeer" style="font-size: 300rpx; color: red;"></view>
	</view>
</template>

<script>
</script>

<style>
</style>

<template>
	<view>
		<swiper class="swiper" :indicator-dots="true" indicator-color="rgba(0, 0, 0, .4)"
			indicator-active-color="rgba(0, 0, 0, 1)" :current="0" :autoplay="true" :interval="1000" :duration="200"
			:circular="true" vertical>
			<swiper-item>
				<view class="swiper-item" style="background-color: #55ffff;">1</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item" style="background-color: #ffff00;">2</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item" style="background-color:#ffaa00;">3</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item" style="background-color: #ffaaff;">4</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item" style="background-color: #aaff7f;">5</view>
			</swiper-item>
		</swiper>

		<swiper class="swiper" :indicator-dots="true" indicator-color="rgba(0, 0, 0, .4)"
			indicator-active-color="rgba(0, 0, 0, 1)" :current="0" :autoplay="false" :interval="1000" :duration="200"
			:circular="true" @change="change" @animationfinish="animationfinish">
			<swiper-item>
				<view class="swiper-item" style="background-color: #55ffff;">1</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item" style="background-color: #ffff00;">2</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item" style="background-color:#ffaa00;">3</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item" style="background-color: #ffaaff;">4</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item" style="background-color: #aaff7f;">5</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default{
		methods: {
			// current 改变时会触发 change 事件
			change(event){
				console.log(event);
			},
			
			// 动画结束时会触发 animationfinish 事件
			animationfinish(event){
				console.log(event);
			}
		}
	}
</script>

<style>
</style>

<template>
	<view class="swiper-box">
		<swiper class="swiper" :indicator-dots="false" indicator-color="rgba(0, 0, 0, .4)"
			indicator-active-color="rgba(0, 0, 0, 1)" :current="0" :autoplay="true" :interval="2000" :duration="500"
			:circular="true" @change="change">
			<swiper-item v-for="(item, index) in imgList" :key="index">
				<image class="swiper-img" :src="item.image" mode="aspectFill"></image>
				<!-- 标题 -->
				<view class="swiper-title">
					<text class="text">{{item.title}}</text>
				</view>
			</swiper-item>
		</swiper>

		<!-- 自定义指示器 -->
		<view class="swiper-dots">
			<view v-for="(item, index) in imgList" :key="index" class="indicator-dots-item"
				:class="current === index ? 'indicator-dots-crrent' : ''">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "bntangswiper",
		props: {
			imgList: {
				type: Array,
				default: [],
				required: true
			}
		},
		data() {
			return {
				current: 0
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	.swiper-box {
		position: relative;

		.swiper {
			width: 750rpx;
			height: 420rpx;
			max-height: 420rpx !important;
			border: 0;
			margin: 0;
			padding: 0;
			position: relative;
			right: 0;
			left: 0;

			.swiper-img {
				width: 750rpx;
				height: 100%;
			}

			.swiper-title {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 750rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
				padding-top: 50rpx;
				padding-bottom: 20rpx;
				color: #FFFFFF;
				background-image: linear-gradient(transparent, rgba(0, 0, 0, .8));

				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		/* 指示器 */
		.swiper-dots {
			width: 750rpx;
			height: 50rpx;
			position: absolute;
			bottom: 0;
			left: 0;

			display: flex;
			justify-content: flex-end;
			align-items: center;

			.indicator-dots-item {
				width: 20rpx;
				height: 14rpx;
				background-color: rgba($color: #ffffff, $alpha: 0.5);
				margin-right: 15rpx;
				border-radius: 10rpx;
			}

			.indicator-dots-crrent {
				width: 30rpx;
				background-color: #FFFFFF;
			}
		}
	}
</style>

<template>
	<bntangswiper :imgList="list"/>
</template>

<script>
	import pic1 from '../../static/imgs/pic1.png';
	import pic2 from '../../static/imgs/pic2.png';
	import pic3 from '../../static/imgs/pic3.png';
	import pic4 from '../../static/imgs/pic4.png';

	export default {
		data() {
			return {
				list: [{
						image: pic1,
						title: '秋天是收获的季节'
					},
					{
						image: pic2,
						title: '春天是最美的颜色'
					},
					{
						image: pic3,
						title: '夕阳无限好, 只是近黄昏'
					},
					{
						image: pic4,
						title: '白雪是无尽的思念'
					}
				]
			}
		},
		methods: {}
	}
</script>

<style>
</style>

<script>
	export default {
		// 当uni-app 初始化完成时触发（全局只触发一次）
		onLaunch: function() {
			console.log('itlike - App Launch')
		},

		// 当 uni-app 启动，或从后台进入前台显示
		onShow: function() {
			console.log('itlike - App Show')
		},

		// 当 uni-app 从前台进入后台
		onHide: function() {
			console.log('itlike - App Hide')
		},

		// 当 uni-app 报错时触发
		onError: function(error) {
			console.log(error);
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

// 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object
onLoad(options) {
	console.log('页面加载', options);
},

onShow() {
	console.log('onShow()');
},

// 监听页面初次渲染完成
onReady() {
	console.log('onReady()');
},

onHide() {
	console.log('onHide()');
},

// 组件的生命周期函数
beforeCreate() {
	console.log('beforeCreate()');
},
created() {
	console.log('created()');
},
beforeMount() {
	console.log('beforeMount()');
},
mounted() {
	console.log('mounted()');
},
beforeUpdate() {
	console.log('beforeUpdate()');
},
updated() {
	console.log('updated()');
},
beforeDestroy() {
	console.log('beforeDestroy()');
}

<template>
	<view>
		<text>导航跳转</text>
		<navigator url="/pages/detail/detail?name=撩课&site=itlike.com" open-type="navigate">
			<button type="primary">跳转我的详情页</button>
		</navigator>
		<navigator url="/pages/index/index" open-type="switchTab" style="margin-top: 30rpx;">
			<button type="warn">跳转首页</button>
		</navigator>
		<navigator url="/pages/detail/detail" open-type="redirect" style="margin-top: 30rpx;">
			<button type="primary">跳转我的详情页</button>
		</navigator>

		<button type="default" @click="goMineDetail" style="margin-top: 30rpx;">跳转我的详情页</button>
		<button type="default" @click="goHome" style="margin-top: 30rpx;">跳转首页</button>
		<button type="default" @click="redirectDetail" style="margin-top: 30rpx;">跳转我的详情页</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goMineDetail() {
				// 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
				uni.navigateTo({
					url: "/pages/detail/detail"
				})
			},
			goHome() {
				// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			redirectDetail() {
				// 关闭当前页面，跳转到应用内的某个页面。
				uni.redirectTo({
					url: "/pages/detail/detail"
				})
			}
		}
	}
</script>

<style>

</style>

// 开启上拉下拉刷新功能
"enablePullDownRefresh": true,

<template>
	<view>
		<view class="item" v-for="(item, index) in listData">
			<text>{{item.title}}</text>
		</view>
		<button class="load-btn" type="primary" @click="loadNewData">加载新数据</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [],
				loaded: 0,
				oldLoaded: 0
			}
		},
		onLoad() {
			this.listData = Array.from(new Array(50)).map((value, index) => ({
				title: '初始化数据列表' + index
			}));
			console.log(this.listData);
		},
		onPullDownRefresh() {
			console.log('触发了')
			this.loadNewData();
		},
		onReachBottom() {
			console.log('页面滚动到底部');
			this.loadOldData();
		},
		methods: {
			// 下拉刷新
			loadNewData() {
				uni.showLoading({
					title: '正在加载新数据...'
				});
				setTimeout(() => {
					this.listData = Array.from(new Array(5)).map((value, index) => ({
						title: '我是拉下来的数据' + (this.loaded + index)
					})).concat(this.listData);
					this.loaded += 5;
					// 停止当前页面下拉刷新
					uni.stopPullDownRefresh();
					uni.hideLoading();
				}, 2000);
			},
			// 上拉加载
			loadOldData() {
				uni.showLoading({
					title: '正在加载旧数据...'
				});
				setTimeout(() => {
					let oldDataArr = Array.from(new Array(5)).map((value, index) => ({
						title: '我是上拉的数据' + (this.oldLoaded + index)
					}));
					this.listData = this.listData.concat(oldDataArr);
					this.oldLoaded += 5;
					// 停止当前页面下拉刷新
					uni.stopPullDownRefresh();
					uni.hideLoading();
				}, 2000);
			}
		}
	}
</script>

<style lang="scss">
	.item {
		width: 750rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-bottom: 1px solid #F0F0F0;
		padding-left: 20rpx;
	}

	.load-btn {
		position: fixed;
		right: 0;
		top: 500rpx;
	}
</style>

<template>
	<view>
		<button @click="getRequest">发送Get请求</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			getRequest() {
				uni.request({
					// 仅为示例，并非真实接口地址。
					url: 'http://localhost:3000/api/v1/user',
					success: (res) => {
						console.log(res.data);
						this.text = 'request success';
					}
				});
			}
		}
	}
</script>

<style>
</style>

<template>
	<view>
		<text>本地缓存</text>
		<view>
			<button type="primary" style="margin-top: 20rpx;" @click="setData">存数据</button>
			<button type="warn" style="margin-top: 20rpx;" @click="getData">取数据</button>
			<button type="primary" style="margin-top: 20rpx;" @click="delData">删除数据</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 1. 存数据
			setData() {
				uni.setStorage({
					key: 'BNTang',
					data: {
						name: '小灰灰',
						address: '上海',
						site: 'it6666.top'
					},
					success: function() {
						console.log('存储成功了');
					},
					fail: function() {
						console.log('存储失败了');
					},
				})
			},
			
			// 2. 取数据
			getData() {
				uni.getStorage({
					key: 'BNTang',
					success: function(res) {
						console.log(res.data);
					}
				});
			},
			
			// 3. 移除数据
			delData() {
				uni.removeStorage({
					key: 'BNTang',
					success: function(res) {
						console.log('删除成功!');
					}
				});
			}
		}
	}
</script>

<style>
</style>

<template>
	<view>
		<text>条件编译</text>
		<!-- #ifdef H5  -->
		<view class="web-box">
			只在H5平台显示
		</view>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<view class="weixin-box">
			只在微信小程序平台显示
		</view>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN || APP-PLUS -->
		<view class="weixin-app-box">
			只在微信小程序平台和手机上显示
		</view>
		<!-- #endif -->

		<view class="box"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {
			// #ifdef H5
			console.log('只在H5平台显示');
			// #endif

			// #ifdef MP
			console.log('只在小程序平台显示');
			// #endif

			// #ifdef APP-PLUS
			console.log('只在手机上显示');
			// #endif
		},

		methods: {

		}
	}
</script>

<style lang="scss">
	/* #ifdef H5 */
	.weixin-box {
		width: 300rpx;
		height: 300rpx;
		background-color: green;
		margin-top: 30rpx;
	}

	/* #endif */

	.box {
		width: 300rpx;
		height: 300rpx;

		// #ifdef H5
		background-color: red;
		// #endif

		// #ifdef MP
		background-color: purple;
		// #endif

		// #ifdef APP-PLUS
		background-color: pink;
		// #endif

		border-radius: 50%;
		margin-top: 40rpx;
	}
</style>

<template>
	<view>
		<map id="map" style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :scale="5"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 31.231706,
				longitude: 121.472644,
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
</style>