Hbuilder uniapp 笔记

小程序
学习连接
https://uniapp.dcloud.net.cn/
//哔哩哔哩
https://www.bilibili.com/video/BV1vh411B7Sb?share_source=copy_pc
//腾讯课堂
https://ke.qq.com/course/3169971#term_id=103296764

页面调用接口
https://uniapp.dcloud.net.cn/tutorial/page.html#%E9%A1%B5%E9%9D%A2%E8%B0%83%E7%94%A8%E6%8E%A5%E5%8F%A3

vue教程
https://learning.dcloud.io/#/

v-命令是vue的指令,连接
https://uniapp.dcloud.net.cn/tutorial/vue-api.html#%E6%A8%A1%E6%9D%BF%E6%8C%87%E4%BB%A4

css教程
https://www.w3school.com.cn/css/index.asp
Css各个属性
https://www.runoob.com/cssref/css3-pr-align-items.html

命名规范
https://mp.weixin.qq.com/s/8Ts3qXffORHffxRejAsfDg

全局变量和方法
https://ask.dcloud.net.cn/article/35021

Vue中常用变量 标准内置对象 (数组、字典、字符串等 )的操作 字典就是对象啊啊啊
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects

1.v-bind:class= 简写为:class

hhhh
可以绑定一个style,title是data中定义的数据变量,或者写成一个表达式
如果是一个变量,可以通过改变变量为另一种style来改变控件的样式。

可一次绑定多个class,有相同属性的按照最后一个clas的显示





2.绑定事件

@tap=“openNext”
v-on:click=“openNext” 简写成 @click=“openNext”

3.v-model

绑定变量kk到输入框,在表单控件或者组件上创建双向绑定

4.v-if= v-else-if= v-else

条件判断,决定某个内容或控件是否挂载,v-show 条件判断是否显示

"false">kkkk
ssss

5. 绑定事件

@click @click.stop,可以阻止事件穿透,也就是说点击子级不会响应父级事件。

父级:{{father}}
子级:{{sub}}

6.自定义组件

组件中对数据的处理要放到mounted方法中,以避免微信小程序不兼容

https://uniapp.dcloud.net.cn/tutorial/vue-components.html#%E6%A6%82%E5%BF%B5





7.组件生命周期

只有beforeCreate方法执行时props里的值不存在,其它方法都有
Hbuilder uniapp 笔记_第1张图片

https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle

8.定时器

// 定时器 取消定时器

var timeIDD = setTimeout(function(){
	console.log('wwww');
}, 1000);
clearTimeout(timeIDD);

setTimeout(this.openNext(), 10);

setTimeout(() => {
	this.openNext();
}, 5000)

9.样式和页面布局 iconfont使用

https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#%E9%A1%B5%E9%9D%A2%E6%A0%B7%E5%BC%8F%E4%B8%8E%E5%B8%83%E5%B1%80
css布局
https://www.w3school.com.cn/css/css_boxmodel.asp
https://www.w3school.com.cn/css/css_positioning.asp

Flexbox display: flex; 重点啊
https://www.w3school.com.cn/css/css3_flexbox.asp
Hbuilder uniapp 笔记_第2张图片

CSS 框模型
所有 HTML 元素都可以视为方框。在 CSS 中,在谈论设计和布局时,会使用术语“盒模型”或“框模型”。
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括:外边距、边框、内边距以及实际的内容。下图展示了框模型:
Hbuilder uniapp 笔记_第3张图片

对不同部分的说明:

  • 内容 - 框的内容,其中显示文本和图像。
  • 内边距 - 清除内容周围的区域。内边距是透明的。
  • 边框 - 围绕内边距和内容的边框。
  • 外边距 - 清除边界外的区域。外边距是透明的。
    框模型允许我们在元素周围添加边框,并定义元素之间的空间。
    元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
    提示:背景应用于由内容和内边距、边框组成的区域。
    内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:
  • {
    margin: 0;
    padding: 0;
    }
    在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
    假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:

    Hbuilder uniapp 笔记_第4张图片

