目录介绍

  • 01.遇到问题汇总
  • 02.关于布局设置
  • 03.基础语法总结
  • 04.关于交互问题
  • 06.关于回传数据
  • 07.关于网络请求
  • 08.关于页面刷新
  • 09.关于注意问题
  • 10.待解决和思考

01.遇到问题汇总

  • 在我的页面，给item设置分割线时，定义view的class为line出现问题，但是把名称修改成cell-line就可以。猜想可能是设置class名称时，用line有冲突。
  • 从A页面跳转B页面，关闭B返回到A，如何回传数据？看了往上方案，发现都有问题，最后用存取值替代。
  • 比如切换页面布局视图刷新时，我的页面登陆，未登陆，会员，使用v-if替代v-show方式刷新页面。
  • 网络请求，在学员信息页面，使用post提交数据，需要设置header请求头，否则会出现请求异常
  • 数据绑定，比如动态改变view的背景颜色，建议用class设置替代style设置
  • 在data中给字段赋值，建议赋值方式是''字符串，即使是整型。比如使用sex : "3"替代sex : 3
  • 当父，子等多层控件都有点击事件的时候，为了避免冒泡事件冲突，可以加上@tap.stop阻止冒泡事件
  • 图片引入，设置相对路径有时不生效，这是为什么？根据柯佳的规范文档，建议url的引入规则使用绝对路径
  • 在省市区地区控件中，即使给scroll-view的父view设置了高度，仍然要给scroll-view设置高度，不然会撑满页面

02.关于布局设置

  • flex布局属性介绍

    • 这个是边写布局，边查询
    display: flex; //将对象作为弹性伸缩盒显示
    
display: inline-flex; //将对象作为内联块级弹性伸缩盒显示 父元素默认根据子元素宽高自适应

//主轴方向
    
flex-direction: row; //项目排列方向为水平方向，从左端开始
    
flex-direction: column; //主轴为垂直方向，起点在右端

//如何换行
    
flex-wrap: nowrap; //项目不换行排列
    
flex-wrap: wrap; //换行排列，第一行在上方
    
flex-wrap: reverse; //换行排列，第一行在下方

//主轴对齐方式
    
justify-content: flex-start //左对齐
    
justify-content: flex-end //右对齐
    
justify-content: center //居中
    
justify-content: space-between //两端对齐，项目之间间隔相等
    
justify-content: space-around //每个项目两侧间隔相等

//项目在交叉轴上对齐方式
    
align-items: center; //垂直居中
    
align-items: flex-start; //交叉轴起点对齐
    
align-items: flex-end; //交叉轴终点对齐

//多跟轴线的对齐方式
    
align-content: center; //垂直居中
    
align-content: flex-start; //交叉轴起点对齐
    
align-content: flex-end; //交叉轴终点对齐
  • 常用的样式 
    position:sticky //粘性定位(基于用户的滚动位置来定位，使用时需指定特定阈值，如top:0)
    
position:static //默认定位(没有定位)
    
position:fixed //固定定位(固定在窗口位置，窗口滚动也不会移动)
    
position:relative top:10px //相对定位(相对其正常位置定位)
    
position:absolute //绝对定位(相对于最近的已定位父元素，如果没有已定位父元素，则相对于<html>)

border-radius:30upx; //圆角半径
    
text-indent:20px //首行缩进
    
letter-spacing:1px //字间距
    
vertical-align: middle; //图片垂直居中
    
z-index //重叠元素的堆叠顺序

//https://www.cnblogs.com/skura23/p/6505352.html
    
:active，元素被点击时变色，但颜色在点击后消失
    
:focus， 元素被点击后变色，且颜色在点击后不消失
  • css中font不支持简写 
    //错误
    
font：bold 28rpx；

//正确
    
font-size:28rpx;
    
font-weight:bold;
  • scroll-view需要设置高度
    • 在省市区地区控件中，给父view设置高度500rpx，如果不给地区scroll-view设置高度，则地区内容会盛满控件，这样会导致切换省市区页面抖动。
    • 解决办法，给子scroll-view同样需要设置高度。

