微信自定义菜单

【微信⼩程序】⾃定义抽屉式菜单（底部，从下向上拉出）通过使⽤这个创建动画的api，可以做出很多特效出来下⾯介绍⼀个抽屉菜单的案例实现代码：wxml：<!--button--><view class="btn" bindtap="powerDrawer" data-statu="open">button</view><!--mask--><view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view><!--content--><!--使⽤animation属性指定需要执⾏的动画--><view animation="{{animationData}}" class="drawer_attr_box" wx:if="{{showModalStatus}}"><!--drawer content--><view class="drawer_content"><view class="drawer_title line">菜单1</view><view class="drawer_title line">菜单2</view><view class="drawer_title line">菜单3</view><view class="drawer_title line">菜单4</view><view class="drawer_title">菜单5</view></view></view>wxss：/*button*/.btn {width: 80%;padding: 20rpx 0;border-radius: 10rpx;text-align: center;margin: 40rpx 10%;background: #0C1939;color: #fff;}/*mask*/.drawer_screen {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 1000;background: #000;opacity: 0.2;overflow: hidden;}/*content*/.drawer_attr_box {width: 100%;overflow: hidden;position: fixed;bottom: 0;left: 0;z-index: 1001;background: #fff;}.drawer_content {padding: 20rpx 40rpx;height: 470rpx;overflow-y: scroll;}.drawer_title{padding:20rpx;font:42rpx "microsoft yahei";text-align: center;}.line{border-bottom: 1px solid #f8f8f8;}　js:Page({data: {showModalStatus: false},powerDrawer: function (e) {var currentStatu = e.currentTarget.dataset.statu;this.util(currentStatu)},util: function(currentStatu){/* 动画部分 */// 第1步：创建动画实例var animation = wx.createAnimation({duration: 200, //动画时长timingFunction: "linear", //线性delay: 0 //0则不延迟});// 第2步：这个动画实例赋给当前的动画实例this.animation = animation;// 第3步：执⾏第⼀组动画：Y轴偏移240px后(盒⼦⾼度是240px)，停 animation.translateY(240).step();// 第4步：导出动画对象赋给数据对象储存this.setData({animationData: animation.export()})// 第5步：设置定时器到指定时候后，执⾏第⼆组动画setTimeout(function () {// 执⾏第⼆组动画：Y轴不偏移，停animation.translateY(0).step()// 给数据对象储存的第⼀组动画，更替为执⾏完第⼆组动画的动画对象 this.setData({animationData: animation})//关闭抽屉if (currentStatu == "close") {this.setData({showModalStatus: false});}}.bind(this), 200)// 显⽰抽屉if (currentStatu == "open") {this.setData({showModalStatus: true});}}})效果： 。

微信公众号的自定义菜单该设置什么内容？趁早上挤地铁的时间扒了扒微信里关注的公众号。

205个！一天有205篇新文章要看，看1篇平均5分钟，17个小时才能看完。

还有7小时留来睡觉。

这么算，一天啥事不用干，光看文章就行了！花了点时间抽取了其中的53个经常更新的来分析下它们的自定义菜单功能都如何设置。

我把它们的菜单项归纳为7种类型，如下：1、自我介绍：关于我、我们2、活动：招聘会、考察、交流、培训班3、合作：投稿、联系我们、设计咨询4、电商：商城、店铺、5、文章：精选、近期、历史、推荐、资讯6、社群：互动社区、论坛、微信群7、广告：推书籍、推作品、推公众号8、空格：菜单为空。

这53个公众号，共有159个菜单项，1个没有设置置底的菜单。

5个只用了2个菜单项。

现在还有没设置菜单的公众号，这公号是有多懒。

统计后，占比见下图：文章分类遥遥领先竟然还有浪费菜单项的，直接空的合作的需求很大活动跟电商有不少了社群还没有受到重视打广告的还算比较少下面具体看看这几种类型的作用：一、文章分类：改善阅读体验出现这种类型的原因应该是微信公众号缺少分类功能，更符合碎片化阅读的场景。

读者查看时需要在历史记录里翻阅这么多文章，一篇篇往前翻，多费劲，而且还只能按时间来排序，缺少个提纲挈领的目录。

所以大小公众号往往为了避免碎片化阅读的弊端，吸取结构化阅读的优点，用菜单功能做了分类文章的功能，具体用“往期文章、必读、导读、精选、好文、最新资讯”来实现索引功能。

我们PK 下结构化阅读与碎片化阅读。

结构化阅读就像看一本书，有前言、提纲、章节。

碎片化阅读其实一直都有，比如报纸，一篇篇文章直接的关联性不是很强，经典的著作《论语》也是碎片化的。

2者各有利弊，结构化是系统性的、可以深入阅读，碎片化是随机的，灵活的、快速的。

碎片化更符合当前时代。

除了用菜单功能实现文章分类外，还有设置链接到一个轻应用的方式。

可选的有白鹭引擎最近上线的一款青雀的产品，有赞也不错，罗辑思维用的就是它。

微信公众号⾃定义菜单完整代码<?php$url = "https:///cgi-bin/token?grant_type=client_credential&appid=wxdf1c98cc137c3925&secret=948b41615d25d52236e13eb6531efcfd"; $dataa = getCurl($url);//通过⾃定义函数getCurl得到https的内容$resultArr = json_decode($dataa, true);//转为数组$access_token = $resultArr['access_token'];//echo $access_token;die;function getCurl($url){//get https的内容$ch = curl_init();curl_setopt($ch, CURLOPT_URL,$url);curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);//不输出内容curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);$result = curl_exec($ch);curl_close ($ch);return $result;}function createMenu($data,$url1){$ch = curl_init();curl_setopt($ch, CURLOPT_URL,$url1);curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (compatible; MSIE 5.01; Windows NT 5.0)');curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);curl_setopt($ch, CURLOPT_AUTOREFERER, 1);curl_setopt($ch, CURLOPT_POSTFIELDS, $data);curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);$tmpInfo = curl_exec($ch);if (curl_errno($ch)) {return curl_error($ch);}curl_close($ch);return $tmpInfo;}$url1 = "https:///cgi-bin/menu/create?access_token=".$access_token;$data = '{"button":[{"type":"click","name":"⾸页","key":"home"},{"type":"click","name":"简介","key":"introduct"},{"name":"个⼈中⼼","sub_button":[{"type":"view","name":"我的商城","url":"/" },{"type":"view","name":"我的媳妇","url":"https://"}]}]}';echo createMenu($data,$url1);。

微信订阅号开通自定义菜单流程大家都知道微信自定义菜单的好处,微信导航的功能极大的方便的各类营销活动。

而订阅号每天可以发送消息,也起到了很好的推广作用。

那么,订阅号如何获得自定义菜单功能呢?专业微信营销机构杰客科技指出,企业、政府、媒体、个体、个人、工作室、网站的订阅号均可帮忙开通自定义菜单接口,以下是详细流程。

∙订阅号菜单的形式可创建最多3个一级菜单,每个一级菜单下可创建最多5个二级菜单。

并且可设置订阅者点击菜单后,公众号做出的相应动作。

如发送信息、跳转到网页(商品购买页面)。

∙订阅号如何开通菜单企业、政府、媒体、个体、个人、工作室、网站的订阅号均开通自定义菜单接口,需要的资料为微信账号信息、身份证、手机、邮箱、联系地址等。

将以上资料整理好发给杰客科技在线客服人员,即可帮忙开通自定义菜单功能。

所需时间为3工作日左右,要求提供的照片清晰、信息准确。

∙自定义菜单设置方法自定义菜单能够帮助公众号丰富界面,让用户更好更快地理解公众号的功能。

开启自定义菜单后,公众号界面如图所示:目前自定义菜单最多包括3个一级菜单,每个一级菜单最多包含5个二级菜单。

一级菜单最多4个汉字,二级菜单最多7个汉字,多出来的部分将会以“...”代替。

请注意,创建自定义菜单后,由于微信客户端缓存,需要24小时微信客户端才会展现出来。

建议测试时可以尝试取消关注公众账号后再次关注,则可以看到创建后的效果。

∙菜单功能按钮目前自定义菜单接口可实现两种类型按钮,如下:click:用户点击click类型按钮后,微信服务器会通过消息接口推送消息类型为event的结构给开发者(参考消息接口指南),并且带上按钮中开发者填写的key值,开发者可以通过自定义的key值与用户进行交互;view:用户点击view类型按钮后,微信客户端将会打开开发者在按钮中填写的url值(即网页链接),达到打开网页的目的,建议与网页授权获取用户基本信息接口结合,获得用户的登入个人信息。

微信⼩程序-⾃定义菜单导航（实现楼梯效果）设计初衷在开发页⾯时，往往需要实现，点击页⾯的导航菜单页⾯滚动到相应位置，滚动页⾯实现菜单选项的⾼亮。

在html开发中，我们可以⽤到a 标签锚点实现，jq的动画相结合实现类似效果。

在框架中vant UI框架也为我们实现了这⼀效果。

微信⼩程序该如何实现？？效果展⽰1. 当菜单导航滚动到页⾯顶部时，菜单吸顶2. 当点击菜单按钮时，切换到对应区域（过渡到该区域，有动画效果）3. 当内容区滚动到某类区域时，对应区域的菜单按钮⾼亮设计思路1、吸顶效果的实现获取菜单导航距离页⾯顶部距离wx.createSelectorQuery()页⾯滚动监听滚动距离与菜单初始位置值⽐较1) 距离const query = wx.createSelectorQuery()query.select('.menu_nav').boundingClientRect(function(res) {let obj = {}if (res && res.top) {obj[item.attr] = parseInt(res.top)}}).exec()①wx.createSelectorQuery()返回⼀个 SelectorQuery 对象实例。