#box {
width: 70px;
margin: 10px;
padding: 5px;
}
提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。
实例
演示框模型:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
亲自试一试
元素的宽度和高度
为了在所有浏览器中正确设置元素的宽度和高度,您需要了解框模型如何工作。
重要提示:使用 CSS 设置元素的 width 和 height 属性时,只需设置内容区域的宽度和高度。要计算元素的完整大小,还必须把内边距、边框和外边距加起来。
实例

元素的总宽度将是 350px: div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; } 亲自试一试 计算如下: 320px(宽度) + 20px(左+右内边距) + 10px(左+右边框) + 0px(左+右外边距) = 350px **元素的总宽度应该这样计算: 元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距 元素的总高度应该这样计算: 元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距**

10.v-for

 

**注意:**需要绑定:key="”,否则会报错 (Emitted value instead of an instance of Error) 使用:想使用test1 外面必须有一个view并且class是demo包裹起来** "demo"> demo "test1">生效 "test1"> 不生效

13.CSS Position(定位)

https://www.runoob.com/css/css-positioning.html
①static 定位
HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
②fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动:
③relative 定位
相对定位元素的定位是相对其正常位置。
④absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于:
⑤sticky 定位
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
⑥重叠的元素
元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)
一个元素可以有正数或负数的堆叠顺序:
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

14.接口调用

uni.request({
				/* 官方示例
				 https://uniapp.dcloud.net.cn/api/request/request.html
				 */
				url: 'https://unidemo.dcloud.net.cn/api/news',
				method:'GET',
				data: {
					//参数
				},
				header: {
					
				},
				fail: (res) => {
				// 正确写法  失败回调
				},
				success: (res) => {
					// 正确写法  成功回调
				},
				
				/* 
				调用接口时成功和失败的回调不能写成下面形式
				虽然可以获取到数据但是赋值后并不能更新页面内容
				success(res) {
					// 错误写法
					this.allMesArr = res.data.data;
				},
				fail(res) {
				// 错误写法
				}, */
				complete: (res) => {
					console.log('complete');
				}
			});

15. style= :style= 后绑定变量 变量

