GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类

小程序中默认的导航条只能设置背景色，标题等效果有限，因此需要使用自定义导航条，源码请在demo查看

jh-navba

jh-navbar：基于vant的navbar二次封装，支持设置渐变背景色、网络、本地背景图，左侧文字，左侧图片，左侧、标题solt，隐藏返回按钮

默认效果

渐变背景色

透明背景，隐藏返回按钮

左侧文字

左侧图片

左侧solt

  自定义slot 

网络背景图（推荐）

本地背景图(base64)

本地背景图要把图片转成base64图片使用，在js代码中定义转换后的base64图片：localImage，然后在wxml中使用

图片转base64网站：http://tool.chinaz.com/tools/imgtobase

标题slot

jh-custom-navbar

jh-custom-navbar：支持设置渐变背景色、网络、本地背景图，左侧返回文字，可设置显示home主页按钮，标题slot
因为涉及胶囊按钮样式，在app.js中通过wx.getSystemInfo获取一些尺寸信息，然后在组件中使用，这样只获取一次即可

注意：

在获取胶囊按钮样式信息中发现，iOS上获取的数据异常，然后通过异常的胶囊按钮数据算出的导航条高度不对。熟悉iOS的应该知道，iOS设备的状态栏的高度为：20(非刘海屏)或 44(刘海屏)，标题栏高度为：44。因此暂时判断如果是iOS设备，把标题栏高度直接设置为 44，其他端还按照下面计算方式计算：

导航条高度 = 状态栏高度 + ( 标题栏高度=胶囊按钮高度+(胶囊按钮Top-状态栏高度)*2 )

在微信开放社区看到的其他计算方式：


默认效果

渐变背景色

网络背景图

隐藏返回按钮

带返回文字

带home主页按钮

home+渐变背景色

home+网络背景图

home+本地背景图

本地背景图要把图片转成base64图片使用，在js代码中定义转换后的base64图片：localImage，然后在wxml中使用

图片转base64网站：http://tool.chinaz.com/tools/imgtobase

隐藏返回按钮

标题slot