手记

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程
继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持，我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

UNI-APP项目实战入门教程

慕仙森 2024-09-21 00:29:36 浏览 561
慕仙森
关注TA
已关注
手记 219
粉丝 37
获赞 103
概述

本文详细介绍了UNI-APP项目实战的全过程，包括环境搭建、项目创建、常用组件详解、页面跳转与传参、数据绑定与事件处理、样式与布局，以及一个制作个人简历页面的实战案例。通过这些内容，读者可以全面了解和掌握UNI-APP项目实战的相关知识和技能。

UNI-APP简介与环境搭建

UNI-APP是什么

UNI-APP是一款使用Vue.js进行开发的跨平台框架，支持开发微信小程序、支付宝小程序、百度小程序、抖音小程序、京东小程序、快应用、H5、Android原生App、iOS原生App等。UNI-APP通过一套代码基础，能够同时发布到多个平台，极大地提高了开发效率。

开发环境搭建

开发UNI-APP需要安装一些必要的工具和环境：

  1. HBuilderX：这是官方推荐的集成开发环境（IDE），提供了丰富的开发工具和插件支持。
  2. Node.js：用于运行UNI-APP编译工具。
  3. Git：用于版本控制，推荐安装。

安装步骤

  1. 安装HBuilderX

    • 访问HBuilderX官网下载并安装最新版本。
    • 打开HBuilderX，选择菜单栏“文件” -> “新建” -> “文件夹”，创建一个新的项目文件夹。
    • 在项目文件夹中，双击manifest.json文件，配置项目基本信息，例如名称、图标、启动图等。

  2. 安装Node.js

    • 访问Node.js官网下载并安装最新版本。
    • 安装完成后，在命令行工具中输入node -v和npm -v，确认安装成功。

  3. 安装Git

    • 访问Git官网下载并安装最新版本。
    • 安装完成后，在命令行工具中输入git --version，确认安装成功。

创建第一个UNI-APP项目

  1. 创建项目

    • 打开HBuilderX，选择菜单栏“文件” -> “新建” -> “项目”。
    • 在弹出的对话框中，选择“uni-app项目”，填写项目名称，选择项目保存位置，点击“创建”。

  2. 项目结构

    创建的项目结构如下：

    ├── pages
│   ├── index
│   │   ├── index.vue
│   │   └── index.wxss
│   └── logs
│       ├── logs.vue
│       └── logs.wxss
├── static
├── App.vue
├── App.wxss
├── main.js
├── manifest.json
└── uni.scss
    • pages目录：存放各个页面的代码。
    • static目录：存放静态资源文件，如图片、字体等。
    • App.vue：应用的启动文件。
    • main.js：项目的入口文件。
    • manifest.json：项目配置文件，包括应用名称、图标、启动图等。

  3. 示例代码

    pages/index/index.vue：

    <template>
 <view class="container">
   <view class="index">
     <text class="index-text">欢迎来到UNI-APP！</text>
   </view>
 </view>
</template>

<script>
export default {
 data() {
   return {
     message: 'Hello UNI-APP!'
   }
 }
}
</script>

<style scoped>
.container {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
}
.index {
 text-align: center;
}
.index-text {
 font-size: 24px;
 color: #333;
}
</style>

    App.vue：

    <template>
 <view class="app">
   <view class="app-container">
     <view class="app-header">
       <text class="header-text">UNI-APP应用</text>
     </view>
     <view class="app-content">
       <view class="content-text">
         <navigator url="/pages/index/index">
           <button class="content-button">进入首页</button>
         </navigator>
       </view>
     </view>
   </view>
 </view>
</template>

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

<style>
.app {
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}
.app-container {
 text-align: center;
}
.header-text {
 font-size: 24px;
 color: #333;
}
.content-text {
 margin-top: 20px;
}
.content-button {
 font-size: 16px;
 color: #fff;
 background-color: #3498db;
 border-radius: 5px;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}
</style>

  4. 运行项目

    • 使用HBuilderX的内置浏览器或在微信开发者工具中预览效果。
    • 选择“运行” -> “运行到H5模拟器”或“运行到微信”等选项，预览效果。
常用组件详解

View视图组件

