[NervJS/taro]支持支付宝小程序启用2.0构建

这个特性解决了什么问题？

支付宝小程序很多API需要用到基础库2.X 比如Taro.onPageNotFound，在 Taro 3.3.5 构建后支付宝小程序环境内直接报错：TypeError: _tarojs_taro__WEBPACK_IMPORTED_MODULE_4___default.a.onPageNotFound is not a function; 因为支付宝小程序该API介绍需要 基础库 2.7.2 或更高版本

目前的问题是，按照支付宝小程序基础库2.x启用文档，勾选【启用小程序基础库 2.0 构建】后编译报错：

Failed to compile
Module build failed (from C:/snapshot/code-repo/out/target/bundle/node_modules/@ali/antcube-thread-loader/lib/cjs.js):
Thread Loader (Worker 0)
slot 的祖先节点中未找到 element
at (d:\xxx\dist\alipay\base.axml:319:8)
317: 
318: <template name="tmpl_0_slot">
319:   <view slot="{{i.name}}"  id="{{i.uid}}">
             ^
320:     <block a:for="{{i.cn}}" a:key="uid">
321:       <template is="{{xs.e(0)}}" data="{{i:item}}" />

at (d:\xxx\dist\alipay\base.axml:319:8)
Module build failed (from C:/snapshot/code-repo/out/target/bundle/node_modules/@ali/antcube-thread-loader/lib/cjs.js):
Thread Loader (Worker 0)
slot 的祖先节点中未找到 element
at (d:\xxx\dist\alipay\pages-qr\pages\qrBarCode\qrBarCode.axml:321:8)
319: 
320: <template name="tmpl_0_slot">
321:   <view slot="{{i.name}}"  id="{{i.uid}}">
             ^
322:     <block a:for="{{i.cn}}" a:key="uid">
323:       <template is="{{xs.e(0)}}" data="{{i:item}}" />

at (d:\xxx\dist\alipay\pages-qr\pages\qrBarCode\qrBarCode.axml:321:8)
Module build failed (from C:/snapshot/code-repo/out/target/bundle/node_modules/@ali/antcube-thread-loader/lib/cjs.js):
Thread Loader (Worker 0)
slot 的祖先节点中未找到 element
at (d:\xxx\dist\alipay\pages\citySwitch\index.axml:321:8)
319: 
320: <template name="tmpl_0_slot">
321:   <view slot="{{i.name}}"  id="{{i.uid}}">
             ^
322:     <block a:for="{{i.cn}}" a:key="uid">
323:       <template is="{{xs.e(0)}}" data="{{i:item}}" />

at

这个 API 长什么样？

支持在支付宝小程序内勾选【启用小程序基础库 2.0 构建】

biluochun

@biluochun 这个报错好像不是必现，可以提供一下 Demo 吗？

Chen-jj

我前面也提过issue 开了基础库2就会直接报祖先节点找不到的错误而且现在支付宝小程序很多api都是2.0以上才支持

qsjc

@biluochun 这个报错好像不是必现，可以提供一下 Demo 吗？我再去启动2.0构建时，发现当前的项目报错变成了获取 ext 信息为undefined，后查支付宝文档发现是模板小程序开发的文档有变更：https://opendocs.alipay.com/mini/isv/creatminiapp （未启用2.0构建时是配置在app.config.ts: ext: {} ）按照文档配置了ext.json后，发现没有上面的slot 的祖先节点中未找到 element 这种报错信息出现了。目前暂时没有复现，已经正常启用2.0构建。

biluochun

demo项目不会有问题当项目大起来有点复杂度的时候直接就歇菜了我们这边是写了很多之后开启2.0发现直接就报错了想找原因都很难找到

qsjc

demo项目不会有问题当项目大起来有点复杂度的时候直接就歇菜了我们这边是写了很多之后开启2.0发现直接就报错了想找原因都很难找到

试一下删代码排错。删除一半的代码，定位原因在哪一半。持续删下去。

biluochun

@biluochun @Chen-jj
当前我在项目中验证到的情况是如果我在组件中使用了<slot></slot> 那么就会出现上述情况然后我在官方的NumberSubmit组件中加入插槽<slot></slot>标签然后也出现了上述现象

qsjc

@Chen-jj 直接原因是支付宝不再支持 slot 在祖先没有非实体元素内，例如

<template>
  <!-- compile error -->
  <view slot="content"></view>
</template>

<some-demo>
  <!-- works -->
  <view slot="content"></view>
</some-demo>

当然不止 template，还有 block 也是这样的。

XGHeaven

备忘：

在支付宝小程序的所有 axml 模板中，把第三方自定义组件的 children 变为这样就可以在支付宝 2.0 正常使用 slot 了：

