什么是uni-app

170 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第28天,点击查看活动详情

为什么使用uni-app

  1. uni-app:跨平台。
    • 真正做到“一套代码,多端发行”!
    • 条件编译:优雅的在一个项目里调用不同平台的特色功能。打通了接口。接口名不同的时候写判断。打包可以进行选择生成哪一端。
  2. 运行体验更好
    • 组件、api与微信小程序一致
    • 兼容weex原生渲染(使用局部渲染方案)
  3. 通用的技术栈,学习成本更低
    • vue的语法、微信小程序的api
    • 内嵌mpvue
  4. 开放生态,组件更丰富
    • 支持通过npm安装第三方包
    • 支持微信小程序自定义组件及SDK
    • 兼容mpvue组件及项目
    • App端支持和原生混合编码
    • DCloud将发布插件市场

平台功能框架图

image.png

快速上手

  1. 通过HBuilderX可视化界面

image.png 3. 通过vue-cli命令行

如何把uni-app上的代码展示在微信开发工具上

1.在HBuilderX上选择运行=>运行到小程序模拟器=>微信开发者工具=>如果是第一次使用的话,需要选择微信开发者工具的安装路径。选择以后如果微信开发者工具没有通过设置=>安全设置打开服务端口的话会报错,需要打开,打开以后重新上面的操作即可
uni-app上

image.png
微信开发工具上

1672020231247.png

如何把uni-app上的代码展示在支付宝开发工具上

1.在HBuilderX上选择运行=>运行到小程序模拟器=>支付宝开发者工具->选择路径

image.png 2. 停止运行,重新运行->复制路径

image.png 3. 在支付宝开发者工具->打开项目->复制路径->完成即可

image.png image.png

uni-app发行

  1. 原生app-查看云打包:速度慢
  2. 原生App-本地打包:很麻烦,需要配置iOS和安卓的本地
  3. 各个小程序:上面在各个小程序打开的操作,只是临时的,真正的生成是在发行里

在DCLOLID申请账号。,获取id,然后在HBuilder里登录,就可自动获取uni-app的应用标识(AppId)

image.png

cli创建项目和HBuilderX可视化界面创建项目的区别

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

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