taro转H5端踩坑

项目场景:

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


问题描述

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

javascript 复制代码
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>

原因分析:

类名里出现了空字符串


解决方案:

javascript 复制代码
  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的时候采用不同的方法传:

javascript 复制代码
  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)
      }
    }
    

附上几种图片格式转换(File、Blob、base64)方法

相关推荐
街尾杂货店&39 分钟前
css word-spacing属性
前端·css
千叶寻-42 分钟前
正则表达式
前端·javascript·后端·架构·正则表达式·node.js
光影少年6 小时前
angular生态及学习路线
前端·学习·angular.js
无尽夏_8 小时前
HTML5(前端基础)
前端·html·html5
Jagger_8 小时前
敏捷开发流程-精简版
前端·后端
FIN66689 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing9 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女1279 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿9 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN66689 小时前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能