小程序使用 Taro 和原生混合开发方案的探索 about blog

[luckyadam]

学习了～

[rottenpen]

@luckyadam 不敢当不敢当 都是基于你们开的口子做的

[wzono]

问题很大，包体积增加很多（因为app.js）重复打包，很容易超过wechat的2MB限制

[rottenpen]

@wingsico 你指的重复打包是？如果本来的 app.config 写上 native 包的 page 的话是会被重复打包

[rottenpen]

@wingsico 更新了上面的文章 你可以看看

[wzono]

@wingsico 你指的重复打包是？如果本来的 app.config 写上 native 包的 page 的话是会被重复打包

问题存在于app.js，因为app.js引入了global.js，global.js存在对一些较大的文件（假设在native的utils目录中）的引入，那么打包后的app.js包含这些大文件，同时dist目录中由于使用了cp，把native的所有文件都复制过去了，此时就会造成app.js里有一份代码，native里还有一份。

[wzono]

@wingsico 你指的重复打包是？如果本来的 app.config 写上 native 包的 page 的话是会被重复打包

问题存在于app.js，因为app.js引入了global.js，global.js存在对一些较大的文件（假设在native的utils目录中）的引入，那么打包后的app.js包含这些大文件，同时dist目录中由于使用了cp，把native的所有文件都复制过去了，此时就会造成app.js里有一份代码，native里还有一份。

除此之外，global的编写也存在一些小问题，假设原有的App option逻辑中含有生命周期钩子，那么仅使用这样的写法是不会调用生命周期钩子的（对于Taro Next Vue版本来说，React应该没有类似问题）

[wzono]

实际上usingComponents还是比较好用的，可以通过这个来引用原生的组件，但没法在原生里引用Taro组件（目前来说）。

而且要运行原生小程序，在app.config.js里写pages指向原生页面即可，目前没遇到什么问题。

之前困扰我的是如何处理在原生中的顶层（App.js）逻辑，看了你的方案得到启发，可以提取出来重写getApp，但你的方案存在一定漏洞，因此我稍稍更改了一下，更符合Vue的风格，同时最小程度的入侵Vue。

// global.js
const _getApp = getApp;
const _options = { ... };
const _app = Object.assign(_options, _getApp());

export default {
  install: () => { getApp = () => app }
}

// 注入生命周期（Vue自带的Mixin无法混入小程序生命周期）
export const withMixin = App => {
  const { $options } = App;
  const { onHide, onLaunch, onError, onShow } = $options;
  App.$options = {
    ...$options,
    onLaunch(options) {
      _app.onLaunch && _app.onLaunch(options);
      onLaunch && onLaunch();
    },
    onShow(options) {
      _app.onShow && _app.onShow(options);
      onShow && onShow();
    },
    onHide() {
      _app.onHide && _app.onHide();
      onHide && onHide();
    },
    onError(err) {
      _app.onError && _app.onError(err);
      onError && onError();
    }
  };
  return App;
};

// app.js
import GetAppPlugin, { withMixin } from "./global";
Vue.use(GetAppPlugin);
const App = new Vue({
  store,
  onLaunch(options) {},
  onShow(options) {},
  onHide() {},
  onError(err) {},
  render(h) {
    // this.$slots.default 是将要会渲染的页面
    return h("block", this.$slots.default);
  }
});

export default withMixin(App);

这样的话可以正常触发生命周期，且可以通过Taro打包原生（若原生想引用vuex的状态变量，在global.js中的options注入即可）

[rottenpen]

@wingsico 你指的重复打包是？如果本来的 app.config 写上 native 包的 page 的话是会被重复打包

问题存在于app.js，因为app.js引入了global.js，global.js存在对一些较大的文件（假设在native的utils目录中）的引入，那么打包后的app.js包含这些大文件，同时dist目录中由于使用了cp，把native的所有文件都复制过去了，此时就会造成app.js里有一份代码，native里还有一份。

除此之外，global的编写也存在一些小问题，假设原有的App option逻辑中含有生命周期钩子，那么仅使用这样的写法是不会调用生命周期钩子的（对于Taro Next Vue版本来说，React应该没有类似问题）

主要是我 native 的包 app.js 没有注入太多生命周期，没想到相关生命周期的问题。后面我写demo出来会注意这点的，谢谢大佬提醒啦。

关于重复打包的问题你看看要不要用 addchunkpage 来抽离 taro 包的依赖引入？

[rottenpen]

实际上usingComponents还是比较好用的，可以通过这个来引用原生的组件，但没法在原生里引用Taro组件（目前来说）。

