- 发布：2024-04-15 14:39
- 更新：2024-04-17 10:10
- 阅读：192
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 12.7.4
HBuilderX类型： 正式
HBuilderX版本号： 4.08
手机系统： 全部
手机系统版本号： iOS 17
手机厂商： 苹果
手机机型： iPhoneXR
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
main.js代码：
import { createSSRApp } from 'vue'
import {initRequest} from './util/request/index'
export function createApp() {
const app = createSSRApp(App)
// 引入请求封装
initRequest(app)
app.use(uviewPlus)
return {
app
}
}
首页代码：
<template>
<view class="padding">
<image class="icon" src="../../static/images/icon/launch_icon.png"></image>
<image class="title" src="../../static/images/icon/launch_title.png"></image>
<view class="button" @click="onLaunch">立即开启</view>
</view>
</template>
<script setup>
const onLaunch = () => {
uni.switchTab({
url: '/pages/index/index'
})
}
</script>
<style lang="scss" scoped>
.padding {
padding: 240rpx 40rpx 100rpx 40rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.icon {
width: 600rpx;
height: 600rpx;
margin-bottom: 10rpx;
}
.title {
width: 487rpx;
height: 208rpx;
}
.button {
position: fixed;
bottom: 100rpx;
left: 40rpx;
width: 670rpx;
height: 90rpx;
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #FFFFFF;
line-height: 90rpx;
text-align: center;
font-weight: 500;
border-radius: 45px;
background: $u-primary;
}
</style>
main.js代码：
import { createSSRApp } from 'vue'
import {initRequest} from './util/request/index'
export function createApp() {
const app = createSSRApp(App)
// 引入请求封装
initRequest(app)
app.use(uviewPlus)
return {
app
}
}
首页代码：
<template>
<view class="padding">
<image class="icon" src="../../static/images/icon/launch_icon.png"></image>
<image class="title" src="../../static/images/icon/launch_title.png"></image>
<view class="button" @click="onLaunch">立即开启</view>
</view>
</template>
<script setup>
const onLaunch = () => {
uni.switchTab({
url: '/pages/index/index'
})
}
</script>
<style lang="scss" scoped>
.padding {
padding: 240rpx 40rpx 100rpx 40rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.icon {
width: 600rpx;
height: 600rpx;
margin-bottom: 10rpx;
}
.title {
width: 487rpx;
height: 208rpx;
}
.button {
position: fixed;
bottom: 100rpx;
left: 40rpx;
width: 670rpx;
height: 90rpx;
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #FFFFFF;
line-height: 90rpx;
text-align: center;
font-weight: 500;
border-radius: 45px;
background: $u-primary;
} </style>
操作步骤：
直接启动就能复现
直接启动就能复现
预期结果：
预期展示首页
预期展示首页
实际结果：
白屏
白屏
bug描述：
微信小程序没有问题，iOS和android打包或者调试都是白屏，工程是HBuilderX默认模版vue3，前端组件库使用的uview-plus，定义了scss变量用于主题修改，不知道是不是这个的影响
c***@126.com (作者)
问题我找到了，原因是uview-plus插件注册了color，在小程序没有问题，app使用的时候找不到，代码如下：
// 关于颜色的配置，特殊场景使用
import color from './libs/config/color.js'
// 平台
import platform from './libs/function/platform'
const $u = {
route,
date: index.timeFormat, // 另名date
colorGradient: colorGradient.colorGradient,
hexToRgb: colorGradient.hexToRgb,
rgbToHex: colorGradient.rgbToHex,
colorToRgba: colorGradient.colorToRgba,
test,
type: ['primary', 'success', 'error', 'warning', 'info'],
http: new Request(),
config, // uView配置信息相关，比如版本号
zIndex,
debounce,
throttle,
mixin,
mpMixin,
props,
...index,
color,
platform
}
// $u挂载到uni对象上
uni.$u = $u
