微信小程序：自定义柱状图

1

EChart在某些配置较低的手机上出现无法交互的情况，换成自定义控件解决了这个问题。

2

新建一个自定义组件，布局如下

wxml

根据官方文档的说法，最好使用canvas2d进行绘制。

3

js

通过SelectorQuery获取canvas对象，这里的in方法用于获取自定义组件中的节点。

node属性用于获取节点实例，即canvas对象，size用于获取节点尺寸，就是canvas的宽高。这里有一个坑，通过节点获取到的画布宽高，仅仅是画布的宽高，想要在真机上正常显示，还需要获取手机的密度，并将画布的宽高乘以密度，canvasContext同样缩放屏幕密度倍数。

pixelRatio，官方说明为像素比，应该就是开发android时，1dp等于多少px。

4

绘制柱状图，其实并不复杂，统计图的要素就那么多。

首先是标题，如果需要标题的话，那么就要在绘制标题时，就需要指定标题的样式，然后预留出标题周围需要的边距。然后可以把绘制标题的方法抽取一个单独的方法。

坐标轴，确认坐标轴原点的位置，要考虑预留出坐标轴名称的位置，预留刻度名称的位置。

当获取到数据时，绘制跟数据有关的部分，也就是刷新方法。

如果需要动态刷新，js的canvas需要把原有的画布内容清空，于是要有一个clear方法。

5

提示条canvas的要覆盖在统计图canvas上，同理要根据屏幕密度对画布进行调整。同时初始化一组跟统计图canvas同样的坐标系。

绑定屏幕点击事件bindtouchastart，点击屏幕时记录点击的位置，显示提示条。

6

当手指在屏幕上滑动时，监听事件bindtouchmove，根据滑动距离变化触发页面刷新，统计图canvas，提示条canvas根据需要，是否都需要刷新。

大致思路是这样， 源码 供参考。

封装hf-picker选择器。因为自带的picker在iOS 、安卓上显示的样式不一致，产品测试提出个能不能样式弄成一致。想系统提供了picker-view这个，应该是没问题的。 

一番 *** 作以后，发现在层级不复杂的页面效果很不错，但是在一些view嵌套view嵌套的很深，比如里面已经有非statics的父view时，那么这个选择器的d窗显示的位置就不对了。同事说这个通过view肯定是实现不了，毕竟父view范围就那么大，除非把选择器view放到page里面去 ,是可以实现，但是违背了封装组件的原则。同事说试试half-screen-dialog，结果发现提供的Slot效果达不到UI要求

如今有方法对half-screen-dialog的内部元素样式进行设置了，赶紧搞起。 最终结果还是挺好的。因为是dialgod出，所以不用考虑父view的范围问题了。 

最近做项目的时候，突然来了个小特殊的需求，根据客户的类型来动态显示底部的tabBar菜单。当时我就有点小懵逼了，这个不是小程序自带的组件么？还要做成动态？这就有点尴尬了

不过也只是一时尴尬而已，然后我就展开了搜索之旅然后发现，官方的组件确实没办法做动态，那咋办，如果真的有这个需求那也是得去处理滴呀~然后也看了有一些做到这效果的方法，那就试一下呗。。其实就是自定义个tabBar的模板，以下是实现：

首先，既然是说自定义组件，那是用到template了。那先在Page里新建个template的文件夹，以便放tabBar的组件。

然后新建个tabBarwxml文件，这里就写下你的tabBar的结构。

下面是tabBar所需要用到的样式，我这里就直接写在全局appwxss了。

然后接下来是js的部分，由于是底部的导航，那肯定是不止一个页面用到的，那这里就可以写在全局的appjs里面方便使用。这里我写了两种tabBar的模板，分别对应来显示

然后在需要用到这个组件的页面上直接调用。比如这里的index页面。

然后去indexjs里面调用tabBar

然后下面是效果图。

就这些。我个人觉得这个自定义导航的用户体验不是很好，能不用就不要用，不过知道下方法也是ok滴！如有发现有错或者不足的地方可以指出，谢谢！

在自定义组件js文件的properties设置一个变量用来接受数据

在外部组件的js中, 设置一个变量用来发送数据, 然后将接口获取的的数据给这个变量

利用wxml将这个变量的值传递给自定义组件的变量

最后在自定义wxml中将这个变量渲染出来

注意：个人开发者无法使用

登录微信公众平台，在你的小程序后台的设置-第三方服务—插件管理，搜索插件并点击添加。

微信小程序：

小程序的appjson里声明使用插件

在使用插件的页面的js文件里

使用插件的自定义组件，在json中定义需要引入的自定义组件。使用plugin://协议

页面中使用

暂停方法：

uniapp：

manifestjson添加：

在pagejson中的对应页面的 style中添加

页面实现：

n0041aa087e即为vid。

一、设置自定义顶部导航

Navigation是小程序的顶部导航组件，当页面配置 navigationStyle 设置为 custom 的时候可以使用此组件替代原生导航栏。

1全局顶部导航自定义，在appjson的“window”里添加"navigationStyle": "custom"

2只在某一个页面自定义顶部导航，在该页面的json文件里添加"navigationStyle": "custom"

二、具体的导航块根据需要自行书写

以上就是关于微信小程序：自定义柱状图全部的内容，包括:微信小程序：自定义柱状图、微信小程序自定义picker组件、微信小程序动态tabBar实现等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！