在⾃定义组件或包含⾃定义组件的页⾯中，应使⽤ this.createSelectorQuery() 来代替。

②SelectorQuery.select(string selector)在当前页⾯下选择第⼀个匹配选择器 selector 的节点。

返回⼀个 NodesRef 对象实例，可以⽤于获取节点信息。

selector 语法selector类似于 CSS 的选择器，但仅⽀持下列语法。

ID选择器：#the-idclass选择器（可以连续指定多个）：.a-class.another-class⼦元素选择器：.the-parent > .the-child后代选择器：.the-ancestor .the-descendant跨⾃定义组件的后代选择器：.the-ancestor >>> .the-descendant多选择器的并集：#a-node, .some-other-nodes③NodesRef.boundingClientRect(function callback)添加节点的布局位置的查询请求。

微信订阅号怎样添加自定义菜单？
一、添加菜单步骤详解
1、登录微信公众账号后台，点击功能菜单下的高级功能选项
2、点击进入编辑模式，看到自定义菜单选项，点击设置
3、在菜单管理中点击添加，可创建最多 3 个一级菜单，每个一级菜单下可创建最多 5 个二级菜单。

编辑中的菜单不会马上被用户看到，请放心调试。

二、菜单内容设置
项目推荐
（点击项目推荐，推送说明文字，输入关键词可获得相应的项目分类列表页）
卖萌的28
1、创业选28
2、咔咔还是发
（不仅只有文字，栏目中可以加入语音、图文消息等各种内容）
微社区
（注册微社区，进行连接即可）
三、流量引导与互动理念
通过有价值的文章或感人至深的小故事进行引导；通过微社区、卖萌的28进行互动、打造社群价值分享、增加用户黏度！。