移动端快速开始

本文档将指导你快速搭建和运行 vue-uniapp-template 移动端项目。

前置条件

在开始之前，请确保你的开发环境满足以下要求：

软件	版本要求	说明
Node.js	16+	JavaScript 运行环境
HBuilderX	最新版	官方IDE（可选）
微信开发者工具	最新版	开发小程序时需要

开发环境选择

UniApp 支持两种开发方式：

方式一：HBuilderX（推荐新手）

优点：

图形化界面，操作简单
内置编译器，无需配置
集成模拟器和真机调试
一键发布到各平台

下载地址：https://www.dcloud.io/hbuilderx.html

方式二：Vue CLI（推荐有经验的开发者）

优点：

支持任意编辑器（VSCode、WebStorm等）
更灵活的配置
更好的 TypeScript 支持

快速开始（HBuilderX）

第一步：下载项目

GiteeGitHub

bash

git clone https://gitee.com/youlaiorg/vue-uniapp-template.git

bash

git clone https://github.com/youlaitech/vue-uniapp-template.git

第二步：导入项目

打开 HBuilderX
菜单：文件 → 导入 → 从本地目录导入
选择项目目录
点击选择文件夹

第三步：安装依赖

项目导入后，HBuilderX 会自动安装依赖。如果没有自动安装，可以手动安装：

右键点击项目根目录
选择 使用命令行窗口打开所在目录
执行命令：

bash

npm install

第四步：配置后端地址

修改 src/config/config.js：

javascript

export default {
  // 开发环境配置
  development: {
    baseURL: 'http://localhost:8080',  // 修改为你的后端地址
    timeout: 10000
  },
  // 生产环境配置
  production: {
    baseURL: 'https://api.yourdomain.com',
    timeout: 10000
  }
}

第五步：运行项目

运行到浏览器（H5）

点击工具栏的运行按钮
选择 运行到浏览器 → Chrome
浏览器会自动打开项目

运行到微信小程序

确保已安装微信开发者工具
点击工具栏的运行按钮
选择 运行到小程序模拟器 → 微信开发者工具
微信开发者工具会自动打开项目

运行到手机

使用数据线连接手机
手机开启 USB 调试模式
点击工具栏的运行按钮
选择 运行到手机或模拟器 → 选择你的设备

快速开始（Vue CLI）

第一步：安装 Vue CLI

bash

npm install -g @vue/cli

第二步：下载项目

bash

# Gitee
git clone https://gitee.com/youlaiorg/vue-uniapp-template.git
cd vue-uniapp-template

# 或 GitHub
git clone https://github.com/youlaitech/vue-uniapp-template.git
cd vue-uniapp-template

第三步：安装依赖

bash

npm install

第四步：运行项目

H5微信小程序App

bash

# 运行到 H5
npm run dev:h5

# 访问 http://localhost:8080

bash

# 编译到微信小程序
npm run dev:mp-weixin

# 使用微信开发者工具打开 dist/dev/mp-weixin 目录

bash

# 编译到 App
npm run dev:app

# 在 HBuilderX 中打开项目进行真机调试

项目配置

1. manifest.json - 应用配置

在项目根目录找到 manifest.json，这是应用的配置文件：

json

{
  "name": "有来后台管理系统",
  "appid": "__UNI__XXXXXX",
  "description": "基于 UniApp 的后台管理系统",
  "versionName": "1.0.0",
  "versionCode": "100",

  // H5 配置
  "h5": {
    "title": "有来后台管理系统",
    "router": {
      "mode": "hash"
    }
  },

  // 微信小程序配置
  "mp-weixin": {
    "appid": "你的小程序AppID",
    "setting": {
      "urlCheck": false
    }
  },

  // App 配置
  "app-plus": {
    "splashscreen": {
      "alwaysShowBeforeRender": true,
      "autoclose": true
    }
  }
}

2. pages.json - 页面路由配置

配置页面路由和全局样式：

json

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/login/login",
      "style": {
        "navigationBarTitleText": "登录",
        "navigationStyle": "custom"
      }
    }
  ],

  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "有来管理系统",
    "navigationBarBackgroundColor": "#FFFFFF",
    "backgroundColor": "#F8F8F8"
  },

  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#007AFF",
    "borderStyle": "black",
    "backgroundColor": "#FFFFFF",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/user/user",
        "iconPath": "static/tabbar/user.png",
        "selectedIconPath": "static/tabbar/user-active.png",
        "text": "我的"
      }
    ]
  }
}

3. uni.scss - 全局样式变量

scss

/* 颜色变量 */
$uni-color-primary: #007AFF;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 背景色 */
$uni-bg-color: #FFFFFF;
$uni-bg-color-grey: #F8F8F8;
$uni-bg-color-hover: #F1F1F1;

