微信小程序01：底部菜单(tabBar)

tips：

1.小程序底部菜单标签个数不少于2个，最多不超过5个。

2.可以在 阿里巴巴矢量图标库 找到你需要的图标。

3.小程序建议图标大小为81*81px

我这边选择的是64尺寸的png图片高咐弊，每一个图标选择两种颜色，分别对应未选中状态和选中状态，具体按照你们设计项目进行

tips：

1.建立项目图片文件夹简樱：images

2.在pages中建立相戚族对应的菜单栏目文件夹

3.配置app.json： tabBar配置

1.app.json中，"window":{}和"tabBar":{}是同级

2. 全局配置

3. 设置tabbar地址:wx.setTabBarBadge(Object object)

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

如果是所有页面的导航栏都要自定义，在app.json里找到window样式

"navigationStyle":"custom"

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

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

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

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

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

          <image src=""></image>

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

            全国

            {{cityName}}

          </view>

      </view>

    </view>

// 获取状态栏高度

        const { statusBarHeight } = wx.getSystemInfoSync()

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

        const menuButtonObject = wx.getMenuButtonBoundingClientRect()

        console.log('右上角菜单的尺寸：睁亮',menuButtonObject)

        const { top, height } = menuButtonObject

        // 计算导航栏的高度

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

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

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

        const statusNavBarHeight = statusBarHeight + navBarHeight

        this.setData({

            navHeight:statusNavBarHeight,

            imgTop:statusNavBarHeight-45,

            cityTop:statusNavBarHeight-45-25

        })

从2017年1月9日微信第一批小程序正式上线，到后来全民大众玩跳一跳，在至微信对广大开发者的支持。各大巨头开始布局，2018年4月12日百度也上线了小程序，小程序已成为近期炙手可热的一个趋势，那么对于PM来说设计小程序应注意什么，下面以微信为例记录一二。

设计时减少无关的设计元素对用户的干扰，礼貌的向用户展示程序提供的服务，友好的引导用户进行 *** 作。

每个页面设计时都有明确的重点，便于用户快速理解，避免出现其它与用户的决策和 *** 作无关的干扰因素。

用户在进行某一 *** 作流程时，应避免出现目标流程之外的内容打扰用户

明确告知用户身在何处，又可去哪儿，确保用户在页面中游刃有余的穿梭

微信在小程序内不提供统一的导航栏样式，开发者可自定义，建议，所以的次级页面在左上角提供返回上一级页面 *** 作。另外，iOS可以右滑返回，安卓可以通过物理键返回

1 、小程序菜单 ：微信会在右上方放置官方的小程序菜单，固定位置，开发者不可对其内容自定义，但可以选择深浅两种配色，要预留出该区域空间

2、页面内导航

开发者添加标签分页Tab导航，标签分页栏可固定在页面顶部或底部。标签不得少于2个，不多于5个

小程序首页可选择微信提供的原声底部标签分页样式，仅供首页使用。可自定义图标样式，标签文案及文案颜色

顶部标签分页栏颜色可自定义，务必注意保持分页栏标签的可用性，可shi性和可 *** 作性。

页面过长加载会引起用户不满，但是加载等待不可避免，要及时反馈以缓解用户等待的不良情绪

启动页将突出展示小程序的品牌特征和加载状态。除品牌标志展示外，页面上的其他元素如加载进度，均由微信统一提供，不能更搭庆首改

微信小程序内，微信提供标志的页面下拉刷新及加载能力和样式，无需自行开发

用户可自定义页面内容的加载样式，不过应尽量简洁，并使用简单动画告知用户加载过程； 模态加载，除了在某些全局性 *** 作下不要使用

局部加载反馈只在触发加载的页面局部进行反馈，这样的反馈机制是微信推荐的

全局加载反馈，可参考下图，使用标题栏提示加载小程序页面内容的过程。

注意：1、若载入时间较长,应提供取消 *** 作,并使用进度条显示载入的进度。

     2、载入过程中,应保持动画效果 无动画效果的加载很容易让人产生该界面已经卡死的错觉。 

  3、不要在同一个页面同时使用超过1个加载动画。

除了在用户等待的过程中需给予反馈外，对 *** 作结果页需要给予明确的反馈.

4.1 局部页面 *** 作，可在 *** 作区域直接反馈，如点击多选控件

4.2 页面全局 *** 作， 图标型d出提示 ，1.5s自动消失，并不打断流程，适用于不需要强调的 *** 作提示； 文字型d出提示 ：适用于轻量化用文字解释当前状态或提醒不严重的错误； 模态对话框 ：对于需要用户明确知晓的 *** 作结果状态可通过模态对话框来提示

结果页：用于 *** 作结果已经是当前流程的终结情况，最为强烈和明确告知用户 *** 作已完成

在设计任何的任务和流程时，异常状态知数和流程往往容易被忽略，而这些异常场景往往是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时予以用户必要的状态提示，并告知解决方案，使其有路可退。

要杜绝异常状态下，用户莫名其妙又无处可去，停滞在某一个页面的情况。上文中所提到的模态对话框和结果页面都可作为异常状态的提醒方式。除此之外，在表单页面中尤其是表单项较多的页面中，还应明确指出出错项目，以便用户修改。

1、减少输入

手机键盘区域小，输入困难而且容易引起输入错误，应尽量减小用户输入，利用现有接口或其他一些易于 *** 作的控件来改善用户输入体验。

如下图，在添加yhk时，采用摄像头识别接口来帮助用户输入。可利用微信对外开放的例如地理位置等接口

让用户在不得不手动输入的情况下，尽量让用户做选择而不是键盘输入，如：在用户差歼搜索时提供搜索历史课帮助用户快速进行搜索

2、避免误 *** 作

考虑点击热区，避免可点击区域过小或密集而造成误 *** 作

3、利用接口提示性能

---