目录
- 一、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之快速搭建框架
发布评论