uniapp 项目实践总结(二)从零开始搭建一个项目

Mark   in Jincheng

导语：本篇文章主要是项目方面的技术开发总结，新建一个项目可以选择使用可视化界面，也可以使用命令行搭建。

# 目录

  • 可视化界面
  • 命令行搭建
  • 安卓开发环境
  • 苹果开发环境

# 可视化界面

# 安装软件

使用官方推荐的 HbuilderX 软件，开发方式比较简单，内置相关环境以及终端，无需配置 node。

# 新建项目

  • 打开软件找到文件》新建》项目，选择 uni-app 项目，默认模板就可以；
  • 填写项目名称和存储路径，点击右下角创建按钮，这样项目就创建成功了；

# 运行项目

在项目根目录下面，选择顶部导航运行。

  • 运行到游览器：点击运行到游览器，可以选择内置游览器，也可以外部游览器，外部游览器需要设置好游览器安装路径。

  • 运行到小程序：选择需要的小程序，配置小程序开发者工具路径，点击运行到指定的小程序开发工具或指定页面。

  • 运行到 app:

    • 运行到安卓，下载安卓开发编辑器或使用真机，选择运行到安卓基座或指定页面；
    • 运行到 ios，下载苹果 xcode 编辑器或使用真机，选择运行到 ios 基座或指定页面；

# 发行项目

在项目根目录下面，选择顶部导航发行。

# 发布到网站

PC、Web 或手机 H5：填写网站名称和域名以及可选项，点击发行。

行到H5

# 发布到小程序

选择需要的小程序，填写小程序名称和小程序 AppId 以及可选项，点击发行。

行到小程序

# 发布到 app

方式有云打包或者本地打包。

app云打包安卓 app云打包ios

# 命令行搭建

# 环境安装

  • 安装 node 环境
  • 全局安装 vue-cli
npm install -g @vue/cli
1

# 创建项目

创建 uni-app 项目

  • 使用 vue 脚手架
#使用正式版（对应 HBuilderX 最新正式版）
vue create -p dcloudio/uni-preset-vue my-project

#使用 alpha 版（对应 HBuilderX 最新 alpha 版）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
1
2
3
4
5
  • 使用 Vue3/Vite 版

node 版本^14.18.0 || >=16.0.0。

#使用正式版（对应 HBuilderX 最新正式版）
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

#使用 alpha 版（对应 HBuilderX 最新 alpha 版）
npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project

# 创建以 typescript 开发的工程
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
1
2
3
4
5
6
7
8
  • 更新依赖版本
# 更新到最新正式版
npx @dcloudio/uvm

# 更新到最新 Alpha 版
npx @dcloudio/uvm alpha
1
2
3
4
5

# 运行 uniapp 项目

npm run dev:%PLATFORM%
1

# 发布 uniapp 项目

npm run build:%PLATFORM%
1

tips: %PLATFORM% 可取值如下：

值 平台
app-plus app 平台生成打包资源（支持 npm run build:app-plus，可用于持续集成。不支持 run，运行调试仍需在 HBuilderX 中操作）
h5 H5
mp-alipay 支付宝小程序
mp-baidu 百度小程序
mp-weixin 微信小程序
mp-toutiao 抖音小程序
mp-lark 飞书小程序
mp-qq qq 小程序
mp-360 360 小程序
mp-kuaishou 快手小程序
mp-jd 京东小程序
mp-xhs 小红书小程序
quickapp-webview 快应用(webview)
quickapp-webview-union 快应用联盟
quickapp-webview-huawei 快应用华为

# 安卓开发环境安装

下面讲解配置安卓开发环境，包括 Java 安装，Android Studio 安装。

# 安装 Java 环境

JavaSDK8 下载官网：https://www.oracle.com/cn/java/technologies/javase/javase8u211-later-archive-downloads.html (opens new window)

  • 下载软件；
  • 安装软件；
  • 配置环境变量；

在系统变量 Path 里面加入D:\java\jre1.8\bin;

  • 查看版本
