The pit that UNI-app stepped on

I have used uni-App for a period of time. I have made some attempts on H5 terminal, APP terminal and wechat mini program terminal. There are still some pits I have stepped on.

The VUX component cannot be used

Some time ago, I tried to transfer H5 project to wechat mini program through UNI-app. The first reaction must be to directly transfer the whole H5 project, which saves trouble and won’t change anything wrong. The H5 project is developed using VUE, and the front-end components used include VUX, DAYJS, AXIOS, VUex, VUE-Router and so on. The migration started off well, with the project structure set up in accordance with uni-App’s project specifications and up and running. However, the VUX component reported an error and could not be used. It turned out laterWebpack needs to be configured for VUXBut the Uni-app project isNo Webpack is exposedSo this component is completely unusable and large areas of code need to be modified.

Conclusion: Uni-App does not support NPM market components that require webpack configuration or that manipulate the DOM, such components are not available. Uni-app has its own component market where components are preferentially selected.

Static resources (such as images, videos, etc.) can only be placed static

Static resources do not work anywhere else. They must be placed in the static directory.

The introduction of local images in wechat applet does not take effect

Path problem. In wechat applet, local image reference path must be written in the following form, starting with /static

<img src="/static/imgs/air_ticket.png" alt />
Copy the code

Components and JS files do not support importing with a slash

Component import can be in the following form, or relative paths can be used

import { getWeek, relogin, saver } from "pages/utils"; 
Copy the code

Setting titleNView unit to RPX on app does not take effect

On the app side, only px is supported in the titleNView in pages. Json or in the plus API written on the page. Note that RPX is not supported

Page fit problem: RPX is recommended

Mobile phone screen size is not uniform, we need to consider the suitability of the project in each size. Wechat mini program designed RPX to solve this problem, and UNI-App supports RPX in both app and H5 terminals. If you don’t want to zoom by screen width, use px units.

Use RPX as the CSS unit for pits

You are advised to lock the screen orientation when using RPX

Tabbar is configured correctly but does not take effect

Tabbar contains at least two items, but up to five. Errors will be reported outside this range.

H5 cannot be previewed when packaged

The packaged folder can only be opened on the server. If you want to preview it locally, you are advised to use the live-server component.

Dynamic component failure

Uni-app officially does not support dynamic components, currently v-IF is used to judge, and there is no other solution.