趕上小程序的熱潮，公司項目肯定也要跟一波風(fēng)。私以為小程序就應(yīng)該一兩個頁面，簡簡單單，結(jié)果我們第一個版本就來了十幾個頁面，三十個接口。。。
因為習(xí)慣了用vue，所以為了快速上手，決定采用mpvue，直接按照官方文檔很容易把框架搭好，就只介紹一下遇到的一些問題

1、mpvue-entry

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

mpvue-entry：集中式頁面配置，自動生成各頁面的入口文件，優(yōu)化目錄結(jié)構(gòu) // 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' }]

2、自定義導(dǎo)航欄

• 無法部分配置，要么全部用原生，要么全部改自定義
• mpvue引入了postcss-pxtorpx，用于將 px 單位轉(zhuǎn)換成微信小程序特有的單位 rpx，但導(dǎo)航欄的高度是固定的，所以我把這個插件去掉了，固定的高度用px，自適應(yīng)的用rpx
• 需要適配iphone/android/iphoneX，參考高適應(yīng)性的自定義導(dǎo)航欄開發(fā)思路

題外話，以前固定導(dǎo)航欄，總是對導(dǎo)航欄設(shè)置position:fixed;后再將主體部分的內(nèi)容使用padding-top或margin-top來留出導(dǎo)航欄的高度，避免被遮擋。這樣造成的問題是，每個頁面都要手動設(shè)置，而且還要根據(jù)機(jī)型來適配，很繁瑣。
這次終于學(xué)到一個小技巧，在導(dǎo)航欄組件里添加一個placeholder，高度跟隨導(dǎo)航欄的高度，position不要設(shè)置為固定，就可以把位置給留出來了 <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'}"><spanv-if="back"class="back-icon"@click="onBack"><img src="../assets/images/back.png" alt=""></span><pv-if="title"class="title":style="{ fontSize: textSize + 'px', color: textColor, textAlign: align }">{{ title }}</p></div></div> </header>

3、底部固定，彈窗滾動

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

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

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

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

a、直接對底部內(nèi)容設(shè)置position:fixed; overflow:hidden;頁面肯定是會回到頂部的；
b、小程序有一個catchtouchmove=true的屬性，相當(dāng)于touchmove.stop="stopTouch",stopTouch為一個空函數(shù)，就是阻止touch事件冒泡發(fā)生，如果彈窗內(nèi)容是固定的，在彈窗上加這個屬性，可以很完美地解決問題，但如果彈窗內(nèi)容是個需要滾動的列表，你會發(fā)現(xiàn)也滾動不了了；
c、對b的問題，貌似可以用scroll-view的屬性，但因為scroll-view對video組件支持不好，所以沒有研究就直接放棄了；
d、完美地解決方案：剛開始我的彈窗結(jié)構(gòu)是這樣的：

<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>

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

4、slot支持不好

最遺憾的就是mpvue對slot的支持竟然不如小程序原生，不僅不支持具名slot，對僅有的一個slot里竟然還不能添加動態(tài)變量，在捶胸頓足中迫不得已放棄。

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

很容易出現(xiàn)一個尷尬的情況，滾動列表的時候，視頻竟然浮到了導(dǎo)航欄上方耀武揚威，還有，點擊彈窗遮罩本應(yīng)該關(guān)閉彈窗，結(jié)果卻點到了底部的textarea組件。
解決方法也很簡單，視頻就用一張圖片代替，播放的時候替換為視頻，textarea在彈窗出現(xiàn)的時候disabled=true

6、webview自動全屏鋪滿

webview不能像iframe一樣設(shè)置寬高樣式

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

圖標(biāo)轉(zhuǎn)成base64，其余的使用<image />

8、navigateBack不能傳參數(shù)

storage或者vuex搭配用起來~

9、頁面卸載后數(shù)據(jù)沒有初始化

這簡直是一個難以置信的問題，某個頁面已經(jīng)卸載了，下次再次進(jìn)入，一些data值竟然還保持在之前的狀態(tài)，比如彈窗依然還彈起來的，最好在onUnload函數(shù)里處理一下

10、無過濾器，不能使用函數(shù)設(shè)置style和class

這個就盡量規(guī)避吧，畢竟路不止一條，此路不通，換一條照樣走。

總結(jié)

以上是生活随笔為你收集整理的两个月的微信小程序尝试的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。