“紙上談兵”很容易，“打好勝仗”才是關鍵。今天由我來為大家分享在實際開發“大眾點評點餐小程序”中遇到的問題和解決方案。

效果展示

 

 

 

 

頁面布局

  如果你看過我們的系列文章， 應該對我們的產品形態有了初步了解。我們是做點餐菜單服務，菜單需要分類，需要購物車模塊，那么典型的'工'型布局是我們的首選。

大體結構為：頂部商家名稱，可能會出現黃色橫條提示模塊；下方左側為導航菜單欄；下方右側為每個菜單分類包含的菜品展示列表；底部可能出現購物車模塊。
看到這里，再結合上面的圖片，你應該對菜單頁的結構有比較具象的了解。
下面從產品角度說下具體的交互細節。

產品需求

• 頂部要求顯示商家名稱，有分享功能；
• 下方左側、右側可分開滾動，滾動左側不影響右側，滾動右側左側隨之聯動高亮顯示所在的菜單分類；
• 點擊下方左側導航菜單欄，高亮顯示被點擊的菜單分類，下方右側對應分類詳情模塊頂部與右側滾動區的頂部重合（類似于html中#id的錨點功能）；
• 滾動下方右側菜品分類詳情時，當該分類詳情模塊頂部接觸到滾動區域的頂部，左側對應的導航菜單欄高亮；
• 若左側高亮的導航菜單不在可視區域：
  • 當高亮的導航菜單頂部在左側scroll-view滾動區上方（被遮住了），則將該高亮導航菜單滾動至將高亮導航欄的頂部與左側可滾動區域頂部重合（高亮菜單為滾動區的第一個分類）；
  • 當高亮的導航菜單在左側scroll-view滾動區可視區下方，將高亮導航菜單滾動到屏幕中央區域（微小偏差可以接受，主要看用戶體驗。）；
• 頂部下方可能會出現黃條提示文案模塊；
• 底部上方可能會出現購物車模塊；
• 頂部黃條提示文案模塊吸頂，底部購物車模塊吸底；
• 需要適配各種不同機型。

關鍵技術羅列

  這里需要指出：產品在設計成稿之前，我們已經對小程序支持的功能做了細致的調研，在確保可以通過技術手段實現產品需求的前提下才確定UI以及交互設計。

• 從產品兼容性角度出發，我們考慮使用微信小程序的rpx作為UI設計的尺寸。該尺寸和rem非常類似，不同點在于其對基準尺寸的設定。rem使用文檔根元素設定的尺寸作為基準尺寸，而rpx使用iphone6(s)手機屏幕寬度為基準定出1rpx對應的寬度，該動態尺寸對設備的兼容性更加友好；
• 微信自帶scroll-view UI組件，并提供一系列組件狀態操作接口；
• scroll-view組件滾動時觸發scroll事件，返回的event對象各項長度屬性均使用px作單位；

代碼編譯

src
├── menu.html
├── menu.js
├── menu.json
└── menu.less

我們在開發中使用工具對文件實時編譯：

 `menu.html`->`menu.wxml`
 `menu.less`->`menu.wxss`

為方便代碼維護以及日常的開發習慣，我們支持了less語法，引入了Promise。

wxml頁面布局

### menu.html 
<page>
    <view class="menu-content">
        <view class="yellow-bar">
            // 黃色橫條提示模塊
        </view>
        <scroll-view class="scroll-view-left" height="{{ windowScrollHeight }}" scroll-into-view="{{ leftToView }}" scroll-top="{{ leftScrollTop }}">
            // 左側分類導航
        </scroll-view>
        <scroll-view class="scroll-view-right" height="{{ windowScrollHeight }}" scroll-into-view="{{ rightToView }}">
            // 右側分類詳情
        </scroll-view>
        <view class="cart-bar">
            // 購物車模塊
        </view>
    </view>
</page>

  這里著重考慮兩個scroll-view結構設計，左右的布局結構可以使用Css樣式屬性float或者是Css3的flex；另外黃條提示模塊和購物車模塊使用fixed屬性搞定。
