跳到主要内容

项目问题

  • 1、项目的难点，以及如何解决
  • 2、项目亮点

移动端项目问题​

image在真机上图片被拉伸问题​

  • 注意图片像素，图片使用一倍图有时候看起来模糊。我们可以使用二倍图的方式来提高图片的清晰度
  • 设置宽度即可，高度可自适应
js
  <image class="image" src='/static/img/test.png' mode="widthFix"></image>
css
.image{
  width: 336rpx;
}

为什么要使用二倍图？

  • 当图片使用一倍图的时候，在某些设备上会被放大拉伸，使用二倍图可以很好提高图片清晰度

在实际开发中，当一个50 ×50像素（CSS像素）的图片直接放到iPhone 6/7/8设备中显示时，图片会被放大，变成原来的两倍（iPhone 6/7/8的设备像素比为2），即100 ×100, 为了避免图片放大后模糊，预先制作一张100 ×100的图片，然后在网页中手动设置这个图片的样式，将图片的宽和高都设为50像素。这样，这张图片就会以它原本的像素（100 ×100）来显示，保证了图片的原有清晰度

移动端浏览器，input输入框，键盘弹出，导致出现滚动条​

在移动端中，比如chrome和edge浏览器中，使用了input输入框，当键盘弹出的时候，导致页面被顶开，出现页面滚动条

  • 解决方案：
    • 外部触摸移动的时候，使input组件失去焦点，令键盘消失，就可以解决了

Taro项目​

虚拟滚动​

  • 只渲染当前可视区域
  • taro官方的VirtualList虚拟列表存在一定的问题
    • 不支持列表节点可变高度，当列表节点不等高会存在问题

缓存问题​

每次发布更新的时候总会遇到这样的问题，用户在微信中看到的页面是没有改动过的，但是我们明明已经更新了，只能清理缓存才能看到最新的修改

解决方案：

  • 静态资源文件后面追加hash数值，这样静态文件发生变化的时候会生成新的hash值，这样每次发包的静态文件路径就是不同的了，所以升级版本就避免了缓存的问题

uniapp项目​

跨端注意问题​

css兼容性​

  • 在较老的手机上，比如Android4.4、5.0或iOS8，很多css是不支持的，所以不要使用太新的css，会导致界面异常。

注意这不意味着不能使用flex，Android4.4也支持flex，只是不要使用太新的css。

包体积优化​

  • 不要过度依赖uniapp内部封装的uni-ui插件，会引入很多额外的依赖，加大包体积

跳转路由之后pinia持久化不生效​

  • 解决方案：在入口文件App.vue里手动调用一次需要实例化的store

小程序项目​

小程序自定义tabBar切换时出现闪动的现象​

解决canvas组件始终位于界面最顶层​

  • CoverView：覆盖在原生组件之上的文本视图

微信支付问题​

  • 需要商户号，【没有商户号可以去申请】
  • 微信支付，本质上就是调用商户号的接口，将钱转到商户号中

小程序体积过大，如何解决？​

在 app.json，subpackages 字段声明项目分包结构：

参考：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

  • 开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载

优点：

  • 可以优化小程序首次启动的下载时间

  • 以及在多团队共同开发时可以更好的解耦协作。

引用原则：

  • 分包可以引用主包， 分包之间不可以相互引用
  • 主包不能引用分包
    • 分包是按需加载的，主包引入分包可能会出错
    • 导致主包体积变得太大

注意事项

  • tabbar不支持分包，tabbar必须在主包内

小程序 嵌套h5页面 问题​

弊端考虑的问题：

  • 区分h5和小程序做兼容

    • h5页面带着header,但小程序中自带header,这是就要区分环境，在小程序的环境中把header去掉。

  • 嵌套嵌h5页面不好过审

    • 内嵌的话，审核人员看不到里面内容，不好通过

  • 审核人员很难看出小程序的使用场景和用途

  • 需要使用sdk来调用小程序的功能

微信小程序 滚动穿透问题​

参考：https://developers.weixin.qq.com/community/develop/article/doc/00062666530a300ed35ba552856413

解决方案:

  • catchtouchmove 是可以用来防止滚动穿透
    • 这样在微信开发者工具模拟器上触摸还可以滚动，在真机调试上没法拖动
    • 仅适合弹层没有滚动条的情况
js
<view catchtouchmove="onCatchTouchMove">
</view>
//阻止滑动事件,空函数即可
onCatchTouchMove(e) {},

catch开头表示不能冒泡 【非冒泡】，表示不能向父节点传递

微信小程序地图​

  • 微信小程序地图markers 动态数据渲染的坑

由于异步设置值的过程，组件已经渲染。但是map变量没有预定义是undefined状态，map初始化拿不到数据直接报错了，而异步过来又变成动态更新导致了wxml需要重新渲染map组件的情况导致的。因为官方文档有提到：

地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。 标记点markers只能在初始化的时候设置，不支持动态更新。

只能初始化一次，因此导致每次都是显示的初始化信息。

wx:if会渲染一下组件，那我们按照这个思路给他加个if就行了