03.基础语法总结

  • v-if和v-show

    • 比如在我的页面，有登陆状态，会员状态，还有未登陆状态，且布局可以动态隐藏和显示，这个时候就用到v-if
    • v-if 和 v-show 的区别：前者是否会在dom中被移除，后者 display:none
    • 针对刷新切换视图，比如登陆/为登陆，建议使用v-if。
    • 使用场景如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。更多内容阅读这篇文章
  • 关于数据绑定
    • 比如用户中心选择性别，选择切换颜色，需要注意书写规范。代码如下所示：
    //正确写法
    
<text class="cell-sex" :class="{'cell-sex-select': isSelcetMan}" @click="clickMan">男</text>
    
<text class="cell-sex" :class="{'cell-sex-select': !isSelcetMan}" @click="clickWoman">女</text>

//错误写法
    
<text :style="{color:isSelcetMan?'#F88B32':'#666666'}" class="cell-sex" @click="clickMan">男</text>
    
<text :style="{color:!isSelcetMan?'#F88B32':'#666666'}" class="cell-sex" @click="clickWoman">女</text>
  • 关于data中赋值注意
    • 在学员信息页面，在data中设置sex为整型的时候，发现提交学员信息报500异常，但是如果赋值改成"3"，就发现可以呢。难道是即使绑定的是数字，网页与移动端获取到的也只会是字符串
    export default {
    
	data() {
    
		return {
    
			//性别，1男，2女
    
			sex : "3",
    
			// sex : 3,
    
		};
    
	},
    
}

//提交学员信息，sex参数是整型
    
async updateUserInfo(name,sex,birthday,grade,school_id,entrance_year) {
    
	const data = {
    
		sex : sex,
    
	};
    
	let header = {
    
		'content-type': 'application/x-www-form-urlencoded'
    
	};
    
	const result = await this.$zwwl.api.updateUserInfo(data,header);
    
	//网络请求成功
    
	if(result.data!=null && result.code == 200){
    
	}
    
},
  • 关于@tap.stop.prevent
    • 比如选择城市列表控件中，省，市，区三级tab。点击省列表item，请求该省的市数据，然后切换到该市的tab页面。同时，选择完成后，点击控件关闭城市列表弹窗
    • 什么叫做事件冒泡：点击外面的时候，不会触发里面元素的事件；但是点击里面元素的时候，就会触发外面元素的事件，这就是事件冒泡！！具体可以看这篇博客
    • 阻止事件冒泡时要在外层加一层标签<view @tap.stop="onAreaItemClick(ind)"></view>，直接在需要使用的方法上加.stop无效
    <view v-if="tabTitle.length > 0 && show" :class="[{'tabBlock__animation' :show},'tabBlock']" @tap.stop.prevent="onClickModule">
    
	<!-- 省市区，以及确定按钮 -->
    
	<scroll-view scroll-x="true" scroll-with-animation :scroll-left="tabsScrollLeft" @scroll="scroll">
    
		<view :class="'tab'" id="tab_list" >
    
			<view v-for="(item, index) in tabTitle" :key="index" :class="['tab__item',{'tab__item--active':currentIndex === index}]" :style="{color: (currentIndex === index ? `${itemColor}`: '')}" id="tab_item" @tap.stop.prevent="onSelect(index)">
    
				<view class="tab__item-title">
    
					 {{item.title}}
    
				</view>
    
			</view>
    
			<view class="confirm" @tap.stop.prevent="onConfirm">
    
				确定
    
			</view>
    
			<view class="tab__line" :style="{ background: lineColor, width: lineStyle.width, transform: lineStyle.transform,transitionDuration: lineStyle.transitionDuration}"></view>
    
		</view>
    
	</scroll-view>

	<!-- 地区数据 -->
    
	<scroll-view class="content-view" scroll-y="true">
    
		<view class="item-view" v-for="(item,ind) in areaListData" :key="ind" @tap.stop.prevent="onAreaItemClick(ind)">
    
			<view class="desc">{{item.name}}</view>
    
			<view class="cell-line"></view>
    
		</view>
    
	</scroll-view>
    
</view>
  • this作用域问题
    • 第一种解决方案

      • 解决办法就是在闭包之外先把this赋值给另一个变量
      //可以发现这样操作就可以解决作用域问题
      
