Comments (24)
学习了~
from blog.
@luckyadam 不敢当不敢当 都是基于你们开的口子做的
from blog.
问题很大,包体积增加很多(因为app.js)重复打包,很容易超过wechat的2MB限制
from blog.
@wingsico 你指的重复打包是?如果本来的 app.config 写上 native 包的 page 的话是会被重复打包
from blog.
@wingsico 更新了上面的文章 你可以看看
from blog.
@wingsico 你指的重复打包是?如果本来的 app.config 写上 native 包的 page 的话是会被重复打包
问题存在于app.js,因为app.js引入了global.js,global.js存在对一些较大的文件(假设在native的utils目录中)的引入,那么打包后的app.js包含这些大文件,同时dist目录中由于使用了cp,把native的所有文件都复制过去了,此时就会造成app.js里有一份代码,native里还有一份。
from blog.
@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应该没有类似问题)
from blog.
实际上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注入即可)
from blog.
@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 包的依赖引入?
from blog.
实际上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, 还有里面生命周期命名修改也很麻烦吧?
from blog.
实际上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
from blog.
实际上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引用小程序组件的时候使用。
from blog.
@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打包,而原生页面需要引用未打包的第三方库,这样就有冲突,必须保留两份。
from blog.
我目前好像没找到比较好的不改变原包代码处理重复打包的方法。
一个比较low的方法是, 在 global 的地方通过 wx 这个全局变量, 把相关依赖注入 wx 内部。然后在原生 page 中:
import xx from ‘util’
// 改成
const xx = wx.xx
这样可以在修改量最少的情况下处理重复打包的问题。
@luckyadam 不知道大佬有什么建议呢。
from blog.
学习了~
from blog.
https://github.com/Kujiale-Mobile/plugin-taro-wx-mix
from blog.
@hanzhongxing 如果是用我的那个方案 是要求你进行混合开发的 在旧代码不用大面积重构的情况下慢慢向vue迁移。目前我们这边已经有2个小程序已经能稳定迁移了。
from blog.
上面提到的重复打包会导致一些问题,比如新代码引入模块后对模块内的内容做了修改,旧代码引入的模块并不能更新修改的内容,不知道有没有什么方法来解决
from blog.
@623282611 我们是把模块放到getApp里使用 旧报和新包都可以使用共同模块了
from blog.
from blog.
https://www.npmjs.com/package/plugin-taro-wx-mix @kq1314
from blog.
多谢
from blog.
如何在taro里定义globalData呢?我这边getApp().globalData一直是undefined呢
from blog.
如何在taro里定义globalData呢?我这边getApp().globalData一直是undefined呢
#23 @kq1314 参考这篇文章,globalData 只是我自己定义的一个切片而已,你可以在 mixin 函数里插入任何你想公共使用的值
from blog.
Related Issues (20)
- 链接失效
- 关于 electron 数据缓存
- 一些关于 VSCode 插件开发的解决方案 HOT 1
- peerDependencies作用
- ELO rating system
- VSCode 插件在 kooltest 自动化测试的开发实践
- 薅一手 Github Actions 自动发包 VSCode 插件
- 八月小结
- [摘]个人效率指南
- 关于 CDN 前端该懂的一切 HOT 1
- 《DDIA》读书笔记
- PostgreSQL 数据迁移
- 九月小结
- 如何在 Sketch 插件中使用 React Typescript HOT 1
- 十月小结
- 从 Node 上传服务说起的爬坑日记
- 八股合集
- 一个说新不算新的服务端渲染技术——流式渲染 HOT 1
- 我来杭州的这两年 HOT 1
- 五月第一周周报
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blog.