uniapp nvue 和 subNvue的 使用
应为我的项目用到地图的页面比较多。项目用的是高德地图，百度地图是不支持nvue ，uniapp 要在vue里面地图的层级有问题。只支持简单的
nvue
这就是 Weex 中使用 Vue的注意事项
使用 nvue 开发注意事项：
-
css样式 nvue 只支持 flex 布局且不支持百分比，最大最小高宽等，自己在写的时候多看warning或是及时搜索 相关写法。
-
如果 huilderx 编译 nvue 时出错 可以按照该文件修改一下。就可以忽略 nvue不支持的样式， 顺利编译成功。
使用 subNVue 子窗体的页面结构
我们建议 subNVue 子窗体与引用该子窗体的vue页面放在同一目录下，新建 subNVue 目录包含这些 subNVue 子窗体，例如：
|-- pages
|-- index // index 目录
| |-- subNVue // subNVue 目录
| |-- nav.nvue // 自定义导航栏
| |-- popup.nvue // 弹出层子窗体
|-- index.vue // index 页面
使用 subNVue 子窗体的 pages.json 配置
{
"pages": [{
"path": "pages/index/index", //首页
"style": {
"app-plus": {
"subNVues":[{
"id": "concat", // 唯一标识
"path": "pages/index/subnvue/concat", // 页面路径
/*"type": "popup", 这里不需要*/
"style": {
"position": "absolute",
"dock": "right",
"width": "100rpx",
"height": "150rpx",
"background": "transparent"
}
}]
}
}
}]
}
注意事项:
- id 属性是全局唯一的，
- path 路径只能是 nuve 页面路径
- type 属性目前只有导航栏 (navigationBar) 和弹出层 (popup) 类型，且级别最高，一旦设置 type 为 navigationBar 或 popup， position 和 dock 的值都会被忽略。
- position 为原生子窗体的定位方式。
- dock 表示原生子窗体的停靠位置，只有当 position 值为 dock 时才生效，如 top, bottom,right, left 等。
在配置中可以使用 upx 单位，方便你进行响应式布局。
怎么在页面中使用 subNVue 子窗体
在 pages.json 中增加完配置，也写好了 subNVue 子窗体，接下来就是在 vue/nvue 页面中使用了。 在 vue 和 nvue 页面中使用方式是一样的，这里以 vue 页面为例进行说明:
在页面中打开和关闭 subNVue 子窗体
// 通过 id 获取 nvue 子窗体
const subNVue = uni.getSubNVueById('map_widget')
// 打开 nvue 子窗体
subNVue.show('slide-in-left', 300, function(){
// 打开后进行一些操作...
//
});
// 关闭 nvue 子窗体
subNVue.hide('fade-out', 300)
动态修改 subNVue 子窗体位置，大小
subNVue.setStyle({
top: '100px',
left: '20px',
'100px',
height = '50px',
})
subNVue 子窗体与 vue/nvue 页面通信
无论是页面与页面，子窗体与子窗体之间，如果没有了彼此之间的通信，都只是孤立的散件而已。 nvue 子窗体与使用子窗体的 vue/nvue 页面之间，可以互相发送和传递消息，进而实现彼此之间的互相更新和表现协调。 在 vue 和 nvue 中进行通信的方式一致，这里仍然以 vue 页面为例:
// 在 subNVue/vue 页面注册事件监听方法
// $on(eventName, callback)
uni.$on('page-popup', (data) => {
vm.title = data.title;
vm.content = data.content;
})
// 在 subNVue/vue 页面触发事件
// $emit(eventName, data)
uni.$emit('page-popup', {
title: '我是一个title',
content: '我是data content'
});
使用页面通讯时注意事项： 要在页面卸载前，使用 uni.$off 移除事件监听器。
注意事项：
在使用 subNVue 子窗体的页面中，同时满足下面两种情形时：
- 页面包含 map, video 之类的原生组件
- 页面使用了 type 为 navigationBar 的 subNVue 子窗体
- 原生组件可能会出现错位的问题，目前可以使用以下方法进行解决：
将此类元素放在页面的 onReady 中进行渲染。
- 采用延时的策略，保证元素在页面渲染后，再去定位位置。
另外发现一个小map地图的小坑 ，map组件动态变更 scale 时 如果后面设置的scale和初始化的设置为一个值。此时地图的层级是没有效果的。 比如 初始化设置14， 那么动态设置时可以设置为13.999 此时地图就可以顺便的放大和缩小了。
动态获取地图的放大层级
onReady() {
this.mapApp = uni.createMapContext('myMap', this);
// #ifdef APP-PLUS
this.webView = this.$mp.page.$getAppWebview();
// #endif
},
this.mapApp.getScale({
success: function(res) {
console.log(res.scale)
}
})
JDK 中的证书生成和管理工具 keytool
- 在自己的机器上安装 jdk
- 安装完成后吧jdk的路径添加到环境变量里面。
利用keytool 创建一个机构为mycart的自有证书，在此期间需要输入机构mycart的私钥口令。如果自己依据创建过私钥，则直接回车，如果没有创建过私钥。私钥默认是android
keytool -genkeypair -alias mycart
利用keytool 查看 生成证书的详情。
keytool -list -v
此时就可以看到 证书私钥的 SHA1 ，在我的项目里面用到地图。申请app打包就用到了证书的SHA1 。此时就可以把证书的内容保存下来。方便以后打包时使用。