UniAPP前端开发框架.pdfVIP

UniAPP前前端端开开发发框框架架

UniAPP前前端端开开发发框框架架学学习习

⼀⼀、、UniAPP介介绍绍

（（1））什什么么是是UniAPP？？

uni-app是⼀个使⽤Vue.js开发所有前端应⽤的框架，开发者编写⼀套代，可发布到iOS，Android，H5，以及各种⼩程序

（微信/⽀付宝/百度/头条/QQ/钉钉）等多个平台。

uni-app在⼿，做啥都不愁。甚⾄不跨端，也是更好uni-app的⼩程序开发框架，更好的App跨平台框架，更⽅便的H5开发框

架。

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

（（2））为为什什么么要要选选择择UniAPP？？

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

⼏⼗万应⽤、uni统计⽉活12亿、70+微信/qq群、更⾼的百度指数跨端完善度更⾼，真正落地的提⾼⽣产⼒。

2.平台能⼒不受限

在跨端的同时，通过条件编译+平台特有API调⽤，可以优雅的为某平台写个性化代，调⽤专有能⼒⽽不影响其他平台。⽀持原

⽣代混写和原⽣sdk集成。

.性能体验优秀

加载新页⾯速度更快、⾃动diff更新数据。App端⽀持原⽣渲染，可⽀撑更流畅的⽤户体验。⼩程序端的性能优于市场其他框架。

4.周边⽣态丰富

数千款插件。⽀持NPM、⽀持⼩程序组件和SDK。微信⽣态的各种sdk可直接⽤于跨平台App。

5.学习成本低

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

6.开发成本低

不⽌开发成本，招聘、管理、测试各⽅⾯成本都⼤幅下降。

（（3））UniAPP功功能能框框架架

（（4））UniAPP开开发发环环境境搭搭建建

1.下载开发⼯具，HBuilderX：

HBuilderX是通⽤的前端开发⼯具，但为uni-app做了特别强化。

下载App开发版，可开箱即⽤；如下载标准版，在运⾏或发⾏uni-app时，会提⽰安装uni-app插件，插件下载完成后⽅可使

⽤。

2.创建uni-app项⽬

选择uni-app类型，输⼊⼯程名，选择模板，点击创建，即可成功创建。

uni-app⾃带的模板有Hellouni-app，是官⽅的组件和API⽰例。还有⼀个重要模板是uniui项⽬模板，⽇常开发推荐使⽤

该模板，已内置⼤量常⽤组件。

.运⾏uni-app

主要包括：浏览器运⾏、真机运⾏、⼩程序运⾏等

4.发布uni-app

主要包括：云端原⽣APP、离线原⽣APP、H5、各种⼩程序

（（5））UniAPP框框架架简简介介

开发规范约定

页⾯⽂件向导

组件标签靠近⼩程序规范，详见uni-app组件规范

互连能⼒（JSAPI）靠近微信⼩程序规范，但需要将替换替换wx为uni，详见uni-app接⼝规范

数据绑定及事件处理同Vue.js规范，同时补充了App和页⾯的⽣命周期

为兼容多端运⾏，建议使⽤flex布局进⾏开发

资源路径说明

template内约会静态资源，如image，video等标签的src属性时，可以使⽤相对路径或绝对路径，形式如下

!--绝对路径，/static指根⽬录下的static⽬录，在cli项⽬中/static指src⽬录下的static⽬录--

imageclass=logosrc=/static/logo.png/image

imageclass=logosrc=@/static/logo.png/image

!--相对路径--

imageclass=logosrc=../../static/logo.png/image

注意

@初始的绝对路径以及相对路径会通过base64转换规则校验

约会的静态资源在⾮h5平台，均不转为base64。

H5平台，⼩于4kb的资源会被转换成base64，其余不转。