uni-app 使用 renderjs 编译出错

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app 使用 renderjs 编译出错

开发环境 版本号 项目创建方式
Mac 14.1.2 HBuilderX

产品分类:uniapp/App

PC开发环境操作系统:Mac

HBuilderX类型:正式

HBuilderX版本号:3.96

手机系统:Android

手机系统版本号:Android 14

手机厂商:模拟器

手机机型:模拟器

页面类型:vue

vue版本:vue2

打包方式:云端

示例代码:

<template>
    <view class="flex-column">  
        <view class="flex-column" style="padding: 24rpx 32rpx;">  
            <text class="text-title">{{newsDetailsData.title}}</text>  
            <view class="flex-row center-row space-between" style="margin-top: 20rpx;">  
                <text class="text-999">{{ isschool==1?newsDetailsData.createdAt:newsDetailsData.update_time }}</text>  
                <text class="text-999">{{ isschool==1?newsDetailsData.source: newsDetailsData.source}}</text>  
                <view class="flex-row center-row" v-if="isschool!='1'">  
                    <image style="width: 30rpx; height: 20rpx; margin: 0 5rpx 0 20rpx;"  
                        src="/static/images/public/eyes_n.png" mode="aspectFit"></image>  
                    <text class="text-999">{{$tool.formatReadNum(newsDetailsData.view_total)}}</text>  
                </view>  
            </view>  
        </view>  
        <view class="news-content container" v-html="newsDetailsData.content"></view>  
        <loading v-show="loadshow"></loading>  
    </view>  
</template>  

<script module="test" lang="renderjs">  
export default {  
    mounted() {  
        setTimeout(() => {  
            const aNodes = document.getElementsByTagName('a');  
            console.log('aaa', aNodes)  
            for(let i=0;i<aNodes.length;i++) {  
                let items = aNodes[i]  
                // console.log(item.href)  
                items.addEventListener('click', function(e) {  
                    e.preventDefault()  
                    console.log('==========', e)  
                });   
            }  
        }, 2000);  
    },  
    methods: {  
        // ...  
    }  
}  
</script>  

<script>  
import userManager from "../../../common/manager/user-manager.js"  
export default {  
    data() {  
        return {  
            loadshow: false,  
            ID: "",  
            newsListData: {},  
            newsDetailsData: {},  
            newsCollects: [],  
            isschool: 0,  
            shareData: {},  
            newId: null  
        }  
    },  
    onLoad(options) {  
        // 传递新闻ID进来的操作  
        console.log('新闻onload', options)  
        let data = null  
        if (options.id) {  
            this.newId = options.id  
            this.$request.newsDetail({ id: this.newId }).then(res => {  
                data = res.data  
                console.log('sssssss', res)  
                console.log(data);  
                this.newsListData = data  
                this.newsDetailsData = data  

                this.ID = this.newsDetailsData.id ? ('id_' + this.newsDetailsData.id) : ('nid_' + this.newsDetailsData.nid)  
            })  
        } else {  
            data = JSON.parse(decodeURIComponent(options.data))  
            console.log(data);  
            this.newId = data.id  
            this.newsListData = data  
            this.newsDetailsData = data  

            this.ID = this.newsDetailsData.id ? ('id_' + this.newsDetailsData.id) : ('nid_' + this.newsDetailsData.nid)  
        }  

        if (options.num == 1) {  
            this.isschool = 1  
        } else {  
            this.isschool = options.num  
        }  

        // 获取收藏本地  
        this.newsCollects = getApp().globalData.newsCollects  
        const isCollect = this.newsCollects.some(item => item == this.ID)  

        // 判断是否收藏  
        if (isCollect) {  
            this.setCollectBtnWith(true)  
        }  

        this.$nextTick(() => {  
            this.getSchoolNewsDetail()  
        })  
    }  
}  
</script>  

<style lang="scss" scoped>  
.container {  
    padding: 16rpx 32rpx 16rpx 32rpx;  

    tr td:nth-child(3) {  
      /* 样式属性 */  
      min-width: 3rem !important;  
    }  
}  

