codecamp

MorJS globalComponentsConfig

是否必填 参数类型 默认值 参数含义
object 点击查看 用于配置 小程序组件=>web 组件 的映射表

背景补充说明:将小程序的代码转换成 Web 端的一个前提是,我们需要在 Web 端 1:1 实现小程序支持的组件。在编译过程中维护了一张映射表,在编译的过程中将小程序的组件进行替换,比如 view 组件,我们将其替换成了 tiga-view,那么 tiga-view 从哪里来呢?实际上,我们在 1:1 实现小程序的时候使用了 Web Components(选用 Google 开源的 lit),所以我们只需要在项目运行时,在顶部将 tiga-view 这个自定义组件注册就可以正常使用了。

如果我们遇到了以下场景我们可能会考虑使用 globalComponentsConfig 配置:

  1. Web端 需要通过条件编译渲染一些小程序不支持的组件,这个组件直接使用 web-components 实现;
  2. MorJS 提供的组件实现和支付宝小程序是一致的,无法定制,需要使用 web-components 实现一些定制组件。

需要注意的是,如果要配置此项,你需要将自定义的 web-components 提前注册,一般要么自定义 entry,要么在 htmlOptions 配置中自定义 templateContent,然后在顶部引入。以上两个配置接下来我们都会介绍

配置示例 [[EMOJI:%F0%9F%8C%B0]]:

...
web: {
  globalComponentsConfig: {
    'view': 'custom-view', // 将 view 映射到自定义的 custom-view 组件
  }
}
...


MorJS 基础配置介绍
MorJS styleScope
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

MorJS 指南

MorJS 基础用法

MorJS 配置

MorJS 编译相关配置

MorJS 进阶用法

MorJS Web开发

MorJS Web开发介绍

MorJS Web开发快速上手

MorJS Tabbar IOS 小黑条适配开关

MorJS 社区

MorJS 规范

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }