uniapp创建/运行/发布项目

news2025/2/9 1:12:48
1、产生背景----跨平台应用框架

在移动端各大App盛行的时代，App之间的竞争也更加激烈，他们执着于让一个应用可以做多个事情
所以就应运而生了小程序，微信小程序、支付宝小程序、抖音小程序等等基于App本身的内嵌类程序。

但是各大App他不可能是一样的框架所以就意味着各大App下的小程序也是不一样的。

对于开发人员而言，就意味着一个功能我不仅要写出一套app代码还要写出在各个APP上内嵌进去的n套不一样的代码，这是非常耗时耗力且一定程度上很鸡肋的事情

在这种情况下跨平台应用框架就出现了。
现在市面上比较有名生态相对成熟的就是uniapp、React-native、以及Taro

需要注意的是uniapp是基于vue框架的，react-native是基于react框架的，但taro他是基于node的，所以要用taro请先检查node环境为最新！

各大跨平台框架官方：
uniapp官网：https://uniapp.dcloud.net.cn/
react-native官网：https://www.reactnative.cn/docs/getting-started
taro官网：https://taro-docs.jd.com/docs/

2、前置使用条件

uniapp官网上对于uniapp的解释很全面也很具体
我个人认为uniapp是用着vue的语法，微信小程序的标签。
这就意味着 要使用uniapp最少是需要知道vue是怎么玩转的，小程序可能相对好一点不用那么严格但是最起码的一些基础还是要知道的。

3、环境安装

需要安装 官方指定idea—HBuilderX

3.1 方法一：下载安装

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

3.2 方法二：命令安装

这个方法的前提是你有vue-cli的环境，没有的话建议直接走方法一。

不过命令行的话就直接创建了。
他是通过vue-cli指令指向到HBuilderX的创建项目那边。

4、创建项目
4.1 idea使用创建项目

在点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）：
在这里插入图片描述

下面就会出现这个面板：
在这里插入图片描述

  1. 选择uniapp类型，是uniapp还是Wap2App亦或是5+App或IDE插件
  2. 2的位置输入你的项目名称
  3. 选好你项目文件在电脑中的位置
  4. 选择模板（uni-app自带的模板有 默认的空项目模板、Hello uni-app 官方组件和API示例，还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。）
  5. 根据自己的需要来决定是否启用uniCloud云端或者git
  6. 点击创建 一个你需要的uniapp项目即创建完成
  7. 左下7是在已经有现成项目需要接手去修改时 的云端引入。
4.2 命令行创建项目

第一步 创建项目命令行

  • 使用正式版（对应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版:
    • 创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project
    • 创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

第二步 创建项目命令行之后选择模板
此时，会提示选择项目模板（使用Vue3/Vite版不会提示，目前只支持创建默认模板），初次体验建议选择 hello uni-app 项目模板，如下所示：
在这里插入图片描述
官方给的一些 注意：

  • Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0
  • 如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效）
    • HBuilderX Mac 版本菜单栏左上角 HBuilderX->偏好设置->运行配置->node路径
    • HBuilderX Windows 版本菜单栏 工具->设置->运行配置->node路径
5、启动项目/运行项目
5.1 idea启动/运行项目

  1. 浏览器运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可体验 uni-app 的 web 版。
    在这里插入图片描述
    这里做个提醒，HBuilderX有内置的浏览器也可以直接运行到内置浏览器，界面如图示
    在这里插入图片描述

  2. 运行App到手机或模拟器：使用电压足够的usb端口连接手机，设置中开启USB调试，手机上允许电脑设备调试手机，进入hello-uniapp项目，点击工具栏的运行 -> 运行App到手机或模拟器，即可在该设备里面体验uni-app。
    在这里插入图片描述
    如手机或模拟器无法识别，请点击常见故障排查指南。【这是官方给出的】
    如需运行在苹果手机真机上，注意需使用自定义基座。

  3. 在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。
    在这里插入图片描述

注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。
在这里插入图片描述
注意：微信开发者工具需要开启服务端口 在微信工具的设置->安全中。
在这里插入图片描述

在支付宝、百度、抖音、QQ、快应用（分联盟和华为）、快手、飞书、360、京东等小程序开发工具里运行：内容同上，不再重复。

