來看看有沒有你 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上阻止冒泡並無用，求解決方案