Appearance
移动配置
¥Mobile Configuration
如果你的 Meteor 应用针对 iOS 或 Android 等移动平台,你可以在名为 mobile-config.js
的特殊顶层文件中配置应用的元数据和构建过程,该文件不包含在你的应用中,仅用于此配置。
¥If your Meteor application targets mobile platforms such as iOS or Android, you can configure your app's metadata and build process in a special top-level file called mobile-config.js
which is not included in your application and is used only for this configuration.
下面的代码片段是一个示例 mobile-config.js
文件。本节的其余部分将更详细地解释特定的 API 命令。
¥The code snippet below is an example mobile-config.js
file. The rest of this section will explain the specific API commands in greater detail.
js
// This section sets up some basic app metadata, the entire section is optional.
App.info({
id: 'com.example.matt.uber',
name: 'über',
description: 'Get über power in one button click',
author: 'Matt Development Group',
email: 'contact@example.com',
website: 'http://example.com'
});
// Set up resources such as icons and launch screens.
App.icons({
'iphone_2x': 'icons/icon-60@2x.png',
'iphone_3x': 'icons/icon-60@3x.png',
// More screen sizes and platforms...
});
// Before Meteor 2.6 we had to pass device specific splash screens for iOS, but this behavior was dropped in favor of story board images.
App.launchScreens({
// iOS
// For most cases you will only need to use the 'ios_universal' and 'ios_universal_3x'.
'ios_universal': { src: 'splash/Default@2x.png', srcDarkMode: 'splash/Default@2x~dark.png' }, // (2732x2732) - All @2x devices, if device/mode specific is not declared
'ios_universal_3x': 'splash/Default@3x.png', // (2208x2208) - All @3x devices, if device/mode specific is not declared
// If you still want to use a universal splash, but want to fine-tune for the device mode (landscape, portrait), then use the following keys:
'Default@2x~universal~comany': 'splash/Default@2x~universal~comany.png', // (1278x2732) - All @2x devices in portrait mode.
'Default@2x~universal~comcom': 'splash/Default@2x~universal~comcom.png', // (1334x750) - All @2x devices in landscape (narrow) mode.
'Default@3x~universal~anycom': 'splash/Default@3x~universal~anycom.png', // (2208x1242) - All @3x devices in landscape (wide) mode.
'Default@3x~universal~comany': 'splash/Default@3x~universal~comany.png', // (1242x2208) - All @3x devices in portrait mode.
// However, if you need to fine tune the splash screens for the device idiom (iPhone, iPad, etc).
'Default@2x~iphone~anyany': 'splash/Default@2xiphoneanyany.png', // (1334x1334) - iPhone SE/6s/7/8/XR
'Default@2x~iphone~comany': 'splash/Default@2xiphonecomany.png', // (750x1334) - iPhone SE/6s/7/8/XR - portrait mode
'Default@2x~iphone~comcom': 'splash/Default@2xiphonecomcom.png', // (1334x750) - iPhone SE/6s/7/8/XR - landscape (narrow) mode
'Default@3x~iphone~anyany': 'Default@3xiphoneanyany.png', // (2208x2208) - iPhone 6s Plus/7 Plus/8 Plus/X/XS/XS Max
'Default@3x~iphone~anycom': { src: 'splash/Default@3xiphoneanycom.png', srcDarkMode: 'splash/Default@3xiphoneanycom~dark.png' }, // (2208x1242) - iPhone 6s Plus/7 Plus/8 Plus/X/XS/XS Max - landscape (wide) mode
'Default@3x~iphone~comany': 'Default@3xiphonecomany.png', // (1242x2208) - iPhone 6s Plus/7 Plus/8 Plus/X/XS/XS Max - portrait mode
'Default@2x~ipad~anyany': 'Default@2xipadanyany.png', // (2732x2732) - iPad Pro 12.9"/11"/10.5"/9.7"/7.9"
'Default@2x~ipad~comany': 'Default@2xipadcomany.png', // (1278x2732) - iPad Pro 12.9"/11"/10.5"/9.7"/7.9" - portrait mode
// Android
'android_universal': 'splash/android_universal.png', // (320x480)
});
// Set PhoneGap/Cordova preferences.
App.setPreference('BackgroundColor', '0xff0000ff');
App.setPreference('HideKeyboardFormAccessoryBar', true);
App.setPreference('Orientation', 'default');
App.setPreference('Orientation', 'all', 'ios');
// Pass preferences for a particular PhoneGap/Cordova plugin.
App.configurePlugin('com.phonegap.plugins.facebookconnect', {
APP_ID: '1234567890',
API_KEY: 'supersecretapikey'
});
// Add custom tags for a particular PhoneGap/Cordova plugin to the end of the
// generated config.xml. 'Universal Links' is shown as an example here.
App.appendToConfig(`
<universal-links>
<host name="localhost:3000" />
</universal-links>
`);
App.info
Summary:
Set your mobile app's core configuration information.
Arguments:
Source codeName | Type | Description | Required |
---|---|---|---|
options | Object | Yes |
js
App.info(
options
);
App.setPreference
Summary:
Add a preference for your build as described in the Cordova documentation.
Arguments:
Source codeName | Type | Description | Required |
---|---|---|---|
name | String | A preference name supported by Cordova's
| Yes |
value | String | The value for that preference. | Yes |
platform | String | Optional. A platform name (either | No |
js
App.setPreference(
"name",
"value",
"platform", // this param is optional
);
App.accessRule
Summary:
Set a new access rule based on origin domain for your app. By default your application has a limited list of servers it can contact. Use this method to extend this list.
Default access rules:
tel:*
,geo:*
,mailto:*
,sms:*
,market:*
are allowed and are handled by the system (e.g. opened in the phone app or an email client)http://localhost:*
is used to serve the app's assets from.- The domain or address of the Meteor server to connect to for DDP and hot code push of new versions.
Read more about domain patterns in Cordova docs.
Starting with Meteor 1.0.4 access rule for all domains and protocols
(<access origin="*"/>
) is no longer set by default due to
certain kind of possible
attacks.
Arguments:
Source codeName | Type | Description | Required |
---|---|---|---|
pattern | String | The pattern defining affected domains or URLs. | Yes |
options | Object | No |
js
App.accessRule(
"pattern",
options, // this param is optional
);
例如,此 Cordova 白名单语法:
¥For example this Cordova whitelist syntax:
xml
<access origin="https://www.google-analytics.com" />
<allow-navigation href="https://example.com" />
相当于:
¥is equivalent to:
js
App.accessRule('https://www.google-analytics.com');
App.accessRule('https://example.com', { type: 'navigation' });
App.configurePlugin
Summary:
Set the build-time configuration for a Cordova plugin.
Arguments:
Source codeName | Type | Description | Required |
---|---|---|---|
id | String | The identifier of the plugin you want to configure. | Yes |
config | Object | A set of key-value pairs which will be passed at build-time to configure the specified plugin. | Yes |
js
App.configurePlugin(
"id",
config,
);
注意:使用
App.configurePlugin
重新配置之前已配置的插件时,如果不手动清除现有的 Cordova 构建,则可能无法反映更改。要清除现有的 Cordova 构建,请删除.meteor/local/cordova-build
目录并使用meteor run
或meteor build
重新构建应用。¥Note: When using
App.configurePlugin
to re-configure a plugin which has been previously configured, the changes may not be reflected without manually clearing the existing Cordova build. To clear the existing Cordova build, remove the.meteor/local/cordova-build
directory and re-build the application using eithermeteor run
ormeteor build
.
App.icons
Summary:
Set the icons for your mobile app.
Arguments:
Source codeName | Type | Description | Required |
---|---|---|---|
icons | Object | An Object where the keys are different devices and screen sizes, and values are image paths relative to the project root directory. Valid key values:
| Yes |
js
App.icons(
icons
);
App.launchScreens
Summary:
Set the launch screen images for your mobile app.
Arguments:
Source codeName | Type | Description | Required |
---|---|---|---|
launchScreens | Object | A dictionary where keys are different
devices, screen sizes, and orientations, and the values are image paths
relative to the project root directory or an object containing a dark mode image path too For Android specific information, check the Cordova docs and Android docs. Also note that for android the asset can either be an XML Vector Drawable or PNG. For best practices when developing a splash image, see the Apple Guidelines. To learn more about size classes for iOS, check out the documentation from Cordova. Valid key values: iOS:
Android:
| Yes |
js
App.launchScreens(
launchScreens
);
App.appendToConfig
Summary:
Append custom tags into config's widget element.
App.appendToConfig('<any-xml-content/>');
Arguments:
Source codeName | Type | Description | Required |
---|---|---|---|
element | String | The XML you want to include | Yes |
js
App.appendToConfig(
"element"
);
App.addResourceFile
Summary:
Add a resource file for your build as described in the Cordova documentation.
Arguments:
Source codeName | Type | Description | Required |
---|---|---|---|
src | String | The project resource path. | Yes |
target | String | Resource destination in build. | Yes |
platform | String | Optional. A platform name (either | No |
js
App.addResourceFile(
"src",
"target",
"platform", // this param is optional
);
注意:资源文件分两步复制:从 Meteor 项目的 src 复制到 Cordova 项目的根目录,然后复制到目标
¥Note: The resource file is copied in two steps : from the src of your meteor project to the root of the cordova project, then to the target