uniapp--微信小程序 问题记录

uniapp官网 https://uniapp.dcloud.net.cn/api/

自动适配问题

rem适配

为什么选择rem

a) 机型太多,不同的机型屏幕大小不一样
b) 需求：一套设计稿的内容在不同的机型上呈现的效果一致,根据屏幕大小不同的变化,页面中的内容也相应变化

• 原生代码实现

function remRefresh() {
let clientWidth = document.documentElement.clientWidth;
// 将屏幕等分 10 份
// 设计稿为 750*...  1rem=75px
let rem = clientWidth / 10;
document.documentElement.style.fontSize = rem + 'px';
document.body.style.fontSize = '12px';
}
window.addEventListener('pageshow', () => {
remRefresh()
})
// 屏幕防抖
let timeoutId;
window.addEventListener('resize', () => {
timeoutId && clearTimeout(timeoutId);
timeoutId = setTimeout(() =>{
remRefresh()
}, 300)
})

• 借助第三方库

lib-flexible + px2rem-loader

• WXSS 扩展的特性 rpx

什么是rpx

WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比，WXSS 扩展的特性有：

1. 响应式⻓度单位:即尺寸单位 -->rpx
2. 样式导入

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

注意：

1. 使用rpx开发微信小程序时 推荐设计师可以用iPhone6作为视觉稿的标准-->即只有在iPhone6标准中才可以一比二换算,更方便
2. 当使用1rpx时， 在较小的屏幕上不可避免的会有一些毛刺，建议直接使用px
3. rpx为微信小程序wxss的特性 如果你使用uniapp开发多端的话 建议使用rem；就开发微信小程序 是没有什么问题的

使用箭头函数导致this指向错误的问题

箭头函数会改变this指向,当我使用箭头函数后,函数中的this不再指向实例而是指向函数本身,导致data其实是找不到的发生报错

解决方法：

1. 不使用箭头函数；
2. 使用箭头函数需要提前保存this指向

关于路径的问题

1. /代表根目录:如引入根目录下的images/图片

<image src="/images/测试头像图片.jpg"></image>

2. 其余的如:../上一级目录、./同级目录,都与一般无异

样式覆盖问题

uniapp使用的是scss的话 使用 ::v-deep

::v-deep .my-car-title{
	display: flex;
	align-items: center;
	position: relative;
}

less的话 使用/deep/

经常出现的问题有 在uni上样式调的好好的 在微信小程序上样式变了

原因分析：微信小程序有样式隔离，其二 uni打包成微信小程序之间经过代码打包 会有部分标签class发生改变或者不生效的情况，主要以打包后的 代码为调试的基础

解决思路思路是：全局写样式覆盖