一套代码,14个平台运行,牛!

前端技术有HTML5、CSS3、JavaScript、Node,目前较火的前端框架有Vue、React,流行的多端开发框架有uni-app、Taro等。本文主要介绍uni-app。

一、uni-app到底是什么

简单来讲,uni-app是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,即可发布到iOS、Android、H5及各种小程序(如微信、支付宝、百度、头条、QQ、钉钉、淘宝等)、快应用等多个平台。

uni-app在开发者数量、案例数量、跨平台能力、扩展灵活性、性能体验、周边生态、学习成本、开发成本八大关键指标上拥有巨大的优势。

  1. 开发者数量与案例数量更多
  2. 跨平台能力与扩展灵活性更强
  • 开发者编写一套代码,可发布到iOS、Android及各种小程序、快应用等多个平台。
  • 在跨平台的同时,通过条件编译和平台特有API调用,可以“优雅”地为某平台编写个性化代码,调用专有能力而不影响其他平台。
  • 支持原生代码混写和原生SDK集成。
  1. 性能体验优秀
  • 体验更好的Hybrid框架,加载新页面时速度更快。
  • App端支持Weex原生渲染,可支撑更流畅的用户体验。
  • 小程序端的性能优于市场其他框架。
  1. 周边生态丰富
  • 插件市场拥有数千款插件。
  • 支持NPM(Node Package Manager,Node.js包管理和分发工具),支持小程序组件和SDK,兼容mpvue组件和项目,兼容Weex组件。
  • 微信生态的各种SDK可直接用于跨平台App。
  1. 学习成本低 基于通用的前端技术栈,采用Vue语法和微信小程序API,无额外学习成本。
  2. 开发成本低
  • 招聘、管理、测试各方面的成本都大幅下降。
  • HBuilderX是高效开发神器,熟练掌握后研发效率至少翻倍。

uni-app的功能框架如图1.1所示。

图1.1  uni-app 的功能框架

从图1.1可以看出,uni-app在跨平台过程中不牺牲平台特色,可“优雅”地调用平台专有能力,真正做到海纳百川、各取所长。

接下来看如何搭建uni-app的实操环境。


二、 uni-app 环境搭建

要使用 uni-app ,需要安装 HBuilder X 开发者工具,在 HBuilder X 中运行项目,编写代码。当然,也可以使用 Vscode、WebStorm 等软件编写,最后用 HBuilder X 运行即可。

2.1 下载与使用 HBuilder X 开发者工具

在使用uni-app项目之前,必须使用 HBuilder X 运行项目和生成生产环境的代码。

HBuilder X 的下载地址:https://www.dcloud.io/hbuilderx.html

下载时选择正式版,可以选择Windows版和Mac OS版,这两种又各有两个版本,分别是标准版和App开发版。其中,标准版可直接用于Web开发、MarkDown、字处理场景、小程序等。如果开发App,则需要手动安装插件。App开发版预置开发App所需的插件,开箱即用。如果只是开发小程序和H5,则安装标准版即可。此处以App开发版为例演示。

HBuilder X 下载完成后安装即可(Windows版和Mac OS版的安装都很简单,按提示操作就行)。

2.2 创建项目

使用HBuilder X创建项目有以下两种方式。

2.2.1 通过 HBuilder X 可视化界面创建项目

这里以Mac OS版为实例进行演示。打开HBuilder X,选择“文件”→“新建”→“1.项目”命令,如图2.1所示。

图2.1 选择“1. 项目”命令

弹出“新建项目”对话框,如图2.2所示。

图2.2 “新建项目”对话框

选中uni-app单选按钮,自定义项目名称为uniappdemo,模板选择“uni-ui项目”,单击“创建”按钮。项目创建完成后即可运行,打开项目中的任意文件,如App.vue,如图2.3所示。

图2.3 打开 App.vue 文件

以“浏览器运行模式”为例,选择“运行”→“运行到浏览器”命令,选择浏览器,即可在浏览器中体验uni-app的H5版。

2.2.2 通过 vue-cli 命令行创建项目

首先,安装运行环境。在命令提示符窗口输入以下命令:

npm install -g @vue/cli

全局安装vue-cli,如果安装过vue-cli可省略此步骤。使用正式版(对应HBuilder X最新正式版)创建uni-app项目,在命令提示符窗口输入以下命令:

vue create -p dcloudio/uni-preset-vue 项目名称

使用Alpha版(对应HBuilder X最新Alpha版)创建uni-app项目,在命令提示符窗口输入以下命令:

vue create -p dcloudio/uni-preset-vue#alpha 项目名称

