uniapp学习总结

已于 2023-06-15 21:29:08 修改
阅读量777 收藏 5
点赞数 1
文章标签： uni-app
于 2023-06-15 20:23:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67850938/article/details/131229095
版权

目录

uniapp介绍

uni-app组成和跨端原理

什么是编译器

pages.json 页面路由

配置项列表

globalStyle

#基础组件

#扩展组件的意义

#组件的类别

#easycom组件规范

#uni_module规范

#uniCloud组件

#原生组件和原生插件

#datacom

#如何封装组件

#扩展组件（uni-ui）

组件

API

uniapp介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app组成和跨端原理

uni-app组成和跨端原理

基本语言和开发规范

uni-app代码编写，基本语言包括js、vue、css。以及ts、scss等css预编译器。

在app端，还支持原生渲染的nvue，以及可以编译为kotlin和swift的uts。

DCloud还提供了使用js编写服务器代码的uniCloud云引擎。所以只需掌握js，你可以开发web、Android、iOS、各家小程序以及服务器等全栈应用。

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

uni-app分编译器和运行时（runtime）。uni-app能实现一套代码、多端运行，是通过这2部分配合完成的。

编译器将开发者的代码进行编译，编译的输出物由各个终端的runtime进行解析，每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime。

什么是编译器

uni-app能实现一套代码、多端运行，核心是通过编译器 + 运行时实现的：

  • 编译器：将uni-app统一代码编译生成每个平台支持的特有代码；如在小程序平台，编译器将.vue文件拆分生成wxml、wxss、js等代码。
  • 运行时：动态处理数据绑定、事件代理，保证Vue和平台宿主数据的一致性；

uni-app项目根据所依赖的Vue版本不同，编译器的实现也不同：

uni-app项目根据创建方式的不同，编译器在使用上也有差异：

  • cli 方式创建的项目，编译器安装在项目下。编译器不会跟随HBuilderX升级。如需升级编译器，可以参考：更新依赖到指定版本。
  • HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。
  • 已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。

pages.json 页面路由

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

它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。

配置项列表

属性类型必填描述平台兼容
globalStyleObject否设置默认页面的窗口表现
pagesObject Array是设置页面路径及窗口表现
easycomObject否组件自动引入规则2.5.5+
tabBarObject否设置底部 tab 的表现
conditionObject否启动模式配置
subPackagesObject Array否分包加载配置
preloadRuleObject否分包预下载规则微信小程序
workersString否Worker 代码放置的目录微信小程序
leftWindowObject否大屏左侧窗口H5
topWindowObject否大屏顶部窗口H5
rightWindowObject否大屏右侧窗口H5
uniIdRouterObject否自动跳转相关配置，新增于HBuilderX 3.5.0
entryPagePathString否默认启动首页，新增于HBuilderX 3.7.0微信小程序、支付宝小程序

