subNVue

1.创建nvue文件

在pages/index下建一个与login.vue同级的文件夹，文件夹里放.nvue文件

2.在pages.json配

"pages": [
		{
			"path" : "pages/index/login",
			"style" : {
				"app-plus": {
						"subNVues": [{
						"id": "sub", // 唯一标识  
						"path": "pages/index/subNVue/hello"
					}]
				}
			}
		}
]

3.在hello.nvue文件中复制以下代码

<template>
    <div>
        <text class="hello">hello uni-app</text>
		<button>收到</button>
    </div>
</template>

<script>
	export default {
			data() {
				return {
				};
			},
			methods: {
			},
	}
</script>

<style>
    .hello{font-size: 10px;color:red;}
</style>

4.在login.vue中复制以下代码

<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 500px;" :controls="controls" :circles="circles" :polyline='polyline'
					:scale="scale" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
				<button @tap="hide">隐藏</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909, //纬度
					longitude: 116.39742, //经度
					iconPath: '../../static/tab-my-current.png', //显示的图标			
					title: '阿打算', //标注点名
					label: { //为标记点旁边增加标签
						content: '文本1', //文本
						color: '#F76350', //文本颜色
						anchorX: 0, //label的坐标，原点是 marker 对应的经纬度
						anchorY: -80, //label的坐标，原点是 marker 对应的经纬度 
						// 					    x:39.909,//这个组件微信在1.2.0以后就废弃了
						// 					    y:116.39742,
						bgColor: '#fff', //背景色
						padding: 5, //文本边缘留白
						borderWidth: 1, //边框宽度
						borderColor: '#D84C29', //边框颜色							
						textAlign: 'right' //文本对齐方式。
					},
					callout: { //自定义标记点上方的气泡窗口 点击有效
						content: '地点1', //文本
						color: '#F76350', //文本颜色
						fontSize: 12, //文字大小
						borderRadius: 5, //callout边框圆角
						bgColor: '#55ff7f', //背景色
						padding: 2, //文本边缘留白
						display: 'BYCLICK', //'BYCLICK':点击显示; 'ALWAYS':常显
						textAlign: 'center' //文本对齐方式。有效值: left, right, center
					},
					// 					 anchor:{//经纬度在标注图标的锚点，默认底边中点
					// 						 x:5,
					// 						 y:1,
					// 					  }
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../static/tab-my-current.png',
					title: '阿迪达斯',
					x: 39.90,
					y: 116.399,
					label: {
						content: '文本2',
						color: '#F76350',
						bgColor: '#fff',
						padding: 5,
						borderRadius: 4,
					},
					callout: {
						content: '地点2',
						color: '#F76350',
						fontSize: 12
					}
				}],
				scale: 15, //地图层级
				controls: [{ //在地图上显示控件，控件不随着地图移动
					id: 1, //控件id
					iconPath: '../../static/tab-my-current.png', //显示的图标	
					position: { //控件在地图的位置
						left: 15,
						top: 15,
						width: 50,
						height: 50
					},
				}],
				circles: [{ //在地图上显示圆
					latitude: 39.90,
					longitude: 116.39,
					fillColor: "#FFC41F", //填充颜色
					color: "#12A1DD", //描边的颜色
					radius: 500, //半径
					strokeWidth: 2 //描边的宽度
				}],
				polyline: [{ //指定一系列坐标点，从数组第一项连线至最后一项
					points: [{
							latitude: 39.909,
							longitude: 116.39742
						},
						{
							latitude: 39.90,
							longitude: 116.39
						},
						{
							latitude: 39.89,
							longitude: 116.40
						},
					],
					color: "#0000AA", //线的颜色
					width: 4, //线的宽度
					dottedLine: false, //是否虚线
					arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
				}],


			};
		},
		onLoad() {
			uni.getLocation({ //获取当前的位置坐标
				type: 'wgs84',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			});
			let sub = uni.getSubNVueById("sub");
			sub.show('slide-in-left', 200, () => {
				console.log('subNVue 原生子窗体显示成功1');
			});
			sub.setStyle({
				"position": "absolute",
				"width": "100px",
				"height": "100px",
				"left": "20px",
				"top": "100px",
				"color": "#000000",
				"background-color": "#FFFFFF",
				"border-top-left-radius": "15px",
				"border-top-right-radius": "15px"
			})
		},
		methods: {
			hide() {
				let sub = uni.getSubNVueById("sub");
				sub.hide('fade-out', 300)
			}
		}
	}
</script>

<style>

</style>

重点就是在login.vue里

			let sub = uni.getSubNVueById("sub");
			sub.show('slide-in-left', 200, () => {
				console.log('subNVue 原生子窗体显示成功1');
			});
			sub.setStyle({
				"position": "absolute",
				"width": "100px",
				"height": "100px",
				"left": "20px",
				"top": "100px",
				"color": "#000000",
				"background-color": "#FFFFFF",
				"border-top-left-radius": "15px",
				"border-top-right-radius": "15px"
			})

如果是空白的

D:\HBuilderX\plugins\uniapp-cli\node_modules@dcloudio\vue-cli-plugin-hbuilderx\packages\weex-styler\lib

找到这个文件替换代码

function generateDeclaration (property, value, position) {
  return {
    type: 'declaration',
    property,
    value,
    position
  }
}
function transition (declaration) {
  var CHUNK_REGEXP = /^(\S*)?\s*(\d*\.?\d+(?:ms|s)?)?\s*(\S*)?\s*(\d*\.?\d+(?:ms|s)?)?$/
  var match = declaration.value.match(CHUNK_REGEXP)
  var result = []
  var position = declaration.position
  if(match){
  match[1] && result.push(generateDeclaration('transition-property', match[1], position))
  match[2] && result.push(generateDeclaration('transition-duration', match[2], position))
  match[3] && result.push(generateDeclaration('transition-timing-function', match[3], position))
  match[4] && result.push(generateDeclaration('transition-delay', match[4], position))}
  return result
}

function margin (declaration) {
  var position = declaration.position
  var splitResult = declaration.value.split(/\s+/)
  var result = []
  switch (splitResult.length) {
    case 1:
      splitResult.push(splitResult[0], splitResult[0], splitResult[0])
      break
    case 2:
      splitResult.push(splitResult[0], splitResult[1])
      break
    case 3:
      splitResult.push(splitResult[1])
      break
  }
  result.push(
    generateDeclaration('margin-top', splitResult[0], position),
    generateDeclaration('margin-right', splitResult[1], position),
    generateDeclaration('margin-bottom', splitResult[2], position),
    generateDeclaration('margin-left', splitResult[3], position)
  )
  return result
}

var parserCollection = {
  transition,
  margin
}

module.exports = function (declarations) {
  return declarations.reduce((result, declaration) => {
    var parser = parserCollection[declaration.property]
    if (parser) {
      return result.concat(parser(declaration))
    } else {
      result.push(declaration)
      return result
    }
  }, [])
}