深入探索 uni-app 项目：从创建到部署与管理

阿贾克斯的黎明

已于 2025-01-29 19:23:47 修改

阅读量1.2k

点赞数 23

分类专栏：前端文章标签： uni-app

于 2025-01-29 19:23:32 首次发布

本文链接：https://blog.youkuaiyun.com/m0_57836225/article/details/145394577

版权

前端专栏收录该内容

530 篇文章

订阅专栏

深入探索 uni-app 项目：从创建到部署与管理

一、新建 uni-app 项目

（一）操作步骤

（二）示例代码（无实际代码操作，仅为创建流程示意）

三、将 uni-app 项目运行到微信开发者工具

（一）操作步骤

（二）示例代码（无实际代码操作，仅为配置流程示意）

在前端开发领域，uni-app 凭借其强大的跨平台能力，成为众多开发者的首选框架。本文将深入介绍 uni-app 项目相关的多个关键方面，涵盖项目创建、目录结构解析、运行调试、控制台警告处理、版本管理等内容，助力开发者快速上手并高效开发 uni-app 项目。

一、新建 uni-app 项目

（一）操作步骤

打开 HBuilder，点击菜单栏中的 “文件”，选择 “新建”，再点击 “新建项目”。
在弹出的窗口中，勾选 “uni-app” 作为项目类型。
为项目命名，例如 “uni_gu_shop_2”，并选择项目的存放路径，可通过 “浏览” 选择桌面的 “代码目录” 文件夹。
选择项目模板，建议勾选 “unit-ui” 模板，最后点击 “创建” 按钮。

（二）示例代码（无实际代码操作，仅为创建流程示意）

点击文件 - 新建 - 新建项目

勾选uni-app项目类型

命名项目并选择存放路径

选择unit-ui模板

点击创建按钮

点击文件 - 新建 - 新建项目

勾选uni-app项目类型

命名项目并选择存放路径

选择unit-ui模板

点击创建按钮

二、uni-app 项目目录结构剖析

（一）components 目录

用于存放可复用的 UI 组件，如自定义的按钮、表单等组件都可放置在此目录。例如创建一个名为MyButton.vue的按钮组件，代码如下：

<template>
  <button class="my-button">{
  
  { buttonText }}</button>
</template>

<script>
export default {
  data() {
    return {
      buttonText: '点击我'
    };
  }
};
</script>

<style scoped>
.my-button {
  background-color: #1aad19;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}
</style>

（二）pages 目录

存放小程序的页面，页面后缀名为.vue。如在pages目录下创建index.vue页面：

<template>
  <view class="index-page">
    <h1>这是首页</h1>
  </view>
</template>

<script>
export default {
  onLoad() {
    console.log('首页加载');
  }
};
</script>

<style scoped>
.index-page {
  padding: 20px;
}
</style>

（三）static 目录

存放项目中的静态资源文件，像图片、视频等。假设在static目录下存放一张名为logo.png的图片，在页面中引用的代码如下：

<template>
  <view>
    <image src="/static/logo.png" mode="aspectFit"></image>
  </view>
</template>

（四）main.js

Vue 的初始化入口，在该文件中导入 Vue 并挂载到页面。示例代码：

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

App.mpType = 'app';

const app = new Vue({
  ...App
});
app.$mount();

（五）app.vue

应用的配置文件，可声明全局样式和小程序的生命周期函数。例如设置全局背景颜色：

<template>
  <view class="container">
    <slot></slot>
  </view>
</template>

<script>
export default {
  onLaunch() {
    console.log('小程序启动');
  }
};
</script>

<style>
.container {
  background-color: #f0f0f0;
}
</style>

（六）manifest.json

记录应用的名称、小程序 app 的 id、logo、版本信息等。配置示例：

{
  "name": "我的uni-app项目",
  "appid": "wx1234567890abcdef",
  "logo": "/static/logo.png",
  "versionName": "1.0.0"
}

（七）pages.json

配置页面路径、窗口样式、tab bar、navigation bar 相关样式等。示例配置：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "backgroundColor": "#ffffff"
      }
    },
    {
      "path": "pages/list/list",
      "style": {
        "navigationBarTitleText": "列表页",
        "backgroundColor": "#f8f8f8"
      }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/static/tabbar/home.png",
        "selectedIconPath": "/static/tabbar/home_active.png"
      },
      {
        "pagePath": "pages/list/list",
        "text": "列表",
        "iconPath": "/static/tabbar/list.png",
        "selectedIconPath": "/static/tabbar/list_active.png"
      }
    ]
  }
}

