FinClip嵌套路由跳转后子页面内容不显示怎么办？

这个问题我之前也遇到过，确实挺让人头疼的，尤其是控制台不报错的时候。我们一步步来排查和解决。

首先你这个配置看起来没问题，路由路径、模板、样式都指定了，而且用了 navigateTo 跳转，说明是标准的小程序跳转方式。但子页面完全空白，连基础样式都没出来，那问题大概率出在 页面内容没有被正确挂载到 FinClip 的视图容器里。

原理是这样：FinClip 运行小程序时，会把每个页面的内容渲染进它内部封装的 view 容器中，而这个容器要求页面最外层必须是一个能被识别的块级组件。如果你的子页面 wxml 最外层用了比如 text、image 或者多个根节点并列，就会导致渲染失败，表现就是白屏。

所以第一步，检查你的 child.wxml 最外层是不是只有一个块级标签。

正确的写法应该是：

<view class="container">

  <text>我是子页面内容</text>

</view>

不能写成这样：

<text>我是子页面内容</text>

<text>另一个文本</text>

也不能这样：

<image src="/images/test.png" />

因为 FinClip 的渲染引擎和微信原生有点差异，对多根节点或非 view 根节点的支持更严格。即使微信开发者工具里能跑，在 FinClip 环境里可能就直接丢弃了整个节点树。

第二步，确认你的子页面 JS 文件有没有正确注册。

别光看路由配置，还要看你有没有在项目中通过 Page() 声明页面逻辑。例如你的 child.js 应该有：

Page({

  data: {

    title: '子页面'

  },

  onLoad() {

    console.log('子页面加载了')

  }

})

如果没注册这个 Page，FinClip 就不会初始化页面实例，虽然路由匹配上了，但没数据驱动，wxml 也不会渲染。

第三步，检查路径是否真的能访问到文件。

你配置里写的：

template: './child/child.wxml'

style: './child/child.wxss'

注意这里的路径是相对路径，FinClip 是以当前工作目录为基准解析的。建议改成绝对路径或者确保构建后这些资源确实被打包进去了。

你可以临时加个调试 log，在父页面跳转前打印一下这个路径对应的资源是否存在（虽然运行时不能直接读文件，但从打包结构可以验证）。

更稳妥的做法是统一用 / 开头的绝对路径：

{

  path: '/pages/child',

  alias: '/child',

  config: {},

  template: '/pages/child/child.wxml',

  style: '/pages/child/child.wxss'

}

这样不容易出错。

第四步，确认 FinClip SDK 版本是否支持这种嵌套路由写法。

老版本的 FinClip 对子页面加载有一些 bug，特别是从主包跳转到未预加载的子页面时，可能会异步加载失败但不抛错。建议升级到 finclip-sdk >= 2.30.0 以上版本，并在初始化时开启调试模式：

FAT.init({

  appId: 'your-app-id',

  appKey: 'your-app-key',

  debug: true, // 打开调试

  apiPrefix: '/finclip-api'

})

打开 debug 后，浏览器控制台会输出更多加载日志，比如 “Page loaded: /pages/child” 或者 “Failed to load template”，这样你就能看到底是没加载模板，还是模板解析失败。

最后一个小技巧：你在子页面 wxml 里加一个明显背景色，排除 CSS 优先级问题。

比如 child.wxss 加上：

.container {

  min-height: 100vh;

  background: pink; /* 明显颜色 */

  display: flex;

  align-items: center;

  justify-content: center;

}

如果还是白屏，那就是根本没渲染进来；如果有粉红背景出来了，说明是内容空了，那再查 data 绑定问题。

总结一下你应该做的几件事：

1. 改子页面 wxml 最外层为 view 包裹
2. 确保 child.js 正确调用 Page() 初始化
3. 把 template 和 style 路径改为绝对路径写法
4. 升级 FinClip SDK 并开启 debug 查日志
5. 加个背景色测试是否渲染成功

我上次就是因为忘了加 view 外壳，折腾了半天以为是路由错了，结果只是根节点不合法被静默忽略了。FinClip 这块处理太安静了，不出错也不提醒，特别坑。

按上面改一遍，基本都能解决。要是还有问题，把 debug 日志贴出来再看看。

这问题我之前踩过，子页面空白基本是模板路径没对上。你路由配置里的 template 路径写的是相对路径 ./child/child.wxml，但 FinClip 内部解析时可能找不到这个文件。

改成绝对路径就完事了。假设你的项目根目录是 /packages/app，那应该写成：

template: '/pages/child/child.wxml'

另外确认下子页面的 JS 文件有没有正确注册页面。哪怕 wxml 结构简单，也得有 Page() 调用，不然也不会渲染：

// child.js

Page({

  data: {}

})

还有个坑点：FinClip 的 view 组件必须闭合，不能写 这种自闭合，得写成 ，否则整个页面不渲染。检查下你的 child.wxml 里是不是用了自闭合标签。

代码放这了，改完这三处基本就能显示了。