[微信小程序]以自页面底部菜单为例自定义组件

朱雀 2023-02-15 01:16 132阅读 0赞

### 目录 ###

*   *  基础
     *  思考
     *  动手
     *   *  自定义页面结构
         *  渲染页面样式
         *  绑定事件
         *  转为组件
         *   *  创建组件所需的目录及页面
             *  复制组件内容
             *  声明组件
             *  js转换
         *  使用
         *   *  引入组件
             *  使用组件

## 基础 ##

参考：  
[小程序开发文档-自定义组件][-]  
[小程序开发文档-Component 构造器][-Component]  
在不考虑第三方自定义插件的基础上完成此开发

## 思考 ##

1.  组件其实可以理解为抽取的一个公共模块，它取之于页面，又用之于页面，我们首先将需要组件在一个页面中完整实现（html，css，js）
2.  页面某一块儿被抽取公共模块需要考虑数据的传导。
3.  在页面中完成样式调整的时候部分样式是否对当前页面有依赖，作为组件是否能适应较复杂的环境（可以通过定义不常用的class，防止覆盖）
4.  在页面中使用的function是否在组件中同样通用。
5.  小程序中用于标识是否为组件的方法是在其同级页面下json文件中配置

{ 
      "component": true
    }

1.  引用路径问题（组件可能被引入任意页面中，使用绝对路径比相对路径要更为稳妥）

## 动手 ##

### 自定义页面结构 ###

说明：  
wx:for="\{ \{barlist\}\}" 为传入数据，数组类型。  
class=“tabBar” 整体组件样式通过此class控制  
bindtap=“forwardBar” 自定义事件

### 渲染页面样式 ###

.tabBar{ 
    background-color: #FFF;
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 10px;
    font-weight: 400;
    text-align: center;
    padding-top: 5px;
    border-top: 1px solid #E4E4E4;
    }
    
    .tabBar view{ 
    display: inline-block;
    }
    .tabBar view image { 
    height: 25px;
    width: 25px;
    display: block;
    margin: 0 auto;
    }
    .tabBar view text { 
    display: block;
    }

### 绑定事件 ###

Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        "barlist": [
            { 
              "pagePath": "/pages/todolist/todolistedit",
              "text": "工作台",
              "iconPath": "/images/indexselected.png",
              "selectedColor": "#2679f4"
            },
            { 
              "pagePath": "/pages/notify/notify",
              "barflag":true,
              "text": "代办通知",
              "iconPath": "/images/notify.png"
            },
            { 
              "pagePath": "/pages/report/report",
              "iconPath": "/images/report.png",
              "barflag":true,
              "text": "数据中心"
            },
            { 
              "pagePath": "/pages/usercenter/usercenter",
              "barflag":true,
              "iconPath": "/images/usercenter.png",
              "text": "个人中心"
            }
          ]
      },
    forwardBar: function(event){ 
          const url = event.currentTarget.dataset.url;
          const barflag = event.currentTarget.dataset.barflag;
          if(url){ 
            if(barflag){ 
              wx.switchTab({ 
                'url': url
              })
            }else{ 
              wx.navigateTo({ 
                'url': url
              })
            }
           
          }else{ 
            wx.showToast({ 
              title: '未配置目标地址',
            })
          }
          
        }
    })

说明：注意替换data中的图片地址  
将以上内容对应到新页面中即可在页面中渲染出如下效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70]

### 转为组件 ###

#### 创建组件所需的目录及页面 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 1]

#### 复制组件内容 ####

分别将前三步里的wxml、js、wxss 复制到对应格式的文件中去

#### 声明组件 ####

将【思考5】json复制到组件的json文件中去  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 2]

#### js转换 ####

页面的js使用的page构造器，组件使用Component 构造器  
需要注意的是，组件构造器中data部分是组件的内部数据，如果需要接收外部数据需要在properties 中指定，同时自定义事件也略有不同。  
完整js文件内容

Component({ 
      properties: { 
        barlist: { 
          type: []
        }
      },
      data: { 
      },
      methods: { 
        // 这里是一个自定义方法
        forwardBar: function(event){ 
          const url = event.currentTarget.dataset.url;
          const barflag = event.currentTarget.dataset.barflag;
          if(url){ 
            if(barflag){ 
              wx.switchTab({ 
                'url': url
              })
            }else{ 
              wx.navigateTo({ 
                'url': url
              })
            }
           
          }else{ 
            wx.showToast({ 
              title: '未配置目标地址',
            })
          }
        }
      }
    })

wxml部分不需要修改

### 使用 ###

#### 引入组件 ####

使用组件在页面的json文件中引入即可，如果想全局通用，在app.json中引入即可

{ 
     "usingComponents": { 
        "mytabbar": "/components/mytabbar/mytabbar"
      }
    }

注意mytabbar：即为标签的名字，后面为组件的绝对地址

#### 使用组件 ####

在需要引入页面引入上一步声明的标签即可

barlist：为传入数据，\{ \{barlist\}\}从当前page的data里取值。

***自此就完成了组件的自定义***

需要注意的是：

1.  自定的组件虽然跟tab页面很像，但不是tab页面，页面件切换如果想达到首页的效果，需要在个跳转的各页面引入组件并设置当前页自定义组件的数据。
2.  组件有自己的事件定义方式，可以不通过bingtap的方式（参考官方文档）
3.  组件更多用法参考官方文档

***附：wx.switchTab与wx.navigateTo的区别***  
wx.navigateTo不能跳到 tabbar 页面  
wx.switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

[-]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
[-Component]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200604011318692.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200604011530355.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200604011830499.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg==,size_16,color_FFFFFF,t_70