而且要运行原生小程序，在app.config.js里写pages指向原生页面即可，目前没遇到什么问题。

之前困扰我的是如何处理在原生中的顶层（App.js）逻辑，看了你的方案得到启发，可以提取出来重写getApp，但你的方案存在一定漏洞，因此我稍稍更改了一下，更符合Vue的风格，同时最小程度的入侵Vue。

// global.js
const _getApp = getApp;
const _options = { ... };
const _app = Object.assign(_options, _getApp());

export default {
  install: () => { getApp = () => app }
}

// 注入生命周期（Vue自带的Mixin无法混入小程序生命周期）
export const withMixin = App => {
  const { $options } = App;
  const { onHide, onLaunch, onError, onShow } = $options;
  App.$options = {
    ...$options,
    onLaunch(options) {
      _app.onLaunch && _app.onLaunch(options);
      onLaunch && onLaunch();
    },
    onShow(options) {
      _app.onShow && _app.onShow(options);
      onShow && onShow();
    },
    onHide() {
      _app.onHide && _app.onHide();
      onHide && onHide();
    },
    onError(err) {
      _app.onError && _app.onError(err);
      onError && onError();
    }
  };
  return App;
};

// app.js
import GetAppPlugin, { withMixin } from "./global";
Vue.use(GetAppPlugin);
const App = new Vue({
  store,
  onLaunch(options) {},
  onShow(options) {},
  onHide() {},
  onError(err) {},
  render(h) {
    // this.$slots.default 是将要会渲染的页面
    return h("block", this.$slots.default);
  }
});

export default withMixin(App);

这样的话可以正常触发生命周期，且可以通过Taro打包原生（若原生想引用vuex的状态变量，在global.js中的options注入即可）

用usingComponents，page要改成componnet， 还有里面生命周期命名修改也很麻烦吧？

[rottenpen]

实际上usingComponents还是比较好用的，可以通过这个来引用原生的组件，但没法在原生里引用Taro组件（目前来说）。
而且要运行原生小程序，在app.config.js里写pages指向原生页面即可，目前没遇到什么问题。
之前困扰我的是如何处理在原生中的顶层（App.js）逻辑，看了你的方案得到启发，可以提取出来重写getApp，但你的方案存在一定漏洞，因此我稍稍更改了一下，更符合Vue的风格，同时最小程度的入侵Vue。

// global.js
const _getApp = getApp;
const _options = { ... };
const _app = Object.assign(_options, _getApp());

export default {
  install: () => { getApp = () => app }
}

// 注入生命周期（Vue自带的Mixin无法混入小程序生命周期）
export const withMixin = App => {
  const { $options } = App;
  const { onHide, onLaunch, onError, onShow } = $options;
  App.$options = {
    ...$options,
    onLaunch(options) {
      _app.onLaunch && _app.onLaunch(options);
      onLaunch && onLaunch();
    },
    onShow(options) {
      _app.onShow && _app.onShow(options);
      onShow && onShow();
    },
    onHide() {
      _app.onHide && _app.onHide();
      onHide && onHide();
    },
    onError(err) {
      _app.onError && _app.onError(err);
      onError && onError();
    }
  };
  return App;
};

// app.js
import GetAppPlugin, { withMixin } from "./global";
Vue.use(GetAppPlugin);
const App = new Vue({
  store,
  onLaunch(options) {},
  onShow(options) {},
  onHide() {},
  onError(err) {},
  render(h) {
    // this.$slots.default 是将要会渲染的页面
    return h("block", this.$slots.default);
  }
});

export default withMixin(App);

这样的话可以正常触发生命周期，且可以通过Taro打包原生（若原生想引用vuex的状态变量，在global.js中的options注入即可）

用usingComponents，page要改成componnet， 还有里面生命周期命名修改也很麻烦吧？

虽然也可以像 vant 那样封装一个新的 component 方法，来进行 mixin @wingsico

[wzono]

实际上usingComponents还是比较好用的，可以通过这个来引用原生的组件，但没法在原生里引用Taro组件（目前来说）。
而且要运行原生小程序，在app.config.js里写pages指向原生页面即可，目前没遇到什么问题。
之前困扰我的是如何处理在原生中的顶层（App.js）逻辑，看了你的方案得到启发，可以提取出来重写getApp，但你的方案存在一定漏洞，因此我稍稍更改了一下，更符合Vue的风格，同时最小程度的入侵Vue。

// global.js
const _getApp = getApp;
const _options = { ... };
const _app = Object.assign(_options, _getApp());

