基于脚手架生成的uniapp项目
一、项目介绍
项目通过vue3+ts的语法进行开发，并且集成了tailwindcss、pinia、wot-desing-ui等第三方库，对开发效率有很大的提升
二、项目模板
由于tailwindcss在uniapp中的适配问题，这里推荐一个已经配置好的基础模板
https://github.com/sonofmagic/uni-app-vite-vue3-tailwind-vscode-template
三、vscode插件（让你拥有部分hbulider中的开发能力）
1、uniapp-snippet（uniapp中api片段提示）
2、uni-create-view（创建视图页面时将自动添加 pages.json 中）
四、ui库：wot-design-ui
由于uniapp插件市场大部分第三方针对vue3的ui库不适配ts，这里提供一个好用的、在更新维护的uniapp第三方ui库：wot-design-uni
五、自定义navbar
由于原生的navbar具有一定的局限性，这里，我推荐封装一个自定义的navbar组件，让页面navbar的自由度更高，能够适配更多的业务，wot-design-ui中提供了这一组件（wd-navbar），可以进行二次封装满足自己的业务需求
六、自定义tabbar
与navbar类似，这里也推荐封装一个自定义的tabbar组件，但是，建议与原生的tabbar配合使用，可以解决tab页面跳转屏幕闪烁的体验问题（第一次切换依然存在屏幕闪烁，注意：如果配合原生使用，切换tabbar要使用uni.switchTab进行切换，并在app.vue的onLaunch生命周期中使用uni.hideTabBar()隐藏原生tabbar
七、主题切换
结合wot-design-ui中的wd-config-provider进行使用，该组件提供了对应的api，可以来实现主题切换，当然，我建议在项目中维护一套变量/静态数据来对主题进行管理，这样在页面设计上可以更加灵活，我将这一套维护在一个pinia实例中，该pinia实例提供了主题相关的响应式状态（theme、themeColor...）和方法（changeTheme、changeThemeColor...），能够方便我随拿随用
八、多端适配（主要是手机以及平板）
结合tailwindcss以及js来对页面进行移动端适配 当然，你完全可以将尺寸配置抽离到配置文件中，方便管理
- tailwindcss配置及使用
// 配置
// tailwind.config.js
// 默认样式为小尺寸的，所以不用配置手机端的像素值
theme: {
screens: {
// 由于该属性是向上兼容的，所以我定义ipad的宽度为740px
ipad: '740px'
}
},
<!--使用-->
<!--默认情况下(手机端)宽度为100px，当设备为ipad或者尺寸更大时为300px-->
<view class="w-[100px] ipad:w-[300px]"></view>
- js配置及使用
// pinia中
/**
* 设备类型
*/
let deviceType = ref<'mobile' | 'ipad'>('mobile')
/**
* 设备类型枚举，最好是与 tailwind.config.js配置保持一致，当然你可以抽离出去用一个常量维护
*/
const deviceTypeConfig = {
mobile: 0,
ipad: 740
}
/**
* 更改设备类型
*/
const getDeviceType = () => {
//获取系统信息
uni.getSystemInfo({
success: (res) => {
// console.log('系统信息===>',res.windowWidth);
deviceType.value = res.windowWidth <= deviceTypeConfig.ipad ? 'mobile' : 'ipad'
},
fail(err) {
console.log(err);
},
});
}
<!-- 使用 （先导入该的pinia实例中的变量）-->
<view v-if="deviceType=='ipad'"></view>
