微信小程序小技巧系列《九》自定義底部彈出框，更改頁面文件夾名稱的正確姿
html
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"></view>
|
CSS
-
.commodity_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.2; overflow: hidden; z-index: 1000; color: #fff; } .commodity_attr_box { width: 100%; overflow: hidden; position: fixed; bottom: 0; left: 0; z-index: 2000; background: #fff; padding-top: 20rpx; }
JS動畫樣式
-
showModal: function () { // 顯示遮罩層 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.animation = animation animation.translateY(300).step() this.setData({ animationData: animation.export(), showModalStatus: true }) setTimeout(function () { animation.translateY(0).step() this.setData({ animationData: animation.export() }) }.bind(this), 200) }, hideModal: function () { // 隱藏遮罩層 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.animation = animation animation.translateY(300).step() this.setData({ animationData: animation.export(), }) setTimeout(function () { animation.translateY(0).step() this.setData({ animationData: animation.export(), showModalStatus: false }) }.bind(this), 200) }
從9月份微信小程序橫空出世到現(xiàn)在的將近三個月，雖然尚未全面開放，卻已紅透大半邊天，網(wǎng)友們貢獻(xiàn)的各種資源教程也噴涌而出。
最近剛剛學(xué)完JavaScript的基本知識，忍不住也開始嘗試一下微信小程序開發(fā)，對于官方提供的微信web開發(fā)者工具也是信心十足，但是實際操作中還是遇到了一些坑，對于像我一樣的一個初學(xué)者，比如在該工具中創(chuàng)建項目后，存放各個頁面的文件夾默認(rèn)為pages，但是想把它改成其他名字，結(jié)果會出現(xiàn)不同的問題，下面分享自己是如何爬這個坑的，懂得的大神請忽略。
首先，現(xiàn)在下來最新的開發(fā)工具微信web開發(fā)者工具v0.11.112301，打開新建一個快速啟動項目test，稍微改一下頁面內(nèi)容，只保留logs頁面，效果和文件樹如下所示：
由于某種原因，現(xiàn)在我需要更改pages文件夾名稱，當(dāng)然app.json里面對應(yīng)的頁面路徑也要同步更改。
1，先更改文件樹文件夾名稱為pagestest，移開鼠標(biāo)焦點點擊空白處（此處若不移開鼠標(biāo)焦點直接保存結(jié)果不會改變），保存（會出現(xiàn)報錯一次），再更改app.json中的頁面路徑為"pagestest/logs/logs" 保存，顯示效果正常為;
2，先更改app.json中的頁面路徑為"pagestest /logs/logs" 保存，頁面顯示pagestest/logs/logs.wxml，再更改文件樹種的文件夾名稱為pagestest保存,此時pagestest文件夾中又出現(xiàn)了另外一個文件夾pages，而且顯示仍然是pagestest/logs/logs.wxml，而這個pages文件夾中也有一個logs文件夾，與原文件夾內(nèi)容一樣。
刪除這個后來生成的pages文件夾，保存，此時的頁面才顯示出Hello World。有時刪除pages后還不能正常顯示，需要進(jìn)入logs的wxml頁面置入鼠標(biāo)焦點，無需改變內(nèi)容，保存一下即可。
另外，自己在嘗試時也遇到過其他的情況：
1.生成的多余的頁面文件夾也可能在于app.js同一層的位置；
2.更改后頁面內(nèi)容還是不能正常顯示，這時進(jìn)入wxml文件看一下內(nèi)容，發(fā)現(xiàn)原本的文件內(nèi)容變成了路徑，所以刪除文件后來生成的文件之前先看一下頁面內(nèi)容是否還存在。
綜上所述，微信官方的開發(fā)者工具在用戶體驗上還是存在這個欠缺的，期待官方后面版本的更加人性化，
對于出現(xiàn)諸如以上問題，除了按方法1更改之外，當(dāng)然一次性建好頁面文件夾名稱不再更改是最好的辦法，如何無法確定后面是否需要更改，則可以用第三方編輯器比如sublime text進(jìn)行代碼變，可以在官方開發(fā)工具中查看效果，從而避免出現(xiàn)以上問題。