export default {
  install: () => { getApp = () => app }
}

// 注入生命周期（Vue自带的Mixin无法混入小程序生命周期）
export const withMixin = App => {
  const { $options } = App;
  const { onHide, onLaunch, onError, onShow } = $options;
  App.$options = {
    ...$options,
    onLaunch(options) {
      _app.onLaunch && _app.onLaunch(options);
      onLaunch && onLaunch();
    },
    onShow(options) {
      _app.onShow && _app.onShow(options);
      onShow && onShow();
    },
    onHide() {
      _app.onHide && _app.onHide();
      onHide && onHide();
    },
    onError(err) {
      _app.onError && _app.onError(err);
      onError && onError();
    }
  };
  return App;
};

// app.js
import GetAppPlugin, { withMixin } from "./global";
Vue.use(GetAppPlugin);
const App = new Vue({
  store,
  onLaunch(options) {},
  onShow(options) {},
  onHide() {},
  onError(err) {},
  render(h) {
    // this.$slots.default 是将要会渲染的页面
    return h("block", this.$slots.default);
  }
});

export default withMixin(App);

这样的话可以正常触发生命周期，且可以通过Taro打包原生（若原生想引用vuex的状态变量，在global.js中的options注入即可）

用usingComponents，page要改成componnet， 还有里面生命周期命名修改也很麻烦吧？

page不需要改的，因为直接使用 app 中的 pages 直接指向就ok了，usingComponents 只是在Taro引用小程序组件的时候使用。

[wzono]

@wingsico 你指的重复打包是？如果本来的 app.config 写上 native 包的 page 的话是会被重复打包

问题存在于app.js，因为app.js引入了global.js，global.js存在对一些较大的文件（假设在native的utils目录中）的引入，那么打包后的app.js包含这些大文件，同时dist目录中由于使用了cp，把native的所有文件都复制过去了，此时就会造成app.js里有一份代码，native里还有一份。

除此之外，global的编写也存在一些小问题，假设原有的App option逻辑中含有生命周期钩子，那么仅使用这样的写法是不会调用生命周期钩子的（对于Taro Next Vue版本来说，React应该没有类似问题）

主要是我 native 的包 app.js 没有注入太多生命周期，没想到相关生命周期的问题。后面我写demo出来会注意这点的，谢谢大佬提醒啦。

关于重复打包的问题你看看要不要用 addchunkpage 来抽离 taro 包的依赖引入？

主要是一些原生小程序依赖的一些第三方库，比如im sdk之类的，这部分没法抽离（我没想到办法），因为Taro和原生都可能依赖这一部分，势必需要进行Taro打包，而原生页面需要引用未打包的第三方库，这样就有冲突，必须保留两份。

[rottenpen]

我目前好像没找到比较好的不改变原包代码处理重复打包的方法。
一个比较low的方法是, 在 global 的地方通过 wx 这个全局变量， 把相关依赖注入 wx 内部。然后在原生 page 中:

import xx from ‘util’
// 改成
const xx = wx.xx

这样可以在修改量最少的情况下处理重复打包的问题。
@luckyadam 不知道大佬有什么建议呢。

[shinken008]

学习了~

[hanzhongxing]

https://github.com/Kujiale-Mobile/plugin-taro-wx-mix

[rottenpen]

@hanzhongxing 如果是用我的那个方案 是要求你进行混合开发的 在旧代码不用大面积重构的情况下慢慢向vue迁移。目前我们这边已经有2个小程序已经能稳定迁移了。

[623282611]

上面提到的重复打包会导致一些问题，比如新代码引入模块后对模块内的内容做了修改，旧代码引入的模块并不能更新修改的内容，不知道有没有什么方法来解决

[rottenpen]

@623282611 我们是把模块放到getApp里使用 旧报和新包都可以使用共同模块了

[kq1314]

这个链接404了，可以提供一下新的吗？

[rottenpen]

这个链接404了，可以提供一下新的吗？

https://www.npmjs.com/package/plugin-taro-wx-mix @kq1314

[kq1314]

这个链接404了，可以提供一下新的吗？

https://www.npmjs.com/package/plugin-taro-wx-mix @kq1314

多谢

[kq1314]

如何在taro里定义globalData呢？我这边getApp().globalData一直是undefined呢

[rottenpen]

如何在taro里定义globalData呢？我这边getApp().globalData一直是undefined呢

#23 @kq1314 参考这篇文章，globalData 只是我自己定义的一个切片而已，你可以在 mixin 函数里插入任何你想公共使用的值