{
	"pages": [{
		"path": "pages/component/index",
		"style": {
			"navigationBarTitleText": "组件"
		}
	}, {
		"path": "pages/API/index",
		"style": {
			"navigationBarTitleText": "接口"
		}
	}, {
		"path": "pages/component/view/index",
		"style": {
			"navigationBarTitleText": "view"
		}
	}],
	"condition": { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式（list 的索引项）
		"list": [{
			"name": "test", //模式名称
			"path": "pages/component/view/index" //启动页面，必选
		}]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "演示",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents":{
			"collapse-tree-item":"/components/collapse-tree-item"
		},
		"renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
		"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
		"rpxCalcMaxDeviceWidth": 960,
		"rpxCalcBaseDeviceWidth": 375,
		"rpxCalcIncludeWidth": 750
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"height": "50px",
		"fontSize": "10px",
		"iconWidth": "24px",
		"spacing": "3px",
    	"iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
		"list": [{
			"pagePath": "pages/component/index",
			"iconPath": "static/image/icon_component.png",
			"selectedIconPath": "static/image/icon_component_HL.png",
			"text": "组件",
      		"iconfont": { // 优先级高于 iconPath，该属性依赖 tabbar 根节点的 iconfontSrc
       			"text": "\ue102",
        		"selectedText": "\ue103",
        		"fontSize": "17px",
        		"color": "#000000",
        		"selectedColor": "#0000ff"
      		}
		}, {
			"pagePath": "pages/API/index",
			"iconPath": "static/image/icon_API.png",
			"selectedIconPath": "static/image/icon_API_HL.png",
			"text": "接口"
		}],
		"midButton": {
			"width": "80px",
			"height": "50px",
			"text": "文字",
			"iconPath": "static/image/midButton_iconPath.png",
			"iconWidth": "24px",
			"backgroundImage": "static/image/midButton_backgroundImage.png"
		}
	},
  "easycom": {
    "autoscan": true, //是否自动扫描组件
    "custom": {//自定义扫描规则
      "^uni-(.*)": "@/components/uni-$1.vue"
    }
  },
  "topWindow": {
    "path": "responsive/top-window.vue",
    "style": {
      "height": "44px"
    }
  },
  "leftWindow": {
    "path": "responsive/left-window.vue",
    "style": {
      "width": "300px"
    }
  },
  "rightWindow": {
    "path": "responsive/right-window.vue",
    "style": {
      "width": "300px"
    },
    "matchMedia": {
      "minWidth": 768
    }
  }
}

globalStyle

用于设置应用的状态栏、导航条、标题、窗口背景色等。

属性类型默认值描述平台差异说明
navigationBarBackgroundColorHexColor#F8F8F8导航栏背景颜色（同状态栏背景色）APP与H5为#F8F8F8，小程序平台请参考相应小程序文档
navigationBarTextStyleStringblack导航栏标题颜色及状态栏前景颜色，仅支持 black/white支付宝小程序不支持，请使用 my.setNavigationBar
navigationBarTitleTextString导航栏标题文字内容
navigationStyleStringdefault导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意微信小程序 7.0+、百度小程序、H5、App（2.0.3+）
backgroundColorHexColor#ffffff下拉显示出来的窗口的背景色微信小程序
backgroundTextStyleStringdark下拉 loading 的样式，仅支持 dark / light微信小程序
enablePullDownRefreshBooleanfalse是否开启下拉刷新，详见页面生命周期。
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期
backgroundColorTopHexColor#ffffff顶部窗口的背景色（bounce回弹区域）仅 iOS 平台
backgroundColorBottomHexColor#ffffff底部窗口的背景色（bounce回弹区域）仅 iOS 平台
titleImageString导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址支付宝小程序、H5、APP
transparentTitleStringnone导航栏整体（前景、背景）透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明支付宝小程序、H5、APP
titlePenetrateStringNO导航栏点击穿透支付宝小程序、H5
pageOrientationStringportrait横屏配置，屏幕旋转设置，仅支持 auto / portrait / landscape 详见 响应显示区域变化App 2.4.7+、微信小程序、QQ小程序
animationTypeStringpop-in窗口显示的动画效果，详见：窗口动画App
animationDurationNumber300窗口显示动画的持续时间，单位为 msApp
app-plusObject设置编译到 App 平台的特定样式，配置项参考下方 app-plusApp
h5Object设置编译到 H5 平台的特定样式，配置项参考下方 H5H5
mp-alipayObject设置编译到 mp-alipay 平台的特定样式，配置项参考下方 MP-ALIPAY支付宝小程序
mp-weixinObject设置编译到 mp-weixin 平台的特定样式，配置项参考下方 MP-WEIXIN微信小程序
mp-baiduObject设置编译到 mp-baidu 平台的特定样式，配置项参考下方 MP-BAIDU百度小程序
mp-toutiaoObject设置编译到 mp-toutiao 平台的特定样式抖音小程序
mp-larkObject设置编译到 mp-lark 平台的特定样式飞书小程序
mp-qqObject设置编译到 mp-qq 平台的特定样式QQ小程序
mp-kuaishouObject设置编译到 mp-kuaishou 平台的特定样式快手小程序
mp-jdObject设置编译到 mp-jd 平台的特定样式京东小程序
usingComponentsObject引用小程序组件，参考 小程序组件
renderingModeString同层渲染，webrtc(实时音视频) 无法正常时尝试配置 seperated 强制关掉同层微信小程序
leftWindowBooleantrue当存在 leftWindow 时，默认是否显示 leftWindowH5
topWindowBooleantrue当存在 topWindow 时，默认是否显示 topWindowH5
rightWindowBooleantrue当存在 rightWindow 时，默认是否显示 rightWindowH5
rpxCalcMaxDeviceWidthNumber960rpx 计算所支持的最大设备宽度，单位 pxApp（vue2 且不含 nvue）、H5（2.8.12+）
rpxCalcBaseDeviceWidthNumber375rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 pxApp（vue2 且不含 nvue）、H5（2.8.12+）
rpxCalcIncludeWidthNumber750rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpxApp（vue2 且不含 nvue）、H5（2.8.12+）
dynamicRpxBooleanfalse动态 rpx，屏幕大小变化会重新渲染 rpxApp-nvue（vue3 固定值为 true） 3.2.13+
maxWidthNumber单位px，当浏览器可见区域宽度大于maxWidth时，两侧留白，当小于等于maxWidth时，页面铺满；不同页面支持配置不同的maxWidth；maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选)H5（2.9.9+）

