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

1、mpvue-entry

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

mpvue-entry：集中式頁面配置，自動生成各頁面的入口文件，優(yō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、自定義導航欄

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

題外話，以前固定導航欄，總是對導航欄設置position:fixed;后再將主體部分的內容使用padding-top或margin-top來留出導航欄的高度，避免被遮擋。這樣造成的問題是，每個頁面都要手動設置，而且還要根據(jù)機型來適配，很繁瑣。
這次終于學到一個小技巧，在導航欄組件里添加一個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'}"><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、底部固定，彈窗滾動

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

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

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

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

a、直接對底部內容設置position:fixed; overflow:hidden;頁面肯定是會回到頂部的；
b、小程序有一個catchtouchmove=true的屬性，相當于touchmove.stop="stopTouch",stopTouch為一個空函數(shù)，就是阻止touch事件冒泡發(fā)生，如果彈窗內容是固定的，在彈窗上加這個屬性，可以很完美地解決問題，但如果彈窗內容是個需要滾動的列表，你會發(fā)現(xiàn)也滾動不了了；
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層，不讓其影響到內容層，雖然有一些奇怪，但的確這個時候內容層的滾動不會再引起底部內容滾動了，誤打誤撞解決了這個問題。

4、slot支持不好

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

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

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

6、webview自動全屏鋪滿

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

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

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

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

storage或者vuex搭配用起來~

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

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

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

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

總結

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

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