微信小程序小技巧系列《九》自定義底部彈出框，更改頁面文件夾名稱的正確姿

發(fā)布時(shí)間：2018-02-06 16:49 所屬欄目：小程序開發(fā)教程

本系列為小技巧及特殊知識(shí)點(diǎn)的聚合，你可以在搜索內(nèi)搜索“小技巧”的文章來查看所有本系列文章；

一：微信小程序自定義底部彈出框

作者：Pluto；來自原文地址

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動(dòng)畫樣式

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

二：微信web開發(fā)者工具中更改頁面文件夾名稱的正確姿勢

從9月份微信小程序橫空出世到現(xiàn)在的將近三個(gè)月，雖然尚未全面開放，卻已紅透大半邊天，網(wǎng)友們貢獻(xiàn)的各種資源教程也噴涌而出。

最近剛剛學(xué)完JavaScript的基本知識(shí)，忍不住也開始嘗試一下微信小程序開發(fā)，對(duì)于官方提供的微信web開發(fā)者工具也是信心十足，但是實(shí)際操作中還是遇到了一些坑，對(duì)于像我一樣的一個(gè)初學(xué)者，比如在該工具中創(chuàng)建項(xiàng)目后，存放各個(gè)頁面的文件夾默認(rèn)為pages，但是想把它改成其他名字，結(jié)果會(huì)出現(xiàn)不同的問題，下面分享自己是如何爬這個(gè)坑的，懂得的大神請(qǐng)忽略。

首先，現(xiàn)在下來最新的開發(fā)工具微信web開發(fā)者工具v0.11.112301，打開新建一個(gè)快速啟動(dòng)項(xiàng)目test，稍微改一下頁面內(nèi)容，只保留logs頁面，效果和文件樹如下所示：

由于某種原因，現(xiàn)在我需要更改pages文件夾名稱，當(dāng)然app.json里面對(duì)應(yīng)的頁面路徑也要同步更改。

1，先更改文件樹文件夾名稱為pagestest，移開鼠標(biāo)焦點(diǎn)點(diǎn)擊空白處（此處若不移開鼠標(biāo)焦點(diǎn)直接保存結(jié)果不會(huì)改變），保存（會(huì)出現(xiàn)報(bào)錯(cuò)一次），再更改app.json中的頁面路徑為"pagestest/logs/logs" 保存，顯示效果正常為;

2，先更改app.json中的頁面路徑為"pagestest /logs/logs" 保存，頁面顯示pagestest/logs/logs.wxml，再更改文件樹種的文件夾名稱為pagestest保存,此時(shí)pagestest文件夾中又出現(xiàn)了另外一個(gè)文件夾pages，而且顯示仍然是pagestest/logs/logs.wxml，而這個(gè)pages文件夾中也有一個(gè)logs文件夾，與原文件夾內(nèi)容一樣。

刪除這個(gè)后來生成的pages文件夾，保存，此時(shí)的頁面才顯示出Hello World。有時(shí)刪除pages后還不能正常顯示，需要進(jìn)入logs的wxml頁面置入鼠標(biāo)焦點(diǎn)，無需改變內(nèi)容，保存一下即可。

另外，自己在嘗試時(shí)也遇到過其他的情況：

1.生成的多余的頁面文件夾也可能在于app.js同一層的位置；

2.更改后頁面內(nèi)容還是不能正常顯示，這時(shí)進(jìn)入wxml文件看一下內(nèi)容，發(fā)現(xiàn)原本的文件內(nèi)容變成了路徑，所以刪除文件后來生成的文件之前先看一下頁面內(nèi)容是否還存在。

綜上所述，微信官方的開發(fā)者工具在用戶體驗(yàn)上還是存在這個(gè)欠缺的，期待官方后面版本的更加人性化，

對(duì)于出現(xiàn)諸如以上問題，除了按方法1更改之外，當(dāng)然一次性建好頁面文件夾名稱不再更改是最好的辦法，如何無法確定后面是否需要更改，則可以用第三方編輯器比如sublime text進(jìn)行代碼變，可以在官方開發(fā)工具中查看效果，從而避免出現(xiàn)以上問題。