uni-app跨平台开发知识点总结

uni-app简介

  • uni-app概述:uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
  • uni-app由来:是为了解决跨平台开发的问题。在移动应用开发中,不同平台(如iOS、Android)有不同的开发语言和技术栈,这导致开发者需要针对不同平台开发多套代码,增加了开发和维护的成本。DCloud公司正是看到了这些问题,因此决心打造一款终极的跨平台解决方案,此时,uni-app就应运而生,Uni-app的出现使得开发者可以使用同一套代码,快速地部署到多个平台,提高了开发效率和降低了开发成本。


文章目录

  1. uni-app环境搭建
  2. uni-app项目的创建和运行
  3. uni-app开发规范
  4. uni-app文件目录结构
  5. uni-app外部资源引入
  6. uni-app的页面样式与布局

一、uni-app环境搭建

  1. 安装HBuilderXHBuilderX是uni-app官方推荐的开发工具,支持uni-app的开发和调试。你可以从HBuilderX官网下载适用于你操作系统的安装程序,并按照安装向导进行安装。

  2. 创建uni-app项目:打开HBuilderX,选择“文件” > “新建” > “项目”,然后选择“uni-app”模板。按照向导提供的选项设置项目名称、路径和模板类型,然后点击“确定”来创建项目。

  3. 选择项目模板:在创建项目时,你可以选择不同的模板类型,包括空模板、Hello uni-app、Vue、微信小程序、支付宝小程序等。根据你的需要选择合适的模板类型。

  4. 安装运行依赖:一般情况下,uni-app项目创建完成后,HBuilderX会自动安装项目所需的依赖。如果没有自动安装,你可以在项目根目录下打开命令行终端,执行npm install命令来安装依赖。

  5. 运行项目:依赖安装完成后,你可以通过HBuilderX提供的运行按钮来启动项目。选择“运行” > “运行到浏览器/手机”,即可在浏览器或手机上预览你的uni-app项目。

  6. 编写代码:使用HBuilderX提供的代码编辑器,你可以开始编写uni-app的代码。uni-app的语法类似于Vue.js,因此如果你

你可能感兴趣的:(uni-app跨平台开发知识点总结)