uniapp学习笔记

序

课程：虾米老师uniapp笔记（bilibili）
目标：掌握uniapp语法，弥补前端知识，具备基本开发能力（麦德龙/山姆app）
课时：65结课
计划：2个月完成（2024年2月底-4月底）

vue/uniapp语法

1.vue2特点 P13

vue是单页面程序，最终所有页面都在index.html上一个div=app内；其他所有.vue文件都算小组件。
template部分就是原来html部分，vue2里，temlate下面只能有一个view
单页面刷新：在传统开发中，用原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和 DOM ，这样大大加快了访问速度和提升用户体验。
vue编译后运行为html+js：开发是vue，经过编译后，运行时已经变成了js文件。现代前端开发，很少直接使用HTML，基本都是开发、编译、运行。所以 uni-app 有编译器、运行时的概念。

js外部文件引入方式

<script>
    var util = require('../../../common/util.js');  //require这个js模块
    var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法
</script>

function formatTime(time) {
    return time;//这里没写逻辑
}
module.exports = {
    formatTime: formatTime
}

当然还有一些高级的用法

// 直接使用js模块的属性。在hello uni-app有示例
var dateUtils = require('../../../common/util.js').dateUtils;
// 将js导入并重命名为echarts，然后使用echarts.来继续执行方法。在hello uni-app有示例
import * as echarts from '/components/echarts/echarts.simple.min.js';

css外部文件导入全局样式，在根目录下的 app.vue 里写入，每个页面都会加载 app.vue 里的样式。
```
<style>
    @import "./common/uni.css";
    .uni-hello-text{
    color:#7A7E83;
    }
</style>
```
另外，vue支持组件导入，可以更方便的封装一个包括界面、js、样式的库。组件教程
标签区别：不可以使用h1、div这种以前HTML标签，因为在小程序上无法正常使用，需要重新学习标签

data属性

data函数

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

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

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

2.pages.json P5

导航页面，但是pages数组中的第一项表示启动页
tabBar：设置底部tab的表现

3.rpx-响应式单位 P6

iphone6尺寸 750*1334

横向：750rpx为占满横坐标假设屏幕宽度为 375px 375 / 750 = 0.5，1rpx 就等于0.5实际像素

纵向：屏幕高度 / ( 屏幕宽度 / 750 ) = 高度所具有的rpx

例如：667 / ( 375 / 750 ) = 1334 通过计算可以的出高度为1334rpx

小程序加载时设置高度rpx

 onLoad: function (options) {
	wx.getSystemInfo({//微信api，可以获取页面的信息
		success: (result) => {
			console.log(result)
			//拿到当前设备的宽度和高度,单位为px
			let hiehgt = result.windowHeight
			let width = result.windowWidth;
			//px转rpx的转换比例
			let rpxRatdio=750/width //750为设计稿的宽度，width为刚才获取到的页面的宽度
			//将获取到的px的高度转为rpx的高度
			let rpxHeight=rpxRatdio * hiehgt;
			console.log('rpxheight----',rpxHeight);
			this.rpxHeight = rpxHeight
		},
		fail: (res) => {},
		complete: (res) => {},
	})
  },

4.icon

微信、支付宝显示不同，以后介绍第三方库

5.常用标签

view：代替div，块标签
text：代替span，行标签，多了一些属性
icon：行标签

6.scroll-view

scroll-x：x轴可以滚动显示

7.swiper轮播器

<swiper>
    <swiper-item>
        <image />
    </swiper-item>
    <swiper-item>
        <image />
    </swiper-item>
    <swiper-item>
        <image />
    </swiper-item>
</swiper>

circular：滑动展示完了从头循环衔接
duration：切换时常
autoplay：自动播放
interval="3000"：自动播放间隔
indicator-dots：是否显示面板指示点
indicator-color：指示点颜色
indicator-active-color：当前选中的指示点颜色

8.image

默认长度320px；高度240px
mode：裁剪、缩放；共有14钟模式，5种缩放模式，9种裁剪模式。

9.video视频组件 P9

autoplay：自动播放（必须配合muted）
muted：是否静音播放
initial-time：指定视频初始播放位置，单位为秒（s）
duration：指定视频时长，单位为秒（s）
controls：显示默认播放控件（播放/暂停按钮、播放进度、时间） :controls="false" 不显示

10.表单元素 P10、P23

表单内容较多，@submit，radio，picker uniapp表单教程

需要注意的是，当点击submit按钮触发@submit时，e.detail.value获取到的是如下一个对象{}

@submit

EventHandle

携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}，report-submit 为 true 时才会返回 formId

而当选择picker触发@change时，e.detail.value获取到的是选中的index值

@change

EventHandle

value 改变时触发 change 事件，event.detail = {value: value}

11. navigator路由与页面跳转 P11

open-type：跳转方式，默认navigate A页=>B页=>C页，从C回退时回到的是B
navigate、redirect都是打开应用内的东西（非tabBar页面），后者不能返回之前路径。
swirchTab、reLaunch打开tabBar页面，前者不能带参数，后者可以。relaunch是默认的tabBar方式。

