uniapp内置vue2，很多小伙伴喜欢用，但是作为首批吃螃蟹的人，肯定会想用vue3来开发，那么会遇到哪些问题呢？
1、编辑器等工具
Hbuilder X 3.4.6版本及以上（编辑器也在不断更新，以兼容vue3的语法bug，建议升级到这个版本或以上）
微信开发者工具 1.05.2204180 版本及以上（也是解决vue3的语法bug及其他性能问题，建议升级到这个版本或以上）
基本工具就上面两种，这两工具更新到我这个版本后 ，很多bug都会迎刃而解，我们可以自己选择vue版本，在manifest.json文件里，建议选择后退出重进一下
2、uniapp 框架文件讲解
1、pages
这个文件夹就是类似vue2/3 的路由文件，如果你用过nuxt.js，那你会更熟悉，我们所有需要跳转显示的页面，都要写在pages文件夹里
2、static
静态资源文件夹，这个跟vue的一样
3、unpackage
编译运行时缓存文件，这个不用管
4、App.vue
这个和vue的一样，最高一级组件
5、index.html
这个和vue的一样，入口html
6、main.js
这个和vue的一样，入口js
7、manifest.json
uniapp对于各个端（h5，小程序，app的相关配置文件）
8、pages.json
类似于vue的路由文件和全局样式的结合
3、uniapp + vue3 主要文件代码
1、index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>
2、main.js
import App from './App'
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif3、pages.json
{
"pages": [
{
"path": "pages/own/index",
"style": {
"navigationBarTitleText": "个人中心"
}
},
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "登录",
"usingComponents": {
}
}
},
{
"path": "pages/home/index",
"style": {
"navigationBarTitleText": "首页",
"backgroundColor": "#CA2915",
"navigationBarBackgroundColor": "#CA2915"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "你的小程序名",
"navigationBarBackgroundColor": "#CA2915",
"backgroundColor": "#F7F8FA",
"usingComponents": {
}
},
"tabBar": {
"selectedColor": "#CA2915",
"color": "#999999",
"backgroundColor": "#ffffff",
"borderStyle": "white",
"fontSize": "18px",
"spacing": "11px",
"list": [{
"pagePath": "pages/home/index",
"text": "首页",
"iconPath": "static/img/home-choose.png",
"selectedIconPath": "static/img/home-choose-active.png"
},
{
"pagePath": "pages/own/index",
"text": "我的",
"iconPath": "static/img/own-choose.png",
"selectedIconPath": "static/img/own-choose-active.png"
}
]
}
}
上面大概列举了一些demo，详细的可以在uniapp官网看
4、uniapp + vue3常见问题
1、uniapp自身生命周期
import {
onLoad,
onShow,
onPullDownRefresh,
onReachBottom
} from '@dcloudio/uni-app'
onLoad(() => {
})2、uniapp不支持自定义指令
很奇怪，uniapp到现在都还不支持自定义指令，要是你写入自定义指令，那么uniapp会不识别你写的代码
3、小程序真机调试白屏
小程序在真机调试时，没有在微信公众平台将使用者添加为开发者，所以导致真机调试白屏
4、小程序授权拒绝后，再次进入不会弹出授权框
第一次进入时拒绝授权后，那么再一次进入该页面将无法授权，如果你是普通用户，你可以先将小程序给移除掉，然后在重新搜索进入，如果你是开发者，那么你可以参考我的另外一篇博客，来写你的授权逻辑代码，链接为uniapp + vue3微信小程序开发（5）授权
5、vue3 增加按钮防抖
uniapp因为性能原因，很多用户在点击第一次时发现没动静，然后又点了几次，所以导致逻辑重复执行，所以在点击时进行防抖是很有必要的,，防抖函数参考我的另一篇博客，链接为有趣且重要的JS知识合集（12）常用基础算法
<view @click="navTo(item)"> </view>
const navTo = debounce(() => {
uni.navigateTo({
url: 'xxx'
})
}, 500, true)6、微信小程序端无法使用onBackPress
我们想要对左上角返回按钮进行监听，第一反应就是使用onBackPress，但是在小程序端无法使用，这一点官方并没有清楚说明出来，那么替代方案呢？目前我能想到的有两种
第一种就是写一个自定义的顶部栏，具体怎么写，很多博客都有我这就不详细介绍了。
第二种是在当前页面的onUnload生命周期中获取当前路由，如何想从A组件回到B组件
A组件
onUnload(() => {
const page = getCurrentPages()
const curPage = page[page.length - 1].route
routeBackListener(curPage)
})总逻辑：将原路径和要去的路径，都写在下面函数的Map中，然后在上面调用时，将原路径作为参数传入即可
/**
* 左上角返回按钮监听
* @param {*} from
* @param {*} type 0 => reLaunch, 1 => navigateTo
*/
export function routeBackListener (from, type = 0) {
const map = new Map([['pages/A/index', '/pages/B/index']])
if (map.has(from)) {
if (type === 0) {
uni.reLaunch({
url: map.get(from)
})
} else {
uni.navigateTo({
url: map.get(from)
})
}
} else {
uni.navigateBack()
}
}7、switchTab无法带请求参数
将请求参数存入storage，然后在那个路由中进行获取判断
8、uni/wx.getUserProfile 停用
微信将于22年10月份停止getUserProfile api使用，公告链接：小程序用户头像昵称获取规则调整公告
9、 手机号授权要短信验证
目前在ios端发现微信手机号授权api，会触发微信的短信验证，安卓端暂时没有去验证
10、ios低版本不支持Date格式
ios低版本不支持new Date('2022-05-19')，会解析成无效时间，只能解析2022/05/19，ios高版本和安卓都是正常的。
建议：将日期获取出来，重新组装
/**
* 获取日期
* @param {*} dateStr
*/
export function getDate(dateStr) {
let dateArr = dateStr.split(/[- : \/]/);
return new Date(dateArr[0], dateArr[1] - 1, dateArr[2], dateArr[3], dateArr[4], dateArr[5])
}
11、uniapp + vue3 setTimeout，setInterval无法清除
onUnload离开组件时，clear也无法清除定时器，不是setInterval的bug，因为setTimeout也清除不掉，解决方案在我另篇博客，如下链接
uniapp + vue3微信小程序开发（9）setTimeout，setInterval清除不了
大概说一下思路，就是外部定义一个变量，在定时器定义时，判断这个变量，然后在定义里面clear定时器
12、小程序上线前要注意的问题
1、小程序密钥secret 不能以明文的形式出现在代码里，建议使用接口返回appid和secret（因为这俩是唯一对应的，所以用接口返回也可以）
2、任何你们公司自研的人脸识别等等，都会被拒绝通过，这虽然很恶心，但是没法，所以只有使用微信自带的识别喽，还得去申请使用权限
3、小程序后台申请审核时，有个指引说明，最好把你们的意图都写上去，实在没有才写无，要是都写无，会直接给你打回来
4、小程序发布后正式版和体验版用的是同一个storage，你们代码里要是用的都是storage的话，要注意一下
5、小程序应该被允许以游客身份进入（即可以先不授权登录，等点击到需要登录的地方，再引导去授权登录页），如果一进来就被要求登录，微信线上审核会被拒绝
13、uniapp 使用 v-html 所要注意的问题
我们想要使用v-html来渲染富文本时，要注意一下哦，微信小程序会将他转成rich-text哦，内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译，所以在里面的写法就不要用view或者text了，他识别不出来的，就直接用div或者span就好了
例子：高亮搜索关键词
// 搜索关键词高亮
<view class="name" v-html="highLightColor(item.name)"></view>
const highLightColor = name => {
let replaceName = `<span style="color: #FF1A4A">${searchKey.value}</span>`
return name.replace(searchKey.value, replaceName)
}
14、uniapp input修改样式
网上很多博客说的使用input::input-placeholder，然后亲测无效，原因我想是因为uniapp重写了input吧，然后解决方式如下
例图：
代码：
::v-deep .navbar-search_text-input{
color: #fff;
}就是使用 placeholder-class 来定义新的样式，下面加上 ::v-deep 是样式穿透，因为使用的是scss，你用的原始css的话，就不用加deep
15、input键盘弹出时，滚动页面，输入框内容错位问题
在键盘弹出的时候，快速滚动页面，输入的内容或input提示语会错位。且有时无法恢复到原有位置。scroll-view中使用input在ios端会出现这种错位
解决方法：
always-embed=true16、(app端和h5端)真机运行报错：plus is not defined
错误原因：
1、web浏览器里没有plus环境
2、真机运行、打包后才能运行plus api
解决方法：
代码里添加条件编译语句
/* #ifdef APP-PLUS */
plus.navigator.xxx;
/* #endif */5、感谢墙
希望有更多的童鞋把自己遇到的问题及解决方法发给我，我们一起更完善uniapp的开发，让更多童鞋少走弯路噢~
| 童鞋 | 提供问题及解决方案 |
| @菠萝吹雪__ | 15、input键盘弹出时，滚动页面，输入框内容错位问题 |
还在持续更新中，喜欢就点赞收藏吧
9607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