Tips

  • 如果是第一次使用，需要配置开发工具的相关路径。点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的路径。
    在这里插入图片描述在这里插入图片描述

  • 微信小程序工具需要配置允许权限，不然HBuilder无法调用微信小程序开发工具的命令行

  • 支付宝/百度/抖音/360小程序工具，不支持直接指定项目启动并运行。因此开发工具启动后，请将 HBuilderX 控制台中提示的项目路径，在相应小程序开发者工具中打开。

  • 如果自动启动小程序开发工具失败，请手动启动小程序开发工具并将 HBuilderX 控制台提示的项目路径，打开项目。

运行的快捷键是Ctrl+R。

5.2 命令行启动/运行项目
npm run dev:%PLATFORM%
6、发布项目
6.1 idea发布
6.1.1 打包发布为原生App

在HBuilderX工具栏，点击发行，选择原生app-云端打包，如下图：
在这里插入图片描述
出现如下界面，点击打包即可。
在这里插入图片描述

云端打包支持安心打包，保护用户隐私，不会上传代码和证书，通过差量包制作方式实现安心打包。详见：https://ask.dcloud.net.cn/article/37979

云打包也支持cli模式，通过HBuilderX的cli方式（不是uni-app的cli），可以调用命令行打包，方便持续集成。详见：https://hx.dcloud.net.cn/cli/pack

虽然安心打包已经满足需求，但如仍然希望自己使用 xcode 或 Android studio 进行离线打包，则在 HBuilderX 发行菜单里找到本地打包菜单，生成离线打包资源，然后参考离线打包文档操作：https://nativesupport.dcloud.net.cn/AppDocs/README。

App打包时，注意如果涉及三方sdk，需进行申请并在manifest.json里配置，否则相关功能无法使用。

iOS App打包需要向Apple申请证书。

6.1.2 发布为Web网站

在 manifest.json 的可视化界面，进行如下配置（发行在网站根目录可不配置应用基本路径），此时发行网站路径是 www.xxx.com/h5，如：https://hellouniapp.dcloud.net.cn。
在这里插入图片描述
在HBuilderX工具栏，点击发行，选择网站-H5手机版，如下图，点击即可生成 H5 的相关资源文件，保存于 unpackage 目录。
在这里插入图片描述
在这里插入图片描述

注意:

history 模式发行需要后台配置支持，详见：history 模式的后端配置
打包后，推荐使用前端网页托管服务，一键上传，自带CDN加速，无需购买虚拟机，无需安装nginx等；
若使用传统服务器部署，建议在服务器端开启 gzip 压缩。参考网上的分享：https://juejin.im/post/5af003286fb9a07aac24611b

6.1.3 发布为小程序

（1）发布为微信小程序：

  • 申请微信小程序AppID，参考：微信教程。

  • 在HBuilderX中顶部菜单依次点击 “发行” => “小程序-微信”，输入小程序名称和appid点击发行即可
    在这里插入图片描述

  • 如果手动发行，则点击发行按钮后，会在项目的目录 unpackage/dist/build/mp-weixin 生成微信小程序项目代码。

  • 在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” => “发布” 小程序标准流程，逐步操作即可，详细查看：微信官方教程。

  • 如果在发行界面勾选了自动上传微信平台，则无需再打开微信工具手动操作，将直接上传到微信服务器提交审核。

（2）发布为百度小程序：

  • 入驻小程序并申请百度小程序AppID，参考：百度小程序教程。

  • 在HBuilderX中顶部菜单依次点击 “发行” => “小程序-百度”，输入小程序名称和appid点击发行即可在 /unpackage/dist/build/mp-baidu 生成百度小程序项目代码。
    在这里插入图片描述

  • 在百度小程序开发者工具中，导入生成的百度小程序项目，测试项目代码运行正常后，点击“上传”按钮上传代码，之后在百度小程序的 管理中心 选择创建的应用点击前往发布，选择对应的版本然后提交审核。

（3）发布为支付宝小程序：

  • 入驻支付宝小程序，参考：支付宝小程序教程。
  • 在HBuilderX中顶部菜单依次点击 “发行” => “小程序-支付宝”，即可在 /unpackage/dist/build/mp-alipay 生成支付宝小程序项目代码。
    在这里插入图片描述
  • 在支付宝小程序开发者工具中，导入生成的支付宝小程序项目，测试项目代码运行正常后，点击“上传”按钮上传代码，在 支付宝小程序后台，选择刚提交的版本点击提交审核，详见：支付宝小程序文档。