changeTitle3(){
      
	//赋值
      
	var me = this;
      
	uni.setStorage({
      
	    key: 'storage_key',
      
	    data: 'hello',
      
	    success: function () {
      
			me.title = "改变标题3";
      
	        console.log('changeTitle2------success');
      
	    }
      
	});
      
},
    • 第二种解决方案
      • 使用箭头函数也可以解决该问题，思考一下这是为什么？但是不建议使用这种……
      changeTitle4(){
      
	uni.setStorage({
      
	    key: 'storage_key',
      
	    data: 'hello',
      
	    success:() => {
      
			this.title = "改变标题4";
      
	        console.log('changeTitle2------success');
      
	    }
      
	});
      
},

04.关于交互问题

  • 在省市区城市列表中

    • 出现问题

      • 当切换不同省，获取城市数组的顺序发生变更后，点击事件接收到的 index 索引并不会随着更新，还是数组顺序发生变更前的索引值。
    • 解决方案
      • 当页面需要同时存在两个或两个以上的v-for的时候，key的值就需要根据你最终应用的环境来正确设置。如果是适应多端平台的话，以下方法可以作为参考：
      • 1、把一些需要v-for的部分做成组件，这样页面上就不存在多个 v-for
      • 2、使用遍历的元素的某个字段值作为key，但是这个字段值必须是唯一的不重复的，如下：list.id等等
    • 为何需要key
      • 可以参考:演示v-for为什么要加key
      • 使用 v-for 循环整数时和其他平台存在差异，如 v-for="(item, index) in array" 中，在H5平台 item 从 1 开始，其他平台 item 从 0 开始，可使用第二个参数 index 来保持一致。
      <!-- 省市区，以及确定按钮 -->
      
<scroll-view scroll-x="true" scroll-with-animation :scroll-left="tabsScrollLeft" @scroll="scroll">
      
	<view :class="'tab'" id="tab_list" >
      
		<view v-for="(item, index) in tabTitle" :key="index" :class="['tab__item',{'tab__item--active':currentIndex === index}]" :style="{color: (currentIndex === index ? `${itemColor}`: '')}" id="tab_item" @tap.stop.prevent="onSelect(index)">
      
			<view class="item-title">{{item.title}}</view>
      
		</view>
      
	</view>
      
</scroll-view>

<!-- 地区数据 -->
      
<scroll-view class="content-view" scroll-y="true">
      
	<view class="item-view" v-for="(item,ind) in areaListData" :key="ind" @tap.stop.prevent="onAreaItemClick(ind)">
      
		<view class="desc">{{item.name}}</view>
      
		<view class="cell-line"></view>
      
	</view>
      
</scroll-view>

06.关于回传数据

  • 如何关闭当前页面，返回到上一页面

    • 页面返回 调用uni.navigateBack、用户按左上角返回按钮、安卓用户点击物理back按键
  • 第一种回传数据
    • 采用uni.$emit()与uni.$on()的方式。$emit是触发事件，$on是接受事件，通过eventName匹配。这种方式有点类似Android中eventBus事件通知

      • uni.$emit(eventName,OBJECT)
      uni.$emit('update',{msg:'页面更新'})
      • uni.$on(eventName,callback)
      uni.$on('update',function(data){
      
    console.log('监听到事件来自 update ，携带参数 msg 为：'  + data.msg);
      
})
    • 存在问题：需要接触监听，监听事件会执行多次
  • 第二种回传数据
    • 在b页面操作
    var pages = getCurrentPages();
    
//上一个页面
    
var prevPage = pages[pages.length - 2];
    
prevPage.setData({
    
	sx1:"参数1",
    
	sx2:"参数2",
    
})
    
uni.navigateBack({
    
	delta:1
    
});
    • 在a页面操作
    onShow(object){
    
	if(!!object){
    
		console.log('vue onShow' + object)
    
	}
    
},
    • 报错问题："message": "prevPage.setData is not a function"
  • 第三种回传数据
    • 在b页面操作
    var pages = getCurrentPages();
    
//上一个页面
    
var prevPage = pages[pages.length - 2];
    
var object={
    
	sx1:"参数1",
    
	sx2:"参数2",
    
}
    
//重点$vm
    
prevPage.$vm.otherFun(object);
    
uni.navigateBack();
    • 在a页面操作
    //这个方法写在methons中
    
