uniapp vite + vue3移动端项目踩坑记录

使用uniapp vue3开发移动端App

vue3出了很长一段时间了，平时上下班的路上看了看一些公众号分享的使用经验，于是在近期的一个新项目中就打算实际上手用用。公司要求开发一款Android App，遂选用了uniapp，以防后期客户要求在h5与公众号中使用。附（本人小白一枚，写博客主要为了记录与分享一些问题，写的不好勿喷）

项目创建与运行

由于本人不喜欢Hbuilderx页面，所以采用脚手架方式创建项目。可参考如下步骤：
打开uniapp文档 快速上手 --> 通过vue-cli命令行：

• 创建 vue3 + vite + js/ts 项目

  npx degit dcloudio/uni-preset-vue#vite my-vue3-project 
  npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
  

• 当前uniapp中vue3项目为测试版，后期可以通过以下命令来更新编译器相关版本，建议先了解一下脚手架项目与Hbuilderx创建项目的区别

  npx @dcloudio/uvm  // 更新到最新正式版
  

• 项目搭建完成后，按照以往的方式，打了移动端的包然后到Hbuilderx中导入，执行，发现直接报错，页面无法正常显示。于是就尝试了一下不打包，直接用Hbuilderx打开项目，在Hbuilderx中运行项目，发现一切正常。所以后面就一直是在vscode或者webstorm中编写代码，在Hbuilderx中运行项目。

UI库的使用

一开始没想过h5与移动端的兼容性不同，所以开发时在h5页面没有任何问题就没有注意过，后来用真机打开一看，发现很多主流的UI库在移动端就失效了。测试了常用UI库(vant、varlet)，总结常见问题如下：

• input输入框卡顿、绑定的value获取不到值。可以通过对输入框添加相关监听事件解决
• image图片H5显示正常，移动端无法加载图片
• Calendar日历组件平铺可使用，弹出方式涉及到动画使用不了，样式错乱。(自己封装了一个，链接放下文，需要的可下载使用)
• picker选择器无法使用
• Checkbox复选框全选，反选样式错乱
• 。。。。。。

总之能用uni-ui的建议就用uni-ui，如果要使用其他组件，建议边写边用真机看效果，以防白忙一场。

项目目录

这个没有什么规范，纯粹个人习惯，需要的可以借鉴一下(我是个小白),有好的规范的可以评论一下，我学习学习。

uni-push推送的使用

网上教程很多，反正看看文档，把相关的配置都弄好，基本上都可以走通。目前我这边只搞了华为手机的离线推送，其他厂商的申请起来比较麻烦，后续再弄。如果在测试华为手机离线推送的时候遇到问题，切记手动把自己的app的通知权限全部打开（还有相关具体设置，平时用苹果，所以不记得叫啥了）。

WebSocket的使用

项目中多个地方需要用到 websocket,于是就按照文档封装了一个class

const websocketBaseUrl = 'xxxxxxxxxx'
export class useWebSocket {
	constructor(url) {
		this.socketTask = uni.connectSocket({
			url: `${websocketBaseUrl}${url}`,
			header: {},
			protocols: [],
			success: (res) => {
				console.log('websocket 连接成功', res)
			},
			fail: (error) => {
				console.log('websocket 连接失败', error)
			}
		})
	}
	checkSocketOpen() {
		this.socketTask.onOpen((res) => {
			console.log('websocket连接已打开', res)
		})
	}
	checkMessage(receiveSuccess) {
		this.socketTask.onMessage((res) => {
			console.log('接收到服务器推送的消息', res)
			receiveSuccess(res) // 使用时用一个回调函数接收服务器发送的数据，不然获取不到数据
		})
	}
	sendMessage(msg) {
		this.socketTask.onOpen((res) => {
			console.log('websocket连接已打开', res)
			this.socketTask.send({
				data: typeof msg === 'object' ? JSON.stringify(msg) : msg,
				success: (res) => {
					console.log('消息发送成功', res)
				},
				fail: (error) => {
					console.log('消息发送失败', error)
				}
			})
		})
	}
	closeSocket() {
		this.socketTask.close({
			code: 1000,
			reason: '正常关闭',
			success: (res) => {
				console.log('socket 连接断开', res)
				uni.showToast({
					title: 'socket连接已断开',
					icon: 'none'
				})
			}
		})
	}
}

自己封装的组件

项目中多次用到了 课表、月历、周历等相关的表格型样式，于是自己封装了公共组件，可接收一维数组、二维数组（行优先、列优先）。
周历效果如下：