注意

每个组件，包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。

注意：所有组件与属性名都是小写，单词之间以连字符-连接。

<component-name property1="value" property2="value">
	content
</component-name>

复制代码

下面是一个基本组件的实例，在一个vue页面的根<view>组件下插入一个<button>组件。给这个组件的内容区写上文字“按钮”，同时给这个组件设置了一个属性“size”，并且“size”属性的值设为了“mini”。

注：按照vue单文件组件规范，每个vue文件的根节点必须为 <template>，且这个 <template> 下只能且必须有一个根 <view> 组件。

<template>
	<view>
		<button size="mini">按钮</button>
	</view>
</template>

复制代码

通过了解button组件的文档，我们知道上述代码将在页面中绘制一个按钮，按钮显示的文字是“按钮”，按钮的大小是小尺寸的。

#组件的属性类型

组件的属性，有多种类型：

类型描述注解
Boolean布尔值组件写上该属性，不管该属性等于什么，其值都为 true，只有组件上没有写该属性时，属性值才为 false。如果属性值为变量，变量的值会被转换为 Boolean 类型。
Number数字1, 2.5
String字符串"string"
Array数组[ 1, "string" ]
Object对象{ key: value }
EventHandler事件处理函数名handlerName 是 methods 中定义的事件处理函数名
Any任意属性

下面的例子演示了组件的属性设置boolean值和数字的例子。注意false作为一个js变量，在组件的属性中使用时，属性前面需增加:冒号前缀，属性值仍使用引号包裹，但引号里不是字符串，而是js。

<template>
	<view>
		<button size="mini" :disabled="false" hover-start-time=20 >按钮</button>
	</view>
</template>

复制代码

#公共属性列表

每个组件都有各自定义的属性，但所有uni-app的组件，都有如下属性：

属性名类型描述注解
idString组件的唯一标示一般用于获取组件上下文对象（如：VideoContext），需要保持整个页面唯一
refStringvue中组件的唯一标示用来给子组件注册引用信息，详见 Vue 文档
classString组件的样式类在对应的 css 中定义的样式类
styleString组件的内联样式可以动态设置的内联样式
hiddenBoolean组件是否隐藏所有组件默认是显示的
data-*Any自定义属性组件上触发的事件时，会发送给事件处理函数
@*EventHandler组件的事件详见各组件详细文档，事件绑定参考 事件处理器

除了上述公共属性，还有一类特殊属性以v-开头，称之为vue指令，如v-if、v-else、v-for、v-model。详见vue指令