12.tabBar P12

官方说明：pages.json 页面路由 | uni-app官网 (dcloud.net.cn)

13.vue模板指令

v-if：

v-if示例

	<template>
		<view>
			<view v-if="type === 'A'">
				A
			</view>
			<view v-else-if="type === 'B'">
				B
			</view>
			<view v-else-if="type === 'C'">
				C
			</view>
			<view v-else>
				Not A/B/C
			</view>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					type:'B'
				}
			}
		}
	</script>

v-show：是一个根据条件展示元素选项的指令。用法大致和 v-if 一样： <view v-show="ok">Hello!</view>不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性的 display 。

v-for：

v-for示例

key
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 :key 来指定列表中项目的唯一的标识符。
:key 的值以两种形式提供
使用 v-for 循环 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
使用 v-for 循环中 item 本身，这时需要 item 本身是一个唯一的字符串或者数字
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 :key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
<template>
		<view>
			<!-- array 中 item 的某个 property -->
			<view v-for="(item,index) in objectArray" :key="item.id">
				{{index +':'+ item.name}}
			</view>
			<!-- item 本身是一个唯一的字符串或者数字时，可以使用 item 本身 -->
			<view v-for="(item,index) in stringArray" :key="item">
				{{index +':'+ item}}
			</view>
		</view>
	</template>
	<script>
	export default {
		data () {
			return {
				objectArray:[{
					id:0,
					name:'li ming'
				},{
					id:1,
					name:'wang peng'
				}],
				stringArray:['a','b','c']
			}
		}
	}
	</script>

	<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>

v-html：与{{}}相比，可以解析<h1>等标签；本质上v-html会解析为<rich-text node="<h1>XXX文字</h1>">。

v-bind：绑定某个属性如src为变量值

v-bind语法

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

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<button v-bind:disabled="isButtonDisabled">Button</button>

v-on：P17

v-on语法

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

class与style绑定：

对象语法

 	<template>
		<view>
			<!-- class -->
			<view class="static" :class="{ active: isActive}">111</view>
			<view class="static" :class="{ active: isActive, 'text-danger': hasError }">222</view>
			<!-- style -->
			<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">333</view>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					isActive: true,
					hasError: false,
					activeColor:"green",
					fontSize:50
				}
			}
		}
	</script>
	<style>
	.static{
		color: #2C405A;
	}
	.active{
		background-color: #007AFF;
	}
	.text-danger{
		color: #DD524D;
	}
	</style>

数组语法

 <template>
	<view>
		<!-- class -->
		<view class="static" :class="[activeClass,errorClass]">111</view>
		<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">222</view><!-- 三元表达式 -->
		<view class="static" v-bind:class="[{ active: isActive }, errorClass]">333</view>
		<!-- style -->
		<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">444</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isActive: true,
				activeClass: 'active',
				errorClass: 'text-danger',
				activeColor:"green",
				fontSize:50
			}
		}
	}
</script>
<style>
	.static{
		font-size:30rpx;
	}
	.active{
		background-color: #007AFF;
	}
	.text-danger{
		font-size:60rpx;
		color:#DD524D;
	}
</style>

如果是单个类名，直接用v-bind:class="isActive ? activeClass : noactive"即可。

v-model：
你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
查看代码
```
 <template>
    <view>
        <input v-model="message" placeholder="edit me">
        <text>Message is: {{ message }}</text>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                message:""
            }
        }
    }
</script>
```

14.computed — 计算属性 P24

在computed中写方法，与在data中写对象是类似的作用——可以在模板中使用（方法名/变量名）。区别在于data中变量是固定值，computed中是复杂计算/字符串拼接，这类不建议放在模板中，太多会难以维护，尽量放到computed中。

computed

	<template>
		<view>
			<view>Original message: "{{ message }}"</view>
			<view>Computed reversed message: "{{ reversedMessage }}"</view>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					message: 'Hello'
				}
			},
			computed: {
				// 计算属性的 getter
				reversedMessage(){
				  return this.message.split('').reverse().join('')
				}
			}
		}
	</script>

15.组件 P25

easycom：

│─components            	符合vue组件规范的uni-app组件目录
│  └─componentA         	符合‘components/组件名称/组件名称.vue’目录结构，easycom方式可直接使用组件
│  		└─componentA.vue    可复用的componentA组件
│  └─component-a.vue      可复用的component-a组件

props传固定值：

组件代码：可以把title、subtitle当作data里的变量

使用代码、效果

posted @ 2024-02-29 18:11 疯狂的草阅读(88) 评论(0) 收藏举报

刷新页面返回顶部

Madgrass

伟大，从心而生

uniapp学习笔记

uniapp学习笔记

序

vue/uniapp语法

1.vue2特点 P13

2.pages.json P5

3.rpx-响应式单位 P6

4.icon

5.常用标签

6.scroll-view

7.swiper轮播器

8.image

9.video视频组件 P9

10.表单元素 P10、P23

11. navigator路由与页面跳转 P11

12.tabBar P12

13.vue模板指令

14.computed — 计算属性 P24

15.组件 P25

公告