uniApp注意事项/坑_uniapp tailwind

   最近开始实习咯，然后初次接触到了uni-app，刚开始问过身边不少人，都说会vue就基本会uni-app，嗯，经过几个周的经历，的确差不多是这样，但还是有不少需要避免的坑 =。=浅说几个目前我见得比较多的吧的吧（新手写文，不喜勿喷- -）。

（Tip：如果要获取微信头像什么的，一定要提前去申请各种权限！！！不然如果项目催的急，很有可能会耽误！！！）

主要技术栈  （微信小程序 + vsCode）

uniapp ---  vue3  +  js  +  Tailwind CSS

（PS：这里插一嘴诶， Tailwind CSS   真的推荐使用！能极大减少代码的行数，而且不用再在style里面写CSS了，减少了很多事情，不用再体验从上面写页面到拉到最下面看样式的过程=。=   体验如何利用最舒服的方法去书写最高效的代码！

https://www.tailwindcss.cn/    <----   这是跳转链接，有兴趣的可以去瞅瞅）

举个例子: （这里就相当于定义font-size:10rpx ； display:flex  etc......是不是很方便！！）

    <view class="text-[10rpx] flex justify-center items-center">
    </view>

一. LF和CRLF

最开始拉项目开始就碰到了这个问题（因为leader的电脑是苹果的---感觉应该是因为这个qwq），相信不少人也遇到过，一堆爆黄 ------CR-------，你可以用最原始的方式去一页一页将编译器右下角变LF。

以上方法能解决，但是很麻烦，推荐使用  ↓ （PS：可能有小伙伴使用了但还是没办法，记得使用该行代码一定要重拉代码！！！重新拉一遍！！！）

git config --global core.autocrlf false

二. 样式问题

1.   小程序中都要用 --rpx-- （PS：网上说这个和px换算的方式有很多，公式太多不想记qwq，但经过我观察通常是 2倍 关系：即 20rpx≈10px）

2.   不要给<view>标签加宽/高，在里面的标签用padding将view的内容撑开，不然切换不同机型会出现不少样式排列问题。

3.   uniapp中的v-html ，不能用<text></text>/<view></view>标签，会显示不出来【因为不被信任的标签】，所有服务端返回字段的时候一定要用 <div></div>/<span></span> 标签！

4.   uni.popup组件

①   默认模板如何清空值，即<uni-popup-dialog>中默认值：推荐用以下方法

<template>
  <uni-popup type="dialog">
    <uni-popup-dialog
      ref="inputVal"
    ></uni-popup-dialog>
  </uni-popup>
</template>
 
 
<script setup>
 
import { ref } from 'vue'
 
const inputVal = ref()
 
inputVal.value?.val = '' // 清除输入框的值
 
</script>

②   解决苹果手机下方弹出 popup 会出现空白（安全距离）的问题，加上一个background-color="#fff" 即可。

（PS：该问题网上有很多解决方法，但都感觉治标不治本=。=）

  <uni-popup ref="popup" type="bottom" background-color="#fff" >

4.   另外一个小建议：所有单位表示都用偶数，如果有没法整除的，取最近的即可【因为系统和浏览器等等原因，不要用基数！样式可能有问题！】

三. 代码问题

1.  代码行数问题：leader 跟我们要求 不能超过300行代码 = 、=，我感觉我是很难受的，因为平常写的代码基本都有几百行qwq，然后让我们用hooks抽离，将部分js代码抽取出来，然后直接用，举个简单例子（真的可以简化许多代码！）

在分包/分包中创建hooks文件，在里面写js代码，即

// hooks 中定义函数
const test = () => {
    const sum = () => {
        // 这里写函数中的内容
    }
    return {
        sum
    }
}
 
 
// 引用函数
 
const { sum } = test()

2. 代码引用问题（vsCode中）：在 src 目录下的components的组件，可以直接导入，不需要 import 进行引入，但必须要 使用 kebab-case  命名法（即短线连接命名法）即：

<test-list></test-list>

四. 代码运行问题

这是我目前遇到最大的坑，代码编译（我们用的vsCode --- 代码统一些），然后打包为dist后，有些文件在修改后不会被改变（多次清除缓存，然后编译也无用），必须要删除dist 以及 微信开发者工具 中的文件！！不然很有可能会运行不了！！！删除之后重新运行即可解决！