.text-title {  
    width: 100%;  
    color: #333333;  
    font-size: 40rpx;  
    font-weight: bold;  
}  

.text-999 {  
    color: #999;  
    font-size: 25rpx;  
}  
</style>

操作步骤:

  • 写上 <script module="test" lang="renderjs"></script> 保存就提示错误

预期结果:

  • 正常编译运行

实际结果:

  • 编译报错卡住
 [ERROR] Unterminated regular expression
17:27:58.049     <stdin>:21:9:
17:27:58.053       21  </script>
17:27:58.053                    ^
17:27:58.075 [plugin:uni:app-vue-renderjs] Build failed with 1 error:
17:27:58.088 <stdin>:21:9: ERROR: Unterminated regular expression

4 回复

已解决,script 标签得重写,并且手动换行


感谢你的反馈

什么意思,咋解决的

uni-app 中使用 renderjs 时,如果遇到编译出错的情况,可能的原因有很多。以下是一些常见的错误及其解决方法:

1. renderjs 文件未正确引入

  • 错误描述renderjs 文件未正确引入或路径错误。
  • 解决方法:确保 renderjs 文件的路径正确,并且在 vue 文件中正确引入。
<script module="renderjs" src="./renderjs.js"></script>

2. renderjs 文件语法错误

  • 错误描述renderjs 文件中存在语法错误,导致编译失败。
  • 解决方法:检查 renderjs 文件中的代码,确保语法正确,特别是 ES6 语法和 renderjs 特定语法。

3. renderjsvue 组件通信问题

  • 错误描述renderjsvue 组件之间的通信出现问题,导致数据传递失败或方法调用失败。
  • 解决方法:确保使用 this.$ownerInstance 来访问 vue 组件的方法和数据,并且正确使用 callMethodsetData 方法。
// 在 renderjs 中调用 vue 组件的方法
this.$ownerInstance.callMethod('methodName', { data: 'value' });

4. renderjs 文件未正确导出

  • 错误描述renderjs 文件未正确导出模块,导致无法在 vue 组件中使用。
  • 解决方法:确保 renderjs 文件正确导出模块。
export default {
  methods: {
    renderMethod() {
      // 你的渲染逻辑
    }
  }
};

5. renderjsvue 组件的生命周期冲突

  • 错误描述renderjsvue 组件的生命周期不一致,导致渲染顺序或时机出现问题。
  • 解决方法:确保 renderjs 的渲染逻辑与 vue 组件的生命周期保持一致,合理使用 mountedupdated 等生命周期钩子。

6. renderjs 依赖的库未正确引入

  • 错误描述renderjs 依赖的第三方库未正确引入或版本不兼容。
  • 解决方法:确保所有依赖的库都已正确引入,并且版本兼容。可以使用 npmyarn 安装依赖,并在 renderjs 文件中正确引入。
import * as THREE from 'three';

7. renderjs 文件未正确处理异步操作

  • 错误描述renderjs 文件中存在异步操作,但未正确处理,导致渲染失败。
  • 解决方法:确保异步操作正确使用 Promiseasync/await,并在渲染逻辑中正确处理异步结果。
async renderMethod() {
  const data = await fetchData();
  // 使用 data 进行渲染
}

8. renderjs 文件未正确处理事件

  • 错误描述renderjs 文件中未正确处理事件,导致事件无法触发或处理。
  • 解决方法:确保事件监听器正确绑定,并且在事件处理函数中正确处理事件。
this.$ownerInstance.callMethod('handleEvent', { event: 'click' });

9. renderjs 文件未正确处理样式

  • 错误描述renderjs 文件中未正确处理样式,导致渲染效果不符合预期。
  • 解决方法:确保样式正确应用,并且使用 renderjs 提供的样式处理方法。
this.$ownerInstance.setData({ style: 'color: red;' });

10. renderjs 文件未正确处理性能问题

  • 错误描述renderjs 文件中存在性能问题,导致渲染卡顿或崩溃。
  • 解决方法:优化渲染逻辑,减少不必要的渲染操作,使用 requestAnimationFrame 等方法优化性能。
