admin管理员组文章数量:1532192
目录
- 一、uni-app 是什么？
- 二、为什么选择 uni-app ？
- 三、功能框架
- 四、准备工作
- 五、搭建框架
- 1.创建项目
- 2.运行项目
- （1）运行到浏览器
- （2）内置浏览器运行
- （3）运行到手机或模拟器
- （4）运行到小程序模拟器
- （5）运行到终端
- 3.发布项目
- （1）打包为原生App
- （2）发行为微信小程序
- （3）发行为 H5
一、uni-app 是什么？
uni-app 由 DCloud 公司开发，是一个使用 Vue.js 开发所有前端应用的框架，开发者只需编写一套代码，即可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。即使不跨端，uni-app 也是更好的小程序开发框架、更好的 App 跨平台框架、更方便的 H5 开发框架。
二、为什么选择 uni-app ？
uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。以下截图来源于 uni-app 官网：
三、功能框架
四、准备工作
uni-app支持通过可视化界面、vue-cli 命令行 (opens new window) 两种方式快速创建项目。
可视化的方式比较简单，HBuilderX 内置相关环境，开箱即用，无需配置 nodejs。
本文使用可视化界面的方式搭建框架。开始之前，需先下载 HBuilderX ，官方下载地址：https://www.dcloud.io/hbuilderx.html
推荐下载 App 开发版，可开箱即用；如下载标准版，在运行或发行 uni-app 时，会提示安装uni-app插件，插件下载完成后方可使用。
五、搭建框架
1.创建项目
点击“文件” -> “新建” -> “项目”：
输入项目名称，选择 “uni-ui项目” 模板，点击【创建】：
2.运行项目
uni-app 支持多种运行项目的方式，包括运行到浏览器、内置浏览器运行、运行到手机或模拟器、运行到小程序模拟器、运行到终端等。
（1）运行到浏览器
运行效果如下：
（2）内置浏览器运行
运行效果如下：
（3）运行到手机或模拟器
该方式需要安装微信开发者工具：
在手机上的运行效果如下：
（4）运行到小程序模拟器
运行效果如下：
运行时可能会报如下错误：
[微信小程序开发者工具] ? Enable IDE Service (y/N)
解决方法：
进入微信开发者工具，点击 “设置” 按钮，在弹出的窗口选择 “安全” 选项，打开 “服务端口”：
（5）运行到终端
运行到终端需要在项目下生成 package.json 文件，在项目根目录下执行以下命令生成 package.json 文件：
npm init -y
生成 package.json 文件后，再次打开运行到终端：
3.发布项目
（1）打包为原生App
出现以下界面，输入相关信息，点击【打包】：
（2）发行为微信小程序
输入微信小程序AppId，点击【发行】：
（3）发行为 H5
输入网站标题、网站域名，点击【发行】：
版权声明：本文标题：【uni-app系列】uni-app之快速搭建框架 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1725440431a1023499.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论