#在组件中使用js变量

组件中可以使用script的data中定义的js变量，但组件的属性中使用和内容区使用的用法不一样。

下面的button组件示例，等价于上一个的示例。只不过静态内容改成动态js。

<template>
	<view>
		<button size="mini" :disabled="buttondisble" hover-start-time=20 >{{buttonText}}</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				"buttonText":"按钮",
				"buttondisble":false
			}
		}
	}
</script>

复制代码

#组件的事件

每个组件都有“事件”。事件就是在指定的条件下触发某个js方法。

比如button组件，有点击事件，也就是当手机用户点击这个button组件时，会触发这个事件。

事件也是组件的属性，只不过这类属性以@为前缀。

事件的属性值，指向一个在script的methods里定义过的js方法，还可以给方法传参数。

下面是组件事件的示例：

<template>
	<view>
		<button size="mini" @click="goto('/pages/about/about')">按钮</button>
	</view>
</template>
<script>
    export default {
        methods: {
            goto(url) {
                console.log("按钮被点击了，且传入的参数是：" + url)
            }
        }
    }
</script>

复制代码

#基础组件

uni-app的组件，分为基础组件和扩展组件。

基础组件在uni-app框架中已经内置，无需将内置组件的文件导入项目，也无需注册内置组件，随时可以直接使用，比如<view>组件。

除了基础组件，都称为扩展组件。扩展组件需要将组件导入项目中才可以使用。

uni-app为开发者提供了一系列基础组件，类似HTML里的基础标签元素。

但uni-app的组件与HTML不同，而是与小程序相同，可更好的满足手机端的使用习惯。

虽然不推荐使用HTML标签，但实际上如果开发者写了div等标签，在编译到非H5平台时也会被编译器转换为view标签，类似的还有span转text、a转navigator等，包括css里的元素选择器也会转。但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。

开发者可以通过组合这些基础组件进行快速开发。在需要复用的情况下可封装成扩展组件。

uni-app 基础组件规范，与小程序规范相近。如果了解小程序开发的话，uni-app的基础组件会感觉很熟悉。但需要注意组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"

	<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="bindDateChange">
		<view class="picker">
		  当前选择: {{date}}
		</view>
	</picker>

复制代码

#基础组件列表

基础组件分为以下十几大类：

视图容器（View Container）：

组件名说明
view视图容器，类似于HTML中的div
scroll-view可滚动视图容器
swiper滑块视图容器，比如用于轮播banner
match-media屏幕动态适配组件，比如窄屏上不显示某些内容
movable-area可拖动区域
movable-view可移动的视图容器，在页面中可以拖拽滑动或双指缩放。movable-view必须在movable-area组件中
cover-view可覆盖在原生组件的上的文本组件
cover-image可覆盖在原生组件的上的图片组件

基础内容（Basic Content）：

组件名说明
icon图标
text文字
rich-text富文本显示组件
progress进度条

表单组件（Form）：

标签名说明
button按钮
checkbox多项选择器
editor富文本输入框
form表单
input输入框
label标签
picker弹出式列表选择器
picker-view窗体内嵌式列表选择器
radio单项选择器
slider滑动选择器
switch开关选择器
textarea多行文本输入框

路由与页面跳转（Navigation）：

组件名说明
navigator页面链接。类似于HTML中的a标签

媒体组件（Media）：

组件名说明
audio音频
camera相机
image图片
video视频
live-player直播播放
live-pusher实时音视频录制，也称直播推流

地图（Map）：

组件名说明
map地图

画布（Canvas）：

组件名说明
canvas画布

webview（Web-view）：

组件名说明
web-viewweb浏览器组件

广告

组件名说明
ad广告组件
ad-draw沉浸视频流广告组件

页面属性配置

组件名说明
custom-tab-bar底部tabbar自定义组件
navigation-bar页面顶部导航
page-meta页面属性配置节点

uniCloud

