uniapp + vue3微信小程序开发（1）框架搭建_林大大哟_uniapp vue3

网络 02-07 7414

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>   </head> <body> <div id="app"></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 } } // #endif 3、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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 还在持续更新中...