Определение глобальных переменных в мини-программе TypeScript для WeChat

Уважаемые пользователи StackOverflow,

Я сделал модуль как для браузера, так и для мини-программы WeChat. Этот модуль написан на нескольких TypeScript и скомпилирован в один мини-файл. В этом модуле мне нужно использовать API-интерфейсы DOM/BOM, такие как document, 'window, 'navigator. В браузере загрузка и использование скомпилированного одиночного файла не вызывает проблем.

Но в мини-программе WeChat нет объекта global, как в Node. Также нет глобальных объектов document и window, как в браузере. Чтобы исправить это, я сделал две команды сборки для каждой среды.

  • grunt build, стандартная компиляция TS для браузера
  • grunt wx_build, стандартная компиляция TS и добавление кода патча для мини-программы WeChat

Пропатченный файл js выглядит так:

// mymodule-bundle.min.js

// patch
window=require("./miniapp-adapter/src/index.js");
document=require("./miniapp-adapter/src/document.js").default;

// original compiled/minified code
(function(f){if(typeof exports==="object"&&typeof module!=="undefined")...

В проекте мини-программы WeChat я поместил mymodule-bundle.min.js и miniapp-adapter в одну папку. В результате я смог перенести свое приложение HTML5 в мини-программу WeChat.

Но я хочу более умный способ сделать это.

Как я могу объявить глобальную переменную window или document в mymodule.ts для выполнения мини-программы WeChat?

Спасибо.


typescript dom wechat javascript-scope wechat-miniprogram
person Hotte Shen    schedule 22.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот как вы их объявляете:

declare const document: any
declare const window: any

Чтобы получить лучшие типы для intellisense, вы просто делаете их типа, который представляет то, что вы туда поместили, если вам нужно, чтобы потребители их использовали. В противном случае вы можете оставить их так.

В узле вы можете сделать это:

declare namespace NodeJS {
  export interface Global {
    window: any
    document: any
  }
}

global.window = require("./miniapp-adapter/src/index.js");
global.document = require("./miniapp-adapter/src/document.js").default;

Однако, чтобы быть идиоматичным в Node, вы должны экспортировать их из модуля, а не загружать в глобальное пространство имен.

person Josh Wulf    schedule 22.02.2020
comment
Спасибо. Я включил этот код в mymodule.ts. Но как установить эту константу window, как определено в другом модуле js (адаптер miniapp)? Например, window = require(...) вызывает ошибку, потому что window определяется как константа. - person Hotte Shen; 22.02.2020
comment
Добавлено в ответ. - person Josh Wulf; 22.02.2020
comment
Время выполнения мини-программы WeChat отличается от Node или Browser. Нет глобальных переменных global или window, document. Вместо этого есть глобальная переменная wx. Я использую HammerJS и Three.js в mymodule, поэтому мне нужны document и window как глобальные. global.document не нужен. Но когда я пытаюсь их сделать, компилятор TS выдает ошибку, так как во встроенных определениях типов уже определены глобальные document и window. - person Hotte Shen; 22.02.2020
comment
Вот почему я пропатчил скомпилированный js вручную. Я спрашиваю, как сделать глобальный 'document` и window, сохраняя при этом обычные параметры компиляции TS для среды браузера. - person Hotte Shen; 22.02.2020
comment
Я не прошу об этом ни для узла, ни для браузера. - person Hotte Shen; 22.02.2020
comment
Я вижу, это: walkthechat.com/wechat-mini-programs-simple-introduction< /а> - person Josh Wulf; 22.02.2020
comment
Хммм, вы можете удалить тип DOM. См. этот tsconfig здесь: github.com/sindresorhus/delay/issues/40#issuecomment -425493713 - person Josh Wulf; 22.02.2020
comment
Нужны ли вам типы DOM в вашем проекте для intellisense, или вы просто хотите стереть их, чтобы вы могли определить их, если они не существуют во время выполнения? - person Josh Wulf; 22.02.2020
comment
Давайте продолжим обсуждение в чате. - person Josh Wulf; 22.02.2020