Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

windows环境微信小程序转Taro后再转RN运行会报TaroParseaTmpl.js文件找不到错误 #3569

Merged
merged 1 commit into from
Jun 27, 2019

Conversation

MR-fisher
Copy link
Contributor

@MR-fisher MR-fisher commented Jun 27, 2019

问题描述
微信小程序转Taro后再转RN直接运行会报TaroParseaTmpl.js文件找不到错误:
image
Taro官方给出了解决方案
但是,问题并没有解决,经分析发现,是因为taro convert命令执行完成后会在taroConvert/src/imports/目录下生成“TaroParse * Tmpl.js”文件,这些文件是基于微信小程序wxParse/wxParse.xml文件转换而来。在windows系统下,因为windows不区分文件名字母大小写,TaroParseATmpl.js文件会与TaroParseaTmpl.js文件命名冲突,导致TaroParseaTmpl.js文件生成不了,代码运行时就会报TaroParseaTmpl.js文件找不到。

源码中打console输出tmpl文件名生成情况:
image
taro convert指令执行后,imports目录下的文件生成情况:
image

分析taro-cli源码发现,tmpl文件的命名规则是从a, b, c, d, e, f, g, h, i, j, z的字符集中取值作为命名关键字以区分不同的tmpl文件。调整下字符集,去掉a,加个k就可以规避了。

复现步骤
1.微信小程序项目中wxParse/wxParse.xml文件内容中循环模版只留wxParse1和wxParse2,1调2,2调1,其他wxParse2-10都去掉。

 <!--基础元素-->
<template name="wxParseVideo">
    <!--增加video标签支持,并循环添加-->
    <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.attr.style}}">
        <video class="{{item.classStr}} wxParse-{{item.tag}}-video" src="{{item.attr.src}}"></video>
    </view>
</template>

<template name="wxParseA">
    <text class="{{item.classStr}} wxParse-{{item.tag}}"  style="{{item.attr.style}}">
        {{item.child[0].text}}({{item.attr.href}})
    </text>
</template>
<template name="wxParseImg">
    <image class="{{item.classStr}} wxParse-{{item.tag}}" data-from="{{item.from}}" data-src="{{item.attr.src}}"  data-sid="{{item.imgIndex}}"  src="{{item.attr.src}}" mode="aspectFit" bindload="wxParseImgLoad" bindtap="wxParseImgTap" style="width:{{item.width}}px;height:{{item.height}}px;{{item.attr.style}}"   />
</template>

<template name="wxParseTable">
</template>

<!--入口模版-->

<template name="wxParse">
    <block wx:for="{{wxParseData}}" wx:key="">
        <template is="wxParse1" data="{{item}}"/>
    </block>
</template>

<!--循环模版-->
<template name="wxParse1">
    <!--<template is="wxParse2" data="{{item}}" />-->
    <!--判断是否是标签节点-->
    
    <block wx:if="{{item.node == 'element'}}">
        <block wx:if="{{item.tag == 'button'}}">
            <button type="default" size="mini" >
                <block wx:for="{{item.child}}" wx:for-item="item" wx:key="">
                    <template is="wxParse2" data="{{item}}"/>
                </block>
             </button>
        </block>
        <!--li类型-->
        <block wx:elif="{{item.tag == 'li'}}">
            <view class="{{item.classStr}} wxParse-li">
                <view class="{{item.classStr}} wxParse-li-inner">
                    <view class="{{item.classStr}} wxParse-li-text">
                        <text class="{{item.classStr}} wxParse-li-circle"></text>
                    </view>
                    <view class="{{item.classStr}} wxParse-li-text">
                        <block wx:for="{{item.child}}" wx:for-item="item" wx:key="">
                            <template is="wxParse2" data="{{item}}"/>
                        </block>
                    </view>
                </view>
            </view>
        </block>

        <!--video类型-->
        <block wx:elif="{{item.tag == 'video'}}">
            <template is="wxParseVideo" data="{{item}}"/>  
        </block>

        <!--img类型-->
        <block wx:elif="{{item.tag == 'img'}}">
            <template is="wxParseImg" data="{{item}}"/>
        </block>

        <!--a类型-->
        <block wx:elif="{{item.tag == 'a'}}">
            <template is="wxParseA" data="{{item}}"/> 
        </block>

        <!--table类型-->
        <block wx:elif="{{item.tag == 'table'}}">
            <scroll-view class="wxParse-table">
                <block  wx:for="{{item.child}}" wx:for-item="item" wx:key="">       
                    <template is="wxParse2" data="{{item}}"/>                 
                </block>
            </scroll-view>
        </block>
        
        <!--其他块级标签-->
        <block wx:elif="{{item.tagType == 'block'}}">
            <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.attr.style}}">
                <block  wx:for="{{item.child}}" wx:for-item="item" wx:key="">       
                    <template is="wxParse2" data="{{item}}"/>                 
                </block>
            </view>
        </block>

        <!--内联标签-->
        <text wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.attr.style}}">
            <block  wx:for="{{item.child}}" wx:for-item="item" wx:key="">       
                <template is="wxParse2" data="{{item}}"/>                 
            </block>
        </text>

    </block>

    <!--判断是否是文本节点-->
    <block wx:elif="{{item.node == 'text'}}">
        <!--如果是,直接进行-->
        <text class="{{item.text == '\\n' ? 'wxParse-hide':''}}">{{item.text}}</text>
    </block>

