feat(build): support tabBar style config

max-team · May 30, 2019 · 25eed6a · 25eed6a
1 parent aaa200b
commit 25eed6a
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 8 deletions.
diff --git a/packages/mars-build/src/compiler/script/script-h5.js b/packages/mars-build/src/compiler/script/script-h5.js
@@ -70,17 +70,31 @@ exports.compileMain = function (content, options) {
         window = null,
         pagesInfo
     } = mainOptions;
+    const {
+        backgroundColor,
+        borderStyle,
+        color,
+        selectedColor,
+        list = []
+    } = tabBar;
+    const tabBarStyle = {
+        backgroundColor,
+        borderStyle,
+        color,
+        selectedColor
+    };
     const mainRet = babel.transform(content.toString(), {
         plugins: [transformMainPlugin({
-            routes: tabBar && tabBar.list || [],
+            routes: list,
+            tabBarStyle,
             window,
             mars: {
                 navigationBarHomeColor: mars.navigationBarHomeColor === undefined
                     ? 'dark'
                     : mars.navigationBarHomeColor,
                 showNavigationBorder: !!mars.showNavigationBorder,
                 useTransition: mars.useTransition === undefined ? true : mars.useTransition,
-                homePage: `/${tabBar && tabBar.list && tabBar.list.length > 0 ? tabBar.list[0].pagePath : pages[0]}`,
+                homePage: `/${list.length > 0 ? list[0].pagePath : pages[0]}`,
                 supportPWA: !!mars.supportPWA
             },
             componentSet,

diff --git a/packages/mars-build/src/h5/template/MarsApp.vue b/packages/mars-build/src/h5/template/MarsApp.vue
@@ -86,7 +86,7 @@ export default {
     name: 'app',
     props: {
         tabBars: {
-            type: Array
+            type: Object
         },
         navigationBarBackgroundColor: {
             type: String,
@@ -184,7 +184,21 @@ export default {
         }
     },
     mounted() {
-        this.tabList = this.tabBars;
+        const {
+            list: tabBarList,
+            style: tabBarStyle
+        } = this.tabBars;
+        const {
+            backgroundColor,
+            borderStyle,
+            selectedColor,
+            color
+        } = tabBarStyle;
+        this.tabList = tabBarList;
+        color && (this.tabBarColor = color);
+        selectedColor && (this.tabBarSelectedColor = selectedColor);
+        backgroundColor && (this.tabBarBackgroundColor = backgroundColor);
+        borderStyle && (this.tabBarBorderStyle = borderStyle);
         this.currentPath = this.$route.path;
         this.getPageConfig(this.$route.path);
         this.showRouterView = true;

diff --git a/packages/mars-build/src/h5/transform/plugins/transformMainPlugin.js b/packages/mars-build/src/h5/transform/plugins/transformMainPlugin.js
@@ -7,15 +7,15 @@
 
 module.exports = function getVisitor(options = {}) {
     return ({types: t}) => {
-        const {routes, componentSet, pagesInfo, window, mars} = options;
+        const {routes, componentSet, pagesInfo, window, mars, tabBarStyle} = options;
         return {
             visitor: {
                 // 处理main.js 里的 render函数参数
                 ArrowFunctionExpression(path, state) {
-                    let tabBars = [];
+                    let tabBarList = [];
                     // import component & routes
                     for (let r of routes) {
-                        tabBars.push(t.objectExpression([
+                        tabBarList.push(t.objectExpression([
                             t.objectProperty(
                                 t.identifier('pagePath'),
                                 t.stringLiteral(`/${r.pagePath}`)
@@ -42,10 +42,28 @@ module.exports = function getVisitor(options = {}) {
                             )
                         ]));
                     }
+                    let styleArr = [];
+                    Object.keys(tabBarStyle).forEach(key => {
+                        if (tabBarStyle[key]) {
+                            styleArr.push(t.objectProperty(
+                                t.identifier(key),
+                                t.stringLiteral(`${tabBarStyle[key]}`)
+                            ));
+                        }
+                    });
                     let propsAst = [];
                     propsAst.push(t.objectProperty(
                         t.identifier('tabBars'),
-                        t.arrayExpression(tabBars)
+                        t.objectExpression([
+                            t.objectProperty(
+                                t.identifier('list'),
+                                t.arrayExpression(tabBarList)
+                            ),
+                            t.objectProperty(
+                                t.identifier('style'),
+                                t.objectExpression(styleArr)
+                            )
+                        ])
                     ));
                     // 配置 全部变量 window
                     Object.keys(window).forEach(key => {