微信官方文檔介紹，使用scroll-view組件，必須指定高度。
實踐結果：使用scroll-view可以不指定高度，頁面有滾動區存在，問題是滾動時無法觸發scroll事件，也就無法完成聯動設計。

滾動區域高度

  我們知道使用scroll-view需要指定高度，那么這個高度值該怎么算出來，以什么樣的方式設定呢？
這里我就不詳細的說明其用法了，直接看 scroll-view文檔。

注意兩點：

• 必須使用px作單位
• 必須在scroll-view上顯式的指定其height屬性

在獲取滾動區高度windowScrollHeight之前，考慮其影響因素：

• 設備高度
• 黃條文案提示模塊的存在
• 購物車模塊的存在
• rpx->px的轉換

設備高度可以通過微信官方api getSystemInfo接口API獲取。

那么，該什么時候調用接口？
首先這是一個異步API接口，另外其直接受系統權限控制的影響，基于這兩點因素，其結果返回的時機就不是確定的。
我們可以在小程序啟動時在onLaunch中調起該API，然后將獲取的結果放入到全局變量globalData中。而globalData是掛在在全局App上的屬性，對所有頁面均可見。

getSystemInfo 結果數據結構

sysInfo Object {
    errMsg:"getSystemInfo:ok"
    language:"zh_CN"
    model:"iPhone 6"
    pixelRatio:2
    platform:"devtools"
    system:"iOS 10.0.1"
    version:"6.3.9"
    windowHeight:627
    windowWidth:375
}

這里的windowHeight, windowWidth指的是屏幕高度和寬度，且使用的單位是px。

獲取sysInfo

// app.js
// 注意這里的wxp為我們對wx的封裝，它繼承wx的所有屬性，特點是若調起wx的異步api函數將返回一個Promise實例。
 getSysInfo: function() {
        let that = this;
        if(that.globalData && that.globalData.sysInfo 
            && that.globalData.sysInfo.windowHeight) {
            // 將結果封裝成Promise，后續可統一使用`then`方法
            return Promise.resolve(that.globalData.sysInfo);
        }
        return wxp.getSystemInfo()
            .then(res => {
                that.globalData.sysInfo = res;
                return res;
            })
            .catch(e => {
                // 可以嘗試彈出框或toast
                console.error('[getSystemInfo]', e);
            });
   },

