Precautions for uni-app cross-terminal development

The possibility that H5 is normal but App is abnormal

css exception:
Unsupported selectors * selectors are not supported on the non-H5 side;

Please change the element selector of body to page. Similarly, change div, ul and li to view, span and font to text, a to navigator, img to image...

webview browser compatibility

On the App side, the vue page is rendered by the webview of the system by default (not the browser that comes with the mobile phone, but the webview of the rom). On older mobile phones, such as Android4.4, 5.0 or iOS8, many css are not supported , So don't use too new css, it will cause the interface to be abnormal.

Note that this does not mean that flex cannot be used, Android 4.4 also supports flex, but do not use too new css.

You can find an Android4.4 mobile phone or use a pc emulator for actual testing. Most domestic Android emulators are 4.4 or 5.0.

Starting from uni-app 2.5.3, the Android end supports the introduction of Tencent x5 browser kernel, which can smooth out the browser compatibility problems of low-end Android. For details, see the x5 user guide

The applet does not have browser compatibility issues, it comes with a large Webview. So if your H5 and applet interface are normal, but the Android low-end machine App interface is abnormal, and the App does not use the x5 engine, then it can basically be determined that it is because of css compatibility.

The app-side nvue page does not have browser compatibility issues. It comes with a unified native rendering engine and does not rely on webview.

The webview corresponding to Android4.4 is chrome37. For details of browser kernels at each end, refer to: About the differences and compatibility of the mobile phone webview kernel, the default browser, and the rendering layer browser of each applet

Native component level problem H5 does not have the concept of native components. The non-H5 end has native components and causes the concept that the level of native components is higher than that of front-end components. To block native components such as video and map, please use cover-view components.
Using API applets and App js that are not supported by the H5 side runs under jscore instead of the browser. There are no browser-specific js objects, such as document, xmlhttp, cookie, window, location, navigator, localstorage, websql, Indexdb, webgl and other objects.

If your code does not directly use these, it is likely that the imported third-party library uses these. If the latter, go to the plug-in market to search for alternatives. Be aware that the non-H5 js is running under a separate js core or v8, not in the browser.

Starting from HBuilderX 2.6, the App side has added renderjs, which is a js running on the view layer. Vue pages can manipulate browser objects through renderjs, which allows browser-based libraries to run directly on the App side of uni-app , Such as echart, threejs, see: https://uniapp.dcloud.io/frame?id=renderjs

