NervJS / taro

开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
https://docs.taro.zone/
Other
35.36k stars 4.78k forks source link

text组件转成h5后,样式渲染和在微信小程序上差异很大 #13898

Open qican77 opened 1 year ago

qican77 commented 1 year ago

相关平台

微信小程序

小程序基础库: 2.19.4 使用框架: React

复现步骤

1、按照官网使用text组件 https://developers.weixin.qq.com/miniprogram/dev/component/text.html 2、使用taro build --type h5编译成h5的产物 3、本地搭建静态服务器,在浏览器中打开

期望结果

h5在浏览器上渲染的效果和微信开发工具上的模拟器一致

实际结果

h5在浏览器上渲染的效果和微信开发工具上的模拟器差异很大

环境信息

$ taro info
👽 Taro v3.6.6
Taro CLI 3.6.6 environment info:
    System:
      OS: Windows 10 10.0.19045
    Binaries:
      Node: 16.19.1 - D:\software\DevEco\nodeJs16\node.EXE
      npm: 8.19.3 - D:\software\DevEco\nodeJs16\npm.CMD
    npmPackages:
      @tarojs/cli: 3.6.6 => 3.6.6
      @tarojs/components: 3.6.6 => 3.6.6
      @tarojs/helper: 3.6.6 => 3.6.6
      @tarojs/plugin-framework-react: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-alipay: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-h5: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-jd: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-qq: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-swan: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-tt: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-weapp: 3.6.6 => 3.6.6
      @tarojs/react: 3.6.6 => 3.6.6
      @tarojs/runtime: 3.6.6 => 3.6.6
      @tarojs/shared: 3.6.6 => 3.6.6
      @tarojs/taro: 3.6.6 => 3.6.6
      @tarojs/webpack5-runner: 3.6.6 => 3.6.6
      babel-preset-taro: 3.6.6 => 3.6.6
      eslint-config-taro: 3.6.6 => 3.6.6
      react: ^18.0.0 => 18.2.0
qican77 commented 1 year ago

image

qican77 commented 1 year ago

image