组件名说明
unicloud-db组件uniCloud数据库访问和操作组件

各平台专有组件

在小程序平台和nvue平台，还有一些专有组件，比如open-data，详见左侧导航

#扩展组件的意义

虽然所有的业务需求都可以通过基础组件满足，但仅有基础组件是低效的，实际开发中会有很多封装的组件。

比如我们需要一个五角星点击评分的组件，在DCloud的插件市场里可以获取到：uni-rate 评分 - DCloud 插件市场

把这个uni-rate组件导入到你的uni-app项目下，在需要的vue页面里引用它，就可以在指定的地方显示出这个五角星组件。

	<!-- 在index.vue页面引用 uni-rate 组件-->
	<template>
		<view>
			<uni-rate></uni-rate><!-- 这里会显示一个五角星，并且点击后会自动亮星 -->
		</view>
	</template>

复制代码

封装扩展组件的优势：

#组件的类别

uni-app支持的组件分为vue组件和小程序自定义组件。

如果你还不了解这两种组件，可以参阅各自的文档

日常开发来讲，推荐使用vue组件。uni-app支持小程序组件主要是为了兼容更多生态资源。

如果扩展组件符合uni-app的easycom组件规范，则可以免注册，直接使用。比如uni-ui扩展组件就符合easycom组件规范。

如果组件不符合easycom规范，则需要在代码里手动import和注册组件，然后才能使用。

除了easycom规范外，扩展组件还有很多概念，比如uni_module、datacom、原生组件、uniCloud组件。

接下来一一讲解。

#easycom组件规范

HBuilderX 2.5.5起支持

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

比如前述举例的uni-rate组件，它导入到uni-app项目后，存放在了目录/components/uni-rate/uni-rate.vue

同时它的组件名称也叫uni-rate，所以这样的组件，不用在script里注册和引用。 如下：

<template>
		<view>
			<uni-rate></uni-rate><!-- 这里会显示一个五角星，并且点击后会自动亮星 -->
		</view>
	</template>
<script>
	// 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
	export default {
		data() {
			return {
				
			}
		}
	}
</script>

复制代码

不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

组件库批量安装，随意使用，自动按需打包。以官方的uni-ui为例，在HBuilderX新建项目界面选择uni-ui项目模板，只需在页面中敲u，拉出大量组件代码块，直接选择，即可使用。大幅提升开发效率，降低使用门槛。

在DCloud插件市场下载符合components/组件名称/组件名称.vue目录结构的组件，均可直接使用。

easycom是自动开启的，不需要手动开启。

如果你的组件名称或路径不符合easycom的默认规范，可以在pages.json的easycom节点进行个性化设置，自定义匹配组件的策略。另见

如果不使用easycom，手动引用和注册vue组件，则需要分3步写如下代码：

	<template>
		<view>
			<uni-rate text="1"></uni-rate><!-- 3.使用组件 -->
		</view>
	</template>
	<script>
		import uniRate from '@/components/uni-rate/uni-rate.vue';//1.导入组件
		export default {
			components:{uniRate }//2.注册组件
		}
	</script>

复制代码

#uni_module规范

uni_module其实不止服务于组件，它可以服务于组件、js库、页面、项目等所有DCloud插件市场所支持的种类。

符合uni_module规范的组件都在项目的uni_modules目录下，以插件id为目录存放。（项目模板不放在uni_modules目录下）

在HBuilderX中点右键可方便的更新插件，插件作者也可以方便的上传插件。

uni_module还支持云端一体的插件。

uni_module有详细的专项文档，请另行查阅uni_module规范。

#uniCloud组件

uniCloud是DCloud提供的、配套uni-app的云开发服务。

uni-app的基础组件中，有一个特殊基础组件是：<unicloud-db>组件。

它可以在前端直接获取和操作uniCloud的云端数据库。

相关文档详见：unicloud-db组件

除了内置的数据库组件，在uni-ui扩展库里还有uniCloud的文件选择和上传组件，参考：uni-file-picker