</template>

<template name="wxParse2">
    <!--<template is="wxParse1" data="{{item}}" />-->
    <!--判断是否是标签节点-->
    
    <block wx:if="{{item.node == 'element'}}">
        <block wx:if="{{item.tag == 'button'}}">
            <button type="default" size="mini" >
                <block wx:for="{{item.child}}" wx:for-item="item" wx:key="">
                    <template is="wxParse1" data="{{item}}"/>
                </block>
             </button>
        </block>
        <!--li类型-->
        <block wx:elif="{{item.tag == 'li'}}">
            <view class="{{item.classStr}} wxParse-li">
                <view class="{{item.classStr}} wxParse-li-inner">
                    <view class="{{item.classStr}} wxParse-li-text">
                        <text class="{{item.classStr}} wxParse-li-circle"></text>
                    </view>
                    <view class="{{item.classStr}} wxParse-li-text">
                        <block wx:for="{{item.child}}" wx:for-item="item" wx:key="">
                            <template is="wxParse1" data="{{item}}"/>
                        </block>
                    </view>
                </view>
            </view>
        </block>

        <!--video类型-->
        <block wx:elif="{{item.tag == 'video'}}">
            <template is="wxParseVideo" data="{{item}}"/>  
        </block>

        <!--img类型-->
        <block wx:elif="{{item.tag == 'img'}}">
            <template is="wxParseImg" data="{{item}}"/>
        </block>

        <!--a类型-->
        <block wx:elif="{{item.tag == 'a'}}">
            <template is="wxParseA" data="{{item}}"/> 
        </block>
        
        <!--其他块级标签-->
        <block wx:elif="{{item.tagType == 'block'}}">
            <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.attr.style}}">
                <block  wx:for="{{item.child}}" wx:for-item="item" wx:key="">       
                    <template is="wxParse1" data="{{item}}"/>                 
                </block>
            </view>
        </block>

        <!--内联标签-->
        <text wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.attr.style}}">
            <block  wx:for="{{item.child}}" wx:for-item="item" wx:key="">       
                <template is="wxParse1" data="{{item}}"/>                 
            </block>
        </text>
    </block>

    <!--判断是否是文本节点-->
    <block wx:elif="{{item.node == 'text'}}">
        <!--如果是,直接进行-->
        <text class="{{item.text == '\\n' ? 'wxParse-hide':''}}">{{item.text}}</text>
    </block>
</template>

2.在微信小程序根目录下执行taro转换指令taro convert
3.进入taroConvert目录,执行npm install,安装完后执行npm run build:rn
4.构建出来的程序放到rn环境编译执行,报错

期望行为
希望windows下微信小程序转Taro时能生成正确的tmpl文件

报错信息
image

系统信息

  • 操作系统 windows7
  • Taro版本 v1.3.4
  • NodeJS版本 v10.15.3
  • 报错平台 RN

这个 PR 是什么类型? (至少选择一个)

  • 错误修复(Bugfix) issue id #
  • 新功能(Feature)
  • 代码重构(Refactor)
  • TypeScript 类型定义修改(Typings)
  • 文档修改(Docs)
  • 代码风格更新(Code style update)
  • 其他,请描述(Other, please describe):

这个 PR 满足以下需求:

  • 提交到 master 分支
  • Commit 信息遵循 Angular Style Commit Message Conventions
  • 所有测试用例已经通过
  • 代码遵循相关包中的 .eslintrc, .tslintrc, .stylelintrc 所规定的规范
  • 在本地测试可用,不会影响到其它功能

这个 PR 涉及以下平台:

  • 微信小程序
  • 支付宝小程序
  • 百度小程序
  • 头条小程序
  • QQ 轻应用
  • 快应用平台(QuickApp)
  • Web 平台(H5)
  • 移动端(React-Native)

其它需要 Reviewer 或社区知晓的内容:

生成tmpl文件时,在windows系统下,TaroParseATmpl.js文件会与TaroParseaTmpl.js文件命名冲突,导致TaroParseaTmpl.js文件生成不了,代码运行时报TaroParseaTmpl.js文件找不到,因为windows不区分文件名字母大小写,会认为是同一个文件。
@MR-fisher MR-fisher changed the title 微信小程序转Taro后再转RN直接运行会报TaroParseaTmpl.js文件找不到错误 windows环境微信小程序转Taro后再转RN直接运行会报TaroParseaTmpl.js文件找不到错 Jun 27, 2019
@MR-fisher MR-fisher changed the title windows环境微信小程序转Taro后再转RN直接运行会报TaroParseaTmpl.js文件找不到错 windows环境微信小程序转Taro后再转RN直接运行会报TaroParseaTmpl.js文件找不到错误 Jun 27, 2019
@MR-fisher MR-fisher changed the title windows环境微信小程序转Taro后再转RN直接运行会报TaroParseaTmpl.js文件找不到错误 windows环境微信小程序转Taro后再转RN运行会报TaroParseaTmpl.js文件找不到错误 Jun 27, 2019
@luckyadam luckyadam merged commit b826b11 into NervJS:master Jun 27, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants