Skip to content

使用vue3+vite+ts开发uniapp

· 11 min · uniapp / typescript / vue3 / vite3 / myproject

使用uniapp开发IOS, 技术栈 vue3 + ts#

前期准备#

项目整体结构#

问题#

开发环境问题#

请使用固定版本2.0.x的 pinia版本 , 不要使用 ^2.0.x开头, 目前 uniapp官方人员排查问题未知, 但web端环境则不会

使用 command + shift + p 打开配置使用设置, 输入typescript, 选择第二项,使用工作空间的typescript版本, 如果没有提示volar 工具, 则需要下载 TypeScript Vue plugin(Volar) 插件或者全家桶Vue Volar extension Pack

配置问题#

vite.config.js中 去掉vue(), 这个是编译vuejs使用的

开发问题#

编译错误#

编码#

真机调试#

样式不兼容#
vite.config.js
import alias from "@rollup/plugin-alias"
import uni from '@dcloudio/vite-plugin-uni'
import tailwindcss from 'tailwindcss'
import uniTailwind from '@uni-helper/vite-plugin-uni-tailwind' // 适配小程序和app
export default defineConfig({
css: {
postcss: {
plugins: [
tailwindcss(),
],
},
},
plugins: [
alias(),
uni(),
uniTailwind()
]
})
/**在App.vue 添加全局样式**/
uni-page-head {
display: none;
}
uni-page, uni-page-body {
height: 100%
}
::-webkit-scrollbar {
width: 0;
height: 0;
}
/**
* 针对重名html标签, 首先自定义类样式, 然后在需要重载的button组件页面添加该样式, 注意需要使用scoped 作用域
*/
<style scoped>
button {
padding: 0 !important;
background-color: transparent !important;
border: none !important;
}
</style>
组件不兼容#
其他#
{
path: 'pages/index',
type: 'home',
style: {
navigationBarBackgroundColor: '#F8F8F8',
navigationStyle: 'custom', // 使用自定义导航栏,系统会关闭默认的原生导航栏
'app-plus': {
'bounce': 'none',
'softinputMode': 'adjustResize', // 自适应软键盘弹起页面高度
'softinputNavBar': "none"
}
}
}
<script setup lang="ts">
import { ref } from 'vue'
const scrollHeight = ref(0)
const scrollTop = ref(0)
// 滚动到底部
const sorollButtom = () => {
let contnetContaniner = uni.createSelectorQuery().select('.message-content') //根据组件id获取
contnetContaniner
.boundingClientRect((data: any | null) => {
scrollTop.value = data.height
})
.exec()
}
</script>
const sendMessage = (wsKey: String, data: string, onComplete: WebSocketMegFunc) => {
const ws = wsMap.get(wsKey)
console.log('get websocket instance', ws)
// 设置结果标识
let sendFlag = true
if (ws) {
ws.socket.send({
data,
fail(arg: any) {
console.error('消息发送失败')
sendFlag = false
}
})
if (onComplete) {
onComplete({success: sendFlag})
}
}
}
// mainfast.json中
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : false,
"waiting" : true,
"autoclose" : false,
"delay" : 0
}
}
// onLaunch 中实现
// #ifdef APP-PLUS
// 设置2秒后主动关闭,最多设置6秒
setTimeout(() => {
plus.navigator.closeSplashscreen();
}, 2000);
// #endif
// onShow中使用 h5+的api设置
// #ifdef APP-PLUS
plus.runtime.setBadgeNumber(0);
// #endif
// onLanuch 中监听事件
uni.onNetworkStatusChange(function (res) {
console.log(res.isConnected); // true是已连接, false网络已关闭
console.log(res.networkType); // 网络类型是wifi还是3/4/5G
});
// 初始化, 所在目录 @src/locale.ts, 同目录有国际化资源文件 en.json、zh-Hans.json等
import { createI18n } from 'vue-i18n'
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
// 设置国际化
if (!uni.getStorageSync('moy-locale') && uni.getLocale()) {
uni.setStorageSync('moy-locale', uni.getLocale())
}
const i18n = createI18n({
// 使用 Composition API 模式,则需要将其设置为false
legacy: false,
globalInjection: true,
locale: uni.getStorageSync('moy-locale'),
messages: {
en: {
...en
},
'zh-Hans': {
...zhHans,
// 占位符的方式只能用函数式解决
'contact.lastSeen': ({list}: any) => `上次活跃 ${list(0)} `
},
'zh-Hant': {
...zhHant
}
}
})
export default i18n
// main.ts
// ....省略其他代码
import { createSSRApp } from 'vue'
// 国际化
import i18n from './locale'
// ....省略其他代码
app.use(i18n)
return {
app,
Pinia
}
// composition API中使用
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
// ......省略其他代码
// template中使用
// ......省略其他代码
<template>
<div> {{ $t('global.message') }} </div>
</template>

HBuilder 打包和发布#

上架AppStore和审核#

审核过程#

账号被调查#
Hello,
Thank you for submitting your app for review.
We need additional time to evaluate your submission and Apple Developer Program account. Your submission status will appear as "Rejected" in App Store Connect while we investigate. However, we do not require a revised binary or additional information from you at this time.
While there may be a delay due to high submission volumes, we are working to complete our review as soon as possible. If we notice any issues that require your attention, we will let you know via App Store Connect. If we find no issues with your submission or account, the submission will be approved.
We will notify you as soon as there is new information to share. Other review inquiries may be filed via the [Apple Developer Contact Us](https://developer.apple.com/contact/topic/SC1103/subtopic/30020/solution/select) page.
Best regards,
App Review
Guideline 2.1 - Information Needed#
Guideline 1.2 - Safety - User-Generated Content#
Guideline 1.5 - Safety#
Guideline 5.1.1(v) - Data Collection and Storage#
Guideline 2.1 - Performance#