乐趣区

关于前端:uniapp-项目实践总结二从零开始搭建一个项目

jiezi

导语：本篇文章次要是我的项目方面的技术开发总结，新建一个我的项目能够抉择应用可视化界面，也能够应用命令行搭建。

目录

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

可视化界面

装置软件

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

  • 下载地址: hbuilderx；

新建我的项目

  • 关上软件找到文件》新建》我的项目，抉择 uni-app 我的项目，默认模板就能够；
  • 填写项目名称和存储门路，点击右下角创立按钮，这样我的项目就创立胜利了；

运行我的项目

在我的项目根目录上面，抉择顶部导航运行。

  • 运行到游览器：点击运行到游览器，能够抉择内置游览器，也能够内部游览器，内部游览器须要设置好游览器装置门路。
  • 运行到小程序：抉择须要的小程序，配置小程序开发者工具门路，点击运行到指定的小程序开发工具或指定页面。

  • 运行到 app:

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

发行我的项目

在我的项目根目录上面，抉择顶部导航发行。

公布到网站

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

公布到小程序

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

公布到 app

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

  • 云打包：安卓签名证书生成指南，ios 签名证书生成指南

  • 本地打包：安卓本地打包教程，iOS 本地打包教程

命令行搭建

环境装置

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

创立我的项目

创立 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
  • 应用 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
  • 更新依赖版本
# 更新到最新正式版
npx @dcloudio/uvm

# 更新到最新 Alpha 版
npx @dcloudio/uvm alpha

运行 uniapp 我的项目

npm run dev:%PLATFORM%

公布 uniapp 我的项目

npm run build:%PLATFORM%

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

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

在零碎变量 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)

下载 Android Studio

  • 关上软件官网：https://developer.android.google.cn/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

优化系统盘占用

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

查看打印版本

  • 查看 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
  • 查看 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.

查看软件界面

到此安卓开发环境就装置配置结束。

苹果 MAC 开发环境装置

须要筹备一台装置有 Mac 零碎的电脑。

xcode 下载

Xcode 软件官网

下载模拟器

Xcode 内下载

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

手动下载

下载失败能够点击以下链接：

  • ios 8.1
  • ios 8.2
  • ios 8.3
  • ios 8.4
  • ios 9.0
  • ios9.1
  • ios 9.2
  • ios 9.3
  • ios 10.0
  • ios10.1
  • ios10.2
  • ios10.3
  • ios11.0
  • ios11.1
  • ios11.2
  • ios11.3
  • ios11.4
  • ios12.0
  • ios12.1

下载实现后执行以下步骤：

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

到这里苹果的开发环境就装置结束。

预览软件界面

好了，以上就是 uniapp 的新我的项目搭建全过程。

退出移动版