uni-app HBuilderX 编写模板字符串报错

uni-app HBuilderX 编写模板字符串报错

开发环境 版本号 项目创建方式
HbuilderX 3.1.8

产品分类：HbuilderX
PC开发环境操作系统：Windows
PC开发环境操作系统版本号：10.0.18363

示例代码：

// #ifdef H5  
const jsSDKConfig = require('@/utils/js_sdk_config');  
jsSDKConfig().then(res => {  
this.wxOpenTag = `<wx-open-launch-weapp id="launch-btn" username="gh_0deffffc8232" path="pages/index/index">  
    <script type="text/wxtag-template">  
        <style>  
            .receivebtn {  
                border: none;  
                outline: none;  
                width: 330px;  
                height: 440px;  
                background-color: transparent;  
                -webkit-tap-highlight-color: transparent;  
            }  
            </style>  
            <button class="receivebtn"></button>  
    </script>  
        </wx-open-launch-weapp>`;  
});  
// #endif

操作步骤：

已贴示例代码

预期结果：

不报错

实际结果：

15:09:57.285 开始差量编译...  
15:09:57.438 script节点 条件编译失败,参考示例(注意 ifdef 与 endif 必须配对使用):  
15:09:57.438 // #ifdef  %PLATFORM%  
15:09:57.441 js代码  
15:09:57.441 // #endif  
15:09:57.444  at pages/detail/detail.vue:1  
15:09:57.444 script节点 条件编译失败,参考示例(注意 ifdef 与 endif 必须配对使用):  
15:09:57.446 // #ifdef  %PLATFORM%  
15:09:57.447 js代码  
15:09:57.449 // #endif  
15:09:57.449  at pages/detail/detail.vue:1  
15:09:57.603 Module build failed (from ./node_modules/babel-loader/lib/index.js):  
15:09:57.603 语法错误: D:\Code\SaaS-task-out-food\pages\detail\detail.vue: Unterminated template (122:21)  
15:09:57.606   120 |        const jsSDKConfig = require('@/utils/js_sdk_config');  
15:09:57.607   121 |        jsSDKConfig().then(res => {  
15:09:57.609 > 122 |            this.wxOpenTag = `<wx-open-launch-weapp id="launch-btn" username="gh_0ded1efc8232" path="pages/index/index">  
15:09:57.610       |                              ^  
15:09:57.612   123 |                    <script type="text/wxtag-template">  
15:09:57.612   124 |                        <style scoped>  
15:09:57.614   125 |                            .receivebtn {  
15:09:57.614       at pages\detail\detail.vue:122

更多关于uni-app HBuilderX 编写模板字符串报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app HBuilderX 编写模板字符串报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


模板字符串中的嵌套标签导致了解析错误。问题在于模板字符串内包含的<script>和<style>标签被错误解析。

解决方案：

  1. 将模板字符串中的嵌套标签转义为普通文本：
this.wxOpenTag = `<wx-open-launch-weapp id="launch-btn" username="gh_0deffffc8232" path="pages/index/index">  
    ${"<script type=\"text/wxtag-template\">"}  
        ${"<style>"}  
            .receivebtn {  
                border: none;  
                outline: none;  
                width: 330px;  
                height: 440px;  
                background-color: transparent;  
                -webkit-tap-highlight-color: transparent;  
            }  
            ${"</style>"}  
            ${"<button class=\"receivebtn\"></button>"}  
    ${"</script>"}  
</wx-open-launch-weapp>`;
  1. 或者将HTML内容单独提取到data中，通过v-html渲染：
// 在data中定义
wxOpenTag: ''

// 在方法中赋值
this.wxOpenTag = `完整的HTML字符串`
回到顶部