otherFun(object){
    
	if(!!object){
    
		console.log(object)
    
	}
    
}
    • 报错问题："message": "prevPage.$vm.otherFun is not a function",
  • 目前如何回传数据
    • 还没有找到好方案，请教同事说，先保存数据，关闭页面，然后在onShow方法获取

07.关于网络请求

  • 网络请求指POST的坑

    • 在学员中心，用户填完数据后，需要提交数据请求接口。使用到post请求，注意，一定需要添加请求header，否则无法上传数据
    • 为何会出现这个错误
      • 以 POST 方式进行网络请求时，如果不添加header头是无法进行正常的网络请求的，此时默认的请求方式content-type类型是application/json
    • 解决方案 
      let header = {
      
	'content-type': 'application/x-www-form-urlencoded'
      
};
      
const result = await this.$zwwl.api.updateUserInfo(data,header);
    • 参考文章：uni-app 网络请求指POST的坑
  • 如果不添加header头
    • 可以直接查看不添加header头，默认的content-type是：application/json;charset=UTF-8
    • 添加header头，设置为'content-type': 'application/x-www-form-urlencoded'
  • 这两种区别
    • application/x-www-form-urlencoded表示表单，上传参数的格式为key=value&key=value
    • application/json代表参数以json字符串传递给后台

08.关于页面刷新

  • 比如，在登陆页面，有未登陆，登陆，会员等多种状态view，用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。
  • 第一种是用原始方法：location.reload();不过是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。
  • 第二种是用vue自带的路由跳转：this.$router.go(0);和第一种一样，强制刷新。
  • 第三种使用到v-if，具体操作如下所示，只需要改变isShow的属性值即可刷新 
    <template>
    
	<view>
    
		<!-- v-if v-show 的区别：前者是否会在dom中被移除，后者 display:none -->
    
		<view v-show="isShow">
    
			now you see me haha
    
		</view>
    
	</view>
    
</template>

<script>
    
	export default {
    
		data() {
    
			return {
    
				isShow: true,
    
			};
    
		}
    
	}
    
</script>

<style>

</style>

09.关于注意问题

  • 组件内引入图片要使用绝对路径。使用这种/static/...是最好的
  • 主页面的生命周期用onLoad代替created，onReady代替mounted。组件内使用原来的created与mounted
  • 阻止事件冒泡时要在外层加一层标签<view @tap.stop="stop"></view>，直接在需要使用的方法上加.stop无效
  • 不要引入体积大的js，如果是超过500k，工具编译的时候会给提示
  • 比如，在地区选择控件中，省，市，区是三个接口。避免滚动监听请求接口数据，当监听 scroll-view 的滚动事件时，视图层会频繁的向逻辑层发送数据

10.待解决和思考

  • 关于页面关闭，返回上一页面，需要传递数据，具体该如何操作才有效？
  • 长列表中如果每个item有一个加入购物车按钮，点击后数字+1，如何才能不刷新整个list？

uni学习笔记分享的更多相关文章

  1. 学习笔记分享之汇编---3. 堆栈&标志寄存器

    前言:   此文章收录在本人的<学习笔记分享>分类中,此分类记录本人的学习心得体会,现全部分享出来希望和大家共同交流学习成长.附上分类链接:   https://www.cnblogs.c ...

  2. 大学四年的Python学习笔记分享之一，内容整理的比较多与仔细

    翻到以前在大学坚持记录的Python学习笔记,花了一天的时间整理出来,整理时不经回忆起大学的时光,一眨眼几年就过去了,现在还在上学的你们,一定要珍惜现在,有个充实的校园生活.希望这次的分享对于你们有学 ...

  3. 字节跳动内部微服务架构-Docker实战学习笔记分享 真香

    前言 基于 Spring Cloud 的微服务设计和开发,已经越来越多地得到了更多企业的推广和应用,而 Spring Cloud 社区也在不断的迅速发展壮大之中,近几年时间,Spring Cloud ...

  4. MVC学习笔记(分享)

    一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 <!--conf ...

  5. JavaScript01天学习笔记分享

    01知识点 JavaScript 代码运行在浏览器(后缀名.js) 和java完全不同的东西,只是名称类型而已 src 引用脚本   <Script></Script> ale ...

  6. JavaScript构造函数学习笔记分享

    构造函数就是一个普通的函数,创建方式和普通函数没有区别 不同的是构造函数名习惯上首字母大写 普通函数是直接调用,而构造函数需要使用new关键字来调用 构造函数的执行流程: 立刻创建一个新的对象 将新建 ...

  7. JavaScript数组的方法 | 学习笔记分享

    数组 数组的四个常用方法 push() 该方法可以向数组的末尾添加一个或多个元素,并返回数组的新长度 可以将要添加的元素作为方法的参数传递,这些元素将会自动添加到数组的末尾 pop() 该方法可以删除 ...

  8. Linux 学习笔记分享: Linux 用户组的权限: drwx------ 700权限(d 目录 ,r=4,w=2,x=1:rwx=7;---=0;---=0)

    Linux 用户组的权限: drwx------ 700权限(d 目录 ,r=4,w=2,x=1:rwx=7;---=0;---=0) 1 1 Linux 用户组的权限: drwx------ 700 ...

  9. 【转帖】4412ARM开发板学习笔记（一）

    本文转自迅为论坛:http://www.topeetboard.com 新手在进行开发学习前,建议先看01-迅为电子开发板入门视频.对开发板和开发环境有一定的了解后,不要盲目接线开机.以下是个人的一点 ...

  10. redis学习笔记(1)

    最近在学习redis,做了比较详细的学习笔记,分享给大家,欢迎一起讨论和学习 第一部分,简单介绍redis 和 redis的基本操作 NoSQL的特点 : 数据库种类繁多,但是一个共同的特点都是去掉关 ...

