本文介绍了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方法。
这段代码主要实现了一个简单的注册页面，包含了用户头像上传、输入昵称、邮箱、用户名和密码等功能。
3 基础知识集锦
3.1介绍项目目录和文件作用
-
pages.json文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等 -
manifest.json文件是应用的配置文件，用于指定应用的名称、图标、权限等。 -
App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。 -
main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。 -
uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。 -
unpackage就是打包目录，在这里有各个平台的打包文件 -
pages所有的页面存放目录 -
static静态资源目录，例如图片等 -
components组件存放目录
3.2 公共属性列表
每个组件都有各自定义的属性，但所有uni-app的组件，都有如下属性:
注！：除了上述公共属性，还有一类特殊属性以v-开头，称之为vue指令，如v-if、v-else、v-for、v-model。
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
