先看效果

如需要看下一篇文章-- 微信小程序 自定义底部导航闪烁解决 正在加急完成预计明天

⚠️ "tabBar"重点，自定义tabbar也需要写，但是在appjs中隐藏默认的tabbar

⚠️ thisgetSystemInfo() === 获取设备信息，因为iosX系统适配

tabbarwxml

tabbarwxss

cjs

tabbarjson

自定义导航基本可以，下面在页面中引入并使用

footerwxml, headerwxml, mywxml

footerjson, headerjson, myjson

footerjs, headerjs, myjs

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

如果是所有页面的导航栏都要自定义，在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

        })

1、首先打开微信开发工具，载入需要修改的小程序工程。

2、然后打开appjson页面，在window下写下面的代码，先用color和selectedColor设置底部菜单点击前和点击后文字的颜色。

3、然后在list中设置两个标签，其中使用pagePath和text填写一下点击跳转的路径和选项的名字。

4、最后填写点击前的图标和点击后的图标，这里每个选项用两个颜色图标，可以去找矢量图，尺寸大约在64像素左右，其中iconPath为点击前的图标，而selectedIconPath为点击后的图标。

5、最后设置好后，在左侧的预览就可以看到菜单的样式了：

解题思路

1左右的结构(scroll-view)

2左侧点击的时候，要跟右侧的id对应上

3右侧上下滑动的时候，左侧的id要对应上

(右侧滑动时会产生滚动高度--scrollTop(st))

如：人气Top的高度有500 --- st>=0 && st<500

大师咖啡的高度有300 --- st>=500 && st<800

小鹿茶精选的高度有270 --- st>=800 && st<=1070

获取每个区块的高度 push到数组中[ 0 , 500 , 800 , 1070]

arr[i] < st < arr[i+1]

移动互联网时代，微信借助小程序和二维码扫码将成为贯通线上线下的最大入口。那么微信小程序又那些功能呢？

01关键词搜索

在程序上线以后，可以覆盖十个推广关键词，方便用户搜索查找，用户可以精准搜索小程序。

就是根据你需要查找的内容，用最准确、最简练的若干个词语表达出来，你只要在搜索引擎中的输入栏中，输入你的关键词，搜索引擎就会列出你需要的内容和文档。

02地图定位

定位商铺地址，调位腾讯的地图接口，定位商户位置，从而推荐周围商家，举例来说，相信大家用过微信发定位吧，也用过百度导航或者高德地图导航吧，直接告诉你具体位置，多少公里，是不是很方便。这样会让客户更明确的知道你的商铺位置，能更快、更迅速到达你的商铺，从而节省你和客户的时间。

03独享空间

文字控件，在服务器的储存空间，用于商家储存，货物信息等，方便日后调用。

举列说明，就如我们的手机内存，如果你的手机128G的，是不是空间很大我们想想下载什么就下载什么，下载有用的东西，方便我们日后所用。

04自定义标签

DIY界面交互，客户可以制定丰富的界面交互效果。风格独特吸引顾客。

以用户为中心的设计流程，关注用户的使用流畅度和方便性，符合用户使用习惯的解决方案。交互不一定需要很华丽的界面，但是使用过程肯定是很人性化，减少用户思考返回的次数。

05官网系统

官网系形象展示，企业介绍用官网，便于企业宣传。

企业形象是指人们通过企业的各种标志（如产品特点、行销策略、人员风格等）而建立起来的对企业的总体印象，是企业文化建设的核心。

06商城系统

移动零售模块实现移动端o2o模式

O2O移动商城模式（英语：OnlinetoOffline），又称离线商务模式，是指移动商城线上营销线上购买或预订（预约）带动线下经营和线下消费。O2O通过打折、提供信息、服务预订等方式，把线下商店的消息推送给互联网用户，从而将他们转换为自己的线下客户，这就特别适合必须到店消费的商品和服务，比如餐饮、健身、看**和演出、美容美发等。

07会员卡券

会员优惠券，会员购买产品时，可以抵动扣。

1、增加的顾客的购买欲望,营业额逐渐上升。

2、起到很有利的宣传作用，在顾客心中加深印象。

3、优惠打折虽然利润不是很高，但是便宜的因素会增加购物的数量。数量多了自然就提高营业额了

08门店系统

门店业务自动化，商家可以通过我们的小程序实时监控旗下门店售卖情况。

自动化的业务流程可以协作管理来改善机构整体的工作流，以实现更高的效率，用以改变业务需要，减少人为错误并明晰工作角色和责任。

09咨询系统

文章资讯频道，可以放入公司最新资讯，以及行业新闻，便于用户更详细的了解。

通过互联网络，建立顾客资讯系统，加强顾客管理，不仅能全面了解顾客需要的特点，也可制定更有效的、更有针对性的促销计划，提高顾客服务水平。

