当前位置：首页 > article >正文

taro转H5端踩坑

article 2025/3/3 5:37:35

项目场景：

在利用taro进行多端开发时踩坑随记：

问题描述

在编译h5端的时候提示：
Uncaught TypeError: (prevProps.className || prevProps.class || “”).split is not a function"

return <ScrollView scrollY onScrollToLower={this.onScrollToLower} onRefresherRefresh={this.onRefresherRefresh} 
refresherTriggered={this.props.refresherTriggered} refresherEnabled={this.props.refresherEnabled} 
className={['app-tab-content',this.props.tabValue === this.props.name ? 'app-tab-content-show' : null]}>
{this.props.children}</ScrollView>

原因分析：

类名里出现了空字符串

解决方案：

  return <ScrollView scrollY onScrollToLower={this.onScrollToLower} onRefresherRefresh={this.onRefresherRefresh}
        refresherTriggered={this.props.refresherTriggered} refresherEnabled={this.props.refresherEnabled}
         className={`app-tab-content ${this.props.tabValue === this.props.name && 'app-tab-content-show'}`}>{this.props.children}</ScrollView>

问题描述

scrollview标签在h5端不能滑动，但是刷新页面就能滑动了

原因分析：

ScrollView标签上设置了overflow:hidden属性

解决方案：

去掉overflow:hidden属性

问题描述

提示：这里描述项目中遇到的问题：

小程序调用Taro.chooseImage和H5端不同，h5端上传给后端报错

原因分析：

利用Taro.chooseImage上传图片之后上传给后端小程序和h5端返回的tempFilePaths不同
小程序：
在这里插入图片描述
h5端：

解决方案：

在小程序和h5的时候采用不同的方法传：

  const handleUploadImage = () => {
        Taro.chooseImage({
            count: 1,
            sizeType: ['compressed'],
            sourceType: ['album', 'camera'],
            success: async (res) => {
                const tempFilePath = res.tempFilePaths[0];
                uploadImageToServer(tempFilePath,res.tempFiles[0])
                let urlList = [...list]
                urlList.push(tempFilePath)
                setList(urlList)
            }
        });
    };
      const uploadImageToServer = async (filePath) => {
        let token = Taro.getStorageSync("token");
        const res = await Taro.uploadFile({
            url: api.xxxx,
            filePath:filePath,
            name: 'file',
            formData: {},
            header: {
                'X-Authorization': `Bearer ${token}`,
                'Content-Type': 'multipart/form-data', // 如果上传文件需要特定的 Content-Type，可以在这里设置
            },
        });
        if(process.env.TARO_ENV==="weapp"){
          const res = await Taro.uploadFile({
              url: api.xxx,
              filePath:filePath,
              name: 'file',
              formData: {},
              header: {
                  'X-Authorization': `Bearer ${token}`,
                  'Content-Type': 'multipart/form-data', // 如果上传文件需要特定的 Content-Type，可以在这里设置
              },
          });
          let parse = JSON.parse(res.data)
          setKeyKList([...keyKList, parse.data])
        }else if(process.env.TARO_ENV==="h5"){
          // h5返回得地址转换为blob
          fetch(filePath).then(fetchRes => {
          		return fetchRes.blob();
          	}).then(async data => {
             //blob格式转换为base64格式
          	blobToDataURI(data,async function ( result) {
              let res = await request.post({
                url: api.uploadBase,
                data: {
                  base64Str:result,
                  fileExt:baseFile.originalFileObj.name
                }
              });
               let parse = JSON.parse(res.data)
               setKeyKList([...keyKList, parse.data])
          	});
          })
        }
    };
    const blobToDataURI=(blob, callback) =>{
      let reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = function (e) {
      callback(e.target.result)
      }
    }