Development Guides
Development of MiniApps is not rocket science! Here are some guides to help you.
Troubleshooting

 

JavaScript 

Why are my MiniApp resources and page routes not loading correctly?

The default settings with some JavaScript frameworks or build tools might cause issues with loading your script and css resources or could cause issues with page routing. This is generally solved by doing two things:

  • 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: <base href="./">
  • 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:

            
        
                                    

PUBLIC_URL=.

NuxtJS with vue-router

Add the following to your nuxt.config.js file:

            
        
                                    

router: {

  base: './',

  mode: 'hash'

}

iOS 

 

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

            
        
                                    

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

move to top