码迷,mamicode.com
首页 > 微信 > 详细

微信自定义菜单

时间:2014-11-14 21:02:43      阅读:532      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   io   ar   os   sp   java   

页面效果是如此这般的
bubuko.com,布布扣
特别说明:实习方式仿站乐享微信 但又不完全依照!!!
 
首先介绍下环境配置
wamp环境 + thinkphp框架实现的!
 
核心:自定义菜单生成到微信端:从数据库取出数据——>生产微信自定义菜单。
 
这里有三个难点:
1. 数据库的设计:一个表实现(用PID来识别主菜单及子菜单的区别)。
数据库如下(MYSQL):
 
当然表绝对不止这些内容 但是主要说明一下微信自定义菜单表对应的关系就可以了
--
-- 表的结构 `wx_custom_menu`
--

CREATE TABLE IF NOT EXISTS `wx_custom_menu` (
  `id` mediumint(8) unsigned NOT NULL AUTO_INCREMENT,
  `parentid` mediumint(8) unsigned NOT NULL COMMENT ‘一级菜单ID‘,
  `title` char(10) NOT NULL COMMENT ‘菜单名称‘,
  `key` varchar(200) NOT NULL COMMENT ‘此关键字字段可URL或关键词,如百度地图链接比够长,需添加200‘,
  `isshow` tinyint(1) unsigned NOT NULL COMMENT ‘是否显示菜单‘,
  `listsort` tinyint(3) unsigned NOT NULL COMMENT ‘一级菜单ID‘,
  PRIMARY KEY (`id`),
  KEY `idx_wxid_userid` (`wxid`,`userid`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=110 ;
 
首先说明下:wxid,userid这两个字段可不用 但是我这原本是微信开发用来识别微信公众号以及用户的ID。最后也做了个索引!
 
2. 页面的输出:
Thinkphp框架的写法:
 
class CustomMenuAction extends UserAction{
    
    public function index() {
        $arr = $this->selectDb();
        $this->assign(‘arr‘,$arr);
        $this->display();
    }
  //从数据库中查找数据并重组数组
    public function selectDb(){
  //从表中根据isshow是否显示这个条件查询出数据
        $menu=M(‘custom_menu‘)->where(array(‘isshow‘=>1))->select();
        $arr = array();
  //这里是重组数据
        foreach ($menu as $value){
            if($value[‘parentid‘] == 0){
                $arr[$value[‘id‘]]=$value;
            }else{
                $arr[$value[‘parentid‘]][‘sub‘][$value[‘id‘]]=$value;
            }
        }
  //调用排序 使结果逆向排序
        $arr = $this->array_sort($arr,‘listsort‘);
        foreach ($arr as $key=>$row){
            foreach ($row as $r)
            if(is_array($r)){
                $arr[$key][‘sub‘] = $this->array_sort($r,‘listsort‘);
             }
        }
        return $arr;
    }
 
  /* 二维数组按指定的键值排序
  * $array 数组
  * $key排序键值
  * $type排序方式
  */
  function array_sort($arr, $keys, $type = ‘desc‘) {
      $keysvalue = $new_array = array();
      foreach ($arr as $k => $v) {
          $keysvalue[$k] = $v[$keys];
      }
      if ($type == ‘asc‘) {
          asort($keysvalue);
      } else {
          arsort($keysvalue);
      }
      reset($keysvalue);
      foreach ($keysvalue as $k => $v) {
          $new_array[$k] = $arr[$k];
      }
      return $new_array;
  }
}
 
必要说明:后续的代码都是写进上面的类。
具体结果格式应该呈现这样的:
bubuko.com,布布扣
 
 
好了 到这里class就写好了
那么问题来了!
html怎么搞呢
 
3. 页面JS 其实JQuery更方便 这里我直接拉取乐享的,然后修改了一下。
 
页面还有一个增加子菜单的效果,这个用JS解决!
代码直接贴上不多说了 唯一的重点就是一个地方,增加子菜单这里
  //替换parentid的value值为主菜单ID
        for(var i = 0; i <= typedata.length - 1; i++) {
        var cell = row.insertCell(i);
        cell.colSpan = typedata[i][0];
        var tmp = typedata[i][1];
        if(typedata[i][2]) {
            cell.className = typedata[i][2];
        }
        //替换parentid的value值为主菜单ID
        tmp = tmp.replace(/\{(n)\}/g, function($1) {return addrowkey;});  
        tmp = tmp.replace(/\{[0-9]+\}/g, function($1, $2) {return val});    
        cell.innerHTML = tmp;        
    }    
这最后3行代码尤其重要!用正则替换掉增加的节点名称 <input type="hidden" name="new[parentid][]" value="{1}" />这个value="{1}"替换成主菜单ID,
这步非常重要 如果不成功则增删改都会出问题
详细代码如下:
 
<script type="text/JavaScript">   
var rowtypedata = [
[
    [1,‘<input name="new[listsort][]" value="" style=" width:90%" size="3" type="text" class="px" >‘,
 ‘td25‘],
    [1, ‘<input name="new[title][]" value="" size="15" style=" width:90%" type="text" class="px" >‘],
    [1, ‘<input name="new[key][]" value="" size="15" type="text" class="px" style=" width:90%"  > <input type="hidden" name="new[parentid][]" value="0" />‘],
    [1,‘<input class="checkbox" type="checkbox" name="new[isshow][]"  checked="checked"   value="1"  >‘,‘‘],
    [1,‘‘,‘‘]
],
[
    [1,‘<input name="new[listsrot][]" value="" size="3" style=" width:90%"  type="text" class="px" >‘, ‘td25‘],
    [1, ‘<div class=\"board\"><input name="new[title][]" value="" size="15" style=" width:90%"  type="text" class="px" ></div>‘],
    [1, ‘<input name="new[key][]" value="" size="15" style=" width:90%" type="text" class="px" >  <input type="hidden" name="new[parentid][]" value="{1}" />‘] ,
    [1,‘<input class="checkbox" type="checkbox"   checked="checked"  name="new[isshow][]" value="1" >‘,‘‘],
    [1,‘‘,‘‘]
]
];

var addrowdirect = 0;
var addrowkey = 0;
function addrow(obj, type ,val) {
    var table = obj.parentNode.parentNode.parentNode.parentNode.parentNode;
    if(!addrowdirect) {
        var row = table.insertRow(obj.parentNode.parentNode.parentNode.rowIndex);
    } else {
        var row = table.insertRow(obj.parentNode.parentNode.parentNode.rowIndex + 1);
    }
    var typedata = rowtypedata[type];
    for(var i = 0; i <= typedata.length - 1; i++) {
        var cell = row.insertCell(i);
        cell.colSpan = typedata[i][0];
        var tmp = typedata[i][1];
        if(typedata[i][2]) {
            cell.className = typedata[i][2];
        }
        //替换parentid的value值为主菜单ID
        tmp = tmp.replace(/\{(n)\}/g, function($1) {return addrowkey;});
        
        tmp = tmp.replace(/\{[0-9]+\}/g, function($1, $2) {return val});    
        cell.innerHTML = tmp;        
    }
    addrowkey ++;
    addrowdirect = 0;
}

function deleterow(obj) {
    var table = obj.parentNode.parentNode.parentNode.parentNode.parentNode;
    var tr = obj.parentNode.parentNode.parentNode;
    table.deleteRow(tr.rowIndex);
}
function dropmenu(obj){
    showMenu({‘ctrlid‘:obj.id, ‘menuid‘:obj.id + ‘child‘, ‘evt‘:‘mouseover‘});
    $(obj.id + ‘child‘).style.top = (parseInt($(obj.id + ‘child‘).style.top) - Math.max(document.body.scrollTop, document.documentElement.scrollTop)) + ‘px‘;
    if(BROWSER.ie > 6 || !BROWSER.ie) {
        $(obj.id + ‘child‘).style.left = (parseInt($(obj.id + ‘child‘).style.left) - Math.max(document.body.scrollLeft, document.documentElement.scrollLeft)) + ‘px‘;
    }
}
</script>
 
4. 增删改管理
  直接贴代码
  /**
     * 添加主菜单到数据库
     * title     主菜单名称
     * isshow    是否显示
     * key       关键字/URL
     * parentid  是否是一级菜单--0为主菜单
    */        
    public function addMenuToDb(){    
        
        $wx_menu_db = M(‘custom_menu‘);
        $array= array();
        //添加新的数据 -- 重新组合数组
        foreach ($this->_post(‘new‘) as $value){
            foreach ($value as $key=>$val){
                $array[$key][]=$val;
            }
        }
        
        foreach ($array as $v){
            //分别赋值,对应表里的5个字段位
            $data[‘wxid‘]     = $this->wxid;
            $data[‘userid‘]   = $this->userid;
            $data[‘listsort‘] = $v[0];
            $data[‘title‘]    = $v[1];
            $data[‘key‘]      = $v[2];
            $data[‘parentid‘] = $v[3];
            $data[‘isshow‘]   = $v[4];
            if(!empty($data[‘title‘]) && !empty($data[‘key‘])){
                $add = $wx_menu_db->data($data)->add();
            }
        }    
        
        $save = array();
        //更新旧数据
        foreach ($this->_post(‘ps‘) as $ps){
            $temp[‘wxid‘]     = $this->wxid;
            $temp[‘userid‘]   = $this->userid;
            $temp[‘id‘]       = $ps[‘id‘];
            $temp[‘listsort‘] = $ps[‘listsort‘];
            $temp[‘title‘]    = $ps[‘title‘];
            $temp[‘key‘]      = $ps[‘key‘];
            $temp[‘parentid‘] = $ps[‘parentid‘];
            $temp[‘isshow‘]   = $ps[‘isshow‘];
            $save[] = $wx_menu_db->where(array(‘id‘=>$temp[‘id‘]))->data($temp)->save();
        }
        //判断是否有修改过
        foreach($save as $s){
            if($s){
                $a=1;
            }
        }
        if($add || $a){
            $this->success(‘操作成功,正在返回...‘,U(‘CustomMenu/custommenu‘,array(‘wxid‘=>$this->wxid)));
        }else{
            $this->error(‘操作无影响!‘,U(‘CustomMenu/custommenu‘,array(‘wxid‘=>$this->wxid)));
        }
    }
 
这里主要对新增的,编辑过得一次性处理
 
5. 生成微信自定义菜单
说明:运用cURL生成微信自定义菜单
  //从数据库中取出数据    
        $array = $this->selectDb();    
        $arr = array();
        //重组数组
        foreach($array as $val){
            $arr[$val[‘id‘]][‘name‘] = $val[‘title‘];
            $arr[$val[‘id‘]][‘key‘]  = $val[‘key‘];
            if($val[‘sub‘]){
                foreach($val as $v){
                    if(is_array($v)){
                        foreach($v as $k){
                            $arr[$val[‘id‘]][‘sub‘][‘name‘]= $k[‘title‘];
                            $arr[$val[‘id‘]][‘sub‘][‘key‘] = $k[‘key‘];
                        }
                    }
                }
            }
        }
        
        //编写Json数据串
        $js=‘{"button":[‘;
        foreach($arr as $a){
            if(!is_array($a[‘sub‘])){
                $js.=‘{"type":"click",‘;
                $js.=‘"name":"‘.$a[‘name‘].‘",‘;
                $js.=‘"key":"‘.$a[‘key‘].‘"},‘;
            }else{
                $js1.=‘{"name":"‘.$a[‘name‘].‘",‘;
                $js1.=‘"sub_button":[‘;
                foreach($a as $vo){
                    foreach($vo as $o){
                        $js2.=‘{"type":"view",‘;
                        $js2.=‘"name":"‘.$vo[‘name‘].‘",‘;
                        $js2.=‘"url":"‘.$vo[‘key‘].‘"},‘;
                    }
                }
                $js1.=$js2;
            }
        }
        $js.=$js1;
        $js.=‘]}]}‘;
    $url = "https://api.weixin.qq.com/cgi-bin/menu/create?access_token=".$access_token;
        //发送到微信,接受返回的结果
        $result = $this->httpsRequest($url,$js);
        $r = json_decode($result,trues);
        if($r[‘errcode‘]==0){
            $this->success(‘添加成功!‘,U(‘CustomMenu/custommenu‘,array(‘wxid‘=>$this->wxid)));
        }
        else{
            $this->error(‘添加失败‘);
        }
 
  public function httpsRequest($url,$data = null){
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
        if (!empty($data)){
            curl_setopt($curl, CURLOPT_POST, 1);
            curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
         }
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        $output = curl_exec($curl);
        curl_close($curl);
        return $output;
    }
 
至此微信自定义菜单功能已实现!

微信自定义菜单

标签:des   style   blog   http   io   ar   os   sp   java   

原文地址:http://www.cnblogs.com/Krlee/p/4098018.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!