德尚网络

Appearance

UniApp 移动端安装 ​

概述 ​

DSMall Pro移动端基于UniApp + Vue 3开发，支持H5、微信小程序、APP等多个平台，本文档介绍如何安装和配置移动端项目。

环境要求 ​

基础环境 ​

开发工具 ​

  • HBuilderX：推荐使用HBuilderX进行UniApp开发 - 下载地址
  • 微信开发者工具：用于微信小程序开发和调试 - 下载地址

推荐版本 ​

安装步骤 ​

1. 获取代码 ​

bash
# 进入移动端目录
cd uniapp

2. 安装依赖 ​

bash
# 使用npm安装
npm install

# 或使用yarn安装
yarn install

# 如果安装速度慢，可以使用国内镜像
npm config set registry https://registry.npmmirror.com
npm install

3. 配置环境变量 ​

编辑 .env.production 文件：

env
# API基础地址
VITE_APP_BASE_URL=https://your-domain.com/api

# 文件上传地址
VITE_FILE_BASE_URL=https://your-domain.com

# 应用配置
VITE_APP_TITLE=DSMall Pro

4. 使用HBuilderX开发 ​

导入项目 ​

  1. 打开HBuilderX
  2. 文件 → 导入 → 从本地目录导入
  3. 选择uniapp项目目录
  4. 项目导入完成后，可以在HBuilderX中进行可视化操作

运行和构建 ​

在HBuilderX中，您可以通过点击操作进行：

H5开发：

  • 点击工具栏的"运行" → "运行到浏览器" → "Chrome"
  • 或点击"运行" → "运行到浏览器" → "Edge"

微信小程序开发：

  • 点击"运行" → "运行到小程序模拟器" → "微信开发者工具"
  • 首次运行需要配置微信开发者工具路径

APP开发：

  • 点击"运行" → "运行到手机或模拟器" → "Android"
  • 或点击"运行" → "运行到手机或模拟器" → "iOS"

发行构建 ​

在HBuilderX中进行生产环境构建：

H5发行：

  • 点击"发行" → "网站-H5手机版"
  • 选择输出目录，点击"发行"

微信小程序发行：

  • 点击"发行" → "小程序-微信"
  • 配置小程序信息，点击"发行"

APP发行：

  • 点击"发行" → "原生App-云打包"
  • 配置应用信息，点击"发行"

5. 微信小程序配置 ​

在HBuilderX中配置 ​

  1. 打开项目的 manifest.json 文件
  2. 在"微信小程序配置"选项卡中：
    • 填写小程序AppID
    • 配置小程序名称
    • 设置版本号
    • 配置其他小程序相关设置

在微信开发者工具中配置 ​

  1. 打开微信开发者工具
  2. 导入项目（选择HBuilderX生成的微信小程序目录）
  3. 在"详情"中配置：
    • 不校验合法域名
    • 开启调试模式
    • 开启ES6转ES5
    • 开启增强编译

6. H5部署配置 ​

部署到Web服务器 ​

bash
# 复制构建文件到Web服务器
cp -r dist/build/h5/* /var/www/html/h5/

Nginx配置 ​

nginx
server {
    listen 80;
    server_name h5.your-domain.com;
    root /var/www/html/h5;
    index index.html;

    # 处理Vue Router的history模式
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

验证安装 ​

1. H5环境测试 ​

在HBuilderX中点击"运行" → "运行到浏览器"，检查页面是否正常显示。

2. 微信小程序测试 ​

在HBuilderX中点击"运行" → "运行到小程序模拟器"，使用微信开发者工具测试。

3. 功能测试 ​

  • 测试用户登录/注册
  • 测试页面导航
  • 测试API接口调用
  • 测试文件上传
  • 测试支付功能

最后更新：2024-01-20
维护者：DSPlatform技术团队