推荐使用一个插件，这款插件适配了很多比较实用的功能。
这是这个插件的使用文档
https://sonofmagic.github.io/weapp-tailwindcss/docs/quick-start/frameworks/hbuilderx
作者还很贴心的配备了超级详细的视频：
（配置的时候注意： 关于自己的创建项目的内部版本，其内置包的版本； 还有可能会有包找不到的问题）
1. 关于找不到 tailwindCss 包的问题？
通过后面的地址，找到uniapp-cli-vite文件，把你下好的tailwindcss文件复制一份，丢进去就能用了。
// 原因： 使用Hbuilder X 构建项目，它内置了一些包，但是这些内置包里面没有 tailwindCss，而在项目启动过程中，项目去这些内置包的文件里去引入 tailwindCss去了。我暂时还没有搞清楚，uni-app引入这些包的一些逻辑，
但是通过反复尝试。把node_moduels里面有的tailwindCss
结果验证：方法可行；
链接地址：https://ask.dcloud.net.cn/article/id-40098__page-2
需要修改的地方与注意事项：
配置文件：
他少写了个 i++；
spacing(config) {
let result = { 0: '0' }
// 允许的数值大一些也无所谓，最后打包tailwindcss会摇树优化，未使用的样式并不会打包
for (let i = 1; i <= 300; i++) {
result[i] = `${i}rpx`
}
return result
},
tailwindCss 包含文件，可以多加一点：
content: ['./pages/**/*.{html,ts,jsx,tsx,vue,js}', './main.js', './App.vue', './index.html'],
在uni-app里搭建项目需要明白的一个问题：
链接：https://blog.csdn.net/LlanyW/article/details/132466730
// 1. url 用的绝对的地址，用 / 开始，从 /pages/ ,open-type = "" 的设定
// 2. 用api跳转，也是需要区分页面的
<button @click="getLogin">去登录</button>
<navigator url="/pages/login/login">login</navigator>
const getLogin = () => {
uni.reLaunch({
url: '/pages/login/login'
});
};
// 路径参数；接收地址中的参数 //在起始页面跳转到test.vue页面并传递参数 uni.navigateTo({ url: 'test?id=1&name=uniapp' });
// 参数的 ：接收方法一
import { onLoad } from '@dcloudio/uni-app';
onLoad(async (option) => {
if (option.id) {
}
});
// 参数的： 接收方法二
const props = defineProps({
type: String,
illnessType: String
});
import { onLoad } from '@dcloudio/uni-app';
自己的钩子不支持自动导入，需要手动获取输入；
但是所有和 vue 相关的生命周期钩子是自动导入的。
:deep(.uni-list-item__content-title) {
font-size: 32rpx !important;
color: #3c3e42 !important;
}
// 好像只有不加 scoped 的样式才能改掉，而且
// 层级不够，需要!important 加权重
// 我很少用这种穿透写法，说实话，能通过组件的 customStyle 修改，就用那个；
推荐链接：https://juejin.cn/post/7083295652318281736
在uni-app中，涉及到多机型的样式适配问题，一般获取机型的宽高，进行一些处理，
最后，关于样式的单位转化为rpx 最佳！！！
// rpx转px
rpxToPx(rpx) {
const screenWidth = uni.getSystemInfoSync().screenWidth
return (screenWidth * Number.parseInt(rpx)) / 750
}
// px转rpx
pxToRpx(px) {
const screenWidth = uni.getSystemInfoSync().screenWidth
return (750 * Number.parseInt(px)) / screenWidth
}
页面使用写成行内样式，再引入计算变量。
// template
<view
class="desc-btn"
style="position: fixed; width: 90%; left: 0rpx; margin-left: 30rpx"
:style="{
top: getFixedHeight + 'rpx'
}"
>
</view>
// js
const getFixedHeight = computed(() => {
let fixedTop = -40;
uni.getSystemInfo({
success: (res) => {
fixedTop += res.windowHeight; // 可用窗口高度
}
});
return pxToRpx(fixedTop);
});
不然结局会有一点小惨！！！
因为uni_modules是uni自引入的，我暂时还不知道咋快速下载，等我之后研究一下吧！
参考：https://blog.csdn.net/m0_53536475/article/details/130144830
今天有遇到因为h5跨域导致我引入的uv-ui外部组件资源加载被阻断(虽然这个资源，已经被我放入了uni_modules 包内)，但还是提示uv-images组件是否是内部组件，类似于vue内部找不到之类的提示。
解决跨域问题之后好像没有了，之后可以去详细了解一下跨域究竟是跨的哪一方面。
使用 hbuilder 创建的vue3项目解决h5跨域问题：
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
export default defineConfig({
plugins: [uni()],
server: {
port: 3000,
proxy: {
'/api': {
target: 'https://consult-api.itheima.net/', // 目标服务
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});
因为我是用的hbuildx自带的功能新建的项目，不知道是否是这一原因：我配置完之后，所有带有请求的页面都加载，删除完代理配置之后，又可以加载了，页面的H5跨域问题又消失了（推测为hbuilder内部的一些处理导致的，具体原因不明）
推荐： 下次再有这种跨域问题：用插件外部插件解决。
使用uni-app第一步，所有报错， 遇事不决，反复重启！！！！
用于覆盖map、video、textarea、canvas之类的；
部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。为了能正常覆盖原生组件，设计了cover-view。