关于uniapp

admin管理员组

文章数量:1122847

uniapp是一款基于Vue.js框架的跨平台应用开发框架。它可以将同一份代码编译生成多个应用程序，包括iOS、Android、H5、小程序等。在这篇文章中，我们将详细介绍Uniapp的特点、优势以及如何使用Uniapp开发跨平台应用。

一、Uniapp的特点

1、跨平台开发

Uniapp可以实现一次编码，同时生成多个应用程序，包括iOS、Android、H5、小程序等。开发者只需要使用Vue.js框架进行开发，而不需要考虑不同平台的差异，大大降低了应用程序的开发难度和复杂度。

2、统一的开发语言和工具

Uniapp的开发语言是Vue.js，它是一种基于组件化开发的前端框架，易于学习和使用。Uniapp提供了一套完整的开发工具，包括Uni-app Cli、HBuilder X等，使得开发者可以在同一个环境下进行开发、调试和打包。

3、独特的基于条件编译的代码生成技术

Uniapp采用了一种名为“基于条件编译的代码生成技术”，能够根据应用程序平台的不同，编译出特定的应用程序代码。开发者只需要编写一份代码，就可以生成多个应用程序，大大提高了开发效率。

4、多种组件库支持

Uniapp支持多种UI组件库，包括Vant、Mint UI、uView等，开发者可以根据自己的需求选择适合的组件库，快速构建应用程序。

二、Uniapp的优势

1、减少开发成本和时间

Uniapp的跨平台开发能力可以帮助开发者减少开发成本和时间，同时也降低了维护成本。开发者只需要编写一份代码，就可以生成多个应用程序，无需为不同平台单独开发和维护多个版本的应用程序。

2、一次开发，多端部署

Uniapp提供了多种应用程序部署方式，包括H5、微信小程序、支付宝小程序、百度智能小程序、头条小程序、QQ小程序、360小程序、App、快应用等。开发者可以根据自己的需求，选择合适的部署方式。

3、良好的性能和用户体验

Uniapp采用了Vue.js框架，并使用了Weex和小程序的底层技术，能够在不同平台上实现良好的性能和用户体验。

4、开放的生态系统

Uniapp具有开放的生态系统支持多种第三方插件和组件库，开发者可以使用各种插件和组件库，以满足应用程序的各种需求，如地图、支付、分享、推送等。

三、如何使用Uniapp开发跨平台应用

1、环境搭建

首先需要安装Node.js环境和HBuilder X集成开发环境。安装完后，使用命令行工具安装Uni-app Cli，输入命令：npm install -g @vue/cli @vue/cli-init

安装完成后，即可创建Uniapp项目。

2、项目创建

打开HBuilder X，选择新建项目，选择Uni-app，输入项目名称、应用ID、目录等信息。选择创建项目后，即可开始编写代码。

3、开发调试

在HBuilder X中打开创建的项目，即可使用Vue.js的开发方式进行代码编写和调试。HBuilder X内置了丰富的调试工具，可以模拟不同平台的应用程序运行情况。

4、打包发布

编写完成后，可以使用HBuilder X内置的打包工具，生成多种应用程序包，如H5、微信小程序、支付宝小程序、百度智能小程序、头条小程序、QQ小程序、360小程序、App、快应用等。

下面是我平时的一部分代码

一套代码运行

使用Vue-cli创建项目
环境安装
全局安装vue-cli

npm install -g @vue/cli

创建uni-app

使用正式版（对应HBuilderX最新正式版）

vue create -p dcloudio/uni-preset-vue my-project

使用alpha版（对应HBuilderX最新alpha版）

vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

此时，会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板

选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 userName/repositoryName，如 dcloudio/uni-template-picture 就是下载图片模板

模板项目存放于 Github，由于国内网络环境问题，可能下载失败。针对此问题可以尝试如下措施：

更换网络重试，比如使用 4g 网络
在设备或路由器的网络设置中增加 DNS（如：8.8.8.8）
在设备中增加固定的 hosts（如：140.82.113.4 github）

修改依赖为指定版本

查看 HBuilderX 对应的 NPM 依赖版本: 打开 NPM版本记录，版本号 2.0.0- 后面是与 HBuilderX 对应的版本号且小版本不会超过9，比如 HBuilderX 2.7.5.20200518 对应的版本号 2.0.0-27520200518001，2.0.0-271420200618 对应的为 2.0.0-27920200618002。

批量修改 package.json 中 uni 相关依赖为指定的版本号（去掉版本号前面 ^）。

对于有变化的依赖进行增删，提示不存指定版本的依赖可以保留原始版本或者删除，运行时提示缺少的依赖自行安装

运行、发布uni-app

npm run dev:%PLATFORM%
npm run build:%PLATFORM%
1
2

