微信小程序：“我的”页面布局（二）：可配置功能菜单列表

比较懒，还是上一篇的图：

如上一篇所属，“我的”页面菜单列表主要是用到了wx: for和navigator

利用navigator可以很方便的实现菜单功能，它带有的url和class、hover-class可以很轻松的设置点击效果及点击跳转地址：

在js中甚至不需要做什么事情，我这里把菜单的数据放在了js中，通过修改data中的menuitems即可达到配置的作用，甚至如果有需求，还可以放在服务端做成可随意变化的：

微信小程序：“我的”页面布局（一）：微信用户信息获取及UI

微信小程序：“我的”页面布局（二）：可配置功能菜单列表

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

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

        })

微信公众号菜单的设置非常简单，首先登陆微信公众号后台，找到一下地方：

公众号子菜单设置的地方

再者，可以对公众号的菜单进行‘增加’‘删除’‘修改’等 *** 作，每个子菜单可以跳转公众号文章、公众号页面模板、微信小程序等。

需要注意的是，如果是认证号，以上图的选择‘’跳转网页为‘’例子，是可以跳转外部页面的，但是如果是没认证的公众号，是只能跳转公众号内的链接的。认证的订阅号或者企业号，都可以跳转外部网页，目前最好的例子可以参考智未来页面模板，做成微网站或者导航页面。

个人号或者未认证号则不行，但可以跳转小程序页面，也有例子教程，评论可以跟我要教程，也很简单的。

当然个人号或者未认证号，也可以使用微信默认的页面模板，或者自己的文章，只是限制比较多。

多级联动菜单在许多的筛选场景应用十分广泛。

先看看效果图：

menuwxml

menuwxss

menujsp

menuwxss

menujs

menuwxml

menuwxss

menujs

这里主要针对一个菜单栏进行详细讲解，其余两个原理相同。

游戏

menuwxml

这里推荐大家使用 <scroll-view></scroll-view> 组件，这样超过限定的高度的话，就可以在内部产生滚动条，整体布局不会乱。使用 <scroll></scroll> 组件的时候，记得要开启滚动的方向（scroll-y表示纵向，scroll-x表示横向），这些属性默认是关闭的。

menuwxss

注意：使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。

menujs

menujs部分主要的难点就是wxml和js之间的数据交互，这里很容易弄晕，尤其是对自己定义的变量弄清楚是什么意思。在这里我画了一个示意图来讲解这个难点。

最后给大家提供该项目的github项目，直接抓下来就可以打开使用，只需对显示的数据进行修改即可。

实现效果如下：

实现左右联动的菜单列表，主要依靠scroll-view的是三个属性：

scroll-top：设置竖向滚动条位置（可视区域最顶部到scroll-view顶部的距离）；

scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素；

bindscroll：滚动时触发，eventdetail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

结构图示：

wxml:

js:

数据结构：

如果你还想实现从其他页面，点击按钮跳转到当前页面，并且列表滚动到指定项，此项在可视区域的第一个展示：

wxss:

导语：在推广过程中，既要参考原生App线上线下活动结合的推广思路，也要充分考虑微信环境下的社交网络传播环境。提前制定好市场战略，在合适的时机迅速进行推广，才能事半功倍。微信小程序使用指南，欢迎大家前来参考!

微信小程序使用指南

小程序的入口在哪

现在，只要将微信更新至最新版本，然后点开“发现”，就能看到小程序的入口了。

2进去后是一个小程序的列表。只要使用过的微信小程序，就会出现在这个列表里。列表上方有搜索框，可以搜索需要使用的小程序。

小程序的界面是怎样的

小程序的界面非常简洁，与一般的App区别不大。除了第一次进入时需要加载和d出授权请求外，使用体验。在使用小程序的过程中，也可以随时点击左上角返回微信的界面。

小程序还可以置顶到聊天列表的顶部，需要的时候可以随时打开，非常方便。不过，一次只能置顶一个小程序。

小程序可以分享吗

小程序可以分享给自己的好友或者群聊。不仅可以像推送公众号名片一样分享小程序的入口，还可以直接分享小程序里面的页面。安卓版用户还可将小程序添加快捷方式至桌面。

而在某些公众号的资料界面里，我们已经可以看到“相关小程序”一栏，通过这个入口也可以进入小程序。

同一主体的小程序和公众号可以进行关联，并相互跳转，该功能需要经开发者自主设置后使用。

一个公众号可以绑五个小程序，但一个小程序只能被一个公众号绑定。你可以通过公众号查看并进入所绑定的小程序，反之，也可以通过小程序查看并进入所关联的公众号。

如何迅速开发和推广小程序

毋庸置疑，我们又将在微信上迎来一波新的红利。很多人都希望抓住这次难得的机遇，可是在实际行动上却又举棋不定，踌躇不前。在此，我们不妨根据微信小程序目前的最新情况进行分析，微信小程序上线后，开发者必须知道的5件事情。

1、找准自己的小程序定位

开发微信小程序之前，首先要想清楚自己的需求，根据行业和产品给自己的小程序做一个定位。例如餐饮行业可以通过小程序制作线上菜单，服务行业可以制作线上便捷工具，品牌商家可以打造线上店铺……只要真正符合了微信小程序“好的产品是用完即走”的产品理念，就是一个好的小程序。

2、借助第三方平台快速开发小程序

对中小企业来说，在对头疼的莫过于缺乏开发微信小程序的资金和专业技术。现在微信小程序上线后，以「即速应用」为代表的适用于零基础开发者的小程序制作平台也迅速涌现。百度 登录即速应用官网，就可以借助这样的小程序开发平台，直接在无需代码的情况下快速生成小程序。这能让中小企业省去不少麻烦，跟上小程序发展的节奏。

3、利用公众号积累的影响力

由前文我们可以知道，小程序和公众号是相关联的。充分利用公众号积累的用户和品牌影响力，进行二次转化，是驱动小程序推广的一个基本思路。如今，微信用户活跃数用户数已达806亿，微信成为了我们日常最重要的流量入口，微信小程序的出现为我们提供了跨平台传播的更多可能。要想利用小程序营销品牌，最关键是要做好小程序的服务，以及切准行业方向，这样可以保证有源源不断的流量，还可以获得精准的用户。

4、做好小程序的线下推广

因为小程序不仅可以通过扫描二维码进入，还可以基于地理位置让附近的用户看到。因此，派发传单和举办活动等线下推广的方式是推广小程序的最简单粗暴的方法。因为微信不打算做小程序商店，所以小程序的线下推广就变得非常重要。

5、注重小程序的用户体验

虽然微信严格限制了小程序的消息推送，但仍然设置了客服等交互功能。因此，想开发一个好的小程序，就必须注重用户体验，让用户在使用小程序的过程中真正感受到小程序区别于原生App的方便快捷。

 

以上就是关于微信小程序：“我的”页面布局（二）：可配置功能菜单列表全部的内容，包括:微信小程序：“我的”页面布局（二）：可配置功能菜单列表、微信小程序-自定义导航栏、微信公众号如何设置菜单等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！