此时,会提示选择项目模板,初次体验建议选择 Hello uni-app 项目模板,如图2.4所示。

图2.4 选择 uni-app 项目模板

创建完成后,使用以下命令运行和发布项目:

npm run dev:%PLATFORM% //运行项目
npm run build:%PLATFORM% //发布项目

%PLATFORM% 的取值见表2.1。

表 2.1 %PLATFORM% 的取值

平 台

app-plus

App 平台生成打包资源(支持 npm run build:app-plus,可用于持续集成。不支持 run,运行调试仍需在 HBuilder X 中操作)

h5

H5 Web 版在浏览器运行

mp-alipay

支付宝小程序

mp-baidu

百度小程序

mp-weixin

微信小程序

mp-toutiao

字节跳动小程序

mp-qq

QQ 小程序

mp-360

360 小程序

quickapp-webview

快应用 (webview)

quickapp-webview-union

快应用联盟

quickapp-webview-huawei

快应用华为

以运行、发布微信小程序为例,输入以下命令:

npm run dev:mp-weixin //运行微信小程序
npm run build:mp-weixin //发布微信小程序

这样即可运行、发布微信小程序。当然,运行微信小程序必须先安装微信小程序开发者工具。

uni-app标准的项目结构如图2.5所示。

图2.5 uni-app 标准的项目结构

2.3  App 真机运行

开发Android手机App通常使用Windows操作系统,使用uni-app开发App在运行调试时可以使用模拟器或真机。

2.3.1 真机运行

真机运行需要连接手机,开启USB调试,进入uniappdemo项目,选择“运行”→“运行到手机或模拟器”命令,在其下拉菜单中选择运行的设备,即可在该设备中体验uni-app,如图2.6所示。

图2.6 真机运行

如果不用真机运行,也可以使用模拟器运行,如图2.7所示。

图2.7 模拟器运行

2.3.2 打包发行

将App打包为原生App有两种模式——云端和离线。1. 云端打开HBuilder X,选择“发行”→“原生App-云打包”命令,如图8所示,打开图2.9所示的云端打包界面。

图2.8 选择“原生 App- 云打包”命令

图2.9 App 云端打包界面

在App正式运营时要选择自有证书,如果不知道如何生成证书,可单击“如何生成证书”超链接按照教程自己生成。如果不生成iOS版的App包,则取消勾选iOS(ipa包)复选框。单击“打包”按钮,进入打包状态。注意,必须在https://www.dcloud.io官网注册成为会员并登录才能使用云端打包功能,如果没有注册或登录会员,HBuilder X会给出提示和注册地址,按照提示操作即可。打包成功后,在HBuilder X软件的控制台会给出下载apk包的地址,如图2.10所示。

图2.10 apk 包下载地址

2. 离线离线打包配置比较复杂,需要使用App离线开发者工具包,即App离线SDK。把App运行环境(runtime)封装为原生开发调用接口,开发者可以在自己的 Android 及 iOS 原生开发环境配置工程中使用,包括 Android离线开发SDK和iOS离线开发SDK。App离线SDK主要用于App本地离线打包及扩展原生能力,对应HBuilder X的云端打包功能。当uni-app、h5+App等项目发行为原生App时,无须将App资源及打包要使用的签名证书等提交到云端打包服务器,在开发者本地配置的原生开发环境中即可生成安装apk/ipa包。

Android平台App本地离线打包官方文档地址

iOS平台App本地离线打包官方文档地址

按照官方文档安装及配置完成离线SDK后,在HBuilder X中选择“发行”→“原生App-本地打包”→“生成本地打包App资源”命令,如图2.11所示。

图2.11 App 离线打包

由于离线打包需要安装Android开发环境和iOS开发环境,对于没有原生App开发基础的人员来说,安装及配置难度较高,因此推荐使用云端打包。

2.4  uni-app 微信小程序调试

使用uni-app开发小程序非常方便,其开发效率远远高于原生小程序开发。本篇的实战项目也是小程序项目。

2.4.1 下载微信小程序开发者工具

要开发小程序,必须下载对应小程序的开发者工具。这里以微信小程序为例,首先下载微信小程序开发者工具。打开网址,进入如图2.12所示页面。

图2.12 下载微信小程序开发者工具页面

这里选择稳定版,下载的是MacOS版本。下载完成后,进行安装,根据提示操作即可。安装完成后,打开微信小程序开发者工具的服务端口,进入微信小程序开发者工具,选择“设置”→“安全设置”命令,打开如图2.13所示的窗口,将“服务端口”改为打开状态。

图2.13 微信小程序开发者工具服务端口

2.4.2  运行项目