随机推荐

  1. 机器学习基础06DAY

    模型检验-交叉验证 一般在进行模型的测试时,我们会将数据分为训练集和测试集.在给定的样本空间中,拿出大部分样本作为训练集来训练模型,剩余的小部分样本使用刚建立的模型进行预测. 训练集与测试集 训练集与 ...

  2. JS 一篇文章弄懂Object.defineProperty，现学现用，来试试相关笔试题吧

    壹 ❀ 引 早在大半年前,掘金某位用户分享的面试题整理中有一题,简述let与const区别,你能自己模拟实现它们吗?,题目意思大概如此,时间久远我也很难找到那篇文章,当时看到此题对于const实现我的 ...

  3. NC24623 Tree Decoration

    题目链接 题目 题目描述 Farmer John is decorating his Spring Equinox Tree (like a Christmas tree but popular ab ...

  4. Stream 总结

    1 前言 Stream 是 Java 8 中为方便操作集合及其元素而定制的接口,它将要处理的元素集合看作一种流,对流中的元素进行过滤.排序.映射.聚合等操作.使用 Stream API,就好像使用 S ...

  5. 阿里OSS+PicGo+Typora图床设置使用

    1.首先下载Typroa和PicGo Typroa地址: 链接:https://pan.baidu.com/s/1M6_5o1PZyaGqOhSb4yvtmA 提取码:a1aj PicGo地址: 链接 ...

  6. 大白菜方式制作win10 PE启动U盘

    说明 最近帮朋友安装下win10,用了2种制作U盘启动盘的方式.记录一下也方便大家少走弯路. 准备的工具: 1.大白菜软件 2.win10镜像 3.1个U盘,U盘容量 > 8G即可. 制作PE启 ...

  7. 美团面试：说说OOM三大场景和解决方案？ （绝对史上最全）

    首先,咱们先聊聊,什么是OOM? 小伙伴们,有没有遇到过程序突然崩溃,然后抛出一个OutOfMemoryError的异常?这就是我们俗称的OOM,也就是内存溢出.简单来说,就是你的Java应用想要的内 ...

  8. 学习go语言编程之并发编程

    并发基础 并发包含如下几种主流的实现模型: 多进程 多线程 基于回到的非阻塞/异步IO 协程 协程 与传统的系统级线程和进程相比,协程最大的优势在于"轻量级",可以轻松创建上百万个 ...

  9. django时区相关说明

    # naive time 从字面意思上理解,这是个"幼稚的时间",所以可以理解为它是个本地时间,不带时区信息,不能直接用于存储,如下 import datetime datetim ...

  10. 【Azure Function】Azure Function中使用 Java 8 的安全性问题

    问题描述 使用Azure Function, 环境是Linux的Java8.目前 Oracle Java JDK8,11,17 和 OpenJDK 8/11/17 都在存在漏洞受影响版本的范围内. O ...