微信小程序如何在单页面内嵌套可独立执行JS的同应用本地页面

微信小程序支持实现同应用内页面嵌套的需求，效果等价于iframe嵌入，可实现被嵌套页面独立运行JS逻辑，可通过以下两种方案实现：

方案一：使用原生 <native-page> 组件（推荐） #

该方案适用于基础库版本要求 ≥ 2.30.0的项目，无需修改原有被嵌套页面的代码，完全满足需求。
配置步骤如下：

• 在父页面的.json配置文件中开启原生页面嵌套权限：

{
  "usingComponents": {},
  "nativePageConfig": {
    "enable": true
  }
}

• 在父页面的.wxml文件中插入嵌套组件，指定目标页面的绝对路径：

<native-page 
  src="/pages/要嵌套的页面路径/index" 
  style="width: 100%; height: 600px;"
/>

核心特性 #

• 被嵌套页面完全独立运行，生命周期、数据、JS逻辑和父页面完全隔离，互不干扰
• 支持通过postMessage接口实现父子页面之间的通信
• 渲染层级高于普通原生组件，和web-view层级逻辑一致

限制说明 #

• 仅支持嵌套同主体小程序的内部页面，无法嵌套第三方小程序页面或外部网页
• 嵌套的页面不能是tabBar注册页面
• 必须为组件显式设置固定高度，不支持高度自适应

方案二：封装自定义组件（兼容低版本基础库） #

如果你的项目需要兼容2.30.0以下版本的基础库，可以将待嵌套的页面逻辑整体封装为独立自定义组件：

• 将原页面的wxml、wxss代码迁移到自定义组件的对应文件中
• 将原页面的js逻辑按照自定义组件的规范调整，原有页面生命周期对应修改为组件生命周期，原有页面方法放入methods中
• 在父页面的json配置中引入该自定义组件，直接在wxml中调用即可
  该方案的不足为：组件和父页面同属一个渲染上下文，没有完全的逻辑隔离，需要自行处理命名冲突、数据隔离的问题。

内容的提问来源于stack exchange，提问作者Jaime Roman