Taro3+Vue3重构Mpvue小程序项目踩坑记

1、Taro小程序编译时报错;

图片描述

  • 原因:页面中存在小程序识别不了的标签;如div
  • 解决方法:
      1. 将div标签替换成小程序可识别的标签;
      1. 安装Taro中提供的插件:@tarojs/plugin-html, 使其可被识别;
        插件安装教程参考Taro官网:https://taro-docs.jd.com/docs/use-h5

2、微信的page-container组件弹出时将页面滚动至顶部?

  • 原因:page-container组件弹出时,page标签会被添加上如下样式,导致页面会被滚动至顶部;
    在这里插入图片描述

  • 微信开放社区提供的解决方案可参考:https://developers.weixin.qq.com/community/develop/doc/000ca0ca3c496803b7db22fa85bc00?_at=1584495477343.;

  • 我在项目中的解决方案如下:弹出层子组件使用了nut-popup进行弹出,当父组件滚动时记录当前滚动的高度,给标签添加scroll-top属性;
    在这里插入图片描述

3、编译时提示如下错误;

  • 原因:在两个不同页面件中a.css和b.css样式文件引入先后的顺序不一致;具体原因可查看:https://laysent.com/til/2019-11-28_conflicting-order-in-mini-css-extract-plugin
    在这里插入图片描述
  • 解决方法:
    • 如果a.css和b.css文件有关联性,即b.css必须在a.css文件后引入,则在每个页面中统一CSS的引入顺序;
    • 在config/index.js文件中增加如下配置:忽略CSS引入的顺序检查;
      在这里插入图片描述

4、给本地this变量起别名时ts报错:在这里插入图片描述* 原因:eslint 为了防止this变量和局部变量混淆

  • 解决方法:在 .eslintrc.js中的rules添加 “@typescript-eslint/no-this-alias”: [“off”]

5、Taro3中不支持样式的scoped写法,容易出现页面间的样式污染,怎么解决?

  • 解决方法:
    • 1)修改冲突的选择器名称,使其不重复;
    • 2)使用CSS Modules管理每个业务页面的样式;
  • CSS Modules使用步骤:(参考Taro官网教程:https://taro-docs.jd.com/docs/css-modules)
    • 1)在配置文件中开启css modules的使用;
    • 2)修改css的文件名;页面的xxx.scss文件修改为xxx.module.scss;
    • 3)在js文件中引入xxx.module.scss文件;
    • 4)在.vue文件中使用styles.xxxx使用选择器;
    // config/index.js文件
    ...
    mini: {
        cssModules: {
           enable: true, // 默认为 false,如需使用 css modules 功能,则设为 true
        }
    }
    ...
    
    // xxx业务模块js
    import styles from './xxx.module.scss';
    setup() {
       return {
          styles
       }
    }

6、使用modules时父子组件样式的问题;

  • 问题描述:子组件有一个样式stylesChild.A,父组件调用子组件的时候需要复用子组件的样式,但是在父组件中子组件的父容器样式是stylesParent.xxxx;那么子组件自己的样式就复用不了了;
  • 解决方法:
    • 1)子组件定义className属性,父组件使用子组件时将类名传入,在子组件中复写传入的className样式;
      在这里插入图片描述
    • 2)css modules和普通class混用, 在父组件使用子组件时给子组件添加普通class,然后在父组件中定义普通class样式;
      在这里插入图片描述

7、购物车页面数量输入框聚焦时输入键盘向上顶起,页面会滚动一段距离,导致输入框的内容移位?

  • 解决方案参考:https://developers.weixin.qq.com/community/develop/article/doc/000a00e1fd0790488e6a034f156813

8、nutui实现各组件主题颜色定制;

  • 官网配置参考链接:https://nutui.jd.com/theme/#/base

9、border-radius在模拟器和安卓手机上显示正常,但是在IOS手机上不显示;

  • 解决方法参考:https://developers.weixin.qq.com/community/develop/doc/000a6c9dee8fc0866e3b9ed5651400

  • 在使用transform的元素的上一级元素上添加如下css样式:-webkit-transform: rotate(0deg);