#原生组件和原生插件

#基础组件里的原生组件

uni-app的基础组件里，有一批原生组件，如video、map...

这些组件如果用于vue页面，也就是webview渲染时，会造成层级高于普通前端组件的情况。

它们的层级需要使用cover-view等特殊组件才能覆盖，同时在使用中有些需要注意的事情。

在app-nvue里没有这些问题。

相关文档详见：uni-app内置原生组件说明

#uni-app的App端原生插件

uni-app的App端支持原生插件，这类插件使用iOS或Android原生语言编写，封装成插件，供其他开发者使用js来调用。

原生插件分为原生组件component和原生模块module。

其实原生组件component只能在App-nvue环境中使用。

相关文档详见：uni-app原生插件开发

#datacom

datacom组件是一种数据驱动的、可云端一体的组件。

传统组件只涉及前端概念，而datacom拉通了uniCloud云端数据，是uni-app+uniCloud协同开发的必备提效工具。

相关文档详见：datacom组件

#如何封装组件

封装组件涉及的知识点较多，相关文档详见：vue组件详解

#扩展组件（uni-ui）

详见: uni-ui介绍

更多组件

除了基础组件、uni-ui，插件市场还有更多扩展组件、模板，包括前端组件和原生扩展组件，具体见插件市场。

关于其他vue的web组件库、小程序组件库是否能在uni-app中使用的问题，参考关于uni-app的ui库、ui框架、ui组件 - DCloud问答

