微信公众号创建自定义菜单(公众号跳转小程序功能)

使用JAVA后端去自定义创建菜单,微信公众号开发文档中提供了API:

微信开放文档,请大家认真的观看文档的中的信息,

创建菜单中有一些要注意的地方:

1、自定义菜单最多包括3个一级菜单,每个一级菜单最多包含5个二级菜单。

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

3、创建自定义菜单后,菜单的刷新策略是,在用户进入公众号会话页或公众号profile页时,如果发现上一次拉取菜单的请求在5分钟以前,就会拉取一下菜单,如果菜单有更新,就会刷新客户端的菜单。测试时可以尝试取消关注公众账号后再次关注,则可以看到创建后的效果。

这些可以说是创建菜单中的格式或者是规则,下面是菜单的类型,每个类型代表给他创建的菜单中的功能是不一样的,请认真查看文档

创建菜单的接口为: https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN , 注意:发送的请求是POST

代码实例:

HttpUtils.java(发送POST请求):

import com.alibaba.fastjson.JSONObject;
import org.apache.http.HttpResponse;
import org.apache.http.HttpStatus;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import java.io.IOException;
import java.net.URLDecoder;
/**
 * <p>User: qrn
 * <p>Date: 14-1-28
 * <p>Version: 1.0
 * 描述: http请求的工具类
 */
public class HttpUtils {
    private static Logger logger = LoggerFactory.getLogger(HttpUtils.class);    //日志记录

    /**
     * httpPost
     *
     * @param url       路径
     * @param jsonParam 参数
     * @return JSONObject
     */
    public static JSONObject httpPost(String url, String jsonParam) {
        return httpPost(url, jsonParam, false);
    }

    /**
     * post请求
     *
     * @param url            url地址
     * @param param      参数
     * @param noNeedResponse 不需要返回结果
     * @return JSONObject
     */
    public static JSONObject httpPost(String url, String param, boolean noNeedResponse) {
        //post请求返回结果
        HttpClient httpClient = HttpClients.createDefault();
        JSONObject jsonResult = null;
        HttpPost method = new HttpPost(url);
        try {
            if (null != param) {
                //解决中文乱码问题
                StringEntity entity = new StringEntity(param, "utf-8");
                entity.setContentEncoding("UTF-8");
                entity.setContentType("application/json");
                method.setEntity(entity);
            }
            HttpResponse result = httpClient.execute(method);
            url = URLDecoder.decode(url, "UTF-8");
            /**请求发送成功,并得到响应**/
            if (result.getStatusLine().getStatusCode() == 200) {
                String str = "";
                try {
                    /**读取服务器返回过来的json字符串数据**/
                    str = EntityUtils.toString(result.getEntity());
                    System.out.println(str);
                    if (noNeedResponse) {
                        return null;
                    }
                    /**把json字符串转换成json对象**/
                    jsonResult = JSONObject.parseObject(str);
                } catch (Exception e) {
                    logger.error("post请求提交失败:" + url, e);
                }
            }
        } catch (IOException e) {
            logger.error("post请求提交失败:" + url, e);
        }
        return jsonResult;
    }

}

创建菜单的方法(SpringMvc):

 /**
     * 创建自定义菜单:
     */
    @RequestMapping("/getAccount_txt")
    @ResponseBody
    public void getAccount_txt() {
         String access_token = accountsService.Accountaccess_token(); //这里是获取的TOken接口
         String url=WeChatTools.create+access_token; //这里是创建菜单的接口和token拼接  https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN
         System.out.println("发送的url"+url);
         String sun="{\r\n" + 
                 "     \"button\":[\r\n" + 
                 "     {    \r\n" + 
                 "          \"type\":\"click\",\r\n" + 
                 "          \"name\":\"今日歌曲\",\r\n" + 
                 "          \"key\":\"V1001_TODAY_MUSIC\"\r\n" + 
                 "      },\r\n" + 
                 "      {\r\n" + 
                 "           \"name\":\"菜单\",\r\n" + 
                 "           \"sub_button\":[\r\n" + 
                 "           {    \r\n" + 
                 "               \"type\":\"view\",\r\n" + 
                 "               \"name\":\"搜索\",\r\n" + 
                 "               \"url\":\"http://www.soso.com/\"\r\n" + 
                 "            },\r\n" + 
                 "            {\r\n" + 
                 "                 \"type\":\"miniprogram\",\r\n" + 
                 "                 \"name\":\"wxa\",\r\n" + 
                 "                 \"url\":\"http://mp.weixin.qq.com\",\r\n" + 
                 "                 \"appid\":\"wx286b93c14bbf93aa\",\r\n" + 
                 "                 \"pagepath\":\"pages/lunar/index\"\r\n" + 
                 "             },\r\n" + 
                 "            {\r\n" + 
                 "               \"type\":\"click\",\r\n" + 
                 "               \"name\":\"赞一下我们\",\r\n" + 
                 "               \"key\":\"V1001_GOOD\"\r\n" + 
                 "            }]\r\n" + 
                 "       }]\r\n" + 
                 " }";
         JSONObject  jsonObjects=JSONObject.fromObject(sun);
         HttpUtils.httpPost(url,jsonObjects.toString());
    }

