framework

更新时间：2024/08/01 访问次数：13134

一、组件介绍
二、使用简介
三、属性
四、示例
五、AXML代码
六、JS代码
七、JSON

不再维护，此文档即将下线，请使用千牛tab框架结构。

一、组件介绍

framework组件，实现标准的商家应用基础框架布局，开发者只需完成配置即可符合设计规范，其中主要包含3部分内容（详情请见JS示例）：

1.左侧菜单区域；

2.右侧上部面板区域；

3.右侧下部内容区域。

二、使用简介

framework组件需配合router-view进行使用，framework本身完成基础框架配置，内部的单页面解决方案依赖于miniapp-router，详情参考 miniapp-router使用文档。

三、属性

该组件是一个受控组件，可以通过外部状态控制进行路径跳转，比如从内容区域A跳转到B，可以通过setData activeKey来实现，首次通过设置defaultActiveKey来实现

参数	说明	类型	默认值
info	配置商家应用基础信息，详情见以下case	object
menu	配置左侧菜单及内容区域信息，详情见以下case	object
onChange	监听路由变更事件，面包屑及菜单，tab都可能触发此事件	function
defaultActiveKey	默认的展示路径	string
activeKey	动态设置的展示路径	string

四、示例

五、AXML代码

<view>
  <button type="primary" onTap="onActiveKeyChange" data-path="/component/button"> 切换到"Button" </button>
  <button type="primary" onTap="onActiveKeyChange" data-path="/api/base"> 切换到"基础api" </button>
  <framework info="{{ info }}" menu="{{ menu }}" onChange="onChange" defaultActiveKey="{{ defaultActiveKey }}" activeKey="{{ activeKey }}" >
    <router-view>
      <base slot="component" />
      <scene slot="scene" />
      <api slot="api" />
    </router-view>
  </framework>
</view>

六、JS代码

import routerInit from 'miniapp-router';
const basePath = '/component/button';
const routerConfig = {
  routes: [
    {
      path: '/component',
      component: 'component',
      children: [
        { path: '/button', component: 'button' },
        { path: '/icon', component: 'icon' }
      ],
    },
    {
      path: '/api',
      component: 'api',
      children: [
        { path: '/interface', component: 'interface' },
        { path: '/base', component: 'base' }
      ],
    },
    {
      path: '/sence',
      component: 'sence'
    }
  ],
  option: {
    initPath: basePath,
  }
}
Page({
  data: {
    activeKey: '',
    defaultActiveKey: basePath,
    
    /* info用于配置左侧菜单的商家应用基础信息 */
    
    info: {
      company: '阿里巴巴',
      miniappName: '应用DEMO',
      logo: 'https://img.alicdn.com/tfs/TB1vVhnmnnI8KJjy0FfXXcdoVXa-300-300.png'
    },
    
    /* menu用于配置左侧菜单信息 */
    
    menu: [
      {
        /* name用于配置左侧菜单名称 */
        name: 'Component 组件',
        /* key与一级路由对应 */
        key: 'component',
        /* title用于配置右侧面板的住title */
        title: '基础组件',
        /* tabs用于配置右侧信息，一个menu菜单可以包含多个tab */
        tabs: [
          {
            /* name用于配置当前tab的选项卡名称 */
            name: 'Button 按钮',
            /* key与二级路由对应 */
            key: 'button',
            /* title用于配置右下侧主内容区域的标题 */
            title: '模块标题',
            /* 定义当前tab的面包屑 */
            breadcrumb: [{
               /* 名称 */
              name: '一级',
              /* 跳转路径 */
              path: '/api/interface'
            },
            {
              name: '二级',
              path: '/api/base'
            }, {
              name: '三级',
              path: '/component/button'
            }]
          },
          { name: 'Icon 图标', key: 'icon' }
        ]
      },
      {
        name: 'API',
        key: 'api',
        tabs: [
          { name: 'Interface 界面', key: 'interface', },
          { name: 'Base 基础能力', key: 'base' }
        ],
      },
      {
        name: 'Scene 场景',
        key: 'scene',
        title: '典型场景'
      }
    ]
  },
  onLoad() {
    routerInit.call(this, routerConfig);
  },
  onChange({ detail: { value } }) {
    console.log('************$router', value)
    this.$router.push(value);
    this.setData({ activeKey: value })
  },
  onActiveKeyChange(event) {
    const { path } = event.target.dataset;
    this.setData({ activeKey: path })
  }
});

七、JSON

{
    "component": true,
    "usingComponents": {
        "router-view": "../../component/router-view/router-view",
        "base": "../../component/base/base",
        "scene": "../../component/scene/scene",
        "api": "../../component/api/api"
    }
}

FAQ

关于此文档暂时还没有FAQ

有用(0) 我要提问

开放平台

店铺动态卡片-开发指引