uni学习笔记分享-阿里云开发者社区

开发者社区> 开发与运维> 正文

uni学习笔记分享

简介:

目录介绍

  • 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页面。同时,选择完成后,点击控件关闭城市列表弹窗
    • 什么叫做事件冒泡:点击外面的时候,不会触发里面元素的事件;但是点击里面元素的时候,就会触发外面元素的事件,这就是事件冒泡!!具体可以看这篇博客
    • 阻止事件冒泡时要在外层加一层标签,直接在需要使用的方法上加.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
  • 阻止事件冒泡时要在外层加一层标签,直接在需要使用的方法上加.stop无效
  • 不要引入体积大的js,如果是超过500k,工具编译的时候会给提示
  • 比如,在地区选择控件中,省,市,区是三个接口。避免滚动监听请求接口数据,当监听 scroll-view 的滚动事件时,视图层会频繁的向逻辑层发送数据

10.待解决和思考

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章