C:\Users\Administrator>java -version
java version "1.8.0_261"
Java(TM) SE Runtime Environment (build 1.8.0_261-b12)
Java HotSpot(TM) 64-Bit Server VM (build 25.261-b12, mixed mode)
1
2
3
4

# 下载 Android Studio

tips:下载过程中会遇到网络问题，建议配置以下 hosts 文件如下。

# google download
203.208.41.65 dl.google.com
220.181.174.161  dl.google.com
203.208.40.33  dl.google.com
1
2
3
4

# 优化系统盘占用

  • 从系统盘移动到其他盘，主要是 c 盘下的.android和.gradle文件夹下的内容；
  • 在其他盘新建一个文件夹AndroidConfig,移动上面两个文件夹到新的文件夹，
  • 找到.android/adv/Pixel_4_API_29.ini配置文件，更改 path 到你新的文件夹路径；
  • 找到安卓编辑器安装目录下的bin文件夹，打开idea.properties文件，并在最后一行添加：
gradle.user.home=D:/AndroidConfig/.gradle
1

# 查看打印版本

  • 查看 adb 版本
D:\AndroidSdk\platform-tools>adb version
Android Debug Bridge version 1.0.41
Version 34.0.0-9570255
Installed as D:\AndroidSdk\platform-tools\adb.exe
1
2
3
4
  • 查看 emulator 版本
D:\AndroidSdk\emulator>emulator -version
INFO    | Android emulator version 32.1.11.0 (build_id 9536276) (CL:N/A)
INFO    | Storing crashdata in: C:\Users\ADMINI~1\AppData\Local\Temp\\AndroidEmulator\emu-crash.db, detection is enabled
INFO    | Duplicate loglines will be removed, if you wish to see each indiviudal line launch with the -log-nofilter flag.
Android emulator version 32.1.11.0 (build_id 9536276) (CL:N/A)
Copyright (C) 2006-2017 The Android Open Source Project and many others.
This program is a derivative of the QEMU CPU emulator (www.qemu.org).

  This software is licensed under the terms of the GNU General Public
  License version 2, as published by the Free Software Foundation, and
  may be copied, distributed, and modified under those terms.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 查看软件界面

编辑器界面

到此安卓开发环境就安装配置完毕。

# 苹果 MAC 开发环境安装

需要准备一台安装有 Mac 系统的电脑。

# xcode 下载

Xcode 软件官网 (opens new window)

# 下载模拟器

# Xcode 内下载

  • 打开 xcode，点击导航 Preference，进入 Downloads 面板；
  • 打开 Components；
  • 选择对应的模拟器下载；

# 手动下载

下载失败可以点击以下链接：

下载完成后执行以下步骤：

  • 下载完成后进入/Users/#{Username}/Library/Caches;
  • 找到com.apple.dt.Xcode右键选择Show Packages Contents;
  • 进入 Downloads 目录，没有就手动创建一个；
  • 将下载好的移入Downloads目录；
  • 重启 Xcode

到这里苹果的开发环境就安装完毕。

# 预览软件界面

ios Xcode模拟器

好了，以上就是 uniapp 的新项目搭建全过程，如有不足之处，请多多指正。

版权声明：博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：uniapp 项目实践总结(二)从零开始搭建一个项目

如需转载，请注明《uniapp 项目实践总结(二)从零开始搭建一个项目》转自，原作者Mark

分享至：

  • qq
  • qq空间
  • 微博
  • 豆瓣
  • 贴吧
目录
可视化界面
安装软件
新建项目
运行项目
发行项目
命令行搭建
环境安装
创建项目
运行 uniapp 项目
发布 uniapp 项目
安卓开发环境安装
安装 Java 环境
下载 Android Studio
优化系统盘占用
查看打印版本
查看软件界面
苹果 MAC 开发环境安装
xcode 下载
下载模拟器
预览软件界面
  • Copyright © 2017-2024 MarkGuan