diff --git a/docs-vuepress/api/compile.md b/docs-vuepress/api/compile.md index 262c147156..db4a027df6 100644 --- a/docs-vuepress/api/compile.md +++ b/docs-vuepress/api/compile.md @@ -160,7 +160,7 @@ module.exports = defineConfig({ ``` ::: warning -抹平支付宝和微信之间的差异,微信转支付宝时可以使用该功能。 +抹平支付宝和微信之间的差异,当使用了微信 **externalClasses** 语法时,跨端输出需要在 @mpxjs/webpack-plugin 的配置中添加此配置来辅助框架进行转换。 ::: ### resolveMode diff --git a/docs-vuepress/guide/advance/platform.md b/docs-vuepress/guide/advance/platform.md index 4180a9600c..f707c12e00 100644 --- a/docs-vuepress/guide/advance/platform.md +++ b/docs-vuepress/guide/advance/platform.md @@ -308,11 +308,41 @@ module.exports = { ``` -属性维度的编译也可以对整个节点进行条件编译,例如只想在百度小程序中输出某个节点: +属性维度的编译也可以对整个节点进行条件编译,例如只想在支付宝小程序中输出某个节点: ```html -this is view +this is view ``` +需要注意使用上述用法时,节点自身在构建时框架不会对节点属性进行平台语法转换,但对于其子节点,框架并不会继承父级节点 mode,会进行正常跨平台语法转换。 +```html + + + tap click + +// srcMode 为 wx 跨端输出 ali 结果为 + + tap click + +``` +上述示例为错误写法,假如srcMode为微信小程序,用上述写法构建输出支付宝小程序时,父节点 bindtap 不会被转为 onTap,在支付宝平台执行时事件会无响应。 + +正确写法如下: +```html + + + tap click + +// 输出 ali 产物 + + tap click + +``` +有时开发者期望使用 @ali 这种方式仅控制节点的展示,保留节点属性的平台转换能力,为此 Mpx 实现了一个隐式属性条件编译能力 +```html + +test +``` +在对应的平台前加一个_,例如@_ali、@_swan、@_tt等,使用该隐式规则仅有条件编译能力,节点属性语法转换能力依旧。 有时候我们不仅需要对节点属性进行条件编译,可能还需要对节点标签进行条件编译。 @@ -416,6 +446,13 @@ env 属性维度的编译同样支持对整个节点或者节点标签名进行 this is a view component this is a view component ``` +如果只声明了 env,没有声明 mode,跨平台输出时框架对于节点属性默认会进行转换: +```html + +this is a view component +this is a view component +``` + ### 其他注意事项 * 当目标平台为支付宝时,需要启用支付宝最新的component2编译才能保障框架正常工作,关于component2[点此查看详情](https://docs.alipay.com/mini/framework/custom-component-overview); diff --git a/packages/api-proxy/src/platform/api/lifecycle/index.ali.js b/packages/api-proxy/src/platform/api/lifecycle/index.ali.js new file mode 100644 index 0000000000..cde6425113 --- /dev/null +++ b/packages/api-proxy/src/platform/api/lifecycle/index.ali.js @@ -0,0 +1,7 @@ +function getEnterOptionsSync () { + my.getEnterOptionsSync() +} + +export { + getEnterOptionsSync +} diff --git a/packages/api-proxy/src/platform/api/lifecycle/index.js b/packages/api-proxy/src/platform/api/lifecycle/index.js new file mode 100644 index 0000000000..dc931e5f02 --- /dev/null +++ b/packages/api-proxy/src/platform/api/lifecycle/index.js @@ -0,0 +1,9 @@ +import { getEnvObj, envError } from '../../../common/js' + +const ENV_OBJ = getEnvObj() + +const getEnterOptionsSync = ENV_OBJ.getEnterOptionsSync || envError('getEnterOptionsSync') + +export { + getEnterOptionsSync +} diff --git a/packages/api-proxy/src/platform/api/lifecycle/index.web.js b/packages/api-proxy/src/platform/api/lifecycle/index.web.js new file mode 100644 index 0000000000..c4eaf200a7 --- /dev/null +++ b/packages/api-proxy/src/platform/api/lifecycle/index.web.js @@ -0,0 +1,12 @@ +import { isBrowser, throwSSRWarning } from '../../../common/js' +function getEnterOptionsSync () { + if (!isBrowser) { + throwSSRWarning('getEnterOptionsSync API is running in non browser environments') + return + } + return global.__mpxEnterOptions || {} +} + +export { + getEnterOptionsSync +} diff --git a/packages/api-proxy/src/platform/index.js b/packages/api-proxy/src/platform/index.js index f065c70b8e..390c4f88b1 100644 --- a/packages/api-proxy/src/platform/index.js +++ b/packages/api-proxy/src/platform/index.js @@ -104,3 +104,6 @@ export * from './api/video' // onWindowResize, offWindowResize export * from './api/window' + +// getEnterOptionsSync +export * from './api/lifecycle' diff --git a/packages/core/src/platform/createApp.js b/packages/core/src/platform/createApp.js index 4d91abb37c..22a635abb9 100644 --- a/packages/core/src/platform/createApp.js +++ b/packages/core/src/platform/createApp.js @@ -44,6 +44,7 @@ export default function createApp (option, config = {}) { shareTicket: '', referrerInfo: {} } + global.__mpxEnterOptions = options this.$options.onLaunch && this.$options.onLaunch.call(this, options) global.__mpxAppCbs = global.__mpxAppCbs || { show: [], diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-navigator.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-navigator.vue index 11c56994dc..29244fd6c7 100644 --- a/packages/webpack-plugin/lib/runtime/components/web/mpx-navigator.vue +++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-navigator.vue @@ -50,6 +50,11 @@ url: this.url }) break + case 'switchTab': + mpx.switchTab && mpx.switchTab({ + url: this.url + }) + break } } })