微信小程序布局及嵌套地图
这篇博客主要讲微信小程序的布局的基础知识。以及微信小程序加入地图之后会出现的一些问题（坑）。
微信小程序布局之---Flex布局
1.想要使用flex布局的第一步：
display:block块内容 使用新行开始显示。
diaplay:flex行内容 在一行内显示子元素。
默认都是display:block.
2.指定子元素的排列方向，第二步：
flex-direction:row 子元素从左到右的水平方向
flex-direction：row-reverse 子元素从右到左方向
flex-direction:column 从上到下
flex-direction:column-reverse 从下到上
上面就是子元素一般的排列方式。
3.对齐方式justify-content（主轴对齐方式）
（借图说话）
justify-content:flex-start 主轴起点对齐（默认值）
justify-content:flex-end 主轴结束点对齐
justify-content:center 在主轴中居中对齐
justify-content:space-between 两端对齐，两端子容器分别靠近容器两端，其他子元素间隔相等。
justify-content:space-around 每个子元素的距离相等，两端子元素距容器距离=和其他子元素间的距离。
4.对齐方式align-items（侧轴对齐方式）
(stretch)
align-items:stretch 填充整个容器
(flex-start)
align-items:flex-start 侧轴的起点对齐
(flex-end)
align-items:flex-end 侧轴的终点对齐
(center)
align-items:center 在侧轴中居中对齐
(baseline)
align-items:baseline 以子元素的第一行文字对齐
以上便是关于微信小程序布局的一些样式介绍。接下来介绍在微信小程序中加入地图，又会遇到什么坑呢？
微信小程序之---加入地图（这里我使用的是高德地图）
我在微信小程序中加入高德地图。根据高德官方提供的方法来进行调用，地址：https://lbs.amap.com/api/wx/summary/
问题：1.在高德地图中要弹出一个带input的弹框，会出现弹框无法显示的情况。（我建议大家一定要在真机上跑，因为模拟器很多东西运行正常，到整机就歇菜，比如现在这个问题）
原因：地图在微信小程序里属于最高级的图层，不能被其他的所掩盖。
但是微信给我们提供了一个cover-view这个标签，这个标签可以覆盖原生组件上的文本视图，它可以覆盖map、video、canvas、camera。但它只支持嵌套cover-view、cover-image。
不能嵌套input。那么我们怎么实现 在地图上显示包含输入框的弹框 这个需求呢？
微信官方是没有就提供这个方法的，于是产生了如下鸡肋繁琐的方法，也是我现在唯一能想到的办法。
解决：高德地图为小程序提供了静态地图的功能，也就是根据你的坐标位置，缩放比例，给你生成一张静态地图。
一开始进入的时候，显示地图，隐藏弹框。在要show弹框的时候，就隐藏掉map，把静态地图调出来，并且显示。这个时候，地图在下方，弹框也正常显示出来了。然后你关闭弹窗，隐藏掉静态图，显示出地图。（这样就完成了）
我第一反应是，不可能吧，一个小小的弹窗要费这么大的劲儿？开玩笑吧。
我查了很多资料，确实是微信没有提供这种服务，到了9021年都还没解决，实在让老夫痛心！
给新手们一些建议：
1.最好不要用微信小程序自带的wx.showToast和wx.showLoading，自己去写一个提示类。
原因：显示字符的限制。只能输入极少长度的字来进行提示，有很大的限制。
以及显示图标的限制。提示的图标不可更改（无论是正确错误都是一个√，会给用户造成极大的误解）
2.多去看微信给的api。
这是我在开发过程中遇到的一个问题的分享，希望能帮到大家，也巩固自己的学习。谢谢。有误请指正。
微信小程序布局及嵌套地图相关推荐
- 微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现
采坑记录: 1.微信小程序对腾讯地图的支持好.拓展强,不建议使用其他地图 2.坐标问题** 高德地图与腾讯地图使用的是 GCJ02坐标系 3.使用微信小程序的内置方法的经纬度存在偏差.解决方案看下文 ...
- 微信小程序使用腾讯地图进行路线规划，坐标转地址，逆地理编码，计算目的地跟自身定位的距离
微信小程序使用腾讯地图 1.介绍腾讯地图 官方文档: https://lbs.qq.com/ 这里,我主要运用的是这几个api ,我在运用的过程中主要实现的功能有:地图路线规划.地址转坐标+计算距离. ...
- 腾讯小程序 java编写_微信小程序 使用腾讯地图SDK详解及实现步骤
微信小程序 使用腾讯地图SDK详解及实现步骤 近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http:// ...
- 微信小程序调用腾讯地图API进行驾车路线规划
微信小程序调用腾讯地图API进行驾车路线规划 申请key 下载sdk 实现代码 遇到的问题 申请key 微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如 ...
- 微信小程序加载 FengMap地图
实现微信小程序加载FengMap地图,主要通过小程序<web-view>组件的src属性的外链方式加载,如<web-view src="https://fengmap.co ...
- 微信小程序布局技巧（三）
微信小程序布局技巧(三) 前言 小程序适配 物理像素 小程序中的px px和rpx转换 应用 尾巴 前言 本文是微信小程序(本文后面统称小程序)布局技巧系列最后一篇文章,主要说明小程序的屏幕适配问题. ...
- 小程序 | 微信小程序实现循环嵌套数据选择
小程序 | 微信小程序实现循环嵌套数据选择 一.效果展示 二.代码实现 在.wxml文件中,有时从后台传来的数据可能会出现数组嵌套数组的情况,需要利用wx:for嵌套实现数据的展示.这时,外层循环正常 ...
- 微信小程序城市定位(百度地图API)
概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
- 微信小程序开发 使用高德地图（精准一些）
1.在进行微信小程序开发 时,发现使用高德地图精准一些,于是进行了相关的探索 2.使用高德地图符合 一般地图使用的习惯,例如在"距离XX多远","在XXXX附近" ...
- api 定位 微信小程序 精度_微信小程序城市定位(百度地图API)
概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
最新文章
- python bindings_OpenCV-Python Bindings 如何工作 | 六十四
- swt能单独在linux运行么,java – 在Mac上运行基于SWT的跨平台jar
- R语言axis函数自定义可视化的坐标轴刻度线（axis ticks）
- Kotlin中?和!!的区别
- Python实训day09pm【Python处理Excel实际应用】
- Window VMWare中Centos虚拟机ifconfig命令不显示ens33
- 单网卡配置多IP ×××
- 利用扩展双屏技术及Chrome浏览器,快速剖析优秀网页Div及CSS构成,并高效实现原型创作
- 目录 1. Java中使用Ognl表达式引擎 1 1.1.1. 一、Ognl简介 1 1.1.2. 二、Ognl应用场景 1 1.2. 基本介绍 vs 模板语言 2 1.Java中使用Ognl表达
- 用StringUtil判断字符串非空的方法
- Awesomium（一）-- WebSnapshot
- UU加速器——学术资源加速
- 【反射机制】与 【xml解析 】之 巧夺天工 —————— 开开开山怪
- LabwindowsCVI Excel操作说明及事例
- 初识Android 制作一个简单的记账本
- 计算机网络技术中,分组交换技术在计算机网络技术中的作用及特点是什么?
- Ubuntu / Windows 查看域名系统 (Domain Name System，DNS)
- 最新体感：超级街霸4
- nvm+nodejs安装以及国内源设置
- 学堂在线答案计算机应用基础,《计算机应用基础》离线作业答案