【Uniapp】一、 UniAPP框架基本信息

admin • • 移动开发

1 什么是 UniAPP ？

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS，Android，H5，以及各种小程序（微信/支付宝/百度/头条/ QQ /钉钉）等多个平台。

uni-app在手，做啥都不愁。甚至不跨端，也是更好 uni-app 的小程序开发框架，更好的 App 跨平台框架，更方便的 H5 开发框架。

你都可以快速交付，不需要转换开发思维，不需要更改开发习惯。

2 为什么要选择 UniAPP ？

  1. 开发者/案例数量更多

几十万应用、uni统计月活12亿、70+微信/qq群、更高的百度指数跨端完善度更高，真正落地的提高生产力。

  1. 平台能力不受限

在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。支持原生代码混写和原生sdk集成。

  1. 性能体验优秀

加载新页面速度更快、自动diff更新数据。App端支持原生渲染，可支撑更流畅的用户体验。小程序端的性能优于市场其他框架。

  1. 周边生态丰富

插件市场数千款插件。支持NPM、支持小程序组件和SDK。微信生态的各种sdk可直接用于跨平台App。

  1. 学习成本低

基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本。

  1. 开发成本低

不止开发成本，招聘、管理、测试各方面成本都大幅下降。

3 UniAPP 功能框架

img

4 UniAPP 开发工具

  1. 下载开发工具，HBuilderX：
    HBuilderX是通用的前端开发工具，下载App开发版。

  2. 创建 uni-app 项目
    选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。
    uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。

  3. 运行 uni-app
    主要包括：浏览器运行、真机运行、小程序运行等

  4. 发布 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开发小程序的优势，及项目资源引用的注意事项，下一篇将继续进行项目搭建等工作。大家在配置的过程中难免会遇到一些问题，欢迎大家在评论区留言一起解决，如果这篇文章对你有所帮助就点个赞吧👍

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码

)">
< <上一篇
下一篇>>