（4）发布为抖音小程序：

  • 入驻抖音小程序，参考：抖音小程序教程。

  • 在HBuilderX中顶部菜单依次点击 “发行” => “小程序-抖音”，即可在 /unpackage/dist/build/mp-toutiao 生成抖音小程序项目代码。
    在这里插入图片描述

  • 在抖音小程序开发者工具中，导入生成的抖音小程序项目，测试项目代码运行正常后，点击“上传”按钮上传代码，在 抖音小程序后台，选择刚提交的版本点击提交审核，详见：抖音小程序文档。

（5）发布为360小程序：

  • 入驻360小程序，参考：360小程序教程。
  • 在HBuilderX中顶部菜单依次点击 “发行” => “小程序-360”，即可在 /unpackage/dist/build/mp-360 生成360小程序项目代码。
    在这里插入图片描述
  • 在360浏览器中，导入生成的360小程序项目

目前仅windows平台支持。360浏览器自身不支持mac平台。

（6）发布为快应用：

  • 入驻快应用(webview)，参考：快应用(webview)教程。
  • 在HBuilderX中顶部菜单依次点击 “发行” => “快应用联盟”，即可在 /unpackage/dist/build/quickapp-webview 生成快应用(webview)项目代码。
    在这里插入图片描述
  • 在快应用联盟工具中，导入生成的快应用联盟项目，测试项目代码运行正常后，点击”构建“打包正式版，在快应用联盟后台上传

（7）发布为快应用(webview) - 华为：

  • 入驻华为快应用，参考：华为快应用教程。
  • 在HBuilderX中顶部菜单依次点击 “发行” => “快应用-华为”，即可在 /unpackage/dist/build/quickapp-webview 生成华为快应用项目代码。
    在这里插入图片描述
  • 在华为开发者工具中，导入生成的华为快应用项目，测试项目代码运行正常后，点击”构建“打包正式版，在华为快应用后台上传。

发布为QQ、快手、飞书、京东小程序：
内容同上，不再重复。

发布的快捷键是Ctrl+u。同样可拉下快速发布菜单并按数字键选择。

6.2 命令行发布
npm run build:%PLATFORM%
7、补充
7.1 %PLATFORM%取值

在这里插入图片描述

7.2 cli创建项目和HBuilderX可视化界面创建项目的区别
  • cli创建的项目，是传统的node项目结构。工程代码在src目录下，编译器在项目下，编译结果在dist目录下。
  • HBuilderX可视化创建的项目，是一种免node开发概念。工程代码在项目目录下，编译器在HBuilderX目录下而不是项目下，编译结果在项目的unpackage目录下。

有些习惯了cli的开发者，使用HBuilderX可视化模式时不适应。讲解下它们的差别以及为什么HBuilderX提供了多种方式。

cli创建的项目，也可以拖入HBuilderX编辑

  • 首先HBuilderX作为通用编辑器，兼容传统的cli方式开发。不止uni-app的cli，其他框架的cli也可以拖入HBuilderX。

  • 也就是HBuilderX里可以使用可视化界面创建项目，也可以使用cli命令行创建项目，都可以达到和uni-app更好协作的目的。比如pages.json跳转和提示、manifest可视化界面、条件编译、rpx等css单位…众多 for uni-app 的优化都可以使用。

  • 这些是HBuilderX的特点，和项目结构无关。

如想用其他ide开发uni-app，只能使用cli模式

很好理解。因为其他ide没有内置uni-app的编译器，所以其他ide开发uni-app，只能把编译器安装在项目下，也就是cli创建的项目格式。

cli项目可以使用多种ide开发，但ide之间有区别：

  • HBuilderX为uni-app做了大量优化，其他ide搭配uni-app使用也可以用，但没有为uni-app优化过
  • 其他ide没有uni-app的app和uniCloud的运行、调试工具。这些工具在HBuilderX里。如开发app和uniCloud，必须使用HBuilderX。

可视化方式的区别

  • HBuilderX可视化创建、运行、发布项目，底层调用的也是npm的run、build等命令。只是编译器不在项目下，而是在HBuilderX的目录下。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1335959.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

解决ELement-UI三级联动数据不回显

解决ELement-UI三级联动数据不回显

