兩個月的微信小程序嘗試

遇上小程序的熱潮，公司項目確定也要跟一波風。私覺得小程序就應該一兩個頁面，簡簡單單，結果咱們第一個版本就來了十幾個頁面，三十個接口。。。
由於習慣了用 vue，因此爲了快速上手，決定採用 mpvue，直接按照官方文檔很容易把框架搭好，就只介紹一下遇到的一些問題

一、mpvue-entry

原來的寫法是，每一個頁面都有一個main.js的配置文件，這樣文件數量就很大，爲了更接近vue的寫法，一個頁面一個*.vue文件，引入了mpvue-entry

mpvue-entry：集中式頁面配置，自動生成各頁面的入口文件，優化目錄結構

// webpack.base.conf.js
...
var MpvueEntry = require('mpvue-entry')
module.exports = {
    entry: MpvueEntry.getEntry('c/pages.js'),
    ...
}

// pages.js
module.exports = [{
    path: 'pages/home'
}, {
    path: 'pages/post'
}]

二、自定義導航欄

• 沒法部分配置，要麼所有用原生，要麼所有改自定義
• mpvue引入了postcss-pxtorpx，用於將 px 單位轉換成微信小程序特有的單位 rpx，但導航欄的高度是固定的，因此我把這個插件去掉了，固定的高度用px，自適應的用rpx
• 須要適配iphone/android/iphoneX，參考高適應性的自定義導航欄開發思路

題外話，之前固定導航欄，老是對導航欄設置 position:fixed;後再將主體部分的內容使用 padding-top或 margin-top來留出導航欄的高度，避免被遮擋。這樣形成的問題是，每一個頁面都要手動設置，並且還要根據機型來適配，很繁瑣。
此次終於學到一個小技巧，在導航欄組件裏添加一個 placeholder，高度跟隨導航欄的高度， position不要設置爲固定，就能夠把位置給留出來了

<header>
    <div class="navigation-placeholder" :style="{
        height: statusBarHeight + titleBarHeight + 'px'
    }"></div> // 這裏就是用來佔位的
    <div class="navigation-container" :style="{
        backgroundColor: backgroundColor
    }">
        <div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
        <div class="navigation-title" :style="{
            height: titleBarHeight + 'px',
            lineHeight: titleBarHeight + 'px'
        }">
            <span
                v-if="back"
                class="back-icon"
                @click="onBack"
            >
                <img src="../assets/images/back.png" alt="">
            </span>
            <p
                v-if="title"
                class="title"
                :style="{ fontSize: textSize + 'px', color: textColor, textAlign: align }"
            >{{ title }}</p>
        </div>
    </div>
</header>

三、底部固定，彈窗滾動

彈窗簡直是設計師美眉的祕密武器，美其名曰，讓設計看起來更輕，好吧，開發們就要面對兩個問題：
一、彈出收起的動畫要流暢；
二、彈窗彈出來的時候，底部要保持在原來的位置上，而且不能隨彈窗內容的滾動而滾動

• 第一個問題，建議不要使用小程序的createAnimation，看起來好像也是用的transform，但效果比起直接手動用transform來控制仍是要差一些

transition: transform .3s ease;
transform: translateZ(0) translateY(20px);

• 第二個問題折騰得就比較久了。

a、直接對底部內容設置position:fixed; overflow:hidden;頁面確定是會回到頂部的；
b、小程序有一個catchtouchmove=true的屬性，至關於touchmove.stop="stopTouch",stopTouch爲一個空函數，就是阻止touch事件冒泡發生，若是彈窗內容是固定的，在彈窗上加這個屬性，能夠很完美地解決問題，但若是彈窗內容是個須要滾動的列表，你會發現也滾動不了了；
c、對b的問題，貌似能夠用scroll-view的屬性，但由於scroll-view對video組件支持很差，因此沒有研究就直接放棄了；
d、完美地解決方案：剛開始個人彈窗結構是這樣的：

<div class="dialog-mask" touchmove.stop="stopTouch">
    <div class="dialog-content"></div>
</div>

而後改爲了這樣：

<div class="dialog-container">
    <div class="dialog-mask" @touchmove.stop="stopTouch"></div>
    <div class="dialog-content"></div>
</div>

將阻止冒泡設置在了mask層，不讓其影響到內容層，雖然有一些奇怪，但的確這個時候內容層的滾動不會再引發底部內容滾動了，誤打誤撞解決了這個問題。

四、slot支持很差

最遺憾的就是mpvue對slot的支持居然不如小程序原生，不只不支持具名slot，對僅有的一個slot里居然還不能添加動態變量，在捶胸頓足中無可奈何放棄。

五、video和textarea等客戶端原生組件層級最高

很容易出現一個尷尬的狀況，滾動列表的時候，視頻居然浮到了導航欄上方耀武揚威，還有，點擊彈窗遮罩本應該關閉彈窗，結果卻點到了底部的textarea組件。
解決方法也很簡單，視頻就用一張圖片代替，播放的時候替換爲視頻，textarea在彈窗出現的時候disabled=true

六、webview自動全屏鋪滿

webview不能像iframe同樣設置寬高樣式

七、背景圖片不能使用本地圖片

圖標轉成base64，其他的使用<image />

八、navigateBack不能傳參數

storage或者vuex搭配用起來~

九、頁面卸載後數據沒有初始化

這簡直是一個難以置信的問題，某個頁面已經卸載了，下次再次進入，一些data值居然還保持在以前的狀態，好比彈窗依然還彈起來的，最好在onUnload函數裏處理一下

十、無過濾器，不能使用函數設置style和class

這個就儘可能規避吧，畢竟路不止一條，此路不通，換一條照樣走。