三、将 uni-app 项目运行到微信开发者工具

（一）操作步骤

打开项目中的manifest.json配置文件，切换到 “微信小程序配置” 页签，填写自己的小程序 app id。
在 HBuilder 中配置微信开发者工具的安装路径：点击 “工具” - “设置”，打开settings.json配置文件，切换到 “运行配置” 页签，找到 “小程序运行配置” 中的 “微信开发者工具路径”，粘贴安装路径。若不知道安装路径，可通过微信开发者工具图标右键 - “更多” - “打开文件位置”，再右键选择 “打开文件所在的位置” 获取。
打开微信开发者工具，点击设置面板（小齿轮图标），选择 “安全”，开启 “服务端口”。
在 HBuilder 中点击菜单栏的 “运行” - “运行到小程序模拟器” - “微信开发者工具”，项目将自动编译并运行到微信开发者工具中。

（二）示例代码（无实际代码操作，仅为配置流程示意）

填写小程序app id到manifest.json

配置微信开发者工具安装路径

开启微信开发者工具服务端口

在HBuilder选择运行到微信开发者工具

填写小程序app id到manifest.json

配置微信开发者工具安装路径

开启微信开发者工具服务端口

在HBuilder选择运行到微信开发者工具

四、取消控制台 set map 警告信息

在 uni-app 项目中，不能直接在小程序项目的project.config.json文件中配置取消set map警告，需在manifest.json文件中进行配置。

打开manifest.json文件，切换到源码视图。
找到mp-weixin对象下的setting节点，添加"checkSiteMap": false配置项。保存文件后，项目重新编译，微信开发者工具终端中的黄色警告将消失。

五、使用 git 对项目进行管理

（一）本地管理

在项目根目录新建.gitignore文件，忽略node_modules和unpackage目录下的dist目录，因为node_modules存放第三方包，无需进行 git 管理，unpackage/dist是自动生成的小程序项目目录。在.gitignore文件中添加如下内容：

node_modules
unpackage/dist

由于忽略了unpackage/dist目录，unpackage目录默认不会被 git 跟踪，需在unpackage目录下新建一个占位文件.gitkeep，确保该目录能被正常跟踪。
打开终端，切换到项目根目录，运行git init初始化本地仓库，再运行git add.将所有文件加入暂存区，最后运行git commit -m "init project"进行本地提交。

（二）托管到码云

注册并登录码云账号。
生成并配置 ssh 公钥：若之前生成过，可直接使用。公钥文件位于C盘 - 用户目录 - 用户名文件夹 -.ssh目录下的_rsa.pub文件中，使用记事本打开复制内容。登录码云后，点击头像 - “设置”，切换到 “SSH 公钥” 标签页，粘贴公钥并点击 “确定”，验证身份后完成配置。可运行ssh -T git@gitee.com检测公钥是否配置成功。
在码云创建空白仓库：点击头部区域右侧的 “+” 号，选择 “新建仓库”，填写仓库名称（如uni_gu_shop_2），选择开源方式为 “公开”，点击 “创建”。
将本地仓库代码推送到码云：在码云仓库页面切换访问方式为 ssh，复制关联仓库和推送代码的命令（如git remote add origin git@gitee.com:your_username/uni_gu_shop_2.git和git push -u origin master），在本地项目根目录的终端中依次运行这两条命令，完成代码推送。

通过上述详细的步骤和代码示例，开发者能够全面掌握 uni-app 项目从创建到管理的全流程，在实际开发中更加得心应手，高效打造出优质的跨平台应用。