这样根据自己所需要的去拼写相应的类型就可以实现了

下面是进行了封装的创建菜单:
Button.java:

/**
 * 菜单:
 * @author Administrator
 *
 */
public class Button {
   
    /**
     * 菜单名称:
     */
    private String name;

    public Button() {
        super();
    }

    public Button(String name) {
        super();
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    @Override
    public int hashCode() {
        final int prime = 31;
        int result = 1;
        result = prime * result + ((name == null) ? 0 : name.hashCode());
        return result;
    }

    @Override
    public boolean equals(Object obj) {
        if (this == obj)
            return true;
        if (obj == null)
            return false;
        if (getClass() != obj.getClass())
            return false;
        Button other = (Button) obj;
        if (name == null) {
            if (other.name != null)
                return false;
        } else if (!name.equals(other.name))
            return false;
        return true;
    }

    @Override
    public String toString() {
        return "Button [name=" + name + "]";
    }
}

CommonButton.java:


/**
 * 二级菜单(CLICK类型)
 * @author Administrator
 *
 */
public class CommonButton  extends Button {

    /**
     * 菜单名称:
     */
    private String name;
    
    /**
     * 类型
     */
    private String type;
    
    /**
     * 响应动作类型
     */
    private String key;

    public CommonButton() {
        super();
    }

    public CommonButton(String name, String type, String key) {
        super();
        this.name = name;
        this.type = type;
        this.key = key;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String getKey() {
        return key;
    }

    public void setKey(String key) {
        this.key = key;
    }

    @Override
    public int hashCode() {
        final int prime = 31;
        int result = 1;
        result = prime * result + ((key == null) ? 0 : key.hashCode());
        result = prime * result + ((name == null) ? 0 : name.hashCode());
        result = prime * result + ((type == null) ? 0 : type.hashCode());
        return result;
    }

    @Override
    public boolean equals(Object obj) {
        if (this == obj)
            return true;
        if (obj == null)
            return false;
        if (getClass() != obj.getClass())
            return false;
        CommonButton other = (CommonButton) obj;
        if (key == null) {
            if (other.key != null)
                return false;
        } else if (!key.equals(other.key))
            return false;
        if (name == null) {
            if (other.name != null)
                return false;
        } else if (!name.equals(other.name))
            return false;
        if (type == null) {
            if (other.type != null)
                return false;
        } else if (!type.equals(other.type))
            return false;
        return true;
    }

    @Override
    public String toString() {
        return "CommonButton [name=" + name + ", type=" + type + ", key=" + key + "]";
    }
    
}
 

ComplexButton.java:
 


import java.util.Arrays;

/**
 * 一级菜单:
 * @author Administrator
 *
 */
public class ComplexButton  extends Button{
    
    /**
     * 菜单名称:
     */
    private String name;
    
    /**
     * 子级菜单:
     */
    private Button[] sub_button;
    
    
    

    public ComplexButton() {
        super();
    }

    public ComplexButton(String name, Button[] sub_button) {
        super();
        this.name = name;
        this.sub_button = sub_button;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Button[] getSub_button() {
        return sub_button;
    }

    public void setSub_button(Button[] sub_button) {
        this.sub_button = sub_button;
    }

    @Override
    public int hashCode() {
        final int prime = 31;
        int result = 1;
        result = prime * result + ((name == null) ? 0 : name.hashCode());
        result = prime * result + Arrays.hashCode(sub_button);
        return result;
    }

    @Override
    public boolean equals(Object obj) {
        if (this == obj)
            return true;
        if (obj == null)
            return false;
        if (getClass() != obj.getClass())
            return false;
        ComplexButton other = (ComplexButton) obj;
        if (name == null) {
            if (other.name != null)
                return false;
        } else if (!name.equals(other.name))
            return false;
        if (!Arrays.equals(sub_button, other.sub_button))
            return false;
        return true;
    }

    @Override
    public String toString() {
        return "ComplexButton [name=" + name + ", sub_button=" + Arrays.toString(sub_button) + "]";
    }
    
}
 

Menu.java:
 


import java.util.Arrays;

/**
 * 表示要创建的菜单
 * @author Administrator
 *
 */
public class Menu {

    private ComplexButton[] button;

    public Menu() {
        super();
    }

    public Menu(ComplexButton[] button) {
        super();
        this.button = button;
    }