:style=“{height:heightNew+‘rpx’}” heightNew变量
:style=“[{height:heightNew+‘rpx’}]” heightNew变量
:style=“{background: showNoDataView ? ‘#0A84FF’ : ‘#fc001b’,height:heightNew+‘rpx’}” 变量
style=“height:100%” 常量






16. 如何在style中使用变量 不推荐 用15

mineBackColor 自定义变量名称
–useMineColor style中使用名称 --必须有否则不生效
color: var(–useMineColor); 使用方式 --必须有否则不生效





17、如何使用变量对字典(object)取值


18.Invalid prop: custom validator check failed for prop “confirmType”


					"请输入内容" height="22" confirmType="done">

19.Vue中常用变量 标准内置对象 (数组、字典、字符串等 )的操作

字典就是对象啊啊啊
官网连接
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects
Hbuilderx
https://uniapp.dcloud.net.cn/tutorial/syntax-uts.html#find

/*  新对象 = {...对象1,...对象2,...对象3} 合并两个对象 如果有相同内容,最后面的会保留*/
			var oneDic = {
				'相同的': 'one',
				'会将': '222'
			};
			var twoDic = {
				'相同的': 'two',
				'是是是': '少时诵诗书'
			};
			var threeDic = {
				...oneDic,
				...twoDic
			};
			var fourDic =

				console.log(threeDic);
			/*结果是
			{
			    "相同的": "two",
			    "会将": "222",
			    "是是是": "少时诵诗书"
			} */


			/* 合并数组 */
			var oneArr = ['pme'];
			var twoArr = ['jjjj', 'pme'];
			var fourArr = oneArr.concat(twoArr);
			/* 结果是
			[
			    "pme",
			    "jjjj",
			    "pme"
			]
			 */
			console.log(fourArr);

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
find()方法返回数组中满足提供的测试函数的第一个元素的值。
这两个后面跟的都是表达式

let number = 2;
			const arr = [0, 1, 2, 3];
			let one = arr.findIndex(item => number == item);//查找item等于number的元素的位置 值为2
			let two = arr.findIndex(item => number < item);//查找item小于number的元素的位置  值为0
			let three = arr.findIndex(item => 5 < item);//查找item小于number的元素的位置  值为-1,找不到就是-1

20.样式中计算 style 使用全局变量

height: calc(100% - 140rpx);


21.!important 增加比重

使用uni-icons时,绑定class,class中直接写color并不能改变图标颜色,加上!important可生效。



.iconSameStyle {
				margin-right: 20rpx;
				color: red !important;
			}

22.设置元素居中

https://www.runoob.com/cssref/css3-pr-align-items.html
Hbuilder uniapp 笔记_第5张图片


			

			
		


//样式
	.alertSureView {
		position: absolute;
		display: flex;
		background-color: rgba(255, 30, 93, 0.5);
		z-index: 999;
		left: 0%;
		right: 0%;
		top: 0%;
		bottom: 0%;

		align-items: center;
		justify-content: center;

		.showInfoBackView {
			position: relative;
			background-color: white;
			height: 300rpx;
			width: 50%;

		}

		.topTitleView {}
	}


23.两个元素一左一右显示

"smsNumberContainer">
			"leftTitleView">
				"购买短信语音条数" disabled="true" style="background-color: bisque;">
			
			"rightNubmerView">
				"number" placeholder='1条起' placeholder-style="color:rgba(180, 180, 180, 1)"
					style="background-color: aqua;">
			
		



24苹果日期时间显示nan解决方法

// 苹果显示nan解决方法
					let endTime_Old = new Date();
					var year = Number(endTime_Old.getFullYear() + item.code);
					var month = Number(endTime_Old.getMonth() + 1);
					var date = Number(endTime_Old.getDate());

					return year + '-' + month + '-' + date;
// 时间戳转换成时间timestamp毫秒值
var time = new Date(timestamp);

25.父组件主动调用子组件方法,

https://jingyan.baidu.com/article/e52e36158892b501c60c51b5.html




  1. 在需要使用的地方导入此文件
    Hbuilder uniapp 笔记_第6张图片
    注意:子组件中name对应的名字要和导入时的名称保持一致,‘-’后面的首字母大写
    例如,子组件 name: ‘building-control-place-home’,
    对应使用时导入为 import buildingControlPlaceHome from “…/building-control/building-control-place.vue”

27 数据更新了,但是页面不渲染的问题

第一种情况:就是在初始化的时候没有这个属性,是动态添加的属性。这个时候不会引起vue自动渲染机制。

this.$set(object, key, data);
object:目标对象。key:需要添加的属性名。data:属性值。

第二种情况:在操作数组的时候,要用push 或者 splice 等 可以改变这种方法改变原数组。而不是用下标 this.mydata[0] = ‘改变的值’。这样也会引起不渲染。

如果情况比较复杂,所有方法都试过了还没有解决,用 v-if 强制重新渲染更新。

28 文字配置

文字超出范围显示省略号不换行
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
width: 100%;

配置文字没有上下距离,就是font是多少就是多高
设置line-height:1

29、map使用

A:标记点markers设置本地图片路径:
iconPath: '/…/…/…/static/ic_green_point.png’注意最前面的/
iconPath: '/static/ic_green_point.png’//这样写也行

B:显示用户当前位置=== :show-location=‘true’

30、对函数添加注释

自定义快捷方法

//添加函数注释、说明信息
"funDescr": {
	"prefix": "fundescr",
	"body": [
		"/**",
		" * ${1:functionDescr}",
		" * @param {${2:type}} ${3:name} ${4:descr}",
		" */"
	],
	"triggerAssist": false,
	"description": "函数说明"
}

31、导node_modules、axios

进入对应项目,执行npm install
进入对应项目,导入、安装axios 执行 npm install axios

32、页面设置height 100%不生效

在App.vue文件中添加全局配置,如下

<style>
	/*每个页面公共css */

	/* 设置整个项目的背景色,设置完直接生效 */
	page {
		width: 100%;
		height: 100%;
		background-color: #F5F8FBFF;
	}
style>

然后再需要的页面直接设置即可,如

<template>
	<view style="background-color: red;height: 100%;">
	view>
template>

你可能感兴趣的:(uniapp)