您的位置：首页 > 移动开发 > 微信开发

微信开发（1）自定义菜单

2015-08-10 09:12 344 查看

微信开发（1）自定义菜单

自定义菜单属于高级API，订阅号没有（成为开发者也不行）。因此需要服务号或者企业号。

此外，也可以申请测试号。

点击“开发者中心”中的“接口测试申请系统”。

然后用你的微信扫描一下页面中的二维码，即可申请到一个测试号。

此后再点击“接口测试申请系统”就会进入到“管理测试号”页面：

在这个页面中，可以查看测试号的appid和appsecret。也可以配置接口URL和js安全域名：

图片链接

在“体验接口权限表”中，你可以看到测试账号已经获得“自定义菜单”权限:

图片链接

接下来就可以编写代码了。

首先在你自己的微信接口服务器上编写一个html页面create.php（如果你使用了新浪sae作为你的微信服务器，则可以使用sae的在线编辑工具，这样修改代码后立即就可以看到结果）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <TITLE>创建自定义菜单</TITLE>
        <META charset=utf-8>
        <META name=viewport content="width=device-width, user-scalable=no, initial-scale=1">
        <LINK rel="stylesheet" href="http://libs.baidu.com/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <SCRIPT src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></SCRIPT>
        <SCRIPT src="http://libs.baidu.com/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.js"></SCRIPT>
        <style>
            .kuang th {
                color: #333333;padding:0; font-size:16px; font-weight:normal;text-align: left;width: 130px;
            }
        </style>
    </HEAD>
    <BODY>

        <div data-role="page" id="page1">
            <div data-role="content">
                <form method="post" id="form" action='menu.php' enctype='multipart/form-data'>
                    <div class="fieldcontain">
                        <h2>微信自定义菜单</h2>
                    </div>

                    <UL data-role="listview" data-inset="true">
                        <LI>
                            <div class="fieldcontain">
                                <table class="kuang" width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tbody>
                                        <tr>
                                            <th><label>AppID</label></th>
                                            <td><input type="text" id="appid" name="appid" value="" placeholder="应用ID。从“开发者中心”->“配置项”中获得。" required></td>
                                        </tr>
                                        <tr>
                                            <th><label>AppSecret</label></th>
                                            <td><input type="text" id="appsecret" name="appsecret" value="" placeholder="应用密钥。从“开发者中心”->“配置项”中获得。" required></td>
                                        </tr>
                                        <tr>
                                            <th><label>自定义菜单内容</label></th>
                                            <td><textarea id="customermenu" name="customermenu" rows="9">
                                                </textarea></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </LI>
                    </UL>
                    <input type="submit" name="submit" data-theme="b" data-icon="check" value="生成菜单" />
                </form>
                            </div>
        </div>
    </BODY>
</HTML>

这实际上是一个HTML 表单，提交到menu.php页面。在浏览器中访问create.php页面，实际效果如下：

图片链接

在AppID栏和AppSecret栏中填入你的测试号的AppID和AppSecret，在自定义菜单内容中填入你要创建的JSON菜单数据，例如：

{
     "button":[
     {  
          "type":"click",
          "name":"今日歌曲",
          "key":"V1001_TODAY_MUSIC"
      },
      {
           "name":"菜单",
           "sub_button":[
           {    
               "type":"view",
               "name":"搜索",
               "url":"http://www.soso.com/"
            },
            {
               "type":"view",
               "name":"视频",
               "url":"http://v.qq.com/"
            },
            {
               "type":"click",
               "name":"赞一下我们",
               "key":"V1001_GOOD"
            }]
       }]
 }

然后点击“生成菜单”。页面返回“菜单创建成功”。

打开微信，扫描测试号的二维码，关注测试号（如果先前已经关注过，请先取消关注），然后进入测试号，你会发现你的自定义菜单已经生效，如下图所示：

图片链接

其中，menu.php文件的代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <TITLE>创建自定义菜单</TITLE>
        <META charset=utf-8>
        <META name=viewport content="width=device-width, user-scalable=no, initial-scale=1">
        <LINK rel="stylesheet" href="http://libs.baidu.com/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.css">
        <SCRIPT src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></SCRIPT>
        <SCRIPT src="http://libs.baidu.com/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.js"></SCRIPT>
    </HEAD>
    <BODY>

<?php
    // 导入weixin.class.php，这是方倍工作室实现的微信API接口，网上搜一下就可以下载
    require_once("../weixin.class.php");
    // 表单中的AppID
    $appid=$_REQUEST['appid'];
    // 表单中的AppSecret
    $appsecret=$_REQUEST['appsecret'];
    // 表单中的菜单JSON数组
    $data=$_REQUEST['customermenu'];
    // 实例化一个微信高级接口对象
    $weixin = new class_weixin_adv($appid,$appsecret);

    // 调用高级接口中的创建菜单方法
    $res=$weixin->create_menu($data);
    // 如果返回值中errcode为0，创建成功，否则创建失败
        if($res['errcode']==0){
        echo '菜单创建成功';
    }else
        echo '错误：' . var_dump($res);
?>
<p align='center'><a href="create.php">返回</a>
        </BODY>
</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航