Uniapp教程精简版

云闲不收

已于 2022-03-30 02:49:14 修改

阅读量2.1k

点赞数

文章标签：开发语言

于 2022-03-30 00:54:58 首次发布

本文链接：https://blog.csdn.net/S_ZaiJiangHu/article/details/122762080

版权

uniapp中似乎默认是严格模式必须声明变量
https://ask.dcloud.net.cn/article/35657 这个写得好
promise化还有vue2和3不一样 https://uniapp.dcloud.io/api/#api-promise-化

目录机构和文件存放位置

├─components 符合vue组件规范的uni-app组件目录
├─pages 业务页面文件存放的目录
├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules 存放uni_module规范的插件。
├─wxcomponents 存放小程序组件的目录，
├─App.vue 应用配置，用来配置App全局样式以及监听应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见

注意项：
编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。
static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。

开发规范

接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发
单文件组件规范：不同于html的html大节点中包含head、css、js等，vue将template、script、style并列
但是如果你想单独
在这里插入图片描述

页面

vue和nvue的区别

.vue页面和.nvue页面，均全平台支持，差异在于当uni-app发行到App平台时，.vue文件会使用webview进行渲染，.nvue会使用原生进行渲染
简单来说就是安卓、ios，app 用nvue会得到更好的性能。小程序、h5用vue会更好的性能

新建页面与删除页面

uni-app中的页面，通常会保存在工程根目录下的pages目录下。

每次新建页面，均需在pages.json中配置pages列表；未在pages.json -> pages 中配置的页面，uni-app会在编译阶段进行忽略。pages.json的完整配置参考：全局文件。

通过HBuilderX开发 uni-app 项目时，在 uni-app 项目上右键“新建页面”，HBuilderX会自动在pages.json中完成页面注册，开发更方便。

同时，HBuilderX 还内置了常用的页面模板（如图文列表、商品列表等），选择这些模板，可以大幅提升你的开发效率。

同理删除的时候也要两个地方都删了

首页

第一个json配置的页面作为首页出现

生命周期

https://uniapp.dcloud.io/tutorial/page.html#lifecycle

页面接口

页面通信

https://uniapp.dcloud.io/tutorial/page.html#页面通讯
没看懂

页面栈

在这里插入图片描述

页面元素

用templet和view。和html的标签不用 html的标签是预定义的

资源引入

组件引入

vue2需要导入注册使用 vue3需要导入使用而uniapp 直接使用即可。只要放在组件那个文件夹

静态资源

template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径，形式如下

<image class="logo" src="../../static/logo.png"></image>

@是base64转化

引入字体图标请参考，字体图标
@开头的绝对路径以及相对路径会经过 base64 转换规则校验
不支持本地图片的平台，小于 40kb，一定会转 base64。（共四个平台 mp-weixin, mp-qq, mp-toutiao, app v2）
h5 平台，小于 4kb 会转 base64，超出 4kb 时不转。
其余平台不会转 base64

js引入