    public ComplexButton[] getButton() {
        return button;
    }

    public void setButton(ComplexButton[] button) {
        this.button = button;
    }

    @Override
    public int hashCode() {
        final int prime = 31;
        int result = 1;
        result = prime * result + Arrays.hashCode(button);
        return result;
    }

    @Override
    public boolean equals(Object obj) {
        if (this == obj)
            return true;
        if (obj == null)
            return false;
        if (getClass() != obj.getClass())
            return false;
        Menu other = (Menu) obj;
        if (!Arrays.equals(button, other.button))
            return false;
        return true;
    }

    @Override
    public String toString() {
        return "Menu [button=" + Arrays.toString(button) + "]";
    }

}
ViewButton.java:
 


/**
 * 二级菜单:(view)类型:
 * @author Administrator
 *
 */
public class ViewButton extends Button{
    
    /**
     * 菜单名称:
     */
    private String name;
    /**
     * 类型:
     */
    private String type;
    
    /**
     * 响应的网页:
     */
    private String url;

    public ViewButton() {
        super();
    }

    public ViewButton(String name, String type, String url) {
        super();
        this.name = name;
        this.type = type;
        this.url = url;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    @Override
    public int hashCode() {
        final int prime = 31;
        int result = 1;
        result = prime * result + ((name == null) ? 0 : name.hashCode());
        result = prime * result + ((type == null) ? 0 : type.hashCode());
        result = prime * result + ((url == null) ? 0 : url.hashCode());
        return result;
    }

    @Override
    public boolean equals(Object obj) {
        if (this == obj)
            return true;
        if (obj == null)
            return false;
        if (getClass() != obj.getClass())
            return false;
        ViewButton other = (ViewButton) obj;
        if (name == null) {
            if (other.name != null)
                return false;
        } else if (!name.equals(other.name))
            return false;
        if (type == null) {
            if (other.type != null)
                return false;
        } else if (!type.equals(other.type))
            return false;
        if (url == null) {
            if (other.url != null)
                return false;
        } else if (!url.equals(other.url))
            return false;
        return true;
    }

    @Override
    public String toString() {
        return "ViewButton [name=" + name + ", type=" + type + ", url=" + url + "]";
    }

}
 

MiniprogramButton.java:
 


/**
 * 跳转到小程序:
 * @author Administrator
 *
 */
public class MiniprogramButton  extends Button{
    
    
    /**
     * 类型:
     */
    private String type;
    
    /**
     * 名称:
     */
    private String name;
    
    /**
     * 路径:
     */
    private String url;
    /**
     * 小程序 appid
     */
    private String appid;
    /**
     * 小程序的页面
     */
    private String pagepath;
    
    public MiniprogramButton() {
        super();
    }

    public MiniprogramButton(String type, String name, String url, String appid, String pagepath) {
        super();
        this.type = type;
        this.name = name;
        this.url = url;
        this.appid = appid;
        this.pagepath = pagepath;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public String getAppid() {
        return appid;
    }

    public void setAppid(String appid) {
        this.appid = appid;
    }

    public String getPagepath() {
        return pagepath;
    }

    public void setPagepath(String pagepath) {
        this.pagepath = pagepath;
    }

    @Override
    public int hashCode() {
        final int prime = 31;
        int result = 1;
        result = prime * result + ((appid == null) ? 0 : appid.hashCode());
        result = prime * result + ((name == null) ? 0 : name.hashCode());
        result = prime * result + ((pagepath == null) ? 0 : pagepath.hashCode());
        result = prime * result + ((type == null) ? 0 : type.hashCode());
        result = prime * result + ((url == null) ? 0 : url.hashCode());
        return result;
    }

    @Override
    public boolean equals(Object obj) {
        if (this == obj)
            return true;
        if (obj == null)
            return false;
        if (getClass() != obj.getClass())
            return false;
        MiniprogramButton other = (MiniprogramButton) obj;
        if (appid == null) {
            if (other.appid != null)
                return false;
        } else if (!appid.equals(other.appid))
            return false;
        if (name == null) {
            if (other.name != null)
                return false;
        } else if (!name.equals(other.name))
            return false;
        if (pagepath == null) {
            if (other.pagepath != null)
                return false;
        } else if (!pagepath.equals(other.pagepath))
            return false;
        if (type == null) {
            if (other.type != null)
                return false;
        } else if (!type.equals(other.type))
            return false;
        if (url == null) {
            if (other.url != null)
                return false;
        } else if (!url.equals(other.url))
            return false;
        return true;
    }

    @Override
    public String toString() {
        return "MiniprogramButton [type=" + type + ", name=" + name + ", url=" + url + ", appid=" + appid
                + ", pagepath=" + pagepath + "]";
    }
}
MenuUtil.java:

/**
 * 菜单工具类:
 * @author Administrator
 *
 */
public class MenuUtil {

    
    
