1 什么是 UniAPP ？
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS，Android，H5，以及各种小程序（微信/支付宝/百度/头条/ QQ /钉钉）等多个平台。
uni-app在手，做啥都不愁。甚至不跨端，也是更好 uni-app 的小程序开发框架，更好的 App 跨平台框架，更方便的 H5 开发框架。
你都可以快速交付，不需要转换开发思维，不需要更改开发习惯。
2 为什么要选择 UniAPP ？
- 开发者/案例数量更多
几十万应用、uni统计月活12亿、70+微信/qq群、更高的百度指数跨端完善度更高，真正落地的提高生产力。
- 平台能力不受限
在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。支持原生代码混写和原生sdk集成。
- 性能体验优秀
加载新页面速度更快、自动diff更新数据。App端支持原生渲染，可支撑更流畅的用户体验。小程序端的性能优于市场其他框架。
- 周边生态丰富
插件市场数千款插件。支持NPM、支持小程序组件和SDK。微信生态的各种sdk可直接用于跨平台App。
- 学习成本低
基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本。
- 开发成本低
不止开发成本，招聘、管理、测试各方面成本都大幅下降。
3 UniAPP 功能框架
4 UniAPP 开发工具
-
下载开发工具，HBuilderX：
HBuilderX是通用的前端开发工具，下载App开发版。 -
创建 uni-app 项目
选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。
uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。 -
运行 uni-app
主要包括：浏览器运行、真机运行、小程序运行等 -
发布 uni-app
主要包括：云端原生 APP 、离线原生 APP、H5、各种小程序
5 UniAPP 框架简介
开发规范约定
- 页面文件向导Vue单文件组件（SFC）规范
- 组件标签靠近小程序规范，详见uni-app组件规范
- 互连能力（JS API）靠近微信小程序规范，但需要将替换替换 wx 为 uni ，详见uni-app接口规范
- 数据绑定及事件处理同 Vue.js 规范，同时补充了 App 和页面的生命周期
- 为兼容多端运行，建议使用 flex 布局进行开发
资源路径说明
template内约会静态资源，如image，video等标签的src属性时，可以使用相对路径或绝对路径，形式如下
<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>
注意：
- @初始的绝对路径以及相对路径会通过base64转换规则校验
- 约会的静态资源在非h5平台，均不转为base64。
- H5平台，小于4kb的资源会被转换成base64，其余不转。
js文件或script标签内（包括renderjs等）日期js文件时，可以使用相对路径和绝对路径，形式如下
// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'
css文件或style标签内约会css文件时（scss，less文件同理），可以使用相对路径和绝对路径，形式如下
/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');
css文件或style标签内引用的图片路径，可以使用相对路径也可以使用绝对路径，形式如下
/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);
总结
到这里我们就了解了Uniapp开发小程序的优势，及项目资源引用的注意事项，下一篇将继续进行项目搭建等工作。大家在配置的过程中难免会遇到一些问题，欢迎大家在评论区留言一起解决，如果这篇文章对你有所帮助就点个赞吧👍
转载：https://blog.csdn.net/qq_38987146/article/details/128735993