覃苗宇
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uni-app开发介绍PPT
08-12
如果开发者没有接触过小程序和Vue.js，可以查看官方文档，然后回来学习uni-app。uni-app的开发需要遵循Vue单文件组件（SFC）规范，组件标签靠近微信小程序规范，接口能力（JS API）靠近微信小程序规范，数据绑定及...
uni-app简单了解
icarusooxx的博客
06-19 672
Uni-app 是基于 Vue.js 开发的全能端开发框架，它可以使用单调声明式开发语言编写一份代码，大规模覆盖 h5、小程序、iOS、Android 等不同平台及设备。Uni-app 对不同这些平台和设备进行适配，相比传统的跨端开发模式，更加顺畅高效。随着跨平台趋势的加速发展，Uni-app逐渐成为前端技术热门的关键词，公司和企业开发者珍视了这一技能、求职者面试也抖森斗剩实涵。
【跨平台开发】Uni-app原理分析
后端研发工程师Marion的博客
07-11 2956
UniApp是一种基于Vue.js的跨平台开发框架，它可以帮助开发者使用一套代码构建同时运行在多个平台（如iOS、Android、Web等）的应用程序。实现跨平台的原理主要包括以下几个方面：基于WebView：UniApp使用了各平台提供的原生WebView容器作为运行环境，通过将应用程序的前端代码封装在WebView中运行，从而实现跨平台。通用API：UniApp提供了一套通用的API，统一了不同平台的接口调用方式。开发者可以使用这些通用API来实现跨平台的逻辑，而无需编写特定平台的代码。
介绍uni-app框架，以及运行原理
weixin_49684597的博客
05-07 7179
介绍uni-app框架： uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）。 某些平台不能提交简单demo，故补充了一些其他功能；hello uni-app示例代码可从github获取快应用仅支持 vivo 、oppo、华为360小程序仅 windows平台支持，需要在360浏览器中打开 uni-app: 运行原理： 逻辑层和视图层分离，非H5端通信有折损 u
uni-app原理分析
热门推荐
weixin_45345105的博客
11-02 1万+
历史分析 最开始的小程序没有组件化和npm支持，wepy就诞生了，但wepy没有完全实现vue的规范，后面又出了mpvue（实现了更完整的vue开发体系）。 18年末uni-app开源，其他框架也陆续出现，每家大厂都有自己的框架自己的实现。 uni介绍 因为vue只有.vue文件 而小程序有四个文件，那么就需要拆分。 小程序不是双向数据绑定，所以通过uni的runtime实现双向绑定 性能优化 其实是native真正在处理处理数据后的渲染，少用setData 利用了差量算法。 初期
uni-app--》常用组件的相关介绍
ztK63LrD的博客
04-02 4071
组件是视图层的基本组成单元，是一个单独且可复用的功能模块的封装，每个组件，包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。
基于uniapp 的demo
04-06
10. **持续学习与社区资源**：随着uniapp的不断更新，开发者应保持对新特性和最佳实践的学习。此外，uniapp社区有丰富的教程、示例代码和问答资源，是开发者解决问题的重要途径。 总结来说，uniapp为开发者提供了...
uniAPP使用sqlite数据库demo
04-01
总结，这个“uniAPP使用sqlite数据库demo”项目是学习和实践如何在uniAPP中利用SQLite存储和管理本地数据的宝贵资源。通过深入理解上述知识点，开发者能够有效地在uniAPP应用中构建自己的数据库管理系统，满足各种...
uniapp开发的智慧城市项目
05-11
总结，uniapp以其强大的跨平台能力和丰富的生态系统，为智慧城市项目的开发提供了强大支撑。开发者们可以借此发挥创新思维，结合物联网、大数据、AI等技术，构建更加智能、便捷的城市生活。然而，同时也要注意不断...
uniapp+router+uview
11-21
总结来说，uniapp+router+uview的组合是构建现代移动应用的理想选择。它们不仅提供了强大的开发工具和优秀的用户体验，还通过强大的社区支持和丰富的生态，降低了开发难度，提升了开发效率。对于想要涉足跨平台应用...
uni-app入门:组件的基本使用
weixin_43401380的博客
01-06 8633
uniapp实战之组件的基本使用
【每天学习一点点 day01】uniapp跨端原理 - 但行前路 莫问前程
yongzhilu的博客
01-24 982
2024年1月24日开始，每天学习一点点，内容类型不限。
【UniApp】-uni-app-内置组件
Reische的博客
12-13 512
好，经过上个章节的介绍完毕之后，了解了一下 uni-app-全局数据和局部数据那么了解完了uni-app-全局数据和局部数据之后，这篇文章来给大家介绍一下 UniApp 中内置组件首先不管三七二十一，先来新建一个项目。
uniapp宽屏开发PC端方案，及衍生问题解决
F2691898750的博客
03-06 8444
需要在uniapp的pages.json文件中配置正常电脑没有高于3840像素宽的，这个程度就足以； 在使用时，只要正常的按照1920/750 = 2.56的比例，在HBuliderX中进行比例配置，使用时进行px转化rpx即可。问题一、pc端字体过大问题二、字体大小固定：问题三、如何同时适配PC与移动端？解决思路：由于PC的根元素必须是因此要么pc和移动端都在page-meta的规则下使用v-if进行判断渲染，判断当前的设备是移动端或pc端，然后渲参考rem处
uni-app组件概述
掩月天权的博客
05-24 2683
uni-app组件
Uniapp组件详解
最新发布
chen__zi_的博客
05-20 2069
组件是Uniapp中最基本的构建模块，它封装了视图和逻辑，可以复用和组合。组件可以是一个简单的按钮，也可以是一个复杂的页面。通过组件化开发，可以提高代码的复用性、可维护性和可读性。除了内置组件，开发者还可以根据需要创建自定义组件，实现更复杂的功能和界面。下面将介绍自定义组件的基本方法和高级技巧。首先，在项目的components目录下创建一个新的组件文件夹，如和。
Uni-app组件使用
m0_56098150的博客
07-28 3697
uni-app学习，实习生学习知识库
uni-app学习--自定义组件
weixin_47938715的博客
07-27 6429
uni-app学习--自定义组件
uniapp内置组件
掩月天权的博客
05-30 1950
uniapp内置组件
uniapp怎么敲空格
08-16
- *3* [uniapp学习总结](https://blog.csdn.net/weixin_67850938/article/details/131229095)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值