From 482e39ca4374095afc9a7986b52abb5bf67b7a1e Mon Sep 17 00:00:00 2001
From: sukkee <382248373@qq.com>
Date: Wed, 10 Apr 2019 20:23:00 +0800
Subject: [PATCH] feat(mars-build):  add page api onPageScroll and onTabItemTap
 (#6)

* feat(pageApi): add new page api and merge some feature

* fix(px): fix to 15px
---
 .../src/compiler/script/script-h5.js          |  2 +-
 packages/mars-build/src/gulp-mars-h5.js       | 20 ++++--
 packages/mars-build/src/h5/template/App.vue   | 25 +++++--
 .../PullDownRefresh/PullDownRefresh.vue       | 20 +++---
 .../template/app-components/TabBar/TabBar.vue | 11 +++-
 .../{browser-history.js => browserHistory.js} |  0
 packages/mars-build/src/h5/template/main.js   |  2 +-
 .../mars-build/src/h5/template/mars-base.css  |  9 ++-
 packages/mars-build/src/h5/template/router.js | 22 ++++---
 .../plugins/transformScriptPlugin.js          | 66 +++++++++++++------
 10 files changed, 119 insertions(+), 58 deletions(-)
 rename packages/mars-build/src/h5/template/{browser-history.js => browserHistory.js} (100%)

diff --git a/packages/mars-build/src/compiler/script/script-h5.js b/packages/mars-build/src/compiler/script/script-h5.js
index 5c92fc8a..a2cf35da 100644
--- a/packages/mars-build/src/compiler/script/script-h5.js
+++ b/packages/mars-build/src/compiler/script/script-h5.js
@@ -151,7 +151,7 @@ exports.compileApp = function (options) {
     const {
         content: cssContent,
         attrs
-    } = appStyle || {};
+    } = appStyle;
 
     contentStr = `
 <template>
diff --git a/packages/mars-build/src/gulp-mars-h5.js b/packages/mars-build/src/gulp-mars-h5.js
index a06208de..5a24ccbd 100644
--- a/packages/mars-build/src/gulp-mars-h5.js
+++ b/packages/mars-build/src/gulp-mars-h5.js
@@ -86,7 +86,7 @@ function compile(file, opt) {
                     let basicCompMap = {};
                     delToVueTag(el, options, basicCompMap);
                     if (!el.parent) {
-                        el.attrsMap['style'] = `backgroundColor: ${config.backgroundColor || null};`;
+                        el.attrsMap.style = `backgroundColor: ${config.backgroundColor || null};`;
                     }
                     componentSet = Object.assign(componentSet, basicCompMap);
                 }
@@ -123,8 +123,9 @@ function compile(file, opt) {
             appStyle: styles && styles[0] // 用户app.vue中的style
                 ? {
                     content: styles[0].content,
-                    attrs: styles[0].attrs.lang ? styles[0].attrs.lang : ''}
-                : null,
+                    attrs: styles[0].attrs.lang ? styles[0].attrs.lang : ''
+                }
+                : {},
             script: appScript && appScript.content || '',
             appScriptApi: scriptRet.pageLifeApi, // 用户app.vue中的生命周期
             template: appTemplate && appTemplate.content || '',
@@ -174,7 +175,11 @@ function compile(file, opt) {
 
     // 处理style
     const h5StylesArr = styles.filter(item => !item.attrs || (!item.attrs.target || item.attrs.target === 'h5'));
-    const styleContent = h5StylesArr.reduce((styleStr, {attrs, content, lang}) => `${styleStr}
+    const styleContent = h5StylesArr.reduce((styleStr, {
+        attrs,
+        content,
+        lang
+    }) => `${styleStr}
 <style ${lang ? `lang="${lang}"` : ''} scoped>
     ${content}
 </style>`, '');
@@ -200,7 +205,9 @@ ${styleContent || ''}
         if (Object.keys(componentSet).length > 0) {
             const componentsFile = new Vinyl({
                 path: opt.dest + '/components.js',
-                _info_: {componentSet}
+                _info_: {
+                    componentSet
+                }
             });
             compileComponents(componentsFile, opt);
             componentsFile.writeFileSync();
@@ -225,7 +232,8 @@ function gulpPrefixer(opt) {
         if (file.isBuffer()) {
             try {
                 compile(file, opt);
-            } catch (e) {
+            }
+            catch (e) {
                 log.error('[COMPILE ERROR]:', e);
             }
         }
diff --git a/packages/mars-build/src/h5/template/App.vue b/packages/mars-build/src/h5/template/App.vue
index 9d8d994c..4a94b5f6 100644
--- a/packages/mars-build/src/h5/template/App.vue
+++ b/packages/mars-build/src/h5/template/App.vue
@@ -1,5 +1,3 @@
-
-
 <template>
     <div
         id="mars"
@@ -24,8 +22,9 @@
             >
                 <pull-down-refresh
                     ref="refresherHandler"
-                    @on-refresh="handleRefresh"
+                    @pull-down-refresh="handleRefresh"
                     @reach-bottom="handleReachBottom"
+                    @page-scroll="handlePageScroll"
                     :enablePullDownRefresh="enablePullDownRefresh"
                     :enableReachBottom="enableReachBottom"
                     :onReachBottomDistance="onReachBottomDistance"
@@ -62,12 +61,14 @@
             </div>
             <tab-bar
                 v-if="tabList.length > 0 && showTabBar ? customShowTabBar : false"
+                @tab-item-tap="handleTabItemTap"
                 :tabList="tabList"
                 :currentPath="currentPath"
                 :color="tabBarColor"
                 :selectedColor="tabBarSelectedColor"
                 :borderStyle="tabBarBorderStyle"
-                :backgroundColor="tabBarBackgroundColor"/>
+                :backgroundColor="tabBarBackgroundColor"
+                />
         </div>
     </div>
 </template>
@@ -247,6 +248,18 @@ export default {
             this.transitionStatus === 'end'
             && this.$refs.currentRouter.onReachBottom
             && this.$refs.currentRouter.onReachBottom();
+        },
+
+        handlePageScroll(data) {
+            this.transitionStatus === 'end'
+            && this.$refs.currentRouter.onPageScroll
+            && this.$refs.currentRouter.onPageScroll(data);
+        },
+
+        handleTabItemTap(item) {
+            this.transitionStatus === 'end'
+            && this.$refs.currentRouter.onTabItemTap
+            && this.$refs.currentRouter.onTabItemTap(item);
         }
     }
 }
@@ -315,6 +328,4 @@ export default {
     }
 }
 
