Why are my MiniApp resources and page routes not loading correctly?
- Set the base URL of your page to be relative. Some frameworks will set the base URL to "/" by default, however it should be set to "./" for a MiniApp. For example:
- Use "hash" based page routing instead of "history" page routing. MiniApps currently DO NOT support "history" page routing. This setting can be changed in your router configuration with most frameworks.
Below are listed the specific fixes to this issue for various frameworks:
ReactJS and react-router
You should use the HashRouter component for your routing if you want to support linking directly to a certain route in your MiniApp.
If you are using create-react-app, then you should set the PUBLIC_URL environment variable to a single dot. For example in your local environment variable settings or in the environment settings for your CI:
NuxtJS with vue-router
Add the following to your
Why is my MiniApp top content hidden by the host app navigation bar?
Since iPhone X, Apple introduced a concept of viewport-fit to WebKit to allow web developers display content on rounded corner screens. By default the content is displayed according to a safe area concept. As MiniApp iOS SDK is making use of a WebKit component to display MiniApps, it is following the same rule. Depending on how the MiniApp view is implemented it can happen that your MiniApp should look like this:
Your MiniApp should look like this:
But loads like this:
To solve this issue, you should set the viewport-fit descriptor of your MiniApp to viewport-fit=cover