来看看有没有你 Taro 开发遇到的问题

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

简介

• taro官网
• taro-ui官网

Taro是一个跨端框架解决方案，能够编译成多端输出

主要编译工做流与抽象语法树（AST）

• 解析（Parse）：将代码 解析 成 抽象语法树（AST），而后对 AST 进行 遍历（traverse）和 替换(replace)（类比 DOM 树的操做）
• 生成（generate）：据新的 AST 生成编译后的代码

在开发中遇到的问题

已解决

1. 渲染html：图片不显示

当图片行内样式没有固定宽高时，图片会不显示（宽高都没有）或被拉伸（宽高只有一个）

解决办法： 调用Taro.options.html.transformElement 更改html标签属性

<View dangerouslySetInnerHTML={{ __html: html }} />

// 给全部 img 标签添加 aotu 类
Taro.options.html.transformElement = (el) => {
    if (el.nodeName === 'image') {
        el.setAttribute('mode', 'widthFix');
    }
    return el;
};

复制代码

2. ScrollView 中全屏播放视频后退出 ：页面会滚回顶部

解决办法： h5使用Taro的Video组件，微信小程序使用 previewMedia 进行视频预览

wx.previewMedia({
    sources: [{ url: url, type: 'video' }],
});

复制代码

3. ScrollView 中嵌套sticky定位元素，sticky不生效

解决办法： 在ScrollView组件中再套一个View组件

<ScrollView>
    <View> <View style={{positon:"sticky"}} /> </View>
</ScrollView>
复制代码

4. H5设置basename后tabBar不显示

解决办法： pagePath须要设置为/basename/pages/...

见issues：github.com/NervJS/taro…

尚存问题

1. 设计尺寸为375时，更改config文件，仅小程序生效，h5会放大

当前处理：目前是将设计稿尺寸都*2进行的coding

个人配置:但愿有人能指导一下

// ./config/index.js缩放配置
const config = {
  projectName: 'content-h5-taro',
  date: '2021-5-10',
  designWidth: 375,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    375:1/2
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  alias: {
    '@': path.join(__dirname, '..', 'src')
  },
  plugins: [
    '@tarojs/plugin-platform-weapp-qy'
  ],
  defineConstants: {
  },
  copy: {
    patterns: [
    ],
    options: {
    }
  },
  framework: 'react',
  mini: {
    postcss: {
      "postcss-px-scale": {
        enable: true,
        config: {
            scale: 0.5, // 缩放为 1/2
            units: "rpx",
            includes: ["taro-ui"]
        }
      },
      url: {
        enable: true,
        config: {
          limit: 1024 // 设定转换尺寸上限
        }
      },
      cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    esnextModules: ['taro-ui'],
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
        }
      },
      cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      },
      "postcss-px-scale": {
          "enable": true,
          "config": {
            "scale": 0.5, //缩放为1/2
            "units": "rem",
            "includes": ["taro-ui"]
          }
       }
    }
  }
}
复制代码

2. ScrollTabs 和另外一个Component同层级时，当Component数据变化时，ScrollTab会随便滚

// 当ContentList 数据变化时 ，AtTabs会瞎滚
// tabs组件
    <AtTabs
      className={style.tabs}
      current={currentTab}
      scroll // 滚动属性
      tabList={tabs}
      onClick={(value) => setCurrentTab(value)}
    >
      {tabs.map((tab: ColumnsTreeData, index: number) => {
        return <AtTabsPane current={currentTab} index={index} key={tab.key} />;
      })}
    </AtTabs>
//同层级其余Component 
    <ContentList key={`content_list_${contentReload}`} field={field[currentFieldIndex]?.key} column={columnVal} hitBottom={hitBottom} setHitBottom={setHitBottom} search={search} />
复制代码

3. AtButton组件会引起穿透点击

onclick上阻止冒泡并无用，求解决方案