Uniapp 日常总结

1.

style scoped的作用
在组件的<style></style>加上 scoped属性，可以让<style></style>里的样式只在当前组件生效。

2.

//同步存储
uni.setStorageSync("key","value")
//同步获取
let value = uni.getStorageSync("key")  

3.

设置一个text只有一行，显示不全的用...表示

        overflow: hidden;
        white-space: nowrap; 
        
        width：220rpx
        text-overflow: ellipsis;
        ps.view要用text否则text-overflow不生效

4.

:class给点击的元素动态添加样式   :class="{active:tabIndex==index}
                                                            class名    逻辑

5.

align-items
定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。默认值为 stretch。

justify-content
定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。默认值为 flex-start

6.

position：relative的时候不要用top属性，否则会导致控件的遮盖。

7.

样式命名不能用跟组件一样或者会有冲突的可能性的名字

8.

page设置overflow为hidden，会导致不能滑动

9.

flex
    flex-direction    决定item排列方向    row column
    flex-wrap    排列不下时，item如何换行    nowrap（默认，不换行），wrap，wrap-reverse
    flex-flow    flex-direction和flex-wrap的集合简写
    justify-content    item在主轴上的对齐方式    flex-start（首对齐），flex-end（尾对齐），
                                            center（居中对齐）    space-between（两端对齐），space-around（沿轴线均匀分布）
    align-items        item在交叉轴上的对齐方式

10.

$emit（）    uni.$emit、 uni.$on 、 uni.$once 、uni.$off
$emit这个是子向父传值，必要用到的一个方法名。    

11.

::v-deep 深度重写 vue

Vue—样式穿透/deep/ >>> ::v-deep deep()  重写子组件样式

substr（-4）  倒数四个字符

12.

vue 中多行文本超出显示省略号    
display: -webkit-box;
/* -webkit-box-orient: vertical; */
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 2;
        word-break: break-all;
overflow: hidden;

13.

 watch 单个，computed 多个。

computed----当一个属性受多个属性影响的时候，使用computed-------购物车商品结算。watch----当一条数据影响多条数据的时候，使用watch-------搜索框。

14.

uni.$u.test.contains('uView', 'View') 前者是否包含后者

uni.$u.test.isEmpty(false)
是否为空
这里指的“空”，包含如下几种情况：

值为undefined(一种类型)，非字符串"undefined"
字符串长度为0，也即空字符串
值为false(布尔类型)，非字符串"false"
值为数值0(非字符串"0")，或者NaN
值为null，空对象{}，或者长度为0的数组

    (uni.$u.queryParams(this.data))
    该方法，可以将一个对象形式参数转换成get传参所需参数形式，如把{name: 'lisa', age: 20}转换成?name=lisa&age=20
用途：可以用于uni.navigateTo接口传参等场景，无需自己手动拼接URL参数

15.

动态监听高度
    1. :style="{'bottom': mainBottom + 'px'}"
         
     
    2.
    data() {
            return {
                checkList: [],
                mainBottom：0，
            }
           }
    watch: {

        checkList(val) {
            setTimeout(() => {
                this.mainBottom = this.$refs.myCheck.$el.offsetHeight
            }, 50)
        }
    },
    3.<view class="footer" ref="myCheck">

16.

ES6字符拼接    `字符${方法，字符串}${方法，字符串}字符`    

17.

动态class &.active查找同级，未加&是查找下级

18.

判断机型
if (uni.getSystemInfoSync().platform == 'android') {
            
                console.log("运行在安卓手机上");

            } else if (uni.getSystemInfoSync().platform == 'ios') {

            console.log("运行在苹果手机上");
            } else {
                console.log('运行在开发工具上');
            }

19.export和export default的区别

export 和 export default 都可用于导出常量、函数、文件、模块等 ，
你可以在其它文件或模块中通过 import 将其导入，以便能够对其进行使用
在一个文件或模块中，export、import可以有多个，export default仅有一个
通过export方式导出，在导入时要加{ }，且不能自定义名字，export default不用加{ }，且可以自定义名字