微信自定义菜单

2023-10-17 17:49:04

页面效果是如此这般的

特别说明：实习方式仿站乐享微信但又不完全依照！！！

首先介绍下环境配置

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;
　　}

}

必要说明：后续的代码都是写进上面的类。

具体结果格式应该呈现这样的：

好了到这里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>

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;
   }

至此微信自定义菜单功能已实现！

微信自定义菜单

码农公寓

相关文章