10、小程序打包上传预览版时提示: xxxx无依赖文件;

  • xxxx.LICENSE.txt: 为xxxx文件的注释单独存放的文件,
  • terserWebpackPlugin.extractComments:是否将注释提取到单独的文件;设置打包时为false,不将注释提取到单独的文件中;
  // config/dev.js的文件内容
  ...
  mini: {
    ...
     chain.merge({
        plugin: {
          install: {
            plugin: require('terser-webpack-plugin'),
            args: [{
              terserOptions: {
               ...
              },
              extractComments: false  // 不将注释提取到单独文件
            }]
          }
        }
      ...
    })
  }

11、小程序项目引入crypto-js插件后,提示包体积过大?

  • 解决方案:
    • 1)将插件包降级为3.1.9-1,因为4.1.1版本包含了bower和node部分,
      官网问题描述参考:https://github.com/brix/crypto-js/issues/276
    • 2)使用时不要整包加载,要按需引入;
      不建议: let CryptoJS = require(‘crypto-js’)

12、扫描/识别二维码进入指定的小程序中某个页面是怎么实现的?

  • 1)根据vue-qr和qr-code插件在后台管理系统动态生成二维码,该二维码绑定的有一个普通链接;
  • 2)在小程序开发者后台:开发管理-开发设置-扫普通链接二维码打开小程序选项中配置二维码地址和小程序打开路径的对应关系;即可实现扫二维码跳转到指定小程序的页面;
### 如何在 Taro 3 中使用 ECharts 进行图表开发 #### 安装依赖包 为了能够在 Taro 3 中使用 ECharts 绘制图表,需先安装 `echarts-taro3-react` 或者 `echarts4taro3`。可以通过 npm 来快速完成这一操作。 对于 `echarts-taro3-react` 的安装命令如下所示[^1]: ```bash npm install echarts-taro3-react --save ``` 而对于 `echarts4taro3` 则有多种方式可以选择,比如使用 Yarn 或 Pnpm: ```bash yarn add echarts4taro3 pnpm add echarts4taro3 npm install echarts4taro3 --save ``` #### 加载 ECharts 模块并初始化图表 当选择了合适的库之后,在实际编写代码前还需要导入必要的模块来启动图表渲染过程。这里以 `echarts4taro3` 为例说明具体的实现方法: 首先应当引入核心的 ECharts 库文件以及辅助函数用于创建新的实例对象。 ```javascript import * as echarts from &#39;echarts4taro3/lib/assets/echarts&#39;; import { EChart, loadEcharts } from &#39;echarts4taro3&#39;; ``` 接着就可以在一个 React 组件内部调用这些 API 并传入配置项参数来自动生成所需的可视化效果了。需要注意的是,由于微信小程序环境下的特殊性,可能需要额外处理某些兼容性问题才能确保一切正常工作[^3]。 #### 创建简单的折线图案例 下面给出一段完整的示例代码片段展示如何利用上述提到的技术栈构建一个基础版的时间序列折线图: ```jsx import React, { useEffect, useRef } from &#39;react&#39;; import * as echarts from &#39;echarts4taro3/lib/assets/echarts&#39;; import { View } from &#39;@tarojs/components&#39;; const LineChart = () => { const chartRef = useRef(null); useEffect(() => { let myChart; if (chartRef.current) { myChart = echarts.init(chartRef.current); const option = { xAxis: { type: &#39;category&#39;, data: [&#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;, &#39;Sun&#39;] }, yAxis: { type: &#39;value&#39; }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: &#39;line&#39; }] }; myChart.setOption(option); } return () => { if(myChart){ myChart.dispose(); } }; }, []); return ( <View style={{ width: &#39;100%&#39;, height: &#39;400px&#39; }}> <canvas ref={chartRef} id="main" className="myChart"></canvas> </View> ); }; export default LineChart; ``` 该例子展示了怎样通过 JSX 和 JavaScript 结合的方式定义页面布局结构,并且借助于钩子机制实现了组件挂载后的自动绘图逻辑。同时考虑到性能优化方面的要求,在卸载时也得清理掉不再使用的资源以免造成内存泄漏等问题的发生。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wen_文文

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值