微信小程序-自定义导航栏

新手学堂015

微信小程序-自定义导航栏,第1张

自定义导航栏分两种,一种是单独某个页面做一个自定义导航;一种是所有页面的导航栏都是自定义样式

如果是所有页面的导航栏都要自定义,在appjson里找到window样式

"navigationStyle":"custom"

所有页面的就需要先自定义组件了,这里先不做详说,因为我目前项目中只是首页需要自定义导航栏,这里我先详说这个

这样当前页面自带的导航栏就没有了,然后需要你在wxml页面中就可以开始写样式了

<!-- 自定义导航栏 -->

    <view class="navStyle" style="height:{{navHeight}}px">

      <view class="navFix" style="height:{{navHeight}}px;margin-top:{{imgTop}}px;">

          <image src=""></image>

          <view style="margin-top:{{cityTop}}px;">

            全国

            {{cityName}}

          </view>

      </view>

    </view>

// 获取状态栏高度

        const { statusBarHeight } = wxgetSystemInfoSync();

        // 得到右上角菜单的位置尺寸

        const menuButtonObject = wxgetMenuButtonBoundingClientRect();

        consolelog('右上角菜单的尺寸:',menuButtonObject);

        const { top, height } = menuButtonObject;

        // 计算导航栏的高度

        // 此高度基于右上角菜单在导航栏位置垂直居中计算得到

        const navBarHeight = height + (top - statusBarHeight) 2;

        // 计算状态栏与导航栏的总高度

        const statusNavBarHeight = statusBarHeight + navBarHeight;

        thissetData({

            navHeight:statusNavBarHeight,

            imgTop:statusNavBarHeight-45,

            cityTop:statusNavBarHeight-45-25

        })

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

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

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

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

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

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

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

然后去indexjs里面调用tabBar

然后下面是效果图。

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

您好,

“微信小程序”开发之前必须要完成和注册认证。如果是个人或者小公司想开发微信小程序,也可以找微信认证第三方开发商,比如赢在移动、正品科技等。

1、微信小程序注册

在微信公众平台官网首页,按照提示点击右上角的“立即注册”按钮,里面总过有12步,按照要求提交就可以了。

2、小程序申请微信认证

政府、媒体、其他组织类型帐号,必须通过微信认证验证主体身份。企业类型帐号,可以根据需要确定是否申请微信认证。已认证帐号可使用微信支付、微信卡券等高级权限。

认证入口:登录小程序—设置—基本设置—微信认证—详情

3、小程序申请微信支付

已认证的小程序可申请微信支付。

4、小程序绑定微信开放平台帐号

小程序绑定微信开放平台帐号后,可与帐号下的其他移动应用、网站应用及公众号打通,通过UnionID机制满足在多个应用和公众号之间统一用户帐号的需求。

UnionID机制说明:如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序),可通过UnionID来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序),用户的unionid是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,UnionID是相同的。用户的UnionID可通过调用“获取用户信息”接口获取。

5、了解“获取用户信息”接口请查看开发文档—API—开放接口—用户信息。

绑定小程序流程说明:登录微信开放平台、—管理中心—公众帐号—绑定公众帐号

注意:微信开放平台帐号必须完成开发者资质认证才可以绑定小程序。

微信小程序让日期选择器循环的方法是:

1、自定义选择器组件需要用到picker-view跟picker-view-column。

2、打开选择器时就要获取到当前的年月日,使用for遍历直接生成年份数组跟月份数组。注:天数根据年份跟月份动态生成。

3、在选择的过程中,选择器有个改变事件,当年份或者月份改变的时候,天数要随之变化。

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根据需要,是否都需要刷新。

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