目录 一.处理数据时使用this.$set方法来动态地设置实例中的属性，以确保其响应式。 二.检查数据格式是否正确 三.绑定v-if 确保每次执行 四.完整代码 一.处理数据时使用this.$set方法来动态地设置实例中的属性，以确保其响应式。 二.检查数据格式是否正确…
阅读更多...
通过three.js玩转车展项目

通过three.js玩转车展项目

1.项目搭建 1.1 创建文件夹 mkdir 文件名1.2 初始化package.json npm init -y1.3 安装打包工具并配置相关依赖 npm i parcel -d在package.json中打包路径和指令 1.4 安装three.js npm i three -d2.项目搭建 2.1 新建index.html，并再index.html引入car.js,在…
阅读更多...
分类预测 | Matlab实现SCSO-SVM基于沙猫群优化算法优化支持向量机的多变量分类预测【23年新算法】

分类预测 | Matlab实现SCSO-SVM基于沙猫群优化算法优化支持向量机的多变量分类预测【23年新算法】

分类预测 | Matlab实现SCSO-SVM基于沙猫群优化算法优化支持向量机的多变量分类预测【23年新算法】 目录 分类预测 | Matlab实现SCSO-SVM基于沙猫群优化算法优化支持向量机的多变量分类预测【23年新算法】分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现SCSO-…
阅读更多...
MySQL递归公用表表达式

MySQL递归公用表表达式

😇作者介绍：一个有梦想、有理想、有目标的，且渴望能够学有所成的追梦人。 🎆学习格言：不读书的人,思想就会停止。——狄德罗 ⛪️个人主页：进入博主主页 🗼专栏系列：MySQL知识 &…
阅读更多...
asp.net core 教程

asp.net core 教程

asp.net core 教程 写在前面新建项目Get和PostGETPOST MVC-模型控制视图如何通俗理解MVC代码实例 API模型（前后端分离）前端代码后端代码 文件配置优先级优先级顺序 从数据库读取配置文件数据缓存 写在前面 学了快一年多的C#了！ 我最开始学的…
阅读更多...
XxlJob 常见的报错

XxlJob 常见的报错

XxlJob 启动日志报错： 报错一： ERROR c.x.job.core.util.XxlJobRemotingUtil - Connection refused: connect java.net.ConnectException: Connection refused: connect 解决方法： 要启动的类是 XxlJobAdminApplication ，而不是…
阅读更多...
【论文阅读】MCANet: Medical Image Segmentation with Multi-Scale Cross-Axis Attention

【论文阅读】MCANet: Medical Image Segmentation with Multi-Scale Cross-Axis Attention

文章目录 摘要创新点总结实现效果总结 摘要 链接：https://arxiv.org/abs/2312.08866 医学图像分割是医学图像处理和计算机视觉领域的关键挑战之一。由于病变区域或器官的大小和形状各异，有效地捕捉多尺度信息和建立像素间的长距离依赖性至关重要。本文提…
阅读更多...
SpringBoot Event，事件驱动轻松实现业务解耦

SpringBoot Event，事件驱动轻松实现业务解耦

什么是事件驱动 Spring 官方文档AWS Event Driven 简单来说事件驱动是一种行为型设计模式，通过建立一对多的依赖关系，使得当一个对象的状态发生变化时，所有依赖它的对象都能自动接收通知并更新。即将自身耦合的行为进行拆分，使拆…
阅读更多...
vscode括号颜色突然变成白色的了，怎么解决

vscode括号颜色突然变成白色的了，怎么解决

更新版本后发现vscode的各种括号都变成了白色，由于分色括号已经使用习惯，突然变成白色非常不舒服，尝试多次后，为大家提供一下几种解决方式，希望能帮到同样受到此种困惑的你： 第一种： 首先打开…
阅读更多...
TYN-02A-Ⅱ 太阳能警示灯

TYN-02A-Ⅱ 太阳能警示灯

应用范围: 可安装在电线杆，路灯，围挡，交 通护栏及各种杆式固体等场所起警示作用。 产品特点： 采用进口PS材质; 光控无开关，白天不闪，昏暗环境自动闪烁，无需手动操作，省时省事; …
阅读更多...
blender使用faceit绑定自己的表情动作

blender使用faceit绑定自己的表情动作