<!-- 假设有一个第三方原生组件 article  -->
<template name="tmpl_0_article">
  <article text="{{ i.text }}"  id="{{i.uid}}">
    <block a:for="{{i.cn}}" a:key="uid">
      <!-- 子元素是 slot 时，直接处理，不再去引用 template -->
      <view a:if="{{item.nn==='slot'}}" slot="{{item.name}}" id="{{item.uid}}">
        <block a:for="{{item.cn}}" a:key="uid">
          <template is="{{xs.e(0)}}" data="{{i:item}}" />
        </block>
      </view>
      <!-- 子元素是普通节点时正常引用 template -->
      <template a:else is="{{xs.e(0)}}" data="{{i:item}}" />
    </block>
  </article>
</template>

除了修改 @tarojs/plugin-plaftorm-alipay 去处理模板之外，还需要修改 @tarojs/mini-runner 里的 src/plugins/TaroNormalModulesPlugin，把

prop.properties
  .filter(p => p.type === 'Property' && p.key.type === 'Identifier')
  .forEach(p => attrs.add(p.key.name))

改为：

prop.properties
  .filter(p => p.type === 'Property' && p.key.type === 'Identifier' && p.key.name !== 'children')
  .forEach(p => attrs.add(p.key.name))

下个版本处理

Chen-jj

新的版本似乎并没有解决slot 的祖先节点中未找到 element的问题呀

qsjc

新的版本似乎并没有解决slot 的祖先节点中未找到 element的问题呀

还没发版，等等这周发 3.3.17

Chen-jj

新的版本似乎并没有解决slot 的祖先节点中未找到 element的问题呀

还没发版，等等这周发 3.3.17

Chen-jj 你好，我已经升到了3.3.17，但这个问题依然存在

git-onepixel

1.问题反馈：已经升到了3.3.17, slot 的祖先节点中未找到 element 依然存在。

2.依赖包更新列表： "@tarojs/components": "3.3.17", "@tarojs/react": "3.3.17", "@tarojs/runtime": "3.3.17", "@tarojs/taro": "3.3.17", "@hb/codestyle-linter": "3.7.17", "@tarojs/mini-runner": "3.3.17", "@tarojs/plugin-platform-alipay": "3.3.17", "@tarojs/plugin-platform-jd": "3.3.17", "@tarojs/plugin-platform-qq": "3.3.17", "@tarojs/plugin-platform-swan": "3.3.17", "@tarojs/plugin-platform-tt": "3.3.17", "@tarojs/plugin-platform-weapp": "3.3.17", "@tarojs/webpack-runner": "3.3.17", "babel-preset-taro": "3.3.17",

3.错误信息： Module build failed (from /snapshot/code-repo/out/target/bundle/node_modules/@ali/antcube-thread-loader/lib/cjs.js): Thread Loader (Worker 0) slot 的祖先节点中未找到 element at (/Users/xxx/base.axml:319:8)

  <template name="tmpl_0_slot-view">
    <view slot="{{i.name}}"  id="{{i.uid}}">
             ^
    <block a:for="{{i.cn}}" a:key="uid">
  <template is="{{xs.e(0)}}" data="{{i:item}}" />

4.前置操作：更新版本号后，删除node_modules 重新安装构建

git-onepixel

@git-onepixel 是使用的 taro vue 么

依赖里找 @tarojs/plugin-platform-alipay，找到这里，加一行 delete result['slot-view'] 试试

Chen-jj

@git-onepixel 是使用的 taro vue 么

依赖里找 @tarojs/plugin-platform-alipay，找到这里，加一行 delete result['slot-view'] 试试

我用的是taro+react，你的方法我再试试！

git-onepixel

@git-onepixel 是使用的 taro vue 么依赖里找 @tarojs/plugin-platform-alipay，找到这里，加一行 delete result['slot-view'] 试试

我用的是taro+react，你的方法我再试试！

我也用的是Taro+React，用这个方法试了试，OK的

Naico

delete result['slot-view']

加上 delete result['slot-view'] 就可以了，通过 patch-package 已解决该问题。

git-onepixel

@git-onepixel @Naico 尴尬，应该是测试时漏了这种情况，下个版本修复的。

Chen-jj

下个版本啥时候啊啊啊快要上线了

l644738595

下个版本啥时候啊啊啊快要上线了

milestone 上面剩下几个搞定就发版，预计明天就可以

ZakaryCode

下个版本啥时候啊啊啊快要上线了

milestone 上面剩下几个搞定就发版，预计明天就可以

好的感谢我用的3.4.beta 记得也合并发布下

l644738595

[NervJS/taro]支持支付宝小程序启用2.0构建

回答