/* 边框颜色 */
$uni-border-color: #EEEEEE;

/* 文字颜色 */
$uni-text-color: #333333;
$uni-text-color-grey: #999999;

调试技巧

1. 控制台调试

javascript

// 打印日志
console.log('调试信息', data)

// 查看变量
console.table(userList)

// 性能测试
console.time('接口请求')
await request()
console.timeEnd('接口请求')

2. 网络请求调试

在 HBuilderX 中查看网络请求：

运行项目
打开调试 → Network
查看所有网络请求和响应

3. 真机调试

Android 真机调试

手机开启 USB 调试
连接电脑
HBuilderX 会自动识别设备
点击运行到真机

iOS 真机调试

使用数据线连接 Mac
在 Xcode 中配置证书
HBuilderX 运行到 iOS 设备

4. 跨平台调试

使用条件编译查看特定平台的代码：

javascript

// #ifdef H5
console.log('这是 H5 环境')
// #endif

// #ifdef MP-WEIXIN
console.log('这是微信小程序环境')
// #endif

// #ifdef APP-PLUS
console.log('这是 App 环境')
// #endif

常见问题

1. HBuilderX 无法识别项目

解决方案：

确保项目根目录有 manifest.json 和 pages.json
重新导入项目
清除 HBuilderX 缓存

2. 微信小程序编译失败

解决方案：

确保安装了微信开发者工具
检查 HBuilderX 的小程序工具路径配置
菜单：工具 → 设置 → 运行配置 → 小程序运行配置

3. 依赖安装失败

解决方案：

bash

# 清除缓存
npm cache clean --force

# 使用淘宝镜像
npm install --registry=https://registry.npmmirror.com

# 或使用 cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install

4. App 真机调试连接失败

解决方案：

检查手机是否开启 USB 调试
安装手机驱动程序
更换数据线（确保是数据线而非充电线）
重启 HBuilderX 和手机

5. 接口请求跨域

H5 环境解决方案：

配置代理，修改 vue.config.js（如果使用 Vue CLI）：

javascript

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

小程序和App环境：

小程序和App不存在跨域问题
确保后端配置了正确的域名白名单

下一步

恭喜！你已经成功运行了移动端项目。接下来你可以：

📁 了解项目结构
🎨 学习组件使用
🔐 查看后端对接
📖 阅读 UniApp 官方文档
📖 查看 wot-design-uni 文档
📖 阅读构建教程

技术支持

如果遇到问题，可以通过以下方式获取帮助：

📝 提交 Issue
💬 加入交流群（微信：haoxianrui）
📖 查看 UniApp 社区

移动端快速开始 ​

前置条件 ​

开发环境选择 ​

方式一：HBuilderX（推荐新手） ​

方式二：Vue CLI（推荐有经验的开发者） ​

快速开始（HBuilderX） ​

第一步：下载项目 ​

第二步：导入项目 ​

第三步：安装依赖 ​

第四步：配置后端地址 ​

第五步：运行项目 ​

运行到浏览器（H5） ​

运行到微信小程序 ​

运行到手机 ​

快速开始（Vue CLI） ​

第一步：安装 Vue CLI ​

第二步：下载项目 ​

第三步：安装依赖 ​

第四步：运行项目 ​

项目配置 ​

1. manifest.json - 应用配置 ​

2. pages.json - 页面路由配置 ​

3. uni.scss - 全局样式变量 ​

调试技巧 ​

1. 控制台调试 ​

2. 网络请求调试 ​

3. 真机调试 ​

Android 真机调试 ​

iOS 真机调试 ​

4. 跨平台调试 ​

常见问题 ​

1. HBuilderX 无法识别项目 ​

2. 微信小程序编译失败 ​

3. 依赖安装失败 ​

4. App 真机调试连接失败 ​

5. 接口请求跨域 ​

下一步 ​

技术支持 ​

移动端快速开始

前置条件

开发环境选择

方式一：HBuilderX（推荐新手）

方式二：Vue CLI（推荐有经验的开发者）

快速开始（HBuilderX）

第一步：下载项目

第二步：导入项目

第三步：安装依赖

第四步：配置后端地址

第五步：运行项目

运行到浏览器（H5）

运行到微信小程序

运行到手机

快速开始（Vue CLI）

第一步：安装 Vue CLI

第二步：下载项目

第三步：安装依赖

第四步：运行项目

项目配置

1. manifest.json - 应用配置

2. pages.json - 页面路由配置

3. uni.scss - 全局样式变量

调试技巧

1. 控制台调试

2. 网络请求调试

3. 真机调试

Android 真机调试

iOS 真机调试

4. 跨平台调试

常见问题

1. HBuilderX 无法识别项目

2. 微信小程序编译失败

3. 依赖安装失败

4. App 真机调试连接失败

5. 接口请求跨域

下一步

技术支持