<view>是UNI-APP中布局的基本元素，类似于HTML中的<div>标签。它主要用于创建块级容器。

示例代码

<template>
  <view class="container">
    <view class="item">
      <text class="item-text">第一个视图</text>
    </view>
    <view class="item">
      <text class="item-text">第二个视图</text>
    </view>
    <view class="item">
      <text class="item-text">第三个视图</text>
    </view>
  </view>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.item {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
}

.item-text {
  font-size: 16px;
  color: #333;
}
</style>

Text文本组件

<text>是UNI-APP中用于显示文本内容的组件，类似于HTML中的<span>标签。

示例代码

<template>
  <view class="container">
    <text class="text">这是一个文本组件。</text>
  </view>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.text {
  font-size: 18px;
  color: #666;
}
</style>

Button按钮组件

<button>是UNI-APP中用于创建按钮的组件，类似于HTML中的<button>标签。

示例代码

<template>
  <view class="container">
    <button class="button" @click="handleClick">点击我</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了')
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.button {
  font-size: 16px;
  color: #fff;
  background-color: #3498db;
  border-radius: 5px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
</style>
页面跳转与传参

页面跳转

页面跳转是UNI-APP开发中常见的操作，通过navigator标签可以实现页面之间的跳转。

示例代码

<template>
  <view class="container">
    <navigator url="/pages/logs/logs" class="navigator-link">跳转到日志页面</navigator>
  </view>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.navigator-link {
  font-size: 18px;
  color: #3498db;
  text-decoration: underline;
  cursor: pointer;
}
</style>

传参技巧

通过navigator标签的open-type属性可以实现页面之间的参数传递。

示例代码

<template>
  <view class="container">
    <navigator url="/pages/logs/logs?data=123" class="navigator-link">传参跳转到日志页面</navigator>
  </view>
</template>

<script>
export default {
  onLoad: function(options) {
    console.log('接收到的参数:', options.data)
  }
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.navigator-link {
  font-size: 18px;
  color: #3498db;
  text-decoration: underline;
  cursor: pointer;
}
</style>
数据绑定与事件处理

双向数据绑定

UNI-APP使用Vue.js的双向数据绑定功能，通过v-model指令可以实现视图与数据的双向同步。

示例代码

<template>
  <view class="container">
    <input type="text" v-model="inputValue" class="input" placeholder="请输入内容" />
    <text class="output">输入的内容是：{{ inputValue }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.input {
  width: 80%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.output {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}
</style>

事件绑定

UNI-APP支持丰富的事件绑定，通过@符号可以绑定各种事件处理器。

示例代码

<template>
  <view class="container">
    <button @click="handleClick">点击我</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了')
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.button {
  font-size: 16px;
  color: #fff;
  background-color: #3498db;
  border-radius: 5px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
</style>
样式与布局

CSS样式

UNI-APP支持使用CSS样式来美化界面。可以通过style标签或.wxss文件来定义样式。

示例代码

<template>
  <view class="container">
    <view class="item">
      <text class="item-text">这是一个带有样式的视图</text>
    </view>
  </view>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.item {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.item-text {
  font-size: 16px;
  color: #333;
}
</style>

Flex布局

Flex布局是一种可以灵活控制布局的CSS属性，通过使用flex属性可以实现灵活的布局。

示例代码

<template>
  <view class="container">
    <view class="flex-container">
      <view class="item">项目1</view>
      <view class="item">项目2</view>
      <view class="item">项目3</view>
    </view>
  </view>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 200px;
}

.item {
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  font-size: 16px;
  color: #333;
}
</style>
实战案例：制作个人简历页面

需求分析

制作一个个人简历页面，包含个人信息、工作经验、教育背景和个人技能等部分。

设计与实现

页面结构

简历页面结构如下：

  • 个人信息：包括姓名、职位、联系方式等。
  • 工作经验：列出工作经历，包括公司名称、职位、工作时间等。
  • 教育背景：列出教育经历，包括学校名称、专业、毕业时间等。
  • 个人技能：列出个人技能，包括技能名称、技能等级等。

实现代码

<template>
  <view class="container">
    <view class="info">
      <view class="info-item">
        <text class="info-label">姓名：</text>
        <text class="info-value">张三</text>
      </view>
      <view class="info-item">
        <text class="info-label">职位：</text>
        <text class="info-value">前端开发工程师</text>
      </view>
      <view class="info-item">
        <text class="info-label">联系方式：</text>
        <text class="info-value">12345678901</text>
      </view>
    </view>
    <view class="experience">
      <view class="experience-item">
        <view class="item-header">
          <text class="header-text">公司名称：ABC公司</text>
        </view>
        <view class="item-content">
          <text class="content-text">职位：前端开发工程师</text>
          <text class="content-text">工作时间：2019年至今</text>
        </view>
      </view>
      <view class="experience-item">
        <view class="item-header">
          <text class="header-text">公司名称：XYZ公司</text>
        </view>
        <view class="item-content">
          <text class="content-text">职位：前端开发实习生</text>
          <text class="content-text">工作时间：2017年-2018年</text>
        </view>
      </view>
    </view>
    <view class="education">
      <view class="education-item">
        <view class="item-header">
          <text class="header-text">学校名称：清华大学</text>
        </view>
        <view class="item-content">
          <text class="content-text">专业：计算机科学与技术</text>
          <text class="content-text">毕业时间：2016年</text>
        </view>
      </view>
      <view class="education-item">
        <view class="item-header">
          <text class="header-text">学校名称：北京大学</text>
        </view>
        <view class="item-content">
          <text class="content-text">专业：软件工程</text>
          <text class="content-text">毕业时间：2015年</text>
        </view>
      </view>
    </view>
    <view class="skills">
      <view class="skills-item">
        <text class="skills-label">技能名称：</text>
        <text class="skills-value">HTML/CSS</text>
        <text class="skills-level">熟练程度：5/5</text>
      </view>
      <view class="skills-item">
        <text class="skills-label">技能名称：</text>
        <text class="skills-value">Vue.js</text>
        <text class="skills-level">熟练程度：4/5</text>
      </view>
      <view class="skills-item">
        <text class="skills-label">技能名称：</text>
        <text class="skills-value">JavaScript</text>
        <text class="skills-level">熟练程度：5/5</text>
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.info, .experience, .education, .skills {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.info-item, .experience-item, .education-item, .skills-item {
  margin: 5px 0;
}

.info-label, .info-value, .header-text, .content-text, .skills-label, .skills-value, .skills-level {
  font-size: 16px;
  color: #333;
}

.info-value, .header-text, .content-text, .skills-value, .skills-level {
  margin-left: 10px;
}

.skills-item {
  display: flex;
  justify-content: space-between;
}
</style>

测试与发布

测试

使用HBuilderX内置的浏览器或微信开发者工具测试页面效果，确保各个部分能够正常显示和操作。

发布

  1. 编译项目

    • 打开HBuilderX，选择菜单栏“项目” -> “编译” -> 选择目标平台，如微信小程序、支付宝小程序等。
    • 等待编译完成。

  2. 发布到平台

    • 微信小程序：打开微信开发者工具，选择“项目” -> “创建项目”，选择本地的项目文件，完成创建。
    • 支付宝小程序：打开支付宝小程序开发者工具，选择“项目” -> “创建项目”，选择本地的项目文件，完成创建。

  3. 调试与发布

    • 在微信开发者工具中，点击“预览”按钮，扫描二维码在手机上预览效果。
    • 在支付宝小程序开发者工具中，点击“预览”按钮，扫描二维码在手机上预览效果。
    • 确认无误后，点击开发者工具中的“上传”按钮，上传到微信小程序或支付宝小程序的后台进行发布。

通过以上步骤，即可完成一个简单的个人简历页面制作，并发布到微信小程序或支付宝小程序等平台。

打开App，阅读手记
相关标签
Html5
JavaScript
小程序
0人推荐
发表评论
随时随地看视频慕课网APP

相关课程

Spring Boot+Vue3前后端分离，实战wiki知识库系统

¥299 中级 2478

基于Vue3新标准，打造后台综合解决方案

¥458 高级 1926

Java支付全家桶 企业级各类支付手段一站式解决方案

¥388 初级 745

H5+JS+CSS3 实现圣诞情缘

免费 中级 121929

HTML5+CSS3实现春节贺卡

免费 中级 110031