uni-app 跨平台开发与应用知识集锦

最新推荐文章于 2026-06-22 21:31:08 发布

原创最新推荐文章于 2026-06-22 21:31:08 发布 · 844 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了Uni-app的由来，它是DCloud开发的一款支持微信小程序、H5、iOS、Android等多种平台的应用开发框架，通过一套代码实现多端运行。文章详细解读了Uni-app的特点，如代码复用、性能优化、友好的开发体验以及丰富的生态系统。同时，还展示了部分代码示例，包括用户登录和欢迎页面的实现，以及项目目录和文件的作用，以及公共属性和vue指令的使用。

1 uni-app的由来

Uni-app 是由 DCloud（凌云科技）开发的一款跨平台应用开发框架。它基于 Vue.js 框架，通过一套代码可以同时生成运行在多个平台（包括但不限于微信小程序、H5、iOS、Android、快应用等）的应用程序。

Uni-app 的由来可以追溯到 DCloud 在多年的移动端开发经验积累和对跨平台技术的深入研究。在市面上存在各种跨平台开发框架时，DCloud 意识到了传统的跨平台开发框架在性能、开发效率等方面的局限性，因此决定自主开发一款全新的跨平台框架，从而诞生了 Uni-app。

Uni-app 的特点包括：

一套代码多端运行：通过编写一套代码，可以生成同时运行在多个平台上的应用程序，极大地提高了开发效率。
性能优异：Uni-app 基于各个平台的原生渲染能力，提供了良好的性能表现，用户体验良好。
开发体验友好：Uni-app 基于 Vue.js 开发，开发者可以沿用 Vue.js 的语法和开发模式，降低了学习成本，提高了开发效率。
生态丰富：Uni-app 生态逐渐丰富，社区提供了大量的插件和组件，方便开发者快速构建应用。

总的来说，Uni-app 的出现填补了市场上跨平台开发框架的空白，为开发者提供了一种全新的跨平台开发解决方案。

2 部分代码展示

2.1用户登录

<template>
	<view>
		<dialog-shell ref="shell" title="用户登录" confirm-text="登 录" @confirm="confirmCommit">
			<image src="../../static/icons/icon.png" class="icon-login"></image>
			<text class="info-welcome">W E L C O M E!</text>
			<text class="info-register" @click="clickRegister">没有账号？请注册</text>
			<view class="login-container">
				<input type="text" :value="userName" placeholder="请输入用户名" placeholder-class="input-holder" @input="inputGetUser"/>
				<text class="iconfont icon-my ic-user"></text>
			</view>
			<view class="login-container">
				<input v-if="isPwd" type="password" :value="password" placeholder="请输入密码" placeholder-class="input-holder" @input="inputGetPwd" />
				<input v-else type="text" :value="password" placeholder="请输入密码" placeholder-class="input-holder" @input="inputGetPwd" />
				<text :class="isPwd ? 'iconfont icon-miwen ic-pwd' : 'iconfont icon-denglu_mingwen ic-pwd'" @click="clickSwitch"></text>
			</view>
		</dialog-shell>
	</view>
</template>

使用Vue组件，实现为用户登录模块。以下是我对上述代码的解释：

<template>：Vue 单文件组件的模板标签，用于包裹模板内容。
<view>：小程序中的视图容器组件，类似于 HTML 中的 <div>，用于包裹页面的内容。
<dialog-shell>：自定义的对话框组件，可能是你自己定义的或者来自第三方组件库。它包含了一个标题(title)为"用户登录"的对话框，并监听了确认按钮(confirm)事件，事件处理函数为confirmCommit。
@confirm="confirmCommit"：使用了 Vue 的事件监听器(@)，监听了confirm事件，并指定了处理函数为confirmCommit。
<image>：小程序中的图片组件，用于显示图片。
src="../../static/icons/icon.png"：指定了图片的路径。
class="icon-login"：指定了图片的样式类名。
<text>：小程序中的文本组件，用于显示文本内容。
class="info-welcome"：指定了文本的样式类名。
@click="clickRegister"：监听了文本的点击事件，并指定了处理函数为clickRegister。
class="info-register"：指定了文本的样式类名。
<input>：小程序中的输入框组件，用于用户输入文本。
:value="userName"：使用了 Vue 的绑定语法(:)，将输入框的值绑定到了userName变量。
@input="inputGetUser"：监听了输入框的输入事件，并指定了处理函数为inputGetUser。
placeholder：输入框的占位符文本。
placeholder-class：输入框占位符的样式类名。
v-if：Vue 的条件渲染指令，根据isPwd的值决定是否渲染该输入框。
<text>：文本组件，用于显示图标。
:class：使用了 Vue 的绑定语法(:)，根据isPwd的值动态设置文本的样式类名。
@click="clickSwitch"：监听了文本的点击事件，并指定了处理函数为clickSwitch。