    /**
     * 封装菜单数据
     * @return
     */
    public static Menu getMenu() {
    
        //创建view类型的菜单
        ViewButton cb_4 = new ViewButton();
        cb_4.setType("view");
        cb_4.setName("菜单的名称");
        cb_4.setUrl("跳转的网页路径");
        
        //创建click类型的菜单
        CommonButton cb_2 = new CommonButton();
        cb_2.setType("click");
        cb_2.setName("菜单的名称");
        cb_2.setKey("xxxxxxx");
        
        //创建click类型的菜单
        CommonButton cb_3 = new CommonButton();
        cb_3.setType("click");
        cb_3.setName("菜单的名称");
        cb_3.setKey("xxxxxxxxxxxx");

        //创建第一个一级菜单
        ComplexButton cx_1 = new ComplexButton();
        cx_1.setName("一级菜单名称");
        cx_1.setSub_button(new Button[]{cb_4,cb_2,cb_3});

        
    
        //创建第二个一级菜单
        ComplexButton cx_2 = new ComplexButton();
        cx_2.setName("一级菜单名称");
        
        //创建公众号跳转到小程序的菜单
        MiniprogramButton miniprogramButton = new MiniprogramButton();
        miniprogramButton.setName("菜单名称");
        miniprogramButton.setType("miniprogram");
        miniprogramButton.setAppid("要跳转的小程序APPID");
        miniprogramButton.setUrl("http://mp.weixin.qq.com");
        miniprogramButton.setPagepath("小程序要展示的页面路径");
        cx_2.setSub_button(new Button[]{miniprogramButton});
        
        ComplexButton cx_3 = new ComplexButton();
        cx_3.setName("菜单名称");
        
        CommonButton commonButton = new CommonButton();
        commonButton.setKey("key3");
        commonButton.setName("菜单名称");
        commonButton.setType("click");
        cx_3.setSub_button(new Button[] {commonButton});        //封装菜单数据
        Menu menu=new Menu();
        menu.setButton(new ComplexButton[]{cx_2,cx_3,cx_1});
        return menu;
    }
}

 /**
     * 创建自定义菜单:
     */
    @RequestMapping("/getAccount_txt")
    @ResponseBody
    public void getAccount_txt() {
         String access_token = accountsService.Accountaccess_token(); //这里是获取的TOken接口
         String url=WeChatTools.create+access_token; //这里是创建菜单的接口和token拼接  https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN
         System.out.println("发送的url"+url);
         Menu menu = MenuUtil.getMenu();
         JSONObject  jsonObjects=JSONObject.fromObject(menu);
         HttpUtils.httpPost(url,jsonObjects.toString());
    }

这里就是创建自定义菜单的实例了,这些代码应该是没有问题的,如果有问题可以在下发评论

  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 21
    评论
Vue 是一种流行的前端框架,可以用于构建用户界面。为了实现仿写微信公众号自定义菜单,我们可以按照以下步骤进行: 1. 安装 Vue:首先,我们需要在项目中安装 Vue。可以使用 npm 或者 yarn 进行安装,运行命令 `npm install vue` 或者 `yarn add vue` 完成安装。 2. 创建 Vue 组件:通过 Vue 的组件化特性,我们可以创建一个专门用于自定义菜单的组件。可以在组件中定义菜单的结构和样式,并提供相应的交互逻辑。 3. 使用 Vue Router:Vue Router 是 Vue 官方的路由管理器,可以用于实现页面间的跳转。通过配置路由,在不同的路径下展示不同的页面内容,使用户可以在不同菜单之间进行切换。 4. 获取菜单数据:在组件中,我们可以通过调用后端的接口获取微信公众号自定义菜单数据。可以使用 Vue 的生命周期钩子函数,在组件挂载之前获取数据,并将数据保存在组件的 data 中。 5. 渲染数据:将获取到的菜单数据渲染到页面中。可以使用 v-for 指令遍历菜单项,并使用 v-bind 将数据绑定到相应的元素上。这样就可以根据菜单数据动态渲染出自定义菜单。 6. 实现菜单交互功能:通过为菜单元素添加点击事件,可以实现菜单的交互功能。例如,当用户点击菜单项时,可以触发相应的事件,如跳转到对应的页面或展开子菜单。 7. 样式设计:通过调整样式,使菜单界面与微信公众号的样式一致。可以使用 CSS 进行样式设计,并使用 Vue 的样式绑定功能将样式应用到菜单组件上。 通过以上步骤,我们可以使用 Vue 实现仿写微信公众号自定义菜单。这样用户就可以在仿真的菜单界面上进行操作,实现类似微信公众号自定义菜单功能

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值