安装并配置完成微信小程序开发者工具后,打开HBuilder X,进入项目,选择“运行”→“运行到小程序模拟器”→“微信开发者工具”命令,即可在微信小程序开发者工具中体验uni-app,如图2.14所示。

图2.14 使用 HBuilder X 运行微信小程序

注意:如果是第一次使用,需要先配置小程序IDE的相关路径才能运行成功。选择“运行”→运行到小程序模拟器→“运行设置”命令,在图2.15所示的位置输入微信小程序开发者工具的安装路径即可。

图2.15 配置微信小程序开发者工具路径

uni-app默认把项目编译到项目根目录的unpackage目录中。

2.4.3 发行小程序

发行微信小程序必须有微信小程序AppID。在微信公众号平台(网址为https://mp.weixin.qq.com)注册账号,进入小程序管理后台,选择“开发”→“开发设置”命令,即可在打开的页面中获取微信小程序AppID。在HBuilder X中,选择“发行”→“小程序-微信(仅适用于uni-app)”命令,弹出“微信小程序发行”对话框,输入小程序名称和AppID,单击“发行”按钮,在unpackage/dist/build/mp-weixin中生成微信小程序项目代码,如图2.16所示。

图2.16 发行微信小程序

稍等片刻,系统会自动启动微信小程序开发者工具。如果没有自动启动,则需要手动打开微信小程序开发者工具。导入项目,项目路径在根目录unpackage/dist/build/mp-weixin 文件中,项目导入后单击“上传”按钮,按照“提交审核”→“发布”小程序标准流程逐步操作即可。

2.5 H5 运行与发行

H5一般指HTML 5,是构建Web内容的一种语言描述方式,是指Web端在浏览器中运行,HBuilder X提供了Web运行环境,用户只需要选择运行的浏览器。

2.5.1 运行项目

打开项目,选择“运行”→“运行到浏览器”命令,在其子菜单中选择合适的浏览器,如Chrome,即可在浏览器中体验uni-app的H5版,如图2.17所示。

图2.17 运行 H5 项目到浏览器

2.5.2 发行项目

使用HBuilder X打开项目根目录下的manifest.json文件,进入可视化界面,如图2.18所示。

图2.18 manifest.json 文件 H5 配置可视化界面

uni-app中的路由模式和Vue一样,具有hash和history两种模式。这里选择hash模式。应用的基础路径相当于vue.config.js配置文件中的publicPath选项,如发行在网站根目录,可不配置应用基本路径。在HBuilder X中,选择“发行”→“网站-H5手机版(仅适用于uni-app)”命令,即可生成H5的相关资源文件,保存于 unpackage 目录,如图2.19所示。

图2.19 发布 H5 手机版

生成的文件保存在unpackage/dist/build/h5文件夹中,将h5文件夹中的所有文件上传到服务器即可。

三、 尺寸单位、Flex布局与背景图片

3.1 Flex 布局

为了支持跨平台,uni-app建议使用Flex布局(Flexible Box,弹性布局)。传统的布局基于盒状模型,依赖 display 属性、position属性和float属性。如果使用Flex布局,则不建议使用float属性。

3.1.1 Flex 布局概述

Flex用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。代码示例如下:

.box{
 display: flex;
}

行内元素也可以使用 Flex 布局。代码示例如下:

.box{
 display: inline-flex;
}

采用 Flex 布局的元素称为 Flex 容器(flex container),简称容器,如图3.1所示。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称项目。

图3.1 flex container 示意图

容器默认存在两条轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)称为main start,结束位置称为main end;交叉轴的开始位置称为cross start,结束位置称为cross end。项目默认沿主轴排列。单个项目占据的主轴空间称为main size,占据的交叉轴空间称为cross size。

3.1.2 容器的属性

Flex布局支持6个容器属性:flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

3.1.3 项目的属性

Flex布局支持6个项目属性:order、flex-grow、flex-shrink、flex-basis、flex、align-self。

3.2 背景图片

uni-app支持在CSS里设置背景图片,设置方式与普通Web项目大体相同,但是也有一些不同,下面介绍注意事项。

3.2.1 使用本地背景图片的问题

在CSS里设置背景图片时,为了多端兼容,需要注意:(1)支持 base64 格式图片。(2)支持网络路径图片。(3)小程序不支持在CSS中使用本地文件,包括本地的背景图片和字体文件,需要是base64方式才可使用。App端在v3模式以前也有相同限制,从v3编译模式起支持直接使用本地背景图片和字体。

