Uni-app项目结构

来自CloudWiki
跳转至： 导航， 搜索

页面结构

一个uni-app工程，默认包含如下目录及文件： 


┌─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            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量

uni-app页面组成

页面位于pages文件夹内，

每个页面就是一个vue文件，

遵循单文档组件开发规范：https://vue-loader.vuejs.org/zh/spec.html#%E7%AE%80%E4%BB%8B

组件

即<templates>里面内容，

同微信小程序基本一致：

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

按快捷键即可快速插入组件

如输入ui ,回车，即可出现： 

<image src="" mode=""></image>

接口

即<scripts>里面内容，

同微信小程序基本一致

uni-app提供的一些基础接口，包括：网络请求接口，用于通过指定的请求方法，携带特定的数据，向特定的地址请求并返回请求结果；图片处理接口，包括选择、预览、获取信息、保存到本地等接口；文件处理接口，包括文件上传和下载接口；数据缓存接口，包括以同步或异步的方式保存、获取或删除数据的接口。

参考文档：https://blog.csdn.net/CUFEECR/article/details/111579924

CSS

符合CSS3 样式规则

尺寸单位：使用upx作为尺寸单位。整个屏幕宽度为750upx

动态绑定style 时 不能使用upx ,只能使用px

开发习惯：不要拖动，而是双击，双击即可删除标签。

data属性

data 必须声明为返回一个初始数据对象的函数（注意函数内返回的数据对象不要直接引用函数外的对象）；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。 

 //正确用法，使用函数返回对象
	data() {
		return {
			title: 'Hello'
		}
	}

	//错误写法，会导致再次打开页面时，显示上次数据
	data: {
		title: 'Hello'
	}

	//错误写法，同样会导致多个组件实例对象数据相互影响
	const obj = {
		title: 'Hello'
	}
	data() {
		return {
			obj
		}
	}

我的第一个页面

pages/index/index.vue: 

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.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: 36rpx;
		color: #8f8f94;
	}
</style>

Wexin2022030901.png

条件编译

index.vue: 

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<!-- #ifdef APP-PLUS -->
			     <text class="title">这是一个APP</text>
			<!-- #endif -->
		    <!-- #ifdef MP-WEIXIN -->
		         <text class="title">这是一个微信小程序</text>
		    <!-- #endif -->
		</view>
	</view>
</template>

Wexin2022030902.png

生命周期

生命周期：https://uniapp.dcloud.io/tutorial/page.html#lifecycle

  • 应用生命周期

App.vue: 

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

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


  • 页面生命周期


软件打包

App打包

app云打包： 

  使用android平台，使用dcloud公用证书

  将apk文件通过qq或微信传到手机

app本地打包

小程序打包

manifest.json中填写appID

然后重新运行即可。

取自“http://www.openbrains.net/mediawiki/index.php?title=Uni-app项目结构&oldid=30808”