function render() {
  // 渲染逻辑
  requestAnimationFrame(render);
}
render();

11. renderjs 文件未正确处理跨平台问题

  • 错误描述renderjs 文件未正确处理跨平台问题,导致在某些平台上无法正常运行。
  • 解决方法:确保 renderjs 文件中的代码兼容所有目标平台,使用条件编译或平台检测来处理平台差异。
#ifdef H5
// H5 平台特定代码
#endif

12. renderjs 文件未正确处理错误

  • 错误描述renderjs 文件中未正确处理错误,导致错误无法捕获或处理。
  • 解决方法:确保在 renderjs 文件中使用 try-catch 捕获错误,并在必要时将错误信息传递给 vue 组件。
try {
  // 渲染逻辑
} catch (error) {
  this.$ownerInstance.callMethod('handleError', { error: error.message });
}

13. renderjs 文件未正确处理资源加载

  • 错误描述renderjs 文件中未正确处理资源加载,导致资源无法加载或加载失败。
  • 解决方法:确保资源加载逻辑正确,使用 Promiseasync/await 处理异步加载,并在加载失败时进行错误处理。
async loadResource() {
  try {
    const resource = await loadImage('path/to/image.png');
    // 使用 resource 进行渲染
  } catch (error) {
    this.$ownerInstance.callMethod('handleError', { error: error.message });
  }
}

14. renderjs 文件未正确处理内存管理

  • 错误描述renderjs 文件中未正确处理内存管理,导致内存泄漏或性能下降。
  • 解决方法:确保在 renderjs 文件中正确释放不再使用的资源,避免内存泄漏。
function cleanup() {
  // 释放资源
}

15. renderjs 文件未正确处理调试信息

  • 错误描述renderjs 文件中未正确处理调试信息,导致调试困难。
  • 解决方法:在 renderjs 文件中使用 console.log 或其他调试工具输出调试信息,并在必要时将调试信息传递给 vue 组件。
console.log('Debug info:', debugInfo);
this.$ownerInstance.callMethod('handleDebugInfo', { debugInfo });

16. renderjs 文件未正确处理版本兼容性

  • 错误描述renderjs 文件中未正确处理版本兼容性,导致在不同版本的 uni-apprenderjs 中无法正常运行。
  • 解决方法:确保 renderjs 文件中的代码兼容所有目标版本,使用条件编译或版本检测来处理版本差异。
#ifdef UNI_APP_VERSION_2
// uni-app 2.x 版本特定代码
#endif

17. renderjs 文件未正确处理国际化

  • 错误描述renderjs 文件中未正确处理国际化,导致在不同语言环境下无法正常运行。
  • 解决方法:确保 renderjs 文件中的代码支持国际化,使用 vue-i18n 或其他国际化工具处理多语言支持。
const message = this.$ownerInstance.getData('message');

18. renderjs 文件未正确处理安全性

  • 错误描述renderjs 文件中未正确处理安全性,导致安全漏洞或数据泄露。
  • 解决方法:确保 renderjs 文件中的代码符合安全最佳实践,避免使用不安全的 API 或处理敏感数据。
// 避免使用 eval 或其他不安全的 API

19. renderjs 文件未正确处理性能监控

  • 错误描述renderjs 文件中未正确处理性能监控,导致无法监控渲染性能。
  • 解决方法:在 renderjs 文件中使用性能监控工具,如 performance API,监控渲染性能,并在必要时将性能数据传递给 vue 组件。
const startTime = performance.now();
// 渲染逻辑
const endTime = performance.now();
this.$ownerInstance.callMethod('handlePerformance', { duration: endTime - startTime });

20. renderjs 文件未正确处理日志记录

  • 错误描述renderjs 文件中未正确处理日志记录,导致无法记录渲染日志。
  • 解决方法:在 renderjs 文件中使用日志记录工具,如 console.logwinston,记录渲染日志,并在必要时将日志数据传递给 vue 组件。
console.log('Render log:', logData);
this.$ownerInstance.callMethod('handleLog', { logData });
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!