[uniapp] The use and pitfalls of the native sub-form subNvue

need

Recently, I received a request to pop up a pop-up window on the video component, that is, to cover the native component of the video. When the video is
not playing, the pop-up window can be covered, but when the video is playing, the written pop-up window cannot be covered
because the video is a native component. , the level is very high, ordinary tags cannot be covered, and map tags
cover native components in the same way. The official solution is 1. Use the cover-view tag 2. Use subNvue native sub-forms, or Nvue
here because of the pop-up window style comparison Multiple, cover-view does not support nesting, so choose to use subNvue to write this pop-up window

accomplish

1. pages.json configuration

I have configured two subnvues on this page

		{
    
    
			"path": "pages/player/player1",
			"style": {
    
    
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false,
				"app-plus": {
    
    
					// 将回弹属性关掉
					"bounce": "none",
					"popGesture": "none",
					"subNVues": [{
    
    
						"id": "newMetalModal", // 唯一标识  
						"path": "pages/player/subNVue/newMetalModal", // 页面路径  
						// "type": "popup",  // 这里不需要
						"style": {
    
    
							"position": "absolute",
							"dock": "top",
							"background": "transparent",
							"margin": "auto"
						}
					}, {
    
    
						"id": "cardSuccessModal", // 唯一标识  
						"path": "pages/player/subNVue/cardSuccessModal", // 页面路径  
						// "type": "popup",  // 这里不需要
						"style": {
    
    
							"position": "absolute",
							"dock": "top",
							"background": "transparent",
							"margin": "auto"
						}
					}]
				}
			}
		}, 

2. Create nvue file

The official notes on nvue development, and the difference between vue and vue writing, will not be repeated here
Portal https://uniapp.dcloud.net.cn/tutorial/nvue-outline.html#nvue%E4%BB%8B%E7 %BB%8D

3. Form reference and communication

	const subNVue = uni.getSubNVueById('newMetalModal') //设置子窗体
		subNVue.show('slide-in-left', 200, () => {
    
    
		uni.$emit('sendMetalList', {
    
      // 与子窗体通信
			metalList: this.metalList,
			});
		})

	uni.$on('sendMetalList', data => {
    
    
		his.metalList = data.metalList;
	});

Trample record

1. The outermost div of the form cannot use the v-for loop, otherwise the entire form will not be displayed. If you need to do a loop, you can do it in the inner layer
2. css background does not support gradient linear-gradient, it will not take effect
3. When the interface communicates with the form, uni.$emit() needs to be written in the subNVue.show() callback, otherwise the communication fails
   
4. Only the text tag can set the font size and font color. So the text needs to be inside the text tag
5. During the development process, it is found that when the file is modified and compiled on the real machine, sometimes it cannot be compiled in real time. For example, if the second form is configured in pages.json, the real machine does not take effect and needs to be re-run.
6. If the interface is opened, there is no need to display the form. In the onLoad hook, you need to subNvue.hide() first, and then call show() through the event. Otherwise, the form will be displayed when the interface is opened.
7. When writing css, you can only write .classname{}, use scss nesting or inheritance, etc. The styles of a .b{} .a>.b{} will be invalid

Although the native form realizes the function of overriding the native label, the development pits are one after another, it
does not support hbx debugging, it must be real machine, and sometimes it cannot be compiled in real time
. There are limitations in the style and label usage, especially the whole window The style control of the body is not very flexible.
The control of the page to display and hide the form is not so flexible, similar to the control of dom elements

Subnvue and nvue still have compatibility issues between Android and ios, so I won’t go into details here, the main time is too long to forget~~~~