使用本地路径背景图片需要注意:(1)为方便开发者,当背景图片小于 40KB且uni-app 编译到不支持本地背景图片的平台时,会自动将其转换为 base64 格式。(2)当背景图片不小于 40KB时,会有性能问题,故不建议使用太大的背景图片。如果开发者必须使用太大的背景图片,则需要自己将其转换为 base64 格式,或将其复制到服务器上,从网络地址引用。(3)本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。代码示例如下:

.test2 {
 background-image: url('~@/static/logo.png');
}

注意:微信小程序真机不支持相对路径,但开发者工具支持。因此,以真机为主的开发不要使用相对路径。

3.2.2 代码演示及把图片转换为 base64 格式

在项目中引入背景图片,观察其能否转换为base64格式。在static文件夹下创建images文件夹,将背景图片复制到images文件夹下,在pages/index/index.vue文件中的代码如下:

<template>
<view>
 <view class="bg"></view>
</view>
</template>
<script>
</script>
<style>
 .bg{
 width:200rpx;
 height:200rpx;
 background-image: url("~@/static/images/1.jpg");
 background-size:100%
 }
</style>

元素是uni-app的组件,uni-app组件名称以小程序命名为基准。有开发微信小程序经验的读者应该对该组件不陌生。接下来使用HBuilder X运行微信小程序,如果运行后在微信开发者工具控制台中报以下错误:Cannot read property 'forceUpdate' of undefined,则需要配置微信小程序的AppID。使用HBuilder X打开mainifest.json文件,选择微信小程序配置,输入自己的微信小程序AppID,勾选“ES6转ES5” “上传代码时自动压缩” “检查安全域名和TLS版本”复选框,如图3.2所示。

图3.2 微信小程序配置

在微信开发者工具中运行,效果如图3.3所示。

图3.3 背景图片转换为 base64 格式

由图3.3可以看出,当背景图片小于40KB时,其会自动转换为base64格式;如果背景图片大于40KB,则应使用网络图片。


以上就是对uni-app这一框架的学习与实践笔记。本篇参考了李杰编著的《uni-app多端跨平台开发从入门到企业级实战》 ,中国水利水电出版社出版。

感兴趣的小伙伴可以扫码购买啦!

本周的送书环节来啦,小伙伴们留言说说你为什么需要这本书,松哥会从留言的小伙伴中选出来5位幸运小伙伴,《uni-app多端跨平台开发从入门到企业级实战》包邮到家!

原文地址:https://cloud.tencent.com/developer/article/2115977

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


学习编程是顺着互联网的发展潮流,是一件好事。新手如何学习编程?其实不难,不过在学习编程之前你得先了解你的目的是什么?这个很重要,因为目的决定你的发展方向、决定你的发展速度。
IT行业是什么工作做什么?IT行业的工作有:产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等,根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗?女生适合学Java编程吗?目前有不少女生学习Java开发,但要结合自身的情况,先了解自己适不适合去学习Java,不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研,多看、多想、多练
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
一、背景 因为项目中需要通北京网络,所以需要连vpn,但是服务器有时候会断掉,所以写个shell脚本每五分钟去判断是否连接,于是就有下面的shell脚本。
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
假如你已经使用过苹果开发者中心上架app,你肯定知道在苹果开发者中心的web界面,无法直接提交ipa文件,而是需要使用第三方工具,将ipa文件上传到构建版本,开...
下面的 SQL 语句指定了两个别名,一个是 name 列的别名,一个是 country 列的别名。**提示:**如果列名称包含空格,要求使用双引号或方括号:
在使用H5混合开发的app打包后,需要将ipa文件上传到appstore进行发布,就需要去苹果开发者中心进行发布。​
+----+--------------+---------------------------+-------+---------+
数组的声明并不是声明一个个单独的变量,比如 number0、number1、...、number99,而是声明一个数组变量,比如 numbers,然后使用 nu...
第一步:到appuploader官网下载辅助工具和iCloud驱动,使用前面创建的AppID登录。
如需删除表中的列,请使用下面的语法(请注意,某些数据库系统不允许这种在数据库表中删除列的方式):
前不久在制作win11pe,制作了一版,1.26GB,太大了,不满意,想再裁剪下,发现这次dism mount正常,commit或discard巨慢,以前都很快...
赛门铁克各个版本概览:https://knowledge.broadcom.com/external/article?legacyId=tech163829
实测Python 3.6.6用pip 21.3.1,再高就报错了,Python 3.10.7用pip 22.3.1是可以的
Broadcom Corporation (博通公司,股票代号AVGO)是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
发现个问题,server2016上安装了c4d这些版本,低版本的正常显示窗格,但红色圈出的高版本c4d打开后不显示窗格,
TAT:https://cloud.tencent.com/document/product/1340