Use the vue grammar that is not supported by the non-H5 side, and is restricted by the custom component of the applet. For details, see
Do not write style="xx" directly on the component properties where the component is referenced, but write the style inside the component
url(//alicdn.net) and other paths are changed to url(https://alicdn.net), because on the App side // is the file protocol
Many people use the local test service address (localhost or 127.0.0.1) when connecting to the H5 terminal. Such a network address cannot be accessed on the mobile App terminal. Please use the IP accessible by the mobile phone to connect to the network.

The possibility that H5 is normal but the applet is abnormal

Same as above
v-html is supported in both h5 and app-vue (v3 compilation mode), but not in applets
The Mini Program requires that the URL to be connected must be whitelisted

The possibility that the applet is normal but the App is abnormal

The default rendering engine of the vue page on the App side is the system webview (not the built-in browser of the mobile phone, but the webview of the rom). On older mobile phones, such as Android4.4, 5.0 or iOS8, some new CSS syntax is not supported of. Note that this does not mean that flex cannot be used, Android 4.4 also supports flex, but do not use too new css. You can find an Android4.4 mobile phone or use a pc emulator for actual testing. Most domestic Android emulators are 4.4 or 5.0.

There is no browser compatibility problem in the applet, it has built-in dozens of M own customized webview. So if your H5 and applet interface are normal, but the App interface is abnormal, it is mostly because of css compatibility.

Solve this type of problem:

Give up old phone support
Do not use too new css syntax, you can query in caniuse
Starting from uni-app 2.5.3, the Android end supports the introduction of Tencent x5 browser kernel, which can smooth out the browser compatibility problems of low-end Android. For details, see the x5 user guide

The applet or app is normal, but the possibility of H5 abnormality

Prior to uni-app 2.4.7, the H5 terminal did not support custom components of WeChat applets, that is, components under wxcomponets, and compatibility issues may occur at this time. Starting from 2.4.7, H5 also supports WeChat custom components, and there is no longer a compatibility problem in this regard.
App side uses App-specific APIs and functions, such as plus, Native.js, subNVue, native plug-ins, etc.
Use special functions for mini programs, such as WeChat card volume, mini program plug-ins, and WeChat mini program cloud development. For cloud development, it is recommended to use uniCloud, which can cross-end.

App is normal, small program, H5 abnormal possibility

The code uses the unique plus, Native.js, subNVue, native plug-in and other functions on the App side

Note on using Vue.js

uni-app is implemented based on Vue 2.0. Developers need to pay attention to the differences in the use of Vue 1.0 -> 2.0. For details, see Migrating from Vue 1.x
The data attribute must be declared as a function that returns an initial data object; otherwise, when the page is closed, the data will not be automatically destroyed. When the page is opened again, the last data will be displayed // correct usage, use the function to return the object data() {return { title:'Hello'}} //Wrong writing will cause the last data to be displayed when the page is opened again data: {title:'Hello'}
On the WeChat applet, uni-app entrusts the data binding function to Vue. Developers need to implement data binding according to the Vue 2.0 writing method. The data binding writing method of WeChat applet is not supported, so the following writing method is not supported: <view id="item-{ {id}}"></view> needs to be modified to: <view v-bind:id="'item-' + id "></view>

Different from traditional web development

You may be used to free web development before, but currently there are many restrictions on each small program. Of course, the limitation is to better optimize the user experience at the framework layer, so the experience of the applet is better than that of the web. And these restrictions are only restrictions on the writing method, and do not affect the function. If you have done WeChat applet development, you should already be familiar with these restrictions. If you have not done a mini program, please read this section carefully.

JS pays attention to the non-H5 side, and cannot use the browser's built-in objects, such as document, window, localstorage, cookie, etc., and can not use jquery and other frameworks that rely on these browser objects. Because each small program fast application does not support these objects. The absence of these browsers' built-in objects does not affect business development, and the api provided by uni is sufficient to complete the business. When uni's api is compiled and run on the web platform, it will actually be converted to the browser's js api. If you want to use the library for operating windows and documents on the App side, you need to implement it through renderjs. The api of uni is available at multiple ends. In the conditional compilation area, the proprietary api of each platform can also be used, such as wx., plus. and other apis can be used under WeChat and app respectively. In order to reduce the cost of migrating small programs to uni-app, wx's api can also be run directly in the app. For example, writing wx.requst and uni.requst are the same, but it is still recommended to use wx only in the conditional compilation area of WeChat Api.
Tag Note that the tag of uni-app is not the same as the tag of the applet, and is different from the tag of HTML. For example, div must be changed to view, span must be changed to text, and a must be changed to navigator. In order to reduce the cost of migrating h5 applications to uni-app, div and span can also run on apps and applets, because the uni-app compiler will compile these HTML tags into applet tags. But it is still recommended to develop new habits.
Css Note that although most css styles can be supported in WeChat applets and apps, it is recommended to use the flex layout model, which is more flexible and efficient and supports more platforms (such as nvue and fast apps only support flex layout). Uni-app defaults to rpx. This is a universal unit that can be cross-terminal. See details
Project directory Note that each page to be displayed must be placed in the pages directory, create a new directory where the page is located, and then put the vue file of the directory with the same name, such as project/pages/lista/lista.vue, and in pages.json Configuration. This is the same strategy as the applet. Custom components, put static resources such as pictures in the component directory, and put them in the static directory. This is the rule of webpack and mpvue
Note on the data binding method uni-app is implemented based on Vue 2.0. Developers need to pay attention to the difference in the use of Vue 1.0 -> 2.0. For details, see Migrating from Vue 1.x
Each page supports the use of native title, and the home page supports the use of native bottom tabs. These are to be configured in pages.json, which are not part of the vue page. Of course, the js api in vue can also dynamically modify the native title
Although vue is used, in apps and applets, it is not spa but mpa
The first position coordinate system is the coordinate system gcj02 of the National Bureau of Survey and Measurement, and this coordinate system can be supported by multiple terminals. The old version of 5+ Baidu positioning and Baidu map use Baidu's private coordinate system bd09ll, which needs to be converted. The Baidu map in the new uni-app has been changed to gcj02 by default. The Gaode map is not affected, it is always gcj02

H5 development note

H5 is published to the server Note: Configure the path after the issuance (is not configured in the root directory of the website), for example, the path of the distribution website is www.xxx.com/html5, edit the h5 node in the manifest.json file, and add the base attribute under router as html5 click on the menu release -> H5 find the resources in the unpackage/dist/build/h5 directory under the current project, deploy the server (or use the local server to preview)
The way to refer to third-party js: import through npm (through conditional compilation, only the h5 platform can import the corresponding library) edit the template attribute of the h5 node in the manifest.json file, fill in the html template path, and use script in the html template Three-party js is introduced. The following example is a part of the html template code added by Baidu Statistics. For all the code of the template, please refer to: custom template ... <body> <noscript> <strong>Please enable JavaScript to continue.</strong> </noscript> <div id="app"></div>  <script> var _hmt = _hmt || []; (function() {var hm = document .createElement("script"); hm.src = "https://hm.baidu.com/hm.js?xxxxxx"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore (hm, s); ))(); </script> </body> ...
The H5 version of uni-app fully supports vue syntax, so some of the wording may take effect on the H5 side, but not on the applet or App side.
H5 verified the stricter vue grammar. Some non-standard writing will alarm, such as: writing object after data will alarm, and function must be written; the value of props cannot be modified; the outermost template node of the component is not allowed to contain multiple nodes, etc. .
After compiling to H5 version, it is a single page application (SPA).
If js is unable to connect to the Internet due to cross-domain, please note that network requests (request, uploadFile, downloadFile, etc.) have cross-domain restrictions in the browser. The solution is detailed at: https://ask.dcloud.net.cn/article/35267
The navigation bar and tabbar of APP and applet are native controls. The element area coordinates do not include the native navigation bar and tabbar. In H5, the navigation bar and tabbar are implemented by div simulation, so the element coordinates will include the navigation bar and tabbar. height. In order to elegantly solve the problem of multi-terminal height positioning, uni-app has added 2 new css variables: --window-top and --window-bottom, which represent the distance between the content area of the page and the top and bottom. For example, if you want to hover a menu above the native tabbar, write bottom:0 before. After compiling this way to h5, this menu will overlap with the tabbar and be located at the bottom of the screen. Instead, use bottom:var(--window-bottom), no matter under app or h5, this menu is floating above the tabbar. This avoids writing conditional compilation code. Of course, you can still use H5's conditional compilation to handle the difference in interface.
When using the vh unit in CSS, note that 100vh includes the navigation bar. You need to subtract the height of the navigation bar and tabBar when using it. Some browsers also include the height of the browser operation bar. Please pay attention when using it.
Normally supports rpx, px is the real physical pixel. It is not currently supported to set "transformPx" in manifest.json: true to use px as a dynamic unit.
The use of compass, geographic location, accelerometer and other related interfaces need to use the https protocol, and the local preview (localhost) can use the http protocol.
When testing the Chrome browser emulator device on the PC side, access to the location API needs to connect to the Google server.
Page life cycles such as onLoad and onShow are not supported in components (except pages).
To avoid conflicts with built-in components, please add a prefix to custom components (but not u and uni). For example, the usable custom component names: my-view, m-input, we-icon, for example, the unusable custom component names: u-view, uni-input, if an existing project uses a name that may cause conflicts, Please modify the name. In addition, the name of the custom component under the WeChat applet cannot start with wx.

Attention to WeChat Mini Program Development

List of current bugs in WeChat Mini Programs
WeChat applet update log

Pay attention to the development of Alipay applet

Alipay applet update log
Alipay Mini Program Development Tool: https://docs.alipay.com/mini/ide/download
There is currently no subcontracting configuration, and the package size is limited to 3M.
showLoading is not transparent, which means that the page content cannot be clicked when loading is displayed.
The @ symbol is not allowed in the file name or folder name.
The data returned by the network request will be processed strictly according to the dataType. If it does not meet the specification, an error will be thrown instead of being returned in the original format.
The identity of the canvas component is id, not canvas-id. It has not been processed yet, so you need to actively add the id attribute.
As a result of the current test, the navigation bar will only turn into black text when the background color is set to #FFF(FFF).
The navigation bar of the Alipay applet supports transparent gradient effects, and related configurations will be provided later.
When using pseudo elements as borders, the height value cannot be 1rpx, and 1px should be used directly.
ECharts is not supported.
The payment function cannot be simulated, and it needs to be tested on a real machine.

Attention to Baidu Mini Program Development

Baidu applet update log
Baidu Mini Program Development Tool: https://smartprogram.baidu.com/docs/introduction/tool/ .
The attribute selector is not supported.
Does not support scoped.
Functions such as login / getUserInfo / payment cannot be simulated on the simulator (development tool).
The preview effect of the map component on the development tool is incorrect, but it is correct on the mobile phone.
The value of windowHeight obtained by getSystemInfo is incorrect in the simulator, and the actual preview is correct.
v-if and v-for cannot be used at the same time under the same label.
When a custom component is introduced into the page, there will be a template tag in the outer layer of the rendered result, which will cause the styles of some selectors to fail to match.

The browser kernel of each applet is different, which will cause css compatibility issues

For details, please refer to: https://ask.dcloud.net.cn/article/1318

Dealing with too large vendor.js

The applet tool prompts that vendor.js is too large and the conversion from es6 to es5 has been skipped. This conversion problem itself does not need to be bothered, because vendor.js is already es5.

Regarding volume control, refer to the following:

Use runtime code to compress the project created by HBuilderX and tick Run-->Run to Mini Program Simulator-->Whether to compress the code at runtime. The project created by cli can add the parameter --minimize in pacakge.json, example: "dev: mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"
Use subcontracting optimization, instructions on subcontracting optimization