// menu.js 
onLoad: function() {
    app.getSysInfo().then((sysInfo)=> {
        // transform rpx -> px and calculate scroll-view height.
    }
}

計算fixed元素高度

  黃條文案提示模塊，購物車模塊的高度都是已知的。但大家是否注意到我之前提到的設計細節:所有的元素統一使用rpx做單位，而這里需要使用px作單位，必須要做rpx->px的轉換。

 

rpx->px裝換

    var yellowBarRpxHeight = 50;  // 黃色文案提示模塊高度
    var percent = app.data.sysInfo.windowHeight / 375; // 當前設備1rpx對應的px值
    var yellowBarHeight = Number(yellowBarRpxHeight * percent).toFixed(2);

大家對除數375是否有疑問呢， 該比值是否會受到設備實際像素點的影響呢？ 答案：不會。
同樣的道理可以得到購物車模塊的高度cartBarHeight。
通過公式：
windowScrollHeight = windowHeight - yellowBarHeight - cartBarHeight
計算得出兩個scroll-view的滾動高度。

左->右聯動

點擊左側導航菜單欄，右側定位到對應的分類菜品詳情。
通過查看scroll-view文檔發現可以使用scroll-into-view屬性；該組件自動定位右側需要滾動到的具體位置。
給左側導航菜單欄綁定tap事件監聽函數，事件觸發后獲取event對象的currentTarget屬性，取出渲染時存放在該節點上的分類id，用此id作為唯一標識定位右側分類詳情，設置右側scroll-view的scroll-into-view屬性，這時其會將右側scroll-view上id屬性值為該值的節點滾動到滾動區域的頂部（類似于html中的#id錨點功能）。

Tap事件監聽函數

    // menu.js
   bindLeftTap (e) {
        // 由于事件是冒泡的，所以不確定點擊操作是在哪個元素上觸發的，但currentTarget表示當前綁定事件對應的節點，便可準確獲取該節點上的dataset
        let dataset = e && e.currentTarget && e.currentTarget.dataset;
        var LEFT_TO_RIGHT_SUFFIX = "l2r-";
        if(!dataset || !dataset.id) return;
        // target
        this.setData({
            highlightCategoryId: dataset.id, // 左側高亮的導航菜單欄
            rightToView: LEFT_TO_RIGHT_SUFFIX + dataset.id, // 更新右側的scroll-to-view屬性。
        });
    }

• LEFT_TO_RIGHT_SUFFIX"是什么東西？其為全局定義的常量，只是為了方便大家閱讀，才將其寫入函數內部，用作id拼接，保證唯一性。
• 在開發階段曾經嘗試直接將獲取到的id作為rightToView的值，也就是設定右側scroll-view的scroll-into-view屬性，發現右側scroll-view不會滾動到指定的高度。猜想可能因為獲取到的dataset.id是一個數字類型字符串，其內部使用===方式導致不匹配。
• 設置scroll-into-view引起的滾動操作同樣會觸發scroll事件。

右->左聯動

   右→左聯動是整個頁面設計最核心的部分。由于小程序無法獲取元素的寬高，位置信息，對滾動右側實現左側聯動效果帶來挑戰。

如何準確的獲取右側滾動到的具體分類，并讓左側導航菜單欄相應分類高亮，且在可視的范圍內？

在設計階段，我們和設計同學確認右側每個菜品詳情模塊高度固定，分類小灰條高度固定，這樣我們就可以根據已有的數據結構計算出每個元素距離文檔區頂部的高度。（請參考下圖紅框圈出內容分別對應分類小灰條，菜品模塊詳情）

 

 

// PER_BAR_HEIGHT 分類小灰條的高度
// PER_ITEM_HEIGHT 單個菜品詳情的高度
var sumScrollHeight = 0;
var assistantCategories = spuMenuSet.map(it => {
    let unitHeight = PER_BAR_HEIGHT + (it.spuMenuItemList && it.spuMenuItemList.length ) * PER_ITEM_HEIGHT;
    it.scrollHeight = sumScrollHeight;
    sumScrollHeight += unitHeight;
    return it;
});

左側導航菜單欄高亮分類切換的邊界條件為右側分類菜單詳情的分類小灰條頂部與右側滾動區頂部重合。

通過計算出每個分類小灰條距離文檔頂部的高度scrollHeight，在每次滾動事件觸發時，比較當前滾動的高度與分類小灰條的scrollHeight，就可確定當前在哪個分類菜單詳情區域內，從而實現左側分類導航欄的高亮。

機器誤差

  在測試時發現，有些機型滾動下方右側scroll-view時，在邊界條件出現時并不會完成左側導航菜單欄高亮分類的切換，往往存在10-100px的誤差。從產品角度，這種誤差是不能容忍的。個人并不確定是什么原因導致誤差的出現，但看起來并沒有非常好的解決辦法。
那么能用什么方案減少誤差呢？ 我的實現思路是"人工干預自動校正"。

人工干預自動校正

仔細分析滾動事件返回的event對象

Object
    currentTarget:Object
    detail:Object
        deltaX:0
        deltaY:-971
        scrollHeight:24737
        scrollLeft:0
        scrollTop:2409
        scrollWidth:295
        __proto__:Object

    target:Object
        dataset:Object
            __proto__:Object
            id:""
            offsetLeft:0
            offsetTop:38
        __proto__:Object
    timeStamp:13932
    type:"scroll"
    __proto__:Object

特別留意detail中的scrollHeight。

滾動事件會給出整個scroll-view文檔內容的高度，這個高度值非常關鍵，我們完全可以通過計算：
scrollHeight = 單個菜品詳情高度 * 菜品總數 + 單個分類小灰條高度 * 分類小灰條總數。

由于單個菜品詳情高度與單個分類小灰條高度的高度比是確定的，所以上面的方程式為一元方程，計算出單個菜品詳情高度和單個分類小灰條高度，更新每個分類小灰條距離文檔頂部的距離scrollTop值。
經測試發現，左側導航菜單欄高亮分類的切換精度非常高，而且兼容性很好。

左側高亮分類跳錯問題

在實際開發中， 我還發現一個問題： 左側有分類A、B、C，點擊分類B，分類B高亮，右側定位到分類B的詳情區域，隨之左側高亮分類切換到A上。
大家是否想到是什么原因導致的？ 在上面講解scroll-view屬性時我提到過一句話：

設置scroll-into-view引起的滾動操作同樣會觸發scroll事件

這里點擊左側分類，右側由于scroll-into-view觸發了滾動事件，而相應的滾動事件監聽函數函數，計算得出當前高亮的導航菜單欄為A，更新頁面的data將高亮分類切換到了A上。
解決方案： ① 修改邊界條件，但在不同機器上存在細微差別，我們無法準確的設置誤差范圍；畢竟元素寬高都是我們算出來的；② 限制右側的scroll事件函數的執行。
推薦使用第二種方式。思路：若點擊左側導航菜單欄，設定全局鎖定狀態，若鎖定則不右→左的聯動操作，再解除鎖定狀態。

分類導航欄的可視問題

  通過上面“右→左”聯動，我們已經可以讓左側隨著右側滾動而高亮，問題是： 左側也是一個scroll-view，如何保證高亮的分類在可視區呢？具體的交互邏輯請看前面的產品需求

 

 

 

 

監聽右側滾動事件，判斷當前在哪一個分類上，確定該分類在左側scroll-view的文檔高度，判斷是否需要滾動左側scroll-view。
可以通過scroll-view的scroll-into-view或者scroll-top屬性完成滾動。

// 這里是偽代碼實現
var index = mapId2index(id); //將id轉換為對應分類的index值
var perCateHeight = 40; // 左側每個分類高度為40
var leftScrollTop = 0; // 左側scroll-view滾動的高度
var windowScrollHeight = 1440; // 這個值為屏幕高度，可通過getSystemInfo獲取到
var cHeight = index * perCateHeight; // 當前分類距離文檔頂部的scrollTop值
if( cHeight - leftScrollTop - windowScrollHeight > 0) {
    // 高亮的區域在屏幕底部
    leftScrollTop = cHeight - windowScrollHeight / 2; //左側scroll-view向上滾動半個屏幕高度
    leftToView = null; // 不使用scroll-into-view 屬性, 必須置空， 否則會優先應用該屬性而不是leftScrollTop
} else if (cHeight - leftScrollTop < 0) {
    // 高亮的區域在屏幕頂部之上，設置scroll-into-view屬性
    leftToView = id;
    leftScrollTop = cHeight; // 需要記錄下當前scroll-view滾動高度，以便下次使用
} else {
    leftToView = null;
}

注意點： 若同時設置了scroll-into-view和scroll-top屬性，優先使用scroll-into-view屬性， 故這里若使用scroll-top屬性滾動時需要將scroll-into-viwe屬性置空。

優化

聯動功能開發完之后，遇到了性能瓶頸。由于復用之前C端的數據接口，接口中存在大量無用的對象屬性，而這個數據結構直接作為頁面渲染的data數據。
推薦的做法就是簡化data數據結構，只存放影響頁面渲染的數據，這樣做能夠大幅度降低UI渲染時間，給用戶更加流暢的體驗。

總結

微信小程序算是2016年-2017年里非常火的一門新技術了。
如何使用已經支持的功能特性來設計、開發產品是保障項目順利完成的重要環節。
而在開發過程中，專注細節實現，吃透API文檔，讓用戶感受到我們開發小程序的誠意，而不是在做粗糙的產品復制。

感受

在小程序發布那段時間，總能看到各種對小程序未來的設想，有悲觀的，有觀望的，也有激進的。我個人認為，“趕鴨子上架”的思路并不可取，必須清楚自己的產品定位。你的產品是否滿足“一次性消費”理念，內容是否不足以吸引用戶下載你的APP，是否比你的H5更加具有吸引力。這些都是需要我們做細致的思考的。