-->
一.移动端适配和适配后内联样式没有生效
移动端适配
既然是整移动端项目，那么移动端适配是必须要整了，目前开发的这个项目就是使用的是rem方案，rem方案的话比较常用的插件就是postcss-pxtorem+lib-flexible，至于为什么没用vw方案, vw 方案 还是有缺点的。如 vw 方案不适合大屏，因为 vw 是一个比例单位，随着屏幕尺寸变大，使用vw单位的元素、字体也越来越大。但我们肯定是希望在大屏上展示更多的内容，而不是更大的文字、图标。现在用大屏的用户也是挺多的，我自己感觉还是rem方案好一点点（手动狗头）
yarn add amfe-flexible
yarn add -D postcss-pxtorem
根目录下postcss.config.cjs
module.exports = {
plugins: {
'postcss-pxtorem': {
//如果你蓝湖上的UI图尺寸为375px，这里rootValue设置为37.5
//如果你蓝湖上的UI图尺寸为750px，这里rootValue设置为75
//蓝湖上的UI图的尺寸可以调节的，移动端一般用的37.5
rootValue: 37.5,
propList: ['*'],
},
},
};
main.ts中
import 'amfe-flexible';
内联样式没有生效
整完这些后，开发着开发着，用vant样式没事，自己写的样式也嘎嘎生效，突然有个dom元素需要加个动态样式，或者图片需要设置宽高，这就需要使用到内联样式，然后就发现了设置的内联样式不生效，弔！
解决方法也挺简单，就是在main.ts中定义一个全局方法，用来把px转化成rem：
main.ts中加上
const px2rem = (px:any) => {
if(/%/ig.test(px)){ // 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%
return px
}else{
return (parseFloat(px) / 37.5) + 'rem'
}
}
app.config.globalProperties.$px2rem = px2rem // 放到全局
使用：
<div :style="{marginBottom:(ismarginBottom? $px2rem('42px'):$px2rem('16px'))}">
</div>
遇见的场景
vue基于vant3框架开发移动端项目时，出现了这样一个问题：在手机上点击页面输入框时唤起手机自带键盘，结果顶部固定的导航栏也被顶起，导致遮挡住页面部分内容
解决方式
给相应的输入框一个聚焦的事件:
<van-field
v-model="cardForm.topUpamount"
label="￥"
:rules="rulesFrom.amount"
placeholder=""
:clearable="true"
type="number"
@focus="changefocus"
>
这个可以放在utils的index.ts下，导出这个方法，在需要的页面使用
如果这个输入框不是在vant组件的弹窗：
// ios键盘唤起，键盘收起以后页面不归位bug解决
const changefocus = () => {
const u = navigator.userAgent
const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isIOS){
setTimeout(() => {
window.scrollTo(0, 0)
}, 200)
}
}
如果这个输入框是在vant组件的弹窗，例如动作面板弹窗：
// ios键盘唤起，键盘收起以后页面不归位bug解决
const changefocus = () => {
const u = navigator.userAgent;
const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isIOS) {
setTimeout(() => {
document.body.scrollTop = document.body.scrollHeight;
}, 200);
}
};
const changeblur = () => {
const u = navigator.userAgent;
const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isIOS) {
document.body.scrollTop = 0;
window.scrollTo(0, 0);
}
};
三.状态调接口轮询
如充值，提现这种场景时，三方那边返回的结果可能需要比较久，这个时候就需要轮询着去结果，根据轮询的结果展示不同的需要展示的页面，如充值中，充值成功，失败等
const timer: any = ref(null);
const Result = async (No:any) => {
try {
const res: any = await getResult({No: tNo })
// 0 处理中 1 成功 2失败
if ([0].includes(res.data.State)) {
timer.value = setTimeout(() => {
Result(No);
}, 2 * 1000);
} else if (res.data.State === 1 || res.data.State === 2) {
clearTimeout(timer.value);
}
State.value = res.data.State
//该赋值的赋值
//......
} catch (error) {
clearTimeout(timer.value);
}
};
离开页面时，一定要清除定时，避免一直调用接口
onBeforeUnmount(() => {
clearTimeout(timer.value);
})
四.第一次进入页面有在app.vue的onmouted里写了获取token方法调接口，页面刷新后token没了
使用pinia+数据持久化,存放token 或者直接把接口获取到的存在localstorage
五.app端嵌套h5页面时，返回APP端时，不能使用router.go（-1），需要使用app端提供的关闭的桥的方法
isIos.js
export const isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
bridge.js
import {isIos } from './isIos'
const setupWebViewJavascriptBridge = (callback) => {
if (isIos) {
if (window.WebViewJavascriptBridge) return callback(window.WebViewJavascriptBridge)
if (window.WVJBCallbacks) return window.WVJBCallbacks.push(callback)
window.WVJBCallbacks = [callback]
var WVJBIframe = document.createElement('iframe')
WVJBIframe.style.display = 'none'
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'
document.documentElement.appendChild(WVJBIframe)
setTimeout(() => { document.documentElement.removeChild(WVJBIframe) }, 0)
}
}
export const appBridge = (apiName, payload, cb) => {
if (isIos) {
setupWebViewJavascriptBridge((bridge) => bridge.callHandler(apiName, payload, cb))
} else {
let res = null
if (window.jsHZG[apiName]) {
if (JSON.stringify(payload) !== '{}' && payload) {
if (typeof payload === 'object') {
res = window.jsHZG[apiName](JSON.stringify(payload))
} else {
res = window.jsHZG[apiName](payload)
}
} else {
res = window.jsHZG[apiName]()
}
if (cb) cb(res)
}
}
}
export const registerhandler = (name, callback) => {
if (isIos) {
setupWebViewJavascriptBridge(function (bridge) {
bridge.registerHandler(name, callback)
})
} else {
window[name] = data => callback(data)
}
}
webView.js
import { appBridge } from './bridge'
// 打开新web-view
export const newPage = (isFull, path, query) => {
return appBridge('openNewPage', { url: isFull ? path: `${window.location.origin}${path}` })
}
// 关闭当前web-view
export const closePage = () => {
return appBridge('closePage')
}
//跳转小程序
export const openXCX = () => {
return appBridge('payStagesOrder')
}
// 获取原生导航条的高度
export const getStatusBarHeight = () => {
return appBridge('getStatusBarHeight')
}
使用：
import { closePage} from '@/utils/webView'
//在需要的地方
closePage()
六. 项目打包发布后，前端静态图片在测试环境无法显示的问题
首先我们去vite官网看看关于静态资源文件的处理：
这里我们先假设：
静态文件目录：src/assets/images/
我们的目标静态文件在 src/assets/images/home/home_icon.png
<img src="src/assets/images/home/home_icon.png" />
那么这么写就会出现问题，在本地环境时你能够显示出图片，但打包发布到测试环境问题就出来了，图片没显示出来。
第一张图片标红的位置打包后是： /assets/images/home/home_icon.（hash的值）.png
综上所得：如果资源文件在assets文件夹打包后会把图片名加上 hash值，但是直接通过 :src=”imgSrc”方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题
所以：<img src="src/assets/images/home/home_icon.png" /> 是肯定找不到的。
1.第一种方式解决方式（适用于处理单个链接的资源文件 普通推荐！！！！）
import homeIcon from '@/assets/images/home/home_icon.png'
<img :src="homeIcon" />
这也是vite官方文档说明的方式，new URL() + import.meta.url
工具文件目录： src/util/img-use.ts
img-use.ts:
// 获取assets静态资源
export const getAssetsFile = (url: string) => {
return new URL(`../assets/images/${url}`, import.meta.url).href
}
使用:
import getAssetsFile from '@/util/img-use'
//setup语法糖写法,没用语法糖的记得return出去
//如果是直接建在assets/images下，写图标名就行了
<img :src="getAssetsFile('home_icon.png')" />
//可以在../assets/images建目录如home文件夹，那么就是
<img :src="getAssetsFile('/home/home_icon.png')" />
另外：如果是背景图片引入的方式（一定要使用相对路径）
.imgBg {
background-image: url('../../assets/images/WDNMD.jpg');
}
这种方式引入的文件必须指定到具体文件夹路径，传入的变量中只能为文件名，不能包含文件路径
使用vite的import.meta.glob或import.meta.globEager，两者的区别是前者懒加载资源，后者直接引入。
那我为什么说不怎么推荐了，如果你使用的是最新版本的vite，就会出现
可以看出import.meta.globEager已被弃用，只能用import.meta.glob了，并且你只能传图片名，不能传路径。
const modules = import.meta.glob(‘./menus/**/*.ts’, { eager: true,import:’default’ })
以“default”这个选项作为默认的导出内容，从而避免对象为’unknow’时获取default的报错
工具文件目录： src/util/img-use.ts
img-use.ts:
// 获取assets静态资源
export const getAssetsHomeFile = (url: string) => {
const path = `../assets/images/home/${url}`;
const modules = import.meta.globEager("../assets/images/home/*");
//const modules = import.meta.globEager("../assets/images/home/*", { eager: true,import:'default' });
return modules[path].default;
}
使用:
import useImg from '@/util/img-use'
//写图标名就行了，不能带路径,并且你只能传图片名，不能传路径。
<img :src="useImg('home_icon.png')" />
七.h5移动端，安卓看着没问题，ios的手机文字嘎嘎换行
（原因：给对应的dom元素设置了宽度，导致了换行，移动端布局时非必要不要设置宽度）
八.vant3 Dialog组件title没显示，我的是小米11的，ios或安卓的其他手机都显示了
目前没找到原因，见鬼了，就我的手机 Dialog组件title没显示。
//手机号弹窗提示
const dialogShow = () => {
Dialog.alert({
confirmButtonText: '我知道了',
title: '你瞅啥', //这个没显示，离谱
confirmButtonColor: '#FE7E41',
message: '瞅你乍地！！',
}).then(() => {});
};
九.小程序嵌套web-view H5页时，出现双导航的情况
在app.json中，小程序navBarTitle不设置，并且h5项目的mian.ts调用接口，获取这个是从哪来到或嵌套该h5页，把来源存放在全局中，用来判断是否隐藏left-arrow 返回箭头
获取：
//调接口获取来源.............. 得到sourcePage
app.config.globalProperties.$sourcePage = sourcePage // 放到全局
使用：
<van-nav-bar
title="我的"
:left-arrow="$sourcePage != '来源的值'"
:border="false"
style="width: 10rem"
:placeholder="true"
:fixed="true"
@click-left="onClickLeft"
/>
这样就不是双导航了
十.app端嵌套web-view H5页时，出现双导航的情况
让app端把原生的导航给隐藏了，使用h5的导航
十一.h5 title为空时，安卓手机导航栏会默认展示h5域名。
解决方案：通过document.title改变h5 title
十二.安卓端布局正常，两div上下有间距，ios没间距
ios自己写的样式不是vant组件的（vant组件自己做了适配）文字需要高度和行高，没高度就挤在一起了
总结一手：vant组件使用样式穿透时，就不要给宽度，高度行高了，vant组件组件整好适配了，自己写的样式特别时文字需要给高度和行高，按蓝湖上来就行了
十三.微信小程序配置业务域名，调用web-view组件打开需要嵌套的h5页面
应为有其他的微信 去到微信公众平台，开发管理下的开发设置的下配置义务域名
下载的校验文件，放在public下，并且不要重命名，是什么名字就是什么，不然检测不到
