小程序 tabbar

app.json 直接配置:

官方文档： 自定义 tabBar

custom-tab-bar/index

在小程序根目录下新建 custom-tab-bar 文件夹，文件夹下建立相应的组件。

wxml 文件：

推荐使用 cover-view + cover-image 组件渲染样式，以保证 tabBar 层级相对较高。不过现在使用 view 也可以，之前是因为使用 map 组件可能会导致无法覆盖，现在 map 组件已经支持同层渲染，所以使用 view 也是没问题的。

js 文件：

tabbar 的配置主要在这里。

因为每个 tab 页下的自定义 tabBar 组件实例是不同的，在跳转新的tab 后，是一个新的 tabbar 实例，先前那个已经被销毁了，所以要重新设置。

在每个自定义的 tab 页面 onShow 方法中，

可见使用系统提供自定义 tabbar 方式不好的地方在于每个 tabbar 页面都要手动设置一遍选中状态。

为什么说是系统自定义的？

因为我们自定义的组件 custom-tab-bar/index 并没有在每个页面的 json 中进行单独配置进行组件的引用，都是系统默认配置好的。

官方文档 Tabbar 。

通过 useExtendedLib 扩展库 的方式引入 weui 组件库。

app.json 配置：

在 tab 页面的 page.json 中引入 tabbar 组件即可：

wxml 使用：

直接将第二种方式 使用系统自定义的方式 custom-tab-bar/index 文件夹及文件移动到 components 自定义组件文件夹中 ，并将 app.json 中的 tabbar 配置删除即可。

在相应的 tab 页面引入自定义 tabbar 组件即可。

屏幕有效区域高度 windowsHeight，需要手动维护，系统不再维护。使用系统的 tabbar，屏幕的有效区域高度 windowsHeight = 屏幕高-状态栏高度-导航条高度-tabbar高度 ；而自定义的 tabbar 则没有计算 tabbar 高度，即 windowsHeight = 屏幕高-状态栏高度-导航条高度 。

小程序内调用腾讯地图要实现类似弧线图、网格热力图、标准热力图踩坑

假设你已经申请了微信小程序和腾讯位置服务账号

1、// 在地图标签上加subKey参数，获取方法在https://lbs.qq.com/dev/console/custom/mapStyle，必须自定义一个性化样式，否则图层显示不了

2、创建  map  上下文  MapContext  对象。建议使用  wx.createSelectorQuery  获取 context 对象

3、const mapContext = wx.createMapContext(string mapId) // mapId为地图标签的id

4、然后调用mapContext.addVisualLayer(Object object)

5、 // 主要参数是layerId，layerId获取方法在https://lbs.qq.com/dev/console/layers/layerEdit，新建好图层后，发布，会有图层id

6、自定义图层数据有刷新时间和次数限制，所以要做实时更新的数据，需要考虑可行性

7、自定义图层只能在真机上才能显示，

效果图：

微信开发者文档和腾讯数据可视化文档在小程序里的使用都不是很全面，主要是必须要用自定义图层样式，才能显示自定义图层，其他细节倒是文档上都有

---