一宴合、小程序項目組成部分
1.1焕梅、小程序項目基礎組成部分
1.2、小程序代碼構成
小程序官方建議把所有小程序的頁面卦洽，都存放在 pages 目錄中贞言，以單獨的文件夾存在。
1.3阀蒂、app.json配置文件
1.4该窗、project.config.json配置文件
1.5、sitemap.json配置文件
微信現(xiàn)已開放小程序內搜索蚤霞，效果類似于PC網(wǎng)頁的 SEO酗失。sitemap.json 文件用來配置小程序頁面是否允許微信索引。
當開發(fā)者允許微信索引時昧绣，微信會通過爬蟲的形式规肴，為小程序的頁面內容建立索引。當用戶的搜索關鍵字和頁面的索引匹配成功的時候夜畴，小程序的頁面將可能展示在搜索結果中拖刃。
如果頁面不允許被微信索引，將action配置成disallow贪绘。
二兑牡、組件
小程序中的組件也是由宿主環(huán)境提供的，開發(fā)者可以基于組件快速搭建出漂亮的頁面結構税灌。官方把小程序的組件分為了9大類均函，分別是:
1、視圖容器
2垄琐、基礎內容
3边酒、因表單組件
4、導航組件
5狸窘、媒體組件
6墩朦、map 地圖組件
7、canvas 畫布組件
8翻擒、開放能力
9氓涣、無障礙訪問
2.1、view組件
view普通視圖區(qū)域陋气，類似于 HTML 中的 div劳吠，是一個塊級元素，常用來實現(xiàn)頁面的布局效果巩趁。
<view class = "container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
.container1 view{
height: 100px;
width:100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: pink;
}
.container1 view:nth-child(2){
background-color:aqua;
}
.container1 view:nth-child(3){
background-color:lightcoral;
}
.container1{
display: flex;
justify-content: space-around;
}
2.2痒玩、view組件實現(xiàn)縱向滾動效果
<scroll-view class = "container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
.container1 view{
height: 100px;
width:100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: pink;
}
.container1 view:nth-child(2){
background-color:aqua;
}
.container1 view:nth-child(3){
background-color:lightcoral;
}
.container1{
height: 120px;
width: 100px;
border:1px solid red;
}
2.3、swiper組件
swiper組件實現(xiàn)輪播圖
<swiper class="swiper-container" indicator-dots>
<!--第一張輪播圖-->
<swiper-item>
<view class="item">A</view>
</swiper-item>
<!--第二張輪播圖-->
<swiper-item>
<view class="item">B</view>
</swiper-item>
<!--第三張輪播圖-->
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
.swiper-container{
height: 150px;
}
.item{
height: 100%;
text-align: center;
line-height: 150px;
}
swiper-item:nth-child(1) .item{
background-color: lightcoral;
}
swiper-item:nth-child(2) .item{
background-color: lightcyan;
}
swiper-item:nth-child(3) .item{
background-color: lightpink;
}
2.4、swiper組件常用屬性
2.5蠢古、text組件
文本組件奴曙，類似于 HTML 中的 span 標簽，是一個行內元素草讶。
通過 text 組件的 selectable 屬性洽糟，實現(xiàn)長按選中文本內容的效果:
<view>
<!--手機號支持長按選中操作-->
<text selectable>1800000000000</text>
</view>
通過 rich-text 組件的 nodes 屬性節(jié)點，把 HTML 字符串渲染為對應的 UI 結構堕战。
<rich-text nodes="<h1 style='color:red;'>標題<h1>"></rich-text>
2.6坤溃、button組件
按鈕組件
功能比 HTML 中的 button 按鈕豐富
通過 open-type 屬性可以調用微信提供的各種功能(客服、轉發(fā)嘱丢、獲取用戶授權薪介、獲取用戶信息等)
<view>--------------通過type指定按鈕類型--------------</view>
<button>默認按鈕</button>
<button type = "primary">主色調按鈕</button>
<button type = "warn">警告按鈕</button>
<view>--------------通過size = "mini"小尺寸按鈕--------------</view>
<button size = "mini">默認按鈕</button>
<button type = "primary" size = "mini">主色調按鈕</button>
<button type = "warn" size = "mini">警告按鈕</button>
<view>--------------通過plain鏤空按鈕--------------</view>
<button size = "mini" plain>默認按鈕</button>
<button type = "primary" size = "mini" plain>主色調按鈕</button>
<button type = "warn" size = "mini" plain>警告按鈕</button>
2.7、image組件
<!--空圖片-->
<image></image>
<!--使用src指定圖片路徑-->
<image src = "/images/example.jpg"></image>
image {
/*通過邊框線證明image有默認的高和寬*/
border: 1px solid red;
}
image 組件的 mode 屬性屿讽。
image 組件的 mode 屬性用來指定圖片的裁剪和縮放模式昭灵，常用的 mode 屬性值如下:
三、模版與配置
3.1伐谈、數(shù)據(jù)綁定
在data中定義數(shù)據(jù)烂完，在wxml中使用Mustache 語法綁定數(shù)據(jù)。
3.1.1诵棵、綁定內容
在頁面對應的 .js 文件中抠蚣，把數(shù)據(jù)定義到 data 對象中即可。如下
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
//字符串類型數(shù)據(jù)
info:"init data",
//數(shù)組類型數(shù)據(jù)
msg:[{msg:'HELLO'},{msg:'WORLD'}]
},
把data中的數(shù)據(jù)綁定到頁面中渲染履澳，使用 Mustache 語法(雙大括號)將變量包起來即可嘶窄。語法格式如下:
<view>{{info}}</view>
3.1.2、綁定屬性
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
//字符串類型數(shù)據(jù)
info:"init data",
//數(shù)組類型數(shù)據(jù)
msg:[{msg:'HELLO'},{msg:'WORLD'}],
//動態(tài)綁定屬性
imgSrc:"/images/example.jpg",
},
<!--Mustache 語法綁定屬性-->
<image src="{{imgSrc}}" mode="widthFix"/>
3.1.3距贷、運算(三元運算柄冲、算術運算等)
data: {
//字符串類型數(shù)據(jù)
info:"init data",
//數(shù)組類型數(shù)據(jù)
msg:[{msg:'HELLO'},{msg:'WORLD'}],
//動態(tài)綁定屬性
imgSrc:"/images/example.jpg",
//三元運算，生成10以后的隨機數(shù)
randomNum:Math.random()*10,
},
<view>{{randomNum>=5?'隨機數(shù)大于等于5':'隨機數(shù)小于5'}}</view>
3.2忠蝗、事件綁定
3.2.1现横、小程序中的常用事件
事件對象的屬性列表蓬推，當事件回調觸發(fā)的時候刻剥，會收到一個事件對象event苍凛，它的詳細屬性如下表所示:
3.2.2胞此、target 和currentTarget 的區(qū)別
target 是觸發(fā)該事件的源頭組件，而 currentTarget 則是當前事件所綁定的組件胰苏。舉例如下:
點擊內部的按鈕時径缅，點擊事件以冒泡的方式向外擴散猪腕，也會觸發(fā)外層view 的tap 事件處理函數(shù)配阵。此時馏颂，對于外層的 view 來說:
e.target 指向的是觸發(fā)事件的源頭組件示血，因此，e.target 是內部的按鈕組件饱亮。
e.currentTarget 指向的是當前正在觸發(fā)事件的那個組件矾芙，因此舍沙，e.currentTarget 是當前的 view 組件近上。
3.2.3、bindtap 的語法格式
在小程序中拂铡，不存在 HTML 中的 onclick 鼠標點擊事件壹无，而是通過 tap 事件來響應用戶的觸摸行為。通過 bindtap感帅，可以為組件綁定 tap 觸摸事件斗锭，語法如下:
<button type="primary" bind:tap="btnTapHandler">觸摸事件按鈕</button>
在頁面的 .js 文件中定義對應的事件處理函數(shù)，事件參數(shù)通過形參 event(一般簡寫成e)來接收:
/**
*事件綁定
*/
btnTapHandler(e){ // 按鈕的 tap 事件處理函數(shù)
console.log(e)//事件參數(shù)對象 e
},
3.2.4失球、在事件處理函數(shù)中為 data 中的數(shù)據(jù)賦值
通過調用 this.setData(data0bject)方法岖是，可以給頁面 data 中的數(shù)據(jù)重新賦值，示例如下:
Page({
/**
*事件綁定 更改data中count的值
*/
changeCountHandler(){
this.setData({
count:this.data.count+1
})
},
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
//定義初始數(shù)據(jù)
count:0,
},
<button type="primary" bind:tap="changeCountHandler">觸摸事件+1按鈕</button>
<view>count當前值為:{{count}}</view>
3.2.5实苞、事件傳參
小程序中的事件傳參比較特殊豺撑，不能在綁定事件的同時為事件處理函數(shù)傳遞參數(shù)。例如黔牵，下面的代碼將不能正常工作:
<button type="primary" bind:tap="changeCountHandler(123)">觸摸事件+1按鈕</button>
因為小程序會把 bindtap 的屬性值聪轿，統(tǒng)一當作事件名稱來處理，相當于要調用一個名稱為 changeCountHandler(123)的事件處理函數(shù)猾浦。
可以為組件提供 data-自定義屬性傳參陆错，其中代表的是參數(shù)的名字，示例代碼如下:
<button type="primary" bind:tap="changeCountHandler" data-info="{{2}}">觸摸事件按鈕</button>
<view>count當前值為:{{count}}</view>
最終:
info 會被解析為參數(shù)的名字金赦。
數(shù)值 2 會被解析為參數(shù)的值音瓷。
在事件處理函數(shù)中，通過 event.target.dataset.參數(shù)名 即可獲取到具體參數(shù)的值夹抗，示例代碼如下:
/**
*事件綁定 更改data中count的值
*/
changeCountHandler(e){
// dataset 是一個對象绳慎，包含了所有通過 data-* 傳遞過來的參數(shù)項
console.log(e.target.dataset)
// 通過 dataset 可以訪問到具體參數(shù)的值
console.log(e.target.dataset.info)
this.setData({
count:this.data.count+e.target.dataset.info
})
},
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
//定義初始數(shù)據(jù)
count:0,
},
6.2.6、bindinput 的語法格式
在小程序中兔朦，通過 input 事件來響應文本框的輸入事件偷线，語法格式如下:通過 bindinput，可以為文本框綁定輸入事件:
<input type="text" bindinput="inputHandler"/>
<view>當前輸入值為:{{inputValue}}</view>
input{
border:1px solid #eee;
margin: 5px;
padding:5px;
border-radius: 5px;
}
Page({
/**
*事件綁定 更改data中count的值
*/
inputHandler(e){
// e.detail.value 是變化過后沽甥，文本框最新的值
console.log(e.detail.value)
this.setData({
inputValue:e.detail.value
})
},
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
//定義初始數(shù)據(jù)
inputValue:'',
},
四声邦、條件渲染
4.1、wx:if
在小程序中摆舟，使用 wx:if="{{condition}}"來判斷是否需要渲染該代碼塊,也可以用 wx:elif 和 wx:else 來添加 else 判斷亥曹。如下：
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
//定義初始數(shù)據(jù)
type:0,
},
<!--如果type值等于1邓了，頁面顯示數(shù)據(jù)為男-->
<view wx:if="{{type===1}}">男</view>
<!--如果type值等于2，頁面顯示數(shù)據(jù)為女-->
<view wx:elif="{{type===2}}">女</view>
<!--否則頁面顯示數(shù)據(jù)為保密-->
<view wx:else>保密</view>
4.2媳瞪、結合<block>標簽使用 wx:if
如果要一次性控制多個組件的展示與隱藏骗炉，可以使用一個<block></block>標簽將多個組件包裝起來，并在<block>標簽上使用 wx:if 控制屬性蛇受，示例如下:
<!--如果type值等于1句葵，頁面顯示數(shù)據(jù)為A-->
<block wx:if="{{type===1}}">
<view>A</view>
<view>A</view>
<view>A</view>
</block>
<!--如果type值等于2，頁面顯示數(shù)據(jù)為B-->
<block wx:elif="{{type===2}}">
<view>B</view>
<view>B</view>
<view>B</view>
</block>
<!--否則頁面顯示數(shù)據(jù)為C-->
<block wx:else>
<view>C</view>
<view>C</view>
<view>C</view>
</block>
4.3兢仰、hidden
在小程序中乍丈，直接使用 hidden="{{condition}}" 也能控制元素的顯示與隱藏。如下：
<view hidden="{{type===1}}">如果type等于1隱藏把将，否則顯示轻专。</view>
4.4、wx:if與 hidden的對比
運行方式不同
wx:if 以動態(tài)創(chuàng)建和移除元素的方式察蹲，控制元素的展示與隱藏请垛。
hidden 以切換樣式的方式(display: none/block;)，控制元素的顯示與隱藏洽议。
使用建議
頻繁切換時宗收，建議使用 hidden。
控制條件復雜時绞铃，建議使用 wx:if 搭配 wx:elif镜雨、wx:else 進行展示與隱藏的切換。
五儿捧、列表渲染
5.1荚坞、wx:for
通過 wx:for 可以根據(jù)指定的數(shù)組，循環(huán)渲染重復的組件結構菲盾，語法示例如下:
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
//定義初始數(shù)組數(shù)據(jù)
array:['REACT','VUE','ANGULAR']
},
<view wx:for="{{array}}">
索引是：{{index}},當前項是:{{item}}
</view>
默認情況下颓影，當前循環(huán)項的索引用 index 表示;當前循環(huán)項用 item 表示。
5.2懒鉴、手動指定索引和當前項的變量名*
使用 wx:for-index 可以指定當前循環(huán)項的索引的變量名使用 wx:for-item 可以指定當前項的變量名诡挂。如下：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
索引是：{{idx}},當前項是:{{itemName}}
</view>
5.3、wx:key 的使用
類似于 Vue 列表渲染中的 :key临谱，小程序在實現(xiàn)列表渲染時璃俗，也建議為渲染出來的列表項指定唯一的 key 值從而提高渲染的效率，示例代碼如下:
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
//定義初始數(shù)組數(shù)據(jù)
listValue:[
{id:1,name:'REACT'},
{id:2,name:"VUE"},
{id:3,name:"ANGULAR"}
]
},
<view wx:for="{{listValue}}" wx:key="id">
{{item.name}}
</view>