-</style>
-
-
+</style>
\ No newline at end of file
diff --git a/packages/mars-build/src/h5/template/app-components/PullDownRefresh/PullDownRefresh.vue b/packages/mars-build/src/h5/template/app-components/PullDownRefresh/PullDownRefresh.vue
index 58cd6860..b46f00db 100644
--- a/packages/mars-build/src/h5/template/app-components/PullDownRefresh/PullDownRefresh.vue
+++ b/packages/mars-build/src/h5/template/app-components/PullDownRefresh/PullDownRefresh.vue
@@ -79,11 +79,11 @@ export default {
         this.scroller = this.$refs.scroller;
         this.container = window;
         this.enablePullDownRefresh && this.initTouch();
-        this.enableReachBottom && this.initScroll();
+        this.initScroll();
     },
     updated() {
         this.enablePullDownRefresh ? (this.initTouch()) : (this.detachTouch());
-        this.enableReachBottom ? (this.initScroll()) : (this.detachScroll());
+        // this.enableReachBottom ? (this.initScroll()) : (this.detachScroll());
     },
     methods: {
         initTouch() {
@@ -116,14 +116,18 @@ export default {
             window.removeEventListener('touchcancel', onTouchCancel);
         },
         initScroll() {
+            this.scrollHandler = null;
+            window.addEventListener('scroll', this.onScroll);
+        },
+        onScroll() {
+            this.$emit('page-scroll', {
+                scrollTop: window.pageYOffset
+            });
             if (!this.enableReachBottom) {
                 return;
             }
-            this.scrollHandler = null;
-            window.addEventListener('scroll', this.reachBottom);
-        },
-        reachBottom() {
             this.containerHeight = this.container.offsetHeight;
+            
             if (this.scrollHandler) {
                 clearTimeout(this.scrollHandler);
                 this.scrollHandler = null;
@@ -139,7 +143,7 @@ export default {
         },
         detachScroll() {
             this.scrollHandler = null;
-            window.removeEventListener('scroll', this.reachBottom);
+            window.removeEventListener('scroll', this.onScroll);
         },
         onTouchStart(e) {
             if (this.loading) {
@@ -177,7 +181,7 @@ export default {
             that.loading = true;
             this.currentStep = STATUS_LOADING;
             this.height = this.offset;
-            that.$emit('on-refresh');
+            that.$emit('pull-down-refresh');
         },
 
         stopPullDownRefresh() {
diff --git a/packages/mars-build/src/h5/template/app-components/TabBar/TabBar.vue b/packages/mars-build/src/h5/template/app-components/TabBar/TabBar.vue
index 2191157a..847c616d 100644
--- a/packages/mars-build/src/h5/template/app-components/TabBar/TabBar.vue
+++ b/packages/mars-build/src/h5/template/app-components/TabBar/TabBar.vue
@@ -20,6 +20,7 @@
             <div
                 v-if="item.iconPath"
                 class="tab-item icon-and-text"
+                @click="tap(item, index)"
             >
                 <div
                     class="tab-item-icon"
@@ -78,6 +79,15 @@ export default {
             type: String,
             default: '#fff'
         }
+    },
+    methods: {
+        tap(item, index) {
+            this.$emit('tab-item-tap', {
+                index: `${index}`,
+                text: item.text,
+                pagePath: item.pagePath.replace(/^\//, '')
+            });
+        }
     }
 }
 </script>
@@ -149,4 +159,3 @@ export default {
     background-size: cover;
 }
 </style>
-
diff --git a/packages/mars-build/src/h5/template/browser-history.js b/packages/mars-build/src/h5/template/browserHistory.js
similarity index 100%
rename from packages/mars-build/src/h5/template/browser-history.js
rename to packages/mars-build/src/h5/template/browserHistory.js
diff --git a/packages/mars-build/src/h5/template/main.js b/packages/mars-build/src/h5/template/main.js
index 3335d681..2115b663 100644
--- a/packages/mars-build/src/h5/template/main.js
+++ b/packages/mars-build/src/h5/template/main.js
@@ -36,4 +36,4 @@ const vm = new Vue({
 initGlobalApi(Vue, vm);
 
 // 将初始化后的$api赋值给getApp
-marsAppData['$api'] = vm.$api;
+marsAppData.$api = vm.$api;
diff --git a/packages/mars-build/src/h5/template/mars-base.css b/packages/mars-build/src/h5/template/mars-base.css
index 8ad18de7..6475e00f 100644
--- a/packages/mars-build/src/h5/template/mars-base.css
+++ b/packages/mars-build/src/h5/template/mars-base.css
@@ -3,11 +3,10 @@
     padding: 0;
     margin: 0;
 }
-
-html {
-    font-size: 100px;
-}
-
 body {
     font-size: 15px;
 }
+
+a {
+    text-decoration: none;
+}
\ No newline at end of file
diff --git a/packages/mars-build/src/h5/template/router.js b/packages/mars-build/src/h5/template/router.js
index 9db4735a..1800beb2 100644
--- a/packages/mars-build/src/h5/template/router.js
+++ b/packages/mars-build/src/h5/template/router.js
@@ -5,7 +5,7 @@
 
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import browserHistory from './browser-history';
+import browserHistory from './browserHistory';
 
 Vue.use(VueRouter);
 const router = new VueRouter({
@@ -21,11 +21,12 @@ Vue.prototype.isBack = false;
 Vue.prototype.fromRouterPosY = 0;
 router.beforeEach(function (to, from, next) {
     if (!to.query._) {
-        to.query['_'] = guid();
+        to.query._ = guid();
     }
+
     Vue.prototype.currentRoute = [{
-        route: to.path,
-        uri: to.path
+        route: to.path.replace(/^\//, ''),
+        uri: to.path.replace(/^\//, '')
     }];
     let toPath = decodeURI(to.fullPath); // 兼容 vue-router 浏览器前进/返回时的 decodeURI操作
     let fromPath = decodeURI(from.fullPath);
@@ -41,6 +42,7 @@ router.beforeEach(function (to, from, next) {
             delete query._;
         }
     }
+
     toPath = decodeURI(to.fullPath);
     fromPath = decodeURI(from.fullPath);
     // 记录浏览历史
@@ -50,12 +52,14 @@ router.beforeEach(function (to, from, next) {
         if (browserHistoryArr[i] && browserHistoryArr[i].path === toPath) {
             browserHistoryIndex = i;
         }
+
     }
 
     for (let i = browserHistoryLength; i >= 0; i--) {
         if (browserHistoryArr[i] && browserHistoryArr[i].path === fromPath) {
             browserHistoryArr[i].pos = window.pageYOffset;
         }
+
     }
 
     if (browserHistoryLength > 1
@@ -71,7 +75,9 @@ router.beforeEach(function (to, from, next) {
         if (browserHistory.length === 0
             || -1 === browserHistoryIndex
             || browserHistoryIndex !== browserHistoryLength - 1) {
-            browserHistoryArr.push({path: toPath});
+            browserHistoryArr.push({
+                path: toPath
+            });
         }
     }
     // // 没有from.name 且 browserHistory.length !== 0，表示从畅听跳转到其他页面又跳转回畅听
@@ -80,7 +86,6 @@ router.beforeEach(function (to, from, next) {
     //     browserHistoryArr.push({path: to.fullPath});
     // }
     browserHistory.set(browserHistoryArr);
-    next();
     router.app.$nextTick(() => {
         const browserHistoryArr = browserHistory.list;
         const browserHistoryLength = browserHistory.length;
@@ -89,9 +94,8 @@ router.beforeEach(function (to, from, next) {
             && browserHistoryLast.pos) {
             Vue.prototype.fromRouterPosY = browserHistoryLast.pos;
         }
-        else {
-            window.scrollTo(0, 0);
-        }
+
     });
+    next();
 });
 export default router;
diff --git a/packages/mars-build/src/h5/transform/plugins/transformScriptPlugin.js b/packages/mars-build/src/h5/transform/plugins/transformScriptPlugin.js
index c2debcca..3e891cc4 100644
--- a/packages/mars-build/src/h5/transform/plugins/transformScriptPlugin.js
+++ b/packages/mars-build/src/h5/transform/plugins/transformScriptPlugin.js
@@ -2,7 +2,9 @@
  * @file vue script transform plugin: 处理hook
  * @author zhangjingyuan02
  */
+
 /* eslint-disable fecs-camelcase */
+
 /* eslint-disable babel/new-cap */
 
 // 小程序page生命周期
@@ -13,12 +15,13 @@ const PAGE_LIFECYCLE_HOOKS = {
     onHide: true,
     onUnload: true,
     onForceRelaunch: true,
-    // 'onPullDownRefresh': true,
-    // 'onReachBottom': true,
-    onShareAppMessage: true,
-    onPageScroll: true,
-    onTabItemTap: true,
-    onLaunch: true
+    onLaunch: true,
+    onShareAppMessage: true
+    // onPullDownRefresh: true,
+    // onReachBottom: true,
+    // onPageScroll: true,
+    // onTabItemTap: true,
+
 };
 
 const PAGE_LIFE_MAP_VUE = {
@@ -122,7 +125,7 @@ const Property = (t, options) => {
                     name: 'components'
                 })
                 || COMP_LIFECYCLE_HOOKS[path.node.key.name]
-            )) {
+                )) {
                 return;
             }
 
@@ -143,25 +146,28 @@ const Property = (t, options) => {
                             bindParentNode.source = t.stringLiteral(bindVaule.value + '.vue');
                             p.value = bindParentNode.source;
                         }
+
                     });
 
                     path.node.value.properties.push();
                     const valObj = getPlainObjectNodeValue(t.objectExpression(props), path, t);
                     options.baseOptions && (options.baseOptions.components = valObj);
-
                 }
             }
             else if (COMP_LIFECYCLE_HOOKS[path.node.key.name]) {
                 path.remove();
             }
+
         },
         ObjectMethod(path, state) {
             if (PAGE_LIFECYCLE_HOOKS[path.node.key.name]) {
                 path.remove();
             }
+
         }
     };
 };
+
 /* eslint-enable */
 
 /**
@@ -236,7 +242,7 @@ function mapSwanLifeTime(properties, t, lifeKey, lifeItem, lifeMapKey, options)
             'method',
             t.identifier(lifeMapKey),
             [],
-            t.BlockStatement([
+            t.blockStatement([
                 lifeHookExpression
             ])
         ));
@@ -252,6 +258,7 @@ module.exports = function getVisitor(options = {}) {
                     if (!t.isObjectExpression(path.node.declaration)) {
                         return;
                     }
+
                     let properties = path.node.declaration.properties;
                     options.baseOptions && (options.baseOptions.config = {});
                     options.baseOptions && (options.baseOptions.components = {});
@@ -262,33 +269,49 @@ module.exports = function getVisitor(options = {}) {
                         if (item.key.name !== 'config') {
                             options.baseOptions.appApi[item.key.name] = item;
                         }
+
                     });
                     // 处理 onPullDownRefresh 到 methods
                     function dealSwanPageApi(apiName) {
-                        let onPullDownRefreshBody = properties.find(item => item.key.name === apiName);
-                        if (onPullDownRefreshBody) {
+                        let apiBody = properties.find(item => item.key.name === apiName);
+                        const apiBodyIndex = properties.findIndex(item => item.key.name === apiName);
+                        if (apiBody) {
+                            apiBody = apiBody.type === 'ObjectMethod'
+                                ? apiBody
+                                : apiBody.type === 'ObjectProperty'
+                                    ? apiBody.value
+                                    : apiBody;
+                            properties.splice(apiBodyIndex, 1);
                             options.baseOptions && (options.baseOptions.enableConfig[apiName] = true);
                             let methodsObj = properties.find(item => item.key.name === 'methods');
-                            // 获取 onPullDownRefresh 函数体
-                            let onPullDownRefreshMethod = t.objectMethod(
+                            // 获取 api 参数
+                            let apiParams = [];
+                            apiBody.params.forEach(item => {
+                                apiParams.push(t.identifier(item.name));
+                            });
+                            // 获取 onPullDownRefresh/onReachBottom 函数体
+                            let apiMethod = t.objectMethod(
                                 'method',
                                 t.identifier(apiName),
-                                [],
-                                onPullDownRefreshBody.body
+                                apiParams,
+                                apiBody.body
                             );
                             if (!methodsObj) {
                                 properties.push(t.objectProperty(
                                     t.identifier('methods'),
-                                    t.objectExpression([onPullDownRefreshMethod])
+                                    t.objectExpression([apiMethod])
                                 ));
                             }
                             else {
-                                methodsObj.value.properties.push(onPullDownRefreshMethod);
+                                methodsObj.value.properties.push(apiMethod);
                             }
                         }
                     }
-                    dealSwanPageApi('onPullDownRefresh');
-                    dealSwanPageApi('onReachBottom');
+                    // 处理page api
+                    ['onPullDownRefresh', 'onReachBottom', 'onPageScroll', 'onTabItemTap'].forEach(key => {
+                        dealSwanPageApi(key);
+                    });
+
                     // 处理swan page 生命周期：onLoad 、onReady 、onUnload、onShow 、onHide
                     // 收集 app.vue 周期：onLaunch 、 onShow 、 onHide
                     ['onLoad', 'onReady', 'onUnload', 'onLaunch', 'onShow', 'onHide'].forEach(key => {
@@ -296,6 +319,7 @@ module.exports = function getVisitor(options = {}) {
                         if (!lifeItem) {
                             return;
                         }
+
                         let lifeMapKey = PAGE_LIFE_MAP_VUE[key];
                         mapSwanLifeTime(properties, t, key, lifeItem, lifeMapKey, options);
                     });
@@ -310,10 +334,12 @@ module.exports = function getVisitor(options = {}) {
                         if (!lifeTypeItem) {
                             return;
                         }
+
                         const lifeItem = lifeTypeItem.value.properties.find(item => item.key.name === key);
                         if (!lifeItem) {
                             return;
                         }
+
                         mapSwanLifeTime(properties, t, key, lifeItem, lifeMapKey, options);
                     });
                     path.traverse(Property(t, options));
@@ -321,4 +347,4 @@ module.exports = function getVisitor(options = {}) {
             }
         };
     };
-}
+};