这段代码实现了一个包含用户名、密码输入框的用户登录界面，以及一个注册提示文本。点击注册文本时会触发clickRegister函数，点击密码输入框右侧的图标可以切换密码是否可见，点击对话框的确认按钮会触发confirmCommit函数。

2.2欢迎页面

<template>
	<view>
		<text v-if="transfrom != 'translateY(0)'" class="secret-info">vv博客由vv制作</text>
		<view class="welcome-container" :style="welcomeStyle" @touchstart="touchStart" @touchmove="touchMove"
			@touchend="touchEnd">
			<image src="../../static/icons/icon.png" class="icon-login"></image>
			<text class="info-welcome">W E L C O M E!</text>
			<text class="info-sub-welcome">欢迎加入vv博客</text>
			<view class="upload-container" @click="clickChooseImage">
				<!-- 上传头像 -->
				<image :src="userAvatar" mode="aspectFill" class="img-avatar"></image>
				<text class="input-holder">{{avatarName}}</text>
			</view>
			<input type="text" class="input-info" placeholder-class="input-holder" placeholder="请输入昵称" id="nick"
				@input="inputGet" />
			<input type="text" class="input-info" placeholder-class="input-holder" placeholder="请输入邮箱" id="email"
				@input="inputGet" />
			<input type="text" class="input-info" placeholder-class="input-holder" placeholder="请输入用户名" id="user"
				@input="inputGet" />
			<view class="pwd-container">
				<input v-if="isPwd" type="password" :value="password" class="input-pwd" placeholder-class="input-holder"
					placeholder="请输入密码" id="password" @input="inputGet" />
				<input v-else type="text" :value="password" class="input-pwd" placeholder-class="input-holder"
					placeholder="请输入密码" id="password" @input="inputGet" />
				<text :class="isPwd ? 'iconfont icon-miwen ic-pwd' : 'iconfont icon-denglu_mingwen ic-pwd'"
					@click="clickSwitch"></text>
			</view>
			<text class="btn-register" @click="chickRegister">注册</text>
		</view>
	</view>
</template>

基于 Vue.js 的模板，创建一个欢迎页面，其中包含了一些输入框和按钮，用于用户注册。以下是我对上述代码的解释：

<template>：Vue.js 组件的模板标签，用于定义组件的结构。
<view>：在小程序中，<view> 标签相当于 HTML 中的 <div>，用于包裹其他元素。
<text>：在小程序中，<text> 标签相当于 HTML 中的 <span>，用于显示文本内容。
v-if="transfrom != 'translateY(0)'"：Vue.js 中的条件渲染指令，用于根据条件显示或隐藏元素。这里根据 transfrom 变量的值来判断是否显示 <text> 元素。
class="secret-info"：指定 <text> 元素的样式类名。
<view class="welcome-container" :style="welcomeStyle" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">：定义一个包含欢迎内容的容器，其中 welcomeStyle 是动态绑定的样式对象，@touchstart、@touchmove、@touchend 是触摸事件的监听器。
<image src="../../static/icons/icon.png" class="icon-login"></image>：显示一个图片，src 属性指定图片路径，class 属性指定样式类名。
<text class="info-welcome">W E L C O M E!</text>：显示欢迎文本。
<text class="info-sub-welcome">欢迎加入vv博客</text>：显示欢迎补充信息。
<view class="upload-container" @click="clickChooseImage">：定义一个上传容器，当点击时触发 clickChooseImage 方法。
<image :src="userAvatar" mode="aspectFill" class="img-avatar"></image>：显示用户头像，userAvatar 是动态绑定的图片路径。
<text class="input-holder">{{avatarName}}</text>：显示头像名称。
<input type="text" class="input-info" placeholder-class="input-holder" placeholder="请输入昵称" id="nick" @input="inputGet" />：定义一个文本输入框，用于输入昵称，@input 监听输入事件。
后续的几个 <input> 元素和 <view>、<text> 元素与上述的功能类似，分别用于输入邮箱、用户名、密码等信息。
<text class="btn-register" @click="chickRegister">注册</text>：定义一个注册按钮，点击时触发 chickRegister 方法。