vue3

1. 通过数组下标操作数组的方式，视图上无法即时更新

<template>
    <view  v-for="(item, index) in packageList" :key="index" @click="checkedChange(item, index)">
        <view class="iconfont" :class="item.checked ? 'icon-radiobuttonselect': 'icon-radiobuttonunselect'">
    </view>
</template>
<script lang="ts" setup>
    checkedChange = (item : any, index : number):void => {
        // 直接通过下标操作数组，视图无更新
        // packageList.value[index].checked = !item.checked
        // 使用增删数组元素方式，触发视图更新
        item.checked = !item.checked
        packageList.value.splice(index, 0, {...item})
        packageList.value.splice(index, 1)
    },
</script>

html&css

在p标签中写url，如果url中包含下划线，会导致被认为是单词，从而不会根据视口宽度换行 需要设置word-break: break-all才会换行

word-break: normal; /* 默认断行规则 */
word-break: break-all; /* 对于 non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行 */
word-break: keep-all; /* CJK 文本不断行。Non-CJK 文本表现同 normal */
word-break: break-word; /* 已废弃 */

1. animation 失效

在同一个元素上添加多个动画效果需要在animation中一起写，不可拆开两个class写，会覆盖

<style>
    .box {
        background-color: aqua;
        height: 100px;
        animation: ani 0.5s linear forwards; // 这种情况 .box的动画会被 .box1覆盖
    }
    @keyframes ani {
        from {background-color: aqua;}
        to {background-color: red;}
    }
    .box1 {animation: ani2 0.5s linear forwards;}
    @keyframes ani2 {
        from {height: 100rpx;}
        to {height: 200px;}
    }
    // 需要两个动画写一起
    .box {animation: ani 0.5s linear forwards, ani2 0.4s linear forwards;}
</style>
<div class="box box1">盒子</div>

tailwindcss

1. 在tailwindcss中使用calc()计算

<div class="h-[calc(100vh - 64px)]"></div>
<!-- 等同于height: calc(100vh - 64px); -->

微信小程序

1. 在组件中使用 wx.createSelectorQuery 获取到的元素为 null
   解决：需要将选择器的范围限制到组件上面
   可以使用 wx.createSelectorQuery().in(this)，来将选择器范围更改为组件内

uniapp

微信小程序

1. 在小程序中使用canvas,无法跟随元素滚动
   解决： 导致此问题的最大的可能原因是最外层的<page>标签默认设置了height: 100%，只需要设置一下height: unset;，即可解决问题
2. 主包引用的组件过多，主包过大
   解决： 使用 分包异步化 加载组件，将组件放置一个单独的包，然后在主包引用
3. 主包使用 分包异步化 加载分包中的组件，报错 TypeError: Cannot read property '0' of undefined
   • 可能原因
     在根目录下的component中新建组件引入分包中的组件

   // component/xxx/xxx.json
   "usingComponents": {
       "ec-canvas": "/pages/ec-canvas/components/wEcharts/wEcharts"
   },
   "componentPlaceholder": {
       "ec-canvas": "view"
   }
   // component/xxx/xxx.wxml
   <view>
       <ec-canvas></ec-canvas>
   </view>
   // tabbar页面如 index, 引用component中的组件
   // pages/index/index.json
   "usingComponents": {
       "xxx": "/component/xxx/xxx"
   }
   // pages/index/index.wxml
   <xxx></xxx>        
   

   虽然根目录下的component是在主分包，但是却无法使用 分包异步化 的方式引用其他分包的组件
   • 解决办法
     可以在需要引用的tabbar页面如 pages/index/, 在index目录下新建一个component文件夹来放置需要的组件，然后在组件中引用分包组件,即可

   // pages/index/component/xxx/xxx.json
   "usingComponents": {
       "ec-canvas": "/pages/ec-canvas/components/wEcharts/wEcharts"
   },
   "componentPlaceholder": {
       "ec-canvas": "view"
   }
   // pages/index/component/xxx/xxx.wxml
   <view>
       <ec-canvas></ec-canvas>
   </view>
   // pages/index/index.json
   "usingComponents": {
       "xxx": "/pages/index/component/xxx/xxx"
   }
   // pages/index/index.wxml
   <xxx></xxx>
   

支付宝小程序

1. class 无法动态绑定数组或者对象类型，需要使用字符串
2. v-show 无法使用，使用v-if替代
3. button 来获取用户授权时，open-type为getAuthorize没有对应事件，可以使用@getAuthorize="onGetAuthorize"这样来获取回调

<!-- #ifdef MP-ALIPAY -->
<button class="btn" id="agree-btn" open-type="getAuthorize" scope="userInfo" @getAuthorize="onGetAuthorize" @onError="handleAuthError">确定</button>
<!-- #endif -->

4. input框没有默认撑开元素，需要手动设置宽度与高度，还有背景
5. button 按钮需要取消默认边框
6. textarea 需要取消默认白色背景
7. <label>标签无法绑定<button>，仅支持<checkbox>, <radio>, <input>, <textarea>
8. 关于链接跳转小程序页面参数获取

   const queryTest = my.getLaunchOptionsSync().query
   // 获取到的是{queryKey: value, ...}
   if ('xxx' in queryTest) {
       this.id = queryTest.xxx
   }
   

9. uni-ui 中的 uni-list-item 中的 showArrow设置为false, 无法取消显示支付宝小程序上的箭头