uni-app 初使用

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

两种搭建项目的方式

1 、通过 HBuilderX 可视化界面
可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。
开始之前，开发者需先下载安装如下工具：HBuilderX：官方IDE下载地址

2 、通过vue-cli命令行
也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。

建议使用  HBuilderX 

文件结构

┌─components # uni-app组件目录

│ └─comp-a.vue # 可复用的a组件

├─pages # 业务页面文件存放的目录

│ ├─index

│ │ └─index.vue # index页面

├─static # 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此

├─App.vue # 应用配置，用来配置App全局样式以及监听 应用生命周期

├─main.js # Vue初始化入口文件

├─manifest.json # 配置应用名称、appid、logo、版本等打包信息

└─pages.json # 配置页面路由、导航条、选项卡等页面类信息

main.js 文件

基本使用

<template>
	<view>
		
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		
		<button @click="lb">李白</button>
		<button @click="saveToken">存储到本地</button>
		
		<view class="text">
			读取 token: {{token}}
			普通组件：<module></module>
			easycom组件：<my-com1></my-com1>
			easycom组件自定义路径规则：<ugo-com2></ugo-com2>
		</view>
		
		<view class="">
			<u-button type="primary" text="确定"></u-button>
					<u-button type="primary" :plain="true" text="镂空"></u-button>
					<u-button type="primary" :plain="true" :hairline="true" text="细边"></u-button>
					<u-button type="primary" :disabled="disabled" text="禁用"></u-button>
					<u-button type="primary" loading loadingText="加载中"></u-button>
		</view>
		

        <!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="swiper-item uni-bg-red">
						<img class="img-box" src="/static/d1.jpg" alt="">
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">
						<img class="img-box" src="/static/d3.jpg" alt="">
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">
						<img class="img-box" src="/static/d4.jpg" alt="">
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">
						<img class="img-box" src="/static/d5.jpg" alt="">
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">
						<img class="img-box" src="/static/d8.jpg" alt="">
					</view>
				</swiper-item>
			</swiper>
		</view>
	
	
	</view>
</template>

<script >

	export default {
		components: {
			module
		},
		data() {
			return {
				title: '飞流直下三千尺',
				token: '',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		onLoad() {
			console.log('页面生命周期 onLoad 钩子')
		},
		created() {
			// 读取本地
			this.token = uni.getStorageSync('token')
			console.log('读取本地', this.token)
		},
		methods: {
			lb() {
				uni.showToast({
					title: '疑是银河落九天'
				})
			},
			saveToken() {
				// 加载框
				uni.showLoading({
					title: '加载……'
				})

				const token = '1912321232902190'
				// 存储到本地
				uni.setStorageSync('token', token)

				// 1s 后关闭加载框
				setTimeout(() => {
					uni.hideLoading()
				}, 2000)
				
				// 读取本地
				this.token = uni.getStorageSync('token')
				console.log('读取本地', this.token)
			}
		}
	}
</script>

<style lang="scss">
	
	
	.img-box{
		width: 100%;
	}
	.uni-margin-wrap {
		height: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 300rpx;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
	
	.text-area {
		display: flex;
		justify-content: center;
	}
	
	.title {
		font-size: 66rpx;
		color: #cbf;
		font-weight: 700;
	}
</style>

pages.json 文件中

{
	"easycom": {
		"autoscan": true,
		"custom": {
			// 组件路径设置规则
			// "^my-(.*)" 默认规则   "^ugo-(.*)" 自定义的
			"^my-(.*)" : "@/components/my-$1/my-$1.vue",
			// "^ugo-(.*)" : "@/components/my-component/ugo-$1.vue"
			"^ugo-(.*)" : "@/components/my-$1/ugo-$1.vue"
		}
	},
}

scss 的使用

下载安装方式配置 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 (uviewui.com)

uniapp第三方组件库   uview

uniapp是跨端的，那就要求它对应的组件库也要是跨端的，市面上用的比较多的uview

安装 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 (uviewui.com)

uniapp生命周期
uni-app框架的生命周期结合了vue和微信小程序的生命周期，具体如下：
应用级别：使用小程序的规范（App.vue）  
onLanch
uni-app官网
页面级别: 使用小程序的规范
onShow, onLoad
页面简介 | uni-app官网
组件级别：与vue的组件相同
页面简介 | uni-app官网
created, destoryed