blender使用faceit绑定自己的表情控制模型 faceit是个神器，来记录一下如何让表情动起来保持相对位置头部分离，方便后续绑定faceitfaceit的注册rig生成地标Animate可以修正表情烘培之前记得保存使用Faceit的整个流程 faceit是个神器，来记录一下…
阅读更多...
test-03-java 单元测试框架 testNG 入门介绍 junit/junit5/testNG 详细对比

test-03-java 单元测试框架 testNG 入门介绍 junit/junit5/testNG 详细对比

拓展阅读 test-01-java 单元测试框架 junit 入门介绍 test-02-java 单元测试框架 junit5 入门介绍 test-03-java 单元测试框架 testNG 入门介绍 junit/junit5/testNG 详细对比 test assert-01-Google Truth 断言 test 系统学习-03-TestNG Spock testng 入门使用教程 开源…
阅读更多...
Oracle 学习（2）

Oracle 学习（2）

过滤和排序数据 where条件过滤 日期格式 查询10号部门的员工信息：SQL> select * from emp where deptno10 查询”KING”的信息：SQL> select * from emp where ename KiNg 未选定行。 注意：字符串大小写敏感。 SQL> selec…
阅读更多...
【论文笔记】3D Gaussian Splatting for Real-Time Radiance Field Rendering

【论文笔记】3D Gaussian Splatting for Real-Time Radiance Field Rendering

原文链接：https://arxiv.org/abs/2308.04079 1. 引言 网孔和点是最常见的3D场景表达，因其是显式的且适合基于GPU/CUDA的快速栅格化。神经辐射场（NeRF）则建立连续的场景表达便于优化，但渲染时的随机采样耗时且引入噪声…
阅读更多...
时序预测 | Matlab实现SSA-CNN-BiLSTM麻雀算法优化卷积双向长短期记忆神经网络时间序列预测

时序预测 | Matlab实现SSA-CNN-BiLSTM麻雀算法优化卷积双向长短期记忆神经网络时间序列预测

时序预测 | Matlab实现SSA-CNN-BiLSTM麻雀算法优化卷积双向长短期记忆神经网络时间序列预测 目录 时序预测 | Matlab实现SSA-CNN-BiLSTM麻雀算法优化卷积双向长短期记忆神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现SSA-CNN-BiLSTM麻雀算…
阅读更多...
关于Python里xlwings库对Excel表格的操作（十八）

关于Python里xlwings库对Excel表格的操作（十八）

这篇小笔记主要记录如何【设置单元格数据的对齐方式】。前面的小笔记已整理成目录，可点链接去目录寻找所需更方便。 【目录部分内容如下】【点击此处可进入目录】 （1）如何安装导入xlwings库； （2）如何在Wps下…
阅读更多...
Vue2和Vue3组件间通信方式汇总（2）------$emit

Vue2和Vue3组件间通信方式汇总（2）------$emit

组件间通信方式是前端必不可少的知识点，前端开发经常会遇到组件间通信的情况，而且也是前端开发面试常问的知识点之一。接下来开始组件间通信方式第二弹------$emit,并讲讲分别在Vue2、Vue3中的表现。 Vue2Vue3组件间通信方式汇总（1&#xff0…
阅读更多...
7_js_dom编程入门1

7_js_dom编程入门1

Objective（本课目标） 掌握获取页面元素的常用方法 掌握事件触发案例 能够区分innerText和innerHTML的区别 综合案例训练 1 DOM 介绍 1.1 什么是DOM 文档对象模型（Document Object Model，简称DOM），是 …
阅读更多...
Grafana二进制部署并配置prometheus数据源

Grafana二进制部署并配置prometheus数据源

1、获取grafna二进制安装包 https://grafana.com/grafana/download?pggraf&plcmtdeploy-box-1 grafana官网下载地址 [rootambari-hadoop1 ~]# cd /opt/module/grafana/ [rootambari-hadoop1 grafana]# pwd /opt/module/grafana2、在安装自己的安装目录执行 wget https:…
阅读更多...
谷歌 SGE 和生成式 AI 在搜索中：2024 年会发生什么

谷歌 SGE 和生成式 AI 在搜索中：2024 年会发生什么

2024 年，Google 的搜索生成体验将如何影响营销？探索 AI 驱动的搜索趋势、SERP 中的 SGE、自然流量影响等。 最初，Labs 中的 Google 搜索生成体验 （SGE） 实验预计将于 2023 年 12 月“结束”。但随着谷歌实验室网站的最…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023