微信小程序文件介紹

pages目錄用于存放所有的頁面

utils目錄用于存放工具類文件

app.js是入口文件，程序運(yùn)行時(shí)，首要執(zhí)行該文件

app.json是全局配置文件，用于配置小程序的信息

app.wxss是全局樣式文件

project.config.json是項(xiàng)目配置文件

sitemap.json是SEO配置文件

每個(gè)頁面有四個(gè)文件

xxx.wxml文件，就相當(dāng)與一個(gè)html文件

xxx.wxss文件，就相當(dāng)與一個(gè)css文件

xxx.js文件，是交互文件

xxx.json，是頁面配置文件（當(dāng)前頁面）

wxml

view就相當(dāng)于html的div

text就相當(dāng)于html的span

swiper是滑塊視圖容器，它里面只能放swiper-item組件

scroll-view

可滾動(dòng)視圖區(qū)域。使用豎向滾動(dòng)時(shí)，需要給scroll-view一個(gè)固定高度，通過 WXSS 設(shè)置 height。組件屬性的長度單位默認(rèn)為px，2.4.0起支持傳入單位(rpx/px)。

scroll-x：允許橫向滾動(dòng)。

scroll-y：允許縱向滾動(dòng)。

image是圖片組件，注意：最好全部采用網(wǎng)絡(luò)圖片（圖片的地址），因?yàn)樾〕绦蚩傮w積不能超過2MB

{ { } }是插值表達(dá)式這里可以直接使用js里面定義的數(shù)據(jù)

wx:for指令用于循環(huán)列表，循環(huán)出來的每一項(xiàng)通過item返回，每一項(xiàng)對(duì)應(yīng)的索引，通過index返回

循環(huán)列表時(shí)wx:key的好處，獎(jiǎng)勵(lì)列表發(fā)生變化時(shí)重新渲染列表的損耗更低

循環(huán)列表

定義的頁面數(shù)據(jù)

bindtap=""是觸擊事件，其實(shí)就相當(dāng)于網(wǎng)頁中的點(diǎn)擊事件

條件判斷

wx:if wx:elif wx:else 指令用于判斷條件，滿足條件顯示上面的組件。

wx:if 是惰性的，如果在初始渲染條件為 false，框架什么也不做，在條件第一次變成真的時(shí)候才開始局部渲染。

相比之下，hidden 就簡單的多，組件始終會(huì)被渲染，只是簡單的控制顯示與隱藏。

<view hidden="{{flag ? true : false}}"> Hidden </view>

一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運(yùn)行時(shí)條件不大可能改變則 wx:if 較好。

<view class="item {{i%2===0?'blue':''}}" style="color:{{i%2===0?'red':''}}">

更多標(biāo)簽組件：https://developers.weixin.qq.com/miniprogram/dev/framework/

wxss

在wxss中，最好不要寫標(biāo)簽選擇器和id選擇器，統(tǒng)一寫類選擇器

calc（）函數(shù)，是css3中計(jì)算尺寸的函數(shù)

calc(100vw/1080*420)? //1080*420是圖片的尺寸? 自適應(yīng)屏幕的尺寸

為了讓小程序里面的內(nèi)容在各種設(shè)備上能夠自適應(yīng)顯示微信推出了響應(yīng)式單位：rpx，在iphone中2rpx=1px

js

page()函數(shù)，返回頁面對(duì)象，該函數(shù)需要傳一個(gè)配置參數(shù)，這個(gè)配置參數(shù)是一個(gè)對(duì)象

這個(gè)配置對(duì)象中，定義當(dāng)前頁面所有內(nèi)容

data選項(xiàng)，定義頁面的數(shù)據(jù)

生命周期函數(shù)--監(jiān)聽頁面加載

?onLoad:?function?(options)?{

??}

//?生命周期函數(shù)--下拉刷新函數(shù)

onPullDownRefresh:function(){

}

下拉刷新函數(shù)

//?生命周期函數(shù)--上拉觸底函數(shù)

?onReachBottom:function(){?

}

上拉觸底函數(shù)

//更新頁面信息

this.setData({

})

tabBat

在app.json文件中添加tabBar節(jié)點(diǎn)。

color：tab上的文字默認(rèn)顏色，僅支持十六進(jìn)制顏色。

selectedColor：tab上的文字選中時(shí)的顏色，僅支持十六進(jìn)制顏色。

backgroundColor：tab的背景色，僅支持十六進(jìn)制顏色。

borderStyle：tabbar上邊框的顏色，僅支持 black / white。

position：tabBar的位置，僅支持 bottom / top。

custom：自定義tabBar。

list：tab的列表。

list 接受一個(gè)數(shù)組，只能配置最少 2 個(gè)、最多 5 個(gè) tab。

pagePath：頁面路徑，必須在 pages 中先定義。

text：tab 上按鈕文字。

iconPath：圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片。

當(dāng) position 為 top 時(shí)，不顯示 icon。

selectedIconPath：選中時(shí)的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片。

當(dāng) position 為 top 時(shí)，不顯示 icon。

tabBat

導(dǎo)航欄圖標(biāo)地址：iconfont.cn

?跳轉(zhuǎn)

navigator組件，用于頁面鏈接，默認(rèn)只能跳轉(zhuǎn)普通頁面。

如果要跳轉(zhuǎn)tabBar頁面，需要設(shè)置open-type="switchTab"。

<navigatorurl="/pages/details/details">詳情</navigator><navigatoropen-type="switchTab"url="/pages/menu/menu">菜單</navigator>

代碼跳轉(zhuǎn)：

跳轉(zhuǎn)到普通頁面

wx.navigateTo({url:'/pages/details/details',})

跳轉(zhuǎn)到tabBar頁面

wx.switchTab({url:'/pages/menu/menu',})

使用方法跳轉(zhuǎn)頁面的好處是：在跳轉(zhuǎn)之前可能需要做其他事情，比如：驗(yàn)證權(quán)限等等。

確認(rèn)框和消息框

確認(rèn)框：

wx.showModal({

title:”標(biāo)題”,

success:res=>{}

})

消息框：

wx.showToast({

title:”標(biāo)題”,

duration:1000

})

封裝方法

確認(rèn)框方法：

//?定義消息框方法，并導(dǎo)出

export?let?$msg?=?(title,icon='success',duration=1500)=>{

??//?showToast()方法，打開消息框

??wx.showToast({

????//消息框的內(nèi)容

????title,

????//消息框的圖標(biāo)

????icon,

????//消息框顯示時(shí)間

????duration,

????//顯示遮罩層

????mask:true

??})

}

消息框方法：

//?定義確認(rèn)框方法，并導(dǎo)出

export?let?$confirm?=?(content)=>{

??return?new?Promise((resolve)=>{

????//showModal()方法，打開確認(rèn)框

????wx.showModal({

??????content,

??????success:({confirm})=>{

????????//confirm返回true，表示點(diǎn)擊的是確定按鈕，否則是取消按鈕

????????if(confirm){

??????????resolve()

????????}

??????}

????})

??})

}