原生小程序中集成Taro生成的页面

一.首先将taro小程序打包成一个单独的分包

 1）以混合模式进行打包

编译项目时使用 --blended 参数以输出混合模式的代码。

taro build --type weapp --blended

taro build --type weapp --watch --blended

Taro 编译分为 dev 和 build 模式：

• dev 模式（增加 --watch 参数） 将会监听文件修改。
• build 模式（去掉 --watch 参数） 将不会监听文件修改，并会对代码进行压缩打包。
• dev 模式生成的文件较大，设置环境变量 NODE_ENV 为 production 可以开启压缩，方便预览，但编译速度会下降。

 在打包出来的 app.js 中会暴露出 taroApp，供我们在原生小程序的 app.js 页面下去调用其生命周期

 但是存在这样一个问题，在执行我们的原生小程序项目时，我们通过引用在原生项目下的 ​​app.js​​​ 里引入 Taro 项目的入口文件，来提前初始化一些运行时的逻辑，因此要保证 Taro 项目下的 ​​app.js​​ 文件里的逻辑能优先执行。所以说只是 --blended 命令这种，只适合主包的页面，分包的话，没法优先执行。

2）解决分包开发，引入 @tarojs/plugin-indie 插件

 安装插件 @tarojs/plugin-indie

使用插件

config/index.js

const config = {

plugins: [

'@tarojs/plugin-indie'

]

}

3）手写 @tarojs/plugin-mv 插件，自动化挪动打包后的文件

二、移动 Taro 项目的输出目录到原生项目内

在处理好分包的打包流程后，我们在原生小程序的 pages 页面下建立一个页面文件夹 miniapp，用来放Taro完整的分包。为了导入我们 Taro 项目下打包出的分包页面。然后在原生小程序的 app.json 中，引入分包的路径配置。

三、 原生项目的 app.js 中引用 Taro 入口文件

app.config.js

// 必须引用 Taro 项目的入口文件
const taroApp = require('./taro/app.js').taroApp

App({
  onShow() {
    // 可选，调用 Taro 项目 app 的 onShow 生命周期
    taroApp.onShow()
  },

  onHide() {
    // 可选，调用 Taro 项目 app 的 onHide 生命周期
    taroApp.onHide()
  },
})