Li_阴宅

这个屌丝很懒，什么也没留下！

热门标签

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

作者：Li_阴宅 | 2024-07-25 13:38:25

踩

uniapp vue3

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
  }
}
// #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

15、input键盘弹出时，滚动页面，输入框内容错位问题

在键盘弹出的时候，快速滚动页面，输入的内容或input提示语会错位。且有时无法恢复到原有位置。scroll-view中使用input在ios端会出现这种错位

解决方法：

always-embed=true

16、(app端和h5端)真机运行报错：plus is not defined

错误原因：

1、web浏览器里没有plus环境

2、真机运行、打包后才能运行plus api