html
<map markers="{{markers}}" style="width: 375px; height: 200px;" wx:if="{{map}}"></map>

登录session_key失效问题​

  • 检查是否调用了wx.login()，wx.login每次调用会更新session_key。从而导致旧的session_key失效

问题：

1、同一个session_key会解密不同的用户信息？

  • 显然这说法是错误的。不同用户的session_key是不共用的
  • session_key对应的是单个用户的

解决输入框搜索，导航栏会被撑出屏幕抖动问题​

目前问题，ios原生输入法会出现，安卓不会有问题

参考: https://blog.csdn.net/chenxiskate/article/details/126085107

排查问题：

先缩小范围，先把引发出现的问题范围缩小，比如在弹出框里面的内容操作会影响导航栏被撑出屏幕，那么可以把里面的内容拿出来，看看是里面内容问题 还是弹出框问题，再进一步排查

  • input 设置 adjust-position为false
    • adjust-position 表示 是否自动上推页面

注意地方：

参考：https://developers.weixin.qq.com/community/develop/doc/dd69ff7814f3e213bb4b63ecf75d4252

  • 聚焦时，可能会出现弹出键盘遮挡输入框，可以设置cursor-spacing属性，指定光标与键盘距离

防止出现重复loading提示​

  • 封装微信等待提示，防止ajax过多时，showLoading多次
  • 可以封装一个提示统一管理
js
var util = {
  requestLoading: false,
  loadingTimer: null
};
util.showLoading = function() {
  if (!this.requestLoading) {
    clearTimeout(this.loadingTimer);
    this.requestLoading = true;
    wx.showLoading({
      title: '加载中',
      mask: true
    });
  }
};
util.hideLoading = function() {
  clearTimeout(this.loadingTimer);
  this.loadingTimer = setTimeout(() => {
    if (this.requestLoading) {
      this.requestLoading = false;
      wx.hideLoading();
    }
  }, 300);
};

自定义导航栏问题​

  • navigationStyle: custom 对 web-view 组件无效

  • 原生顶部导航栏，在ios和安卓的表现是不一样的，安卓的标题是左边，ios是居中

  • 抖音小程序自定义导航需要申请

  • h5在钉钉导航栏问题，需要使用钉钉的SDK才可以修改钉钉导航栏

接单小程序​

该小程序可以提供门店级别的营销工具和订单管理。

微前端项目​

接入微前端的原因？

为什么选型使用qiankun？

iframe的缺点？ 介绍下样式隔离与JS隔离的实现与常见的实现方式？ 是如何处理路由状态丢失的？能介绍下single-spa的执行思路吗？ 不同子应用间如何抽离公共依赖？了解webpack5的Module Federation吗？ prepatch是如何实现的？ 子应用间的通信方式有哪些？

接入微前端的原因​

如果前端项目过于庞大, 所有功能都在一个项目，而客户又比较多，每个客户需要的功能又差异，有的客户还需源码，按目前架构开发很难满足不同客户不同功能以及不同源码版本的业务需求，需要一种更高维度的解耦方案-微前端(前端微服务化),按业务拆分为不同的微前端模块

iframe的优缺点​

缺点：​

  • url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。

  • UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中..

  • 全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。

  • 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

  • 不利于SEO搜索引擎优化

  • 不利于ui美观，iframe嵌套的应用结构中会出现各种滚动条【iframe会自带滚动条】

  • iframe会增加服务器的http请求，调用外部页面，会额外增加样式和脚本，增加页面额外的请求次数

优点：​

  • iframe能够把嵌入的网页按照原样展现出来
  • 重载页面时不需要重载整个页面，只需要重载页面中的一个iframe框架页；

为什么选型使用qiankun​

qiankun的优势​

  • 基于 single-spa 封装，提供了更加开箱即用的 API。
  • 技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。
  • HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
  • 样式隔离，确保微应用之间样式互相不干扰。
  • JS 沙箱，确保微应用之间 全局变量/事件 不冲突。
  • 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。

兼容性问题​

有遇到过兼容性问题吗

  • 开发h5的时候，在钉钉内置的浏览器打开h5，出现导航栏问题，需要使用钉钉SDK来修改标题
  • 移动端 1px边框问题 ，有的手机中,1px会比实际效果粗
  • iphone的底部安全区域
    • 可使用CSS 函数解决

PC项目​

表格优化​

  • 固定表头

    • 纵向滚动时，表头始终固定

  • 固定底部横向滚动条

    • 在展示大量数据的时候，一页放不下，需要滚动，但是每次都需要滚动到底部，才能进行横向滚动，用户体验也不好

    • 实现：

      • 1、sticky粘性布局
      • 2、fixed固定布局

    原理:

    • 模拟一个滚动条，触发滚动事件，把滚动的left值赋值给容器的scrollLeft，就能实现容器滚动了
    • 需要把容器的宽度，动态赋值给滚动条宽度，才能做到滚动和容器进行同步滚动

  • 虚拟滚动

  • 表格转换canvas