BugFix攻略记录 —— tdeisng-miniprogram

仓库地址：tdesign-miniprogram
欢迎bug、欢迎feature，欢迎star～

Q1: issue 1760: ActionSheet 组件 在page页面引入即报错

复现步骤：

版本： 1.1.6版本及以下
code：

// app.json - 全局引入了组件
"usingComponents": { 
"t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet" },

// index.js - 使用组件
import ActionSheet, { ActionSheetTheme, } from "tdesign-miniprogram/action-sheet/index";

//  index.wxml - 使用组件
<t-action-sheet id="t-action-sheet" />

结果

结果解读

• 引入就报错
• 出现页面级Error

有些纳闷，因为在我们官方的示例中是使用正常的，但为什么在用户使用过程中，会出现引入即报错，并且微信开发者工具控制台出现的还是页面级错误？？

原因分析

组件导出：

使用import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index';导入的是 ActionSheet，实际上是完整的 ActionSheet 组件实例，而官方示例实际是以组件形式展示而非page页面，所以没有出现页面级错误。而用户在page上使用时，我想大概将组件实例识别成了页面，所以出现了： Please do not redister multiple Pages in xxx/xxx/xxx/js

解决方案
不再直接导出 ActionSheet 组件，仅导出组件实例方法。

Q2: navigator组件嵌套 t-button 时，无法跳转

复现步骤：

版本： 1.x.x 任意版本
code：

<navigator url="/test/test">
  <t-button bindtap="onClick">
    tdesign 按钮
  </t-button>
</navigator>

结果
无法跳转

结果分析
t-button 组件提供的 tap 事件是使用 catch:tap 实现，导致外层使用bindtap时无法冒泡向上传递，进而无法触发 navigator 的事件。

catch会导致无法触发 navigator 的事件。

<!--  navigator 无法跳转 -->
<navigator url="/test/test">
  <view catchtap="onClick">
    原生按钮
  </view>
</navigator>

解决方案
catch 会导致无法触发 navigator 的事件，改用 bind，可修复。

但使用 bindtap 后意外发现自定义组件的 tap 事件会被触发2次，怀疑是同名引起。