uni-app vue3+vite+ts 无法正常使用renderjs

uni-app vue3+vite+ts 无法正常使用renderjs

示例代码：

<template>  
    <view class="pp">  
        <view>  
            <text>pp page</text>  
            <button @click="toBack">to Back</button>  
        </view>  
        <view :loaded="loaded" :change:loaded="test.init">&lt;/view&gt;  
    </view>  
</template>  
<script>  
export default {  
    data: () => {  
        return {  
            loaded: false,  
        }  
    },  
    mounted() {  
        this.$nextTick(() => {  
            setTimeout(() => {  
                this.loaded = true  
            }, 100)  
        })  
    },  
    methods: {  
        toBack: () => {  
            uni.navigateBack()  
        },  
    },  
}  
</script>  

<script module="test" lang="renderjs">  
export default {  
  data: () => {  
      return {}  
  },  
  methods: {  
      init(loaded, ov, ownerInstance, instance) {  
        loaded && console.log('loaded :>> ', loaded);  
      },  
  },  
}  
</script>  

<style scoped lang="scss">  
.pp {  
    flex: 1;  
    width: 100%;  
    height: 100%;  
    padding-top: 100px;  
}  
</style>

操作步骤：

  • 运行附件项目 点击to PP按钮

预期结果：

  • 请尽快修复正常运行，或者退回到哪个版本可以运行，非常着急！！

实际结果：

  • 无法运行

bug描述：

  • 收到部分安卓8、9、10等分机型用户反馈，通过测试发现问题，使用云真机测试平台和安卓原生模拟复现了bug，附件demo.zip为测试工程，使用标准基座直接运行即可，截图HBuilder X错误信息。

附件：

Image

demo.zip


更多关于uni-app vue3+vite+ts 无法正常使用renderjs的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

官方是视而不见吗？都提供了复现项目都不确认回复吗？

更多关于uni-app vue3+vite+ts 无法正常使用renderjs的实战教程也可以访问 https://www.itying.com/category-93-b0.html


久等了，感谢反馈，目前使用安卓原生模拟器去跑该demo暂未复现该bug，稍后我找个低版本的云真机测试看看，你可以将HBX更新到alpha试试看

修改vite.config.ts中build的target，target: ‘es6’
现在 renderjs 的编译也会应用该target

在 uni-app 中使用 Vue 3 + Vite + TypeScript 时，如果无法正常使用 renderjs，可能是由于以下几个原因导致的。以下是一些可能的解决方案和排查步骤：

1. 确保 renderjs 的配置正确

renderjs 是 uni-app 提供的一个用于在 H5 端运行 JavaScript 代码的机制。确保你在 pages.json 中正确配置了 renderjs。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "renderjs": true
      }
    }
  ]
}

2. 检查 renderjs 代码的编写

renderjs 代码需要写在 script 标签中，并且需要按照 uni-app 的规范来编写。确保你的 renderjs 代码没有语法错误或逻辑问题。

<template>
  <view>
    <canvas id="myCanvas"></canvas>
  </view>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'

onMounted(() => {
  const canvas = document.getElementById('myCanvas')
  const ctx = canvas.getContext('2d')
  ctx.fillStyle = 'red'
  ctx.fillRect(0, 0, 100, 100)
})
</script>

<script lang="renderjs">
export default {
  mounted() {
    console.log('renderjs mounted')
  }
}
</script>

3. 检查 Vite 配置

Vite 的配置可能会影响 renderjs 的正常运行。确保 Vite 配置没有影响到 uni-app 的正常运行。

在 vite.config.ts 中，确保没有对 uni-app 的构建过程进行不必要的修改。

import { defineConfig } from 'vite'
import uni from '[@dcloudio](/user/dcloudio)/vite-plugin-uni'

export default defineConfig({
  plugins: [uni()]
})

4. 检查 TypeScript 配置

如果你在 TypeScript 中使用了 renderjs，确保 TypeScript 配置没有影响到 renderjs 的正常运行。

在 tsconfig.json 中，确保 compilerOptions 配置正确。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

5. 检查 uni-app 版本

确保你使用的 uni-app 版本支持 Vue 3 + Vite + TypeScript 的组合。如果不确定，可以尝试更新 uni-app 到最新版本。

npm update [@dcloudio](/user/dcloudio)/uni-app

6. 检查控制台错误

打开浏览器的开发者工具，查看控制台是否有任何错误信息。这些错误信息可能会帮助你找到问题的根源。

7. 尝试简化代码

如果问题依然存在，尝试简化你的代码，逐步排查问题。例如，先写一个最简单的 renderjs 示例，看看是否能正常运行，然后逐步添加复杂逻辑。

8. 参考官方文档和社区

如果以上方法都无法解决问题，可以参考 uni-app 的官方文档，或者在 uni-app 的社区中寻求帮助。可能其他开发者遇到过类似的问题，并且已经有了解决方案。

示例代码

以下是一个简单的 renderjs 示例，供你参考：

<template>
  <view>
    <canvas id="myCanvas"></canvas>
  </view>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'

onMounted(() => {
  const canvas = document.getElementById('myCanvas')
  const ctx = canvas.getContext('2d')
  ctx.fillStyle = 'red'
  ctx.fillRect(0, 0, 100, 100)
})
</script>

<script lang="renderjs">
export default {
  mounted() {
    console.log('renderjs mounted')
  }
}
</script>
回到顶部