10支付系统

绑定微信支付，用户购买产品时支付的方式。

这个相比大家很好理解，我们购买产品的同时用过很多支付方式，微信支付，支付宝，银行卡支付，和现金支付。

11权限管理

管理员角色分组，不同级别分配不同权限，管理权限不一样。

权限管理，一般指根据系统设置的安全规则或者安全策略，用户可以访问而且只能访问自己被授权的资源，不多不少。权限管理几乎出现在任何系统里面，只要有用户和密码的系统。

12渠道管理

用户来源分析，分析用户是通过什么方式来的（引流渠道）

来源方式：一般有识别二维码、网站、新闻、广告、==。

13信息管理

参与设置，参与产品属性功能，便于信息统计和管理

简单地说，信息管理就是人对信息资源和信息活动的管理。信息管理是指在整个管理过程中，人们收集、加工和输入、输出的信息的总称。信息管理的过程包括信息收集、信息传输、信息加工和信息储存。

14用户分组

用户分类分析，用户分类，并对用户分类进行数据分析便于商家更好的管理。

例如微信管理：

1、做微商的

2、做直销的

3、做保险的

4、做金融的

都在微信通讯录进行分类，方便与查找聊天交流。

15数据魔方

业务数据统计,进行订单销售额,商品销售量等统计。

16营销服务

促销物料制作，活动制作和营销方案制作

17推广服务

推广服务

18多端口

管理账户，多个账户切换，方便商家管理不同资料。

19获取手机联系人

自动获取手机联系人，用户授权通过后，可以获取手机联系人信息，方便易推广用户。

20可关联多个公众号

关联三个公众号，一个公众号，可关联13个小程序，一个小程序，可关联三个公众号。

21音频视频展示

音频视频展示

可分享好友，不止可以以的形式展示商品或者公司，也可以通过语音和视频的方式进行宣传。

首先看看官方提供的模态弹窗

api如下：

示例：

这样的模态弹窗，充其量只能做个alert，提示一下信息。

但是并不能使用它来处理复杂性的弹窗业务，因此写了Michael从新自定义了一个，采用了仿原生的样式写法

wxml：

wxss：

js:

相关连接： http://blogcsdnnet/michael_ouyang/article/details/54700871

------------------------------------------------------------

微信开发者工具的快捷键

微信小程序的文件结构 —— 微信小程序教程系列（1）

微信小程序的生命周期实例演示 —— 微信小程序教程系列（2）

微信小程序的动态修改视图层的数据 —— 微信小程序教程系列（3）

微信小程序的新建页面 —— 微信小程序教程系列（4）

微信小程序的如何使用全局属性 —— 微信小程序教程系列（5）

微信小程序的页面跳转 —— 微信小程序教程系列（6）

微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）

微信小程序的作用域和模块化 —— 微信小程序教程系列（8）

微信小程序视图层的数据绑定 —— 微信小程序教程系列（9）

微信小程序视图层的条件渲染 —— 微信小程序教程系列（10）

微信小程序视图层的列表渲染 —— 微信小程序教程系列（11）

微信小程序视图层的模板 —— 微信小程序教程系列（12）

微信小程序之wxss —— 微信小程序教程系列（13）

微信小程序的网络请求 —— 微信小程序教程系列（14）

微信小程序的百度地图获取地理位置 —— 微信小程序教程系列（15）

微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）

微信小程序获取系统日期和时间 —— 微信小程序教程系列（17）

微信小程序之上拉加载和下拉刷新 —— 微信小程序教程系列（18）

微信小程序之组件 —— 微信小程序教程系列（19）

微信小程序之微信登陆 —— 微信小程序教程系列（20）

------------------------------------------------------------

微信小程序之顶部导航栏实例 —— 微信小程序实战系列（1）

微信小程序之上拉加载（分页加载）实例 —— 微信小程序实战系列（2）

微信小程序之轮播图实例 —— 微信小程序实战系列（3）

微信小程序之仿android fragment之可滑动的底部导航栏实例 —— 微信小程序实战系列（4）

微信小程序之登录页实例 —— 微信小程序实战系列（5）

微信小程序之自定义toast实例 —— 微信小程序实战系列（6）

微信小程序之自定义抽屉菜单（从下拉出）实例 —— 微信小程序实战系列（7）

微信小程序之自定义模态弹窗（带动画）实例 —— 微信小程序实战系列（8）

------------------------------------------------------------

微信小程序之侧栏分类 —— 微信小程序实战商城系列（1）

微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列（2）

微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）

微信小程序之商品属性分类 —— 微信小程序实战商城系列（4）

微信小程序之购物车 —— 微信小程序实战商城系列（5）

未完待续。。。

更多小程序的教程： http://blogcsdnnet/column/details/14653html

谢谢观看，不足之处，敬请指导