```javascript
// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径 js文件不支持使用/开头的方式引入
import add from '../../common/add.js'

可用npm导入包，但是很容易只支持h5 建议从uniapp官方市场下

css

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

这里用@很容易理解因为css有自己的语法

原生插件

const PluginName = uni.requireNativePlugin(PluginName); // PluginName 为原生插件名称

uni-js

标准ECMAScript的js仅是最基础的js。浏览器基于它扩展了window、document、navigator等对象。小程序也基于标准js扩展了各种wx.xx、my.xx、swan.xx的API。node也扩展了fs等模块。
uni-app基于ECMAScript扩展了uni对象，并且API命名与小程序保持兼容

js等于EcmaScript+dom+bom。但是一般我们所说的js指的是最为人熟知的就是EcmaScript5.+。 es你可以理解为ES6+。ts呢是静态语言，她是ES超集，简单理解就是ES有的功能特性它都支持，ES没有的它还有。

非H5端，虽然不支持window、document、navigator等浏览器的js API，但也支持标准ECMAScript。

uni-css

rpx

px 即屏幕像素
rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue）端和 H5（vue2）端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：rpx 计算配置。
设计师在提供设计图时，一般只提供一个分辨率的图。

严格按设计图标注的 px 做开发，在不同宽度的手机上界面很容易变形。

而且主要是宽度变形。高度一般因为有滚动条，不容易出问题。由此，引发了较强的动态宽度单位需求。

微信小程序设计了 rpx 解决这个问题。uni-app 在 App 端、H5 端都支持了 rpx，并且可以配置不同屏幕宽度的计算方式，具体参考：rpx 计算配置 (opens new window)。

rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。

内联样式

<view :style="{color:color}" />

style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

选择器

在这里插入图片描述

全局样式

定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。

css属性值

在这里插入图片描述

src

url要用https和单引号

uni-vue

文件结构

<template>  
		<view>  
		注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。  
		</view>  
	</template>  
	<script>  
		//要写到这个里面
		export default {  
		//不同于小程序 要写成函数的形式
		data() {
			return {
				msg: 'Hello Vue!'
			}
		},
					methods: {
				greet(event){
					// `event` 是原生 DOM 事件
					console.log(event);
				}
			}
		}  
	</script>  
	<style>  
	</style>

组件

div被view替代了
其实标签是老的概念，标签属于浏览器内置的东西。
但组件，是可以自由扩展的。类似你可以把一段js封装成函数或模块，你也可以把一个ui控件封装成一个组件。
常见组件：https://uniapp.dcloud.io/component/

引入文件

es6的语法：js要require进来，变成了对象

插值

<view>{{ number + 1 }}</view>
<view>{{ ok ? 'YES' : 'NO' }}</view>
<!-- 把一个字符串分割成字符串数组,颠倒其元素的顺序,把数组中的所有元素放入一个字符串 -->
<view>{{ message.split('').reverse().join('') }}</view>

这种不行

    <!-- 这是语句，不是表达式 -->
    <view>{{ var a = 1 }}</view>
    <!-- 流控制也不会生效，请使用三元表达式 -->
    <view>{{ if (ok) { return message } }}</view>

指令 v-前缀

指令是带有 v- 前缀的特殊属性。

指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
指令的作用是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
一些指令能够接收一个“参数”，在指令名称之后以冒号（ : ）表示。

v-bind

	<image v-bind:src="imgUrl"></image>
	<!-- 缩写 -->
	<image :src="imgUrl"></image>

还可动态设置css 甚至可以和普通css并存

<view class="static" :class="{ active: isActive, 'text-danger': hasError }">222</view>

甚至可以数组

<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">222</view><!-- 三元表达式 -->

v-on

v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ @ ’，下文简称为 @事件

<!-- 完整语法 -->
	<view v-on:click="doSomething">点击</view>	
	<!-- 缩写 -->
	<view @click="doSomething">点击</view>

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

v-html

注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。
App端和H5端支持 v-html ，微信小程序会被转为 rich-text，其他端不支持 v-html

data属性

data 必须声明为返回一个初始数据对象的函数（注意函数内返回的数据对象不要直接引用函数外的对象）；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。

//正确用法，使用函数返回对象
data() {
	return {
		title: 'Hello'
	}
}

//错误写法，会导致再次打开页面时，显示上次数据
data: {
	title: 'Hello'
}

//错误写法，同样会导致多个组件实例对象数据相互影响
const obj = {
	title: 'Hello'
}
data() {
	return {
		obj
	}
}

事件修饰符

在这里插入图片描述

事件映射表

事件映射表
// 事件映射表，左侧为 WEB 事件，右侧为 uni-app 对应事件
{
click: ‘tap’,
touchstart: ‘touchstart’,
touchmove: ‘touchmove’,
touchcancel: ‘touchcancel’,
touchend: ‘touchend’,
tap: ‘tap’,
longtap: ‘longtap’, //推荐使用longpress代替
input: ‘input’,
change: ‘change’,
submit: ‘submit’,
blur: ‘blur’,
focus: ‘focus’,
reset: ‘reset’,
confirm: ‘confirm’,
columnchange: ‘columnchange’,
linechange: ‘linechange’,
error: ‘error’,
scrolltoupper: ‘scrolltoupper’,
scrolltolower: ‘scrolltolower’,
scroll: ‘scroll’
}

v-model

在这里插入图片描述
没看懂

computed

在这里插入图片描述
没看懂以后再说吧

监听器watch

可以监听其他组件的变化
不过好像最好用compute 以后再说

条件渲染 v-if 和v-show

			<view v-if="seen">现在你看到我了</view>
			<view v-else>你看不到我了</view>

<view v-show="ok">Hello!</view>

在这里插入图片描述

列表渲染 v-for

数组

v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
第一个参数 item 则是被迭代的数组元素的别名。
第二个参数，即当前项的索引 index ，是可选的。

			<view v-for="(item, index) in items">
				{{ index }} - {{ item.message }}
			</view>

对象

第一个参数 value 是被迭代的对象元素的属性值。
第二个参数为 property 名称 (也就是键名)。
第三个参数作为索引。

	<template>
		<view>
			<view v-for="(value, name, index) in object">
				 {{ index }}. {{ name }}: {{ value }}
			</view>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					object: {
						title: 'How to do lists in Vue',
						author: 'Jane Doe',
						publishedAt: '2020-04-10'
					}
				}
			}
		}
	</script>

prop 插槽什么的都没看懂以后再说

vue3也没看

生命周期

应用生命周期

uni-app 支持 onLaunch、onShow、onHide 等应用生命周期函数，详情请参考应用生命周期

页面生命周期

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

事件

uni-app 基础组件规范，与小程序规范相近。如果了解小程序开发的话，uni-app的基础组件会感觉很熟悉。但需要注意组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange=“eventName” 事件，需要写成 @change=“eventName”
事件也是组件的属性，只不过这类属性以@为前缀，如：

 <button size="mini" @click="goto('/pages/about/about')">按钮</button>

组件

更详细的参考 https://uniapp.dcloud.io/component/README

常用视图容器（View Container）：
view 视图容器，类似于HTML中的div
scroll-view 可滚动视图容器
swiper 滑块视图容器，比如用于轮播banner

拓展组件

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

比如我们需要一个五角星点击评分的组件，在DCloud的插件市场里可以获取到：https://ext.dcloud.net.cn/plugin?id=33

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

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

小程序组件

小程序自定义组件支持
uni-app 支持在 App 和小程序中使用小程序自定义组件，从HBuilderX2.4.7起，H5端也可以运行微信小程序组件。
在这里插入图片描述
使用方式

在 pages.json 对应页面的 style -> usingComponents 引入组件：

{
    "pages": [{
        "path": "index/index",
        "style": {
            // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
            "usingComponents": {
                "custom": "/wxcomponents/custom/index"
            },

            // #ifdef MP-ALIPAY
            "usingComponents": {
                "custom": "/mycomponents/custom/index"
            }
    }]
}

在页面中使用

<!-- 页面模板 (index.vue) -->
<view>
    <!-- 在页面中对自定义组件进行引用 -->
    <custom name="uni-app"></custom>
</view>

vue组件

https://uniapp.dcloud.net.cn/vue-components?id=%e6%a6%82%e5%bf%b5

wxs

它的特点是运行在视图层。当需要避免逻辑层和渲染层交互通信折损时，可采用wxs。减少视图层与逻辑层通信，使滑动更加丝滑。

uni-app可以将wxs代码编译到微信小程序、QQ小程序、app-vue、H5上（uni-app 2.2.5及以上版本）

renderjs

renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。

环境判断

开发、生产环境

if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}

更多环境设置
如果你需要自定义更多环境，比如测试环境：

假设只需要对单一平台配置，可以 package.json 中配置，在HBuilderX的运行和发行菜单里会多一个出来。https://uniapp.dcloud.io/collocation/package
如果是针对所有平台配置，可以在 vue-config.js 中配置。https://uniapp.dcloud.io/collocation/vue-config

HBuilderX 中敲入代码块 uEnvDev、uEnvProd 可以快速生成对应 development、production 的运行环境判定代码。

判断平台

平台判断有2种场景，一种是在编译期判断，一种是在运行期判断。
编译器判断—条件编译
在这里插入图片描述

运行期判断

运行期判断运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具（在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 uni.getSystemInfoSync().platform 返回值均为 devtools）。
switch(uni.getSystemInfoSync().platform){
case ‘android’:
console.log(‘运行Android上’)
break;
case ‘ios’:
console.log(‘运行iOS上’)
break;
default:
console.log(‘运行在开发者工具上’)
break;
}
如有必要，也可以在条件编译里自己定义一个变量，赋不同值。在后续运行代码中动态判断环境。

TS

在这里插入图片描述
ts怎么用没看

条件编译

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。

但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

大量写 if else，会造成代码执行性能低下和管理混乱。
编译到不同的工程后二次修改，会让后续升级变的很麻烦。
在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。
在这里插入图片描述