uni-app

The non-H5 side does not enable scoped by default. If you need to isolate the component style, you can add the scoped attribute to the style tag. The H5 side enables scoped by default in order to isolate the styles between pages.

webview browser compatibility

The vue page is on the App side, and it is rendered by the system's webview by default (not the mobile phone's own browser, but the rom's webview). 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 abnormal interface.

Note that this does not mean that flex cannot be used, Android4.4 also supports flex, just don't use too new css.

You can find an Android 4.4 mobile phone or use a pc emulator to actually test it. Most domestic Android emulators are 4.4 or 5.0.

Starting from uni-app 2.5.3, the Android side supports the introduction of the Tencent x5 browser kernel, which can smooth out the browser compatibility issues of low-end Android, [see the x5 user guide for details](https://ask.dcloud.net. cn/article/36806)

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

The nvue page on the app side 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 the browser kernels at each end, refer to: About the difference and compatibility of mobile phone webview kernel, default browser, and rendering layer browsers of various MiniApp

Native component level issues H5 does not have a problem with the concept of native components. There are native components on the non-H5 side, which leads to 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.

APIs that are not supported by non-H5 terminals are used The js of MiniApp and apps runs under jscore instead of browsers. 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 use these directly, it is likely that the imported third-party library uses these. If it is the latter, go to the plug-in market to search for alternatives. You should know that the js on the non-H5 side runs under an independent js core or v8, not in the browser.

From HBuilderX 2.6, renderjs has been added on the App side, which is a js running in the view layer. Vue pages can operate browser objects through renderjs, and then allow browser-based libraries to run directly on the App side of uni-app , such as echart, threejs, see: renderjs

Use the vue syntax that is not supported by non-H5 terminals, and the writing method is limited by the custom components of the MiniApp. For details, see
Do not write style="xx" directly on the component attribute where the component is referenced, but write the style inside the component
Change paths such as url(//alicdn.net) to url(https://alicdn.net), because // on the App side is a file protocol
Many people use the local test service address (localhost or 127.0.0.1) when connecting to the Internet on the H5 side. Such a network address cannot be accessed by the mobile App. Please use the accessible IP of the mobile phone to connect to the Internet.

# H5 is normal but the possibility of abnormal MiniApp

Same as above
v-html is supported in both h5 and app-vue, but not in MiniApp
The MiniApp requires that the connected URLs must be equipped with a whitelist

###The possibility that the MiniApp is normal but the App is abnormal The rendering engine of Vue pages on the App side defaults to the system webview (not the mobile phone's own browser, but the rom's webview). 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, Android4.4 also supports flex, just don't use too new css. You can find an Android 4.4 mobile phone or use a pc emulator to actually test it. Most domestic Android emulators are 4.4 or 5.0.

The MiniApp does not have browser compatibility issues, and it has dozens of built-in custom webviews of its own. So if your H5 and MiniApp interfaces are normal, but the App interface is abnormal, it is mostly because of css compatibility.

Solve problems like this:

Drop support for older phones
You don’t need to use too new css syntax, you can query it in caniuse
Starting from uni-app 2.5.3, the Android side supports the introduction of the Tencent x5 browser kernel, which can smooth out the browser compatibility issues of low-end Android, [see x5 user guide for details](https://ask.dcloud. net.cn/article/36806)

# The MiniApp or App is normal, but the possibility of abnormal H5

Before uni-app 2.4.7, the H5 side did not support the custom components of WeChat MiniApp, that is, the components under wxcomponents, which may cause compatibility problems at this time. From 2.4.7 onwards, H5 also supports WeChat custom components, and there is no longer any compatibility issues in this area.
The App side uses App-specific APIs and functions, such as plus, Native.js, subNVue, native plug-ins, etc.
The functions dedicated to MiniApp are used, such as WeChat coupons, MiniApp plug-ins, and WeChat MiniApp cloud development. For cloud development, it is recommended to use uniCloud, which can be used across terminals.

# App is normal, MiniApp, H5 abnormal possibility

App-specific plus, Native.js, subNVue, native plug-ins and other functions are used in the code

# Notes on using Vue.js

uni-app is implemented based on Vue 2.0. Developers should pay attention to the usage differences of Vue 1.0 -> 2.0. For details, see [Migration from Vue 1.x](https://cn.vuejs.org/v2/ guide/migration.html)
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, and when the page is opened again, the last data will be displayed
```
//Correct usage, use function to return object
data() {
	return {
		title: 'Hello'
	}
}
//Incorrect writing will cause the last data to be displayed when the page is opened again
data: {
	title: 'Hello'
}
```
On the WeChat MiniApp side, uni-app entrusts the data binding function to Vue, and developers need to implement data binding according to Vue 2.0, which does not support the data binding method of WeChat MiniApp. Therefore, the following writing is not supported:
```
  <view id="item-{{id}}"></view>	
```
Need to be changed to:
```
<view v-bind:id="'item-' + id "></view>	
```

# Differences from traditional web development

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

JS note
- For non-H5 clients, you cannot use the browser's own objects, such as document, window, localstorage, cookie, etc., and you cannot use jquery and other frameworks that rely on these browser objects. Because the QuickApp of various MiniApp do not support these objects.
- The absence of these browser-built objects does not affect business development, and the API provided by uni is sufficient to complete the business.
- When uni's api is compiled to 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 window and document on the App side, you need to implement it through renderjs.
- uni's api is available on multiple terminals. In the conditional compilation area, the proprietary APIs of each platform can also be used, such as wx., plus. APIs can be used under WeChat and app respectively.
- In order to reduce the cost of migrating MiniApp to uni-app, the API of wx can also be run directly in the app. For example, writing wx.request and uni.request is the same, but it is still recommended to use it only in the conditional compilation area of WeChat APIs of wx.

Tag attention
- The uni-app tag is the same as the MiniApp tag, and different from the HTML tag. For example, div should be changed to view, span should be changed to text, and a should be changed to navigator.
- In order to reduce the cost of migrating h5 applications to uni-app, writing divs and spans can also run on apps and MiniApp, because the uni-app compiler will compile these HTML tags into MiniApp tags. But it is still recommended to form a new habit.
Css note
- Although most css styles can be supported in WeChat MiniApp 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 QuickApp only support flex layout)
- In terms of units, uni-app defaults to rpx. This is a universal unit that can be crossed see
Project catalog attention
- Page file: put it in the pages directory; recommended solution: create a new page directory, and then create a .vue file with the same name as the directory, such as /pages/list/list.vue, and then add it to pages.json to complete the registration. This is the same strategy as for MiniApp.
- Custom components: Put them in the component directory
- Static resources: such as pictures, fixedly placed in the static directory. Here are the rules for webpack
Attention to the data binding method
- uni-app is implemented based on Vue 2.0, developers should pay attention to the usage differences of Vue 1.0 -> 2.0, see [Migration from Vue 1.x](https://cn .vuejs.org/v2/guide/migration.html)
Each page supports the use of native titles, and the home page supports the use of native bottom tabs. These must be configured in pages.json, and these 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 MiniApp, it is not spa but mpa
The first position coordinate system is the national survey bureau coordinate system gcj02, which can be supported by multiple terminals. The Baidu positioning and Baidu map of the old version 5+ use Baidu's private coordinate system bd09ll, and this coordinate system needs to be converted. The Baidu map in the new version of uni-app has been changed to gcj02 by default. Gaode map is not affected, it has always been gcj02

# H5 Development Notice

H5 published to the server Note:
1. Configure the post-publishing path (publishing in the root directory of the website is not required), for example, the path of the posting website is www.xxx.com/html5, edit the h5 node in the manifest.json file, and add the base attribute under the router to html5
2. Click the menu Release -> H5
3. Find the resources in the unpackage/dist/build/h5 directory under the current project, deploy the server (or use the local server to preview), if you need to deploy to a relative path (support local file protocol opening), refer to:https http://ask.dcloud.net.cn/article/37432.
Ways to reference third-party js:
1. Import through npm (through conditional compilation, only the h5 platform will import the corresponding library)
2. Edit the template attribute of the h5 node in the manifest.json file, fill in the html template path, and use the script method to import three-party js in the html template. The following example is part of the code of the html template with Baidu statistics added, and the template is all The code can refer to: custom template

<!-- ... -->
<body>
            <noscript>
                <strong>Please enable JavaScript to continue.</strong>
            </noscript>
            <div id="app"></div>
            <!-- built files will be auto injected -->
            <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 writing methods may take effect on the H5 side, but not on the MiniApp or App side.
H5 has verified the stricter vue grammar, and some irregularities will cause an alarm, for example: an object written after data will cause an alarm, and function must be written; the value of props cannot be modified; the outermost part of the component Multiple nodes etc. are not allowed under the layer template node.
What is generated after compiling to H5 version is a single page application (SPA).
If js cannot be connected to the Internet due to cross-domain, please note that network requests (request, uploadFile, downloadFile, etc.) have cross-domain restrictions in the browser. For solutions, see: https://ask.dcloud.net.cn/article /35267
The navigation bar and tabbar of APP and MiniApp are native controls, and the coordinates of the element area do not include the native navigation bar and tabbar; while the navigation bar and tabbar in H5 are realized by div simulation, so the element coordinates Will include the height of the navbar and tabbar. In order to elegantly solve the multi-terminal height positioning problem, uni-app adds 2 new css variables: --window-top and --window-bottom, which represent the distance between the top and bottom of the content area of the page distance. For example, if you want to float a menu above the native tabbar, write bottom:0 before. After such writing is compiled into h5, this menu will overlap with tabbar and be located at the bottom of the screen. Instead, use bottom:var(--window-bottom), no matter under the app or under h5, the menu will be suspended above the tabbar. This avoids writing conditionally compiled code. Of course, you can still use H5's conditional compilation to deal with the difference in the interface.
Note that 100vh includes the navigation bar when using the vh unit in CSS. When using it, you need to subtract the height of the navigation bar and tabBar. Some browsers also include the height of the browser action bar. Please pay attention when using it.
Normal support rpx, px is real physical pixel. It is not supported to use px as a dynamic unit by setting "transformPx": true in manifest.json.
Use the compass, geographic location, accelerometer and other related interfaces to use the https protocol, and the local preview (localhost) can use the http protocol.
When testing on the Chrome browser emulator device on the PC side, the location API needs to be connected to the Google server.
Page life cycles such as onLoad, onShow, etc. are not supported in components (except pages).
To avoid conflicts with built-in components, please add prefixes to custom components (but not u and uni). For example, the names of custom components that can be used: my-view, m-input, we-icon, such as the names of custom components that cannot be used: u-view, uni-input, if already Some projects use names that may cause conflicts. Please modify the names. In addition, the names of custom components under WeChat MiniApp cannot start with wx.
vue3 开发阶段不会自动处理语法兼容问题，如果在低版本浏览器上运行，需要自行处理，可参考详情。

# MiniApp development attention

# Different MiniApp have different implementation mechanisms, and there may be platform compatibility issues

Browser kernel differences

The browser kernels of various MiniApp are different, which may cause css compatibility issues. For more details, refer to: https://ask.dcloud.net.cn/article/1318

Custom component rendering differences

微信（可以使用virtualHost配置）/QQ/百度/抖音这四家小程序，自定义组件在渲染时会比App/H5端多一级节点，在写样式时需要注意：

When using flex layout, directly setting the parent element of the custom component to display:flex will not affect the root node inside the custom component, you need to set the current custom component to display:flex.
Set the root element height to 100% inside the custom component, which cannot fill the parent element of the custom component. It is necessary to set the height of the current custom component to 100% at the same time.

支付宝小程序默认启用了virtualHost配置不会插入节点，一般不存在如上问题。

# Vendor.js too large processing method

The MiniApp tool prompts that vendor.js is too large, and the conversion from es6 to es5 has been skipped. The conversion problem itself is ignored, because vendor.js is already es5.

For volume control, refer to the following:

use runtime code compression
- For the project created by HBuilderX, check Run-->Run to MiniApp Simulator-->Whether to compress the code at runtime
- The project created by cli can add the parameter --minimize in package.json, example: "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli- service uni-build --watch --minimize"
Use subpackage optimization, [Description about subpackage optimization](/collocation/manifest?id=%E5%85%B3%E4%BA%8E%E5%88%86%E5%8C%85%E4%BC %98%E5%8C%96%E7%9A%84%E8%AF%B4%E6%98%8E)

# Various MiniApp development tools download address

# Update log list of various MiniApp

# WeChat MiniApp Development Attention

It is recommended to pay attention to WeChat MiniApp Current Bug List, find ways to avoid known bugs.

# Pay attention to Alipay MiniApp development

showLoading is opaque, that is to say, the page content cannot be clicked when loading is displayed.
The @ symbol is not allowed in file or folder names.
The data returned by the network request will be processed strictly according to dataType, if it does not meet the specifications, an error will be thrown instead of being returned in the original format.
The canvas component is identified by id, not canvas-id. It has not been processed yet, so it is necessary to actively add the id attribute.
As a result of the current test, the navigation bar will turn into black text only when the background color is set to #FFF(FFF).
The navigation bar of the Alipay MiniApp supports transparent gradient effects, and related configurations will be provided later.
When using a pseudo-element as a border, the height value cannot use 1rpx, you need to use 1px directly.
ECharts are not supported.
The payment function cannot be simulated and needs to be tested on a real device.

# Baidu MiniApp development attention

Attribute selectors are not supported.
scoped is not supported.
Functions such as login / getUserInfo / payment cannot be simulated on the emulator (development tool).
The preview of map component is not correct on developer tool, but it is correct on mobile phone.
The value of windowHeight obtained by getSystemInfo is incorrect in the simulator, but the real device preview is correct.
v-if and v-for cannot be used together under the same tag.
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 corresponding to some selectors to not match.

# 360 MiniApp development attention

Supported by HBuilderX version 2.7.6+
The default is H5 platform components, if you need 360 platform components, please use <se-...></se-...>, such as <se-video></se-video>
<se-...></se-...> is a proprietary component of the 360 platform, which cannot be cross-platform, and requires conditional compilation of mp-360 pages configuration

{
	//...
	"globalStyle": {
		"mp-360": {
			"navigationStyle": "custom" // 去掉uni-app header，使用360小程序header
		}
	}
	//...
}

360 MiniApp Documentation

# QuickApp development attention

Supported by HBuilderX version 2.7.12+

# quickapp-webview

Currently only supported by vivo oppo
Minimum platform version support requires 1063
Canvas component is not supported yet

# quickapp-webview-huawei

The minimum version of Huawei QuickApp IDE is 2.5.2 (it is known that this version of the tool has a bug: it does not support spaces in the project name)
Minimum platform version support requires 1070
Does not support uni.login(OBJECT) temporarily, use conditional compilation for the time being, refer to the document https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/webview-api-hwaccount
Payment is not supported yet, payment depends on uni.login(OBJECT)
When the page has a scroll bar, the canvas component will not scroll with the page
The rich-text component displays abnormally in some cases

# sign certificate configuration

sign is placed in the root directory of the project, automatically copied to .quickapp/sign after compilation, and .quickapp will be deleted each time the compilation is completed to avoid loss of certificates

products