可以自定义更多条件编译平台，比如钉钉小程序 参考地址

目前使用npm run build:app-plus会在/dist/build/app-plus下生成app打包资源。如需制作wgt包，将app-plus中的文件压缩成zip（注意：不要包含app-plus目录），再重命名为${appid}.wgt， appid为manifest.json文件中的appid
dev 模式编译出的各平台代码存放于根目录下的 /dist/dev/目录，打开各平台开发工具选择对应平台目录即可进行预览（h5 平台不会在此目录，存在于缓存中）
build 模式编译出的各平台代码存放于根目录下的 /dist/build/ 目录，发布时选择此目录进行发布
ev 和 build 模式的区别
dev 模式有 SourceMap 可以方便的进行断点调试
build 模式会将代码进行压缩，体积更小更适合发布为正式版应用
进行 环境判断 时，dev 模式 process.env.NODE_ENV 的值为 development，build 模式 process.env.NODE_ENV 的值为 production
使用cli创建项目和使用HBuilderX可视化界面创建项目区别

说明
开发规范
页面文件遵循 Vue 单文件组件 (SFC) 规范
组件标签靠近小程序规范，详见uni-app 组件规范
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发
目录结构

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（[详见uniCloud](https://uniapp.dcloud.io/uniCloud/quickstart?id=%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84)）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录     ([详情](https://uniapp.dcloud.io/component/web-view))
├─platforms             存放各平台专用页面的目录    （[详情](https://uniapp.dcloud.io/platform?id=%E6%95%B4%E4%BD%93%E7%9B%AE%E5%BD%95%E6%9D%A1%E4%BB%B6%E7%BC%96%E8%AF%91)）
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录        （[详情](https://uniapp.dcloud.io/frame?id=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81)）
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 [应用生命周期](https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%E5%BA%94%E7%94%A8%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F)
├─manifest.json         配置应用名称、appid、logo、版本等打包信息  （[详情](https://uniapp.dcloud.io/collocation/manifest)）
└─pages.json            配置页面路由、导航条、选项卡等页面类信息         （[详情](https://uniapp.dcloud.io/collocation/pages)）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。
static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。
HbuilderX 1.9.0+ 支持在根目录创建 ext.json、sitemap.json 等小程序需要的文件

common :存放api的

components  :组件存放目录

pages  :所有的页面存放目录

static  :静态资源目录，例如图片等

unpackage  :就是打包目录，在这里有各个平台的打包文件

utils : 存放api

App.vue  :是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数

main.js  :是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件

manifest.json : 文件是应用的配置文件，用于指定应用的名称、图标、权限等

pages.json :文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

uni.scss  :文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
资源路径
模板内引入静态资源
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>
1
2
3
4
5
@开头的绝对路径以及相对路径会经过base64转换规则校验
引入的静态资源在非h5平台，均不转为base64。
H5平台，小于4kb的资源会被转换成base64，其余不转。
自HBuilderX 2.6.6起template内支持@开头路径引入静态资源，旧版本不支持此方式
App平台自HBuilderX 2.6.9起template节点中引用静态资源文件时（如：图片），调整查找策略为【基于当前文件的路径搜索】，与其他平台保持一致
支付宝小程序组件内 image 标签不可使用相对路径
js文件引入
js文件或script标签内（包括renderjs等）引入js文件时，可以使用相对路径和绝对路径

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'
1
2
3
4
js文件不支持使用/开头的方式引入
css引入静态资源
css文件或style标签内引入css文件时（scss、less文件同理），可以使用相对路径或绝对路径（HBuilderX 2.6.6）
/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');
1
2
3
4
5
自HBuilderX 2.6.6起支持绝对路径引入静态资源，旧版本不支持此方式

css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径，需要注意的是，有些小程序端css文件不允许引用本地文件
/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);
1
2
3
4
5
引入字体图标请参考，字体图标
@开头的绝对路径以及相对路径会经过base64转换规则校验
不支持本地图片的平台，小于40kb，一定会转base64。（共四个平台mp-weixin, mp-qq, mp-toutiao, app v2）
h5平台，小于4kb会转base64，超出4kb时不转。
其余平台不会转base64
生命周期
uni-app 支持 onLaunch、onShow、onHide 等应用生命周期函数，详情请参考应用生命周期

uni-app 支持 onLoad、onShow、onReady 等生命周期函数，详情请参考页面生命周期

uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同，如仍希望采用 Vue Router 方式管理路由，可在插件市场搜索 Vue-Router

配置、框架接口、框架、api看官方文档即可，通俗易懂

配置、框架接口

框架

API

使用云服务器

敬请期待后面的实战项目，我会分步给大家作解释，让大家更好的进入实战
————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn/blue_698/article/details/117896745

本文标签： uniapp