小程序模板網(wǎng)

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

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


	
  1. .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)畫樣式


	
  1. 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)以上問題。



本文地址:http://22321a.com/wxmini/doc/course/21667.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