1. Replacement of view dom tags
The replacement of the following tags needs to pay attention to the selector in css also needs to be replaced.
1. Replace block-level elements such as div, p, h1~5 with view tags
Note that the font size of h1~5 needs to be adjusted according to the page size.
2. Replace all inline elements such as span and label with text tags
Note: For the font size of text, the selector must select the text tag to modify its font size.
Because the text tag itself has an attribute with a default font size of 12px.
3. img replaces the image tag
The image needs to be closed, otherwise an error will be reported at runtime.
Two, request request
The request needs to be axiosreplaced fromuni.request
3. Routing jump
1. Routing configuration
routerchange pages.jsonconfiguration from
2. Routing jump
From router.pushmarked as uni.navigateTo, others router.goetc. also need to be replaced.
3. Route interception
For route interception, you can use the route interception in the ui component, for example, the uviewroute jump uni.$u.routemethod can configure route interception.
At this time, the routing jump needs to be全部更换成改方法
4. Browser cache data
There is no small program localStorage、sessionStorage和cookies, if you need to save the cache, you can only use it uni.setStorage、uni.setStorageSync.
5. Replacement of components
1. Replacement of the overall UI components (the largest workload)
The ui components in the project are likely to be incompatible in uniapp. For example, the commonly used components of our vue mobile terminal are, vantUIetc., which are not compatible with uniapp.
At this time, you can go to the plug-in market on the uniapp official website to find compatible ui components, for example, and uni-ui、uviewthen replace the ui components.
It generally includes some tags, such as:
input，textarea，checkbox，radio，button，imgetc.,
which need to be replaced with the tags corresponding to the newly replaced ui components.
2. Compatibility and replacement of npm install components
1. First of all: the uniapp project can be used without npm install. If it is used, try to keep the size of the component, 不要过大because if the small program is to be published and submitted to the management platform, the overall packaged code 主包cannot exceed 2M. If the component is too large, vendor.jsthe file will be too large.
2. Some components include dom operations to be used according to the situation, here is 不建议使用的because if you want to be compatible with the applet, it is in the applet 没有dom操作的.
In this case:
(1) Either find the corresponding component in the uniapp plug-in market to replace it.
(2) Either write one yourself, the applet has its own dom operation api, uni.createSelectorQueryyou can go to the official website to search for this api to check.
Six, component style modification
1. It is recommended not to add a class style to the component.
Sometimes it is normal to run to h5, but
it is eaten when it runs to the applet, and it disappears directly.
2. A certain page needs to modify the internal style of the component.(重要)
H5 We use ::v-deep to penetrate into the component to affect the style.
But this is not enough for a small program, it has to be added at the same level as methods:
options: {
styleIsolation: "shared"
}
^^
7. Data Acquisition Issues
1. Vuex data acquisition problem
The data on H5 can use the data in the state or getters for real-time rendering of the data.
However 小程序不行, it is always old data and cannot be rendered in real time.
The applet has to use the computed attribute in the page to implement the rendering of vuex data on the dom, for example:
computed: {
username() {
return this.$store.getters.user.username;
}
}
2. Property rendering problem in Vue.protype in applet
In H5, if you use Vue.prototype. to define a property in main.js, if you use this property on the view at this time, when the property changes, the view will also change.
However 在小程序上却不行, the data is always old and cannot be changed in real time.
Solution:
(1) Try not to set the Vue.prototype property, and put the transformed property in Vuex.
(2) The form of the method used, for example:
Vue.prototype.getData = () => {
return Vue.prototype.data;
}
In the form of a method, the data is reacquired each time the method is executed.
However 也有情况不建议使用, if you stay on this page and change Vue.prototype.data, the view will still not be refreshed.
这种方法仅仅适用于，获取一次性的数据。For example: Get user information when entering a project.
8. The main package is too large
1. 主包If the size of the small program package is larger than that, 2Mit cannot be uploaded and published.
At this time, we need to subpackage. There are several points to pay attention to in subpackaging:
(1) Usually, when we write code, the files in each folder may have dependencies with the files in other folders. At this time, we need to pay attention to: 主包、分包无法引用其他分包中的文件, 主包、分包可以引用主包中的文件.
(2) There is no upper limit on the number of subcontracts.
(3) The size of each subpackage cannot be greater than 2M.
(4) The tabbar page component must be in the main package.
(5) 技巧：If the contents of multiple subpackages depend on each other, then in order to integrate these multiple subpackages into one subpackage. This can avoid the problem that subpackages cannot reference subpackages.
2. Delete redundant code
# 9. Dom operation instructions cannot be used. Mini programs do not support dom operations.
# 10. Migration of pictures Except for the icon icon of the tabbar, all other pictures are migrated to the server and accessed through links.
# Eleven, dom operation do not use the applet does not support dom operation.