微信小程序
一、創(chuàng)建項(xiàng)目
1、準(zhǔn)備工作
微信公眾平臺(tái)注冊(cè)開(kāi)發(fā)者賬號(hào)：https://mp.weixin.qq.com/
下載小程序開(kāi)發(fā)工具：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2、認(rèn)識(shí)項(xiàng)目目錄
pages目錄：用于存放所有的頁(yè)面。
utils目錄：用于存放工具類(lèi)文件。
app.js：是入口文件，程序在運(yùn)行時(shí)，首先要執(zhí)行該文件。
app.json：是全局配置文件，用于配置小程序的信息（它里面配置的是全局信息）。
app.wxss：是全局樣式文件。全局樣式文件里面定義的選擇器，在所有的頁(yè)面中生效。
project.config.json：是項(xiàng)目配置文件。
sitemap.json：是SEO配置文件，方便用戶搜索到該小程序。
3、app.json
（1）pages配置項(xiàng)
pages里面注冊(cè)的是視圖。用于指定小程序由哪些頁(yè)面組成，每一項(xiàng)都對(duì)應(yīng)一個(gè)頁(yè)面的路徑（含文件名）信息。
??"pages":[
????"pages/index/index"
??]
（2）window配置項(xiàng)
window 是全局窗口配置。
backgroundTextStyle 設(shè)置文本樣式（下拉loading的樣式），僅支持 dark / light。
navigationBarBackgroundColor 設(shè)置導(dǎo)航欄背景。
navigationBarTitleText 設(shè)置導(dǎo)航欄文本。
navigationBarTextStyle 設(shè)置導(dǎo)航欄標(biāo)題顏色，僅支持 black / white。
??"window":{
????"backgroundTextStyle":"light",
????"navigationBarBackgroundColor":?"#369",
????"navigationBarTitleText":?"KW43-APP",
????"navigationBarTextStyle":"white"
??}
（3）style
style 設(shè)置樣式級(jí)別，默認(rèn)是v2。
"style":?"v2"
（4）sitemapLocation
sitemapLocation 指明sitemap.json 的位置；默認(rèn)為 'sitemap.json' 即在 app.json 同級(jí)目錄下名字的 sitemap.json 文件。
??"sitemapLocation":?"sitemap.json"
[if !supportLists]2、[endif]頁(yè)面組成
每一個(gè)頁(yè)面由四個(gè)文件組成：xxx.wxml文件、xxx.wxss文件、 xxx.js文件和xxx.json文件。
（1）xxx.wxml文件
xxx.wxml文件，就相當(dāng)于一個(gè)html文件。在wxml文件中，不能寫(xiě)傳統(tǒng)的html標(biāo)簽，只能寫(xiě)微信提供的組件。
① view組件
相當(dāng)于div標(biāo)簽。
② text組件
相當(dāng)于span標(biāo)簽。
③ swiper
swiper是滑塊視圖容器，它里面只能放swiper-item組件。
swiper組件的常用屬性：
circular是銜接滑動(dòng)
autoplay是自動(dòng)切換
interval是自動(dòng)切換時(shí)間間隔
indicator-dots是否顯示面板指示點(diǎn)
indicator-color指示點(diǎn)顏色
indicator-active-color當(dāng)前選中的指示點(diǎn)顏色
<swiper?class="swiper"?circular?autoplay?interval="3000"?indicator-dots?indicator-color='#eee'?indicator-active-color='#369'>
</swiper>
④ image
image是圖片組件，最好全部采用網(wǎng)絡(luò)圖片，因?yàn)樾〕绦虻目傮w積不允許超過(guò)2MB。
（2）xxx.wxss文件
xxx.wxss文件，就相當(dāng)于一個(gè)css文件。在wxss文件中，最好不要寫(xiě)標(biāo)簽選擇器和id選擇器，統(tǒng)一寫(xiě)類(lèi)選擇器。
為了讓小程序里面的內(nèi)容在各種設(shè)備上能夠自適應(yīng)顯示，微信推出了響應(yīng)式單位：rpx。在iphone6中，2rpx=1px。
width:?60rpx;?????/*?相當(dāng)于width:?30px;?*/
（3）xxx.js文件
xxx.js文件，是交互文件（核心文件）。
Page()函數(shù)，返回頁(yè)面對(duì)象，該函數(shù)需要傳一個(gè)配置參數(shù)，這個(gè)配置參數(shù)是一個(gè)對(duì)象。在這個(gè)配置對(duì)象中，定義當(dāng)前頁(yè)面的所有內(nèi)容。
① data
定義頁(yè)面的數(shù)據(jù)。
Page({
data:?{
?????name:?"熱門(mén)歌曲",
?????songs:?[{id:?1001},?{id:?1002}]
??}
})
② 自定義函數(shù)
開(kāi)發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到Object 參數(shù)中，在頁(yè)面的函數(shù)中用this可以訪問(wèn)。
Page({
????//?定義函數(shù)
????delSong()?{
????????this.data.songs.splice(0,?1)
????????this.setData({
????????????songs:?this.data.songs
????????})
????}
})
（4）xxx.json文件
xxx.json文件，是頁(yè)面的配置文件（它里面配置的是當(dāng)前頁(yè)面信息）。
5、插值表達(dá)式 {{}}
WXML 中的動(dòng)態(tài)數(shù)據(jù)均來(lái)自對(duì)應(yīng) Page 的 data。
（1）獲取data中數(shù)據(jù)
通過(guò)插值表達(dá)式{{}}，可以顯示js里面定義的data里面的數(shù)據(jù)。
<text>歌曲分類(lèi)：{{name}}</text>
（2）組件屬性(需要在雙引號(hào)之內(nèi))
??<view?id="item-{{id}}">?</view>
（3）運(yùn)算
可以在{{}} 內(nèi)進(jìn)行簡(jiǎn)單的運(yùn)算。
① 三元運(yùn)算
<view?class="item?{{index%2===0???'bg'?:?''}}">?</view>
② 邏輯判斷
??<view?wx:if="{{length?>?5}}">?</view>
6、bindtap
bindtap是觸屏事件，其實(shí)就是相當(dāng)于網(wǎng)頁(yè)中的點(diǎn)擊事件。
<view?class="btn"?bindtap="delSong">刪除</view>
7、data-xxx 自定義屬性
小程序中bindtap綁定方法時(shí)不能傳參數(shù)。所以組件通過(guò)data-xxx傳遞數(shù)據(jù)。
<view?class="btn"?data-index="{{index}}"?bindtap="del1">刪除</view>
注意：自定義屬性的命名用駝峰或者大寫(xiě)命名，小程序內(nèi)部會(huì)自動(dòng)轉(zhuǎn)成小寫(xiě)。
del(e){
????//解構(gòu)出自定義的index屬性
????let?{currentTarget:{dataset:{index}}}?=?e
?}
8、setData()方法
setData()方法，更新頁(yè)面中數(shù)據(jù)。頁(yè)面數(shù)據(jù)更新后，調(diào)用setData()方法重新渲染到頁(yè)面。
???this.setData({
??????typeId:typeid,
??????name:typename
????})
[if !supportLists]二、[endif]列表渲染
1、wx:for
wx:for指令用于循環(huán)數(shù)組數(shù)據(jù)，生成組件。
循環(huán)出來(lái)的每一項(xiàng)通過(guò)item返回，每一項(xiàng)對(duì)應(yīng)的索引，通過(guò)index返回。
????<view?wx:for="{{songs}}"?wx:key="index"?class="items">
???????<text>{{index}}--{{item.id}}--{{item.name}}</text>
????</view>
2、wx:key
wx:key=""，設(shè)置每一項(xiàng)唯一的標(biāo)識(shí)。循環(huán)列表時(shí)，添加wx:key的好處是，將來(lái)列表發(fā)生變化時(shí)重新渲染列表的損耗為更低。
三、條件渲染
條件渲染可以使用wx:if或hidden。
一般來(lái)說(shuō)，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運(yùn)行時(shí)條件不大可能改變則 wx:if 較好。
1、wx:if
wx:if用于條件渲染：條件為真生成里面的內(nèi)容，條件為假不會(huì)生成里面的內(nèi)容。（每次重新生成內(nèi)容）
也可以用wx:elif 和 wx:else 來(lái)添加一個(gè) else 塊。
??<view?wx:if="{{typeID?==?1}}">?1?</view>
??<view?wx:elif="{{typeID?==?2}}">?2?</view>
??<view?wx:else>?3?</view>
2、hidden
hidden用于條件渲染：條件為真隱藏里面的內(nèi)容，條件為假顯示里面的內(nèi)容。（每次切換樣式）
??<view?hidden="{{typeID!=?2}}">?1?</view>
四、tabBar&頁(yè)面跳轉(zhuǎn)
1、tabBar
在app.json文件中添加tabBar節(jié)點(diǎn)。tabBar是小程序客戶端底部或頂部tab欄的實(shí)現(xiàn)。
（1）tabBar相關(guān)屬性
color：tab上的文字默認(rèn)顏色，僅支持十六進(jìn)制顏色。
selectedColor：tab上的文字選中時(shí)的顏色，僅支持十六進(jìn)制顏色。
backgroundColor：tab的背景色，僅支持十六進(jìn)制顏色。
borderStyle：tabbar上邊框的顏色， 僅支持 black / white。
position：tabBar的位置，默認(rèn)值是: bottom，僅支持 bottom / top。當(dāng) position 為 top 時(shí)，不顯示 icon。
custom：自定義tabBar。
"tabBar":?{
????"color":?"#000000",
????"selectedColor":?"#336699",
????"backgroundColor":?"#ffffff",
????"borderStyle":?"black",
????"position":?"bottom"
??}
（2）list
list：tab的列表。
list 接受一個(gè)數(shù)組，只能配置最少 2 個(gè)、最多 5 個(gè) tab。
pagePath：頁(yè)面路徑，必須在pages 中先定義。
text：tab 上按鈕文字。
iconPath：圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片。selectedIconPath：選中時(shí)的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片。
????"list":?[
??????{
????????"text":?"首頁(yè)",
????????"pagePath":?"pages/index/index",
????????"iconPath":?"assets/icon/home.png",
????????"selectedIconPath":?"assets/icon/home2.png"
??????},
??????{
????????"text":?"列表",
????????"pagePath":?"pages/list/list",
????????"iconPath":?"assets/icon/list.png",
????????"selectedIconPath":?"assets/icon/list2.png"
??????}
]
2、頁(yè)面跳轉(zhuǎn)
（1）跳轉(zhuǎn)普通頁(yè)面
方法① navigator組件
?<!--?跳轉(zhuǎn)到普通頁(yè)，可以通過(guò)返回按鈕返回?-->
?<navigator?url="../detail/detail">到詳情頁(yè)</navigator>
方法② navigateTo()方法
navigateTo()方法，用于跳轉(zhuǎn)普通頁(yè)面。
<view?bindtap="gotoDetail">到詳情頁(yè)</view>
gotoDetail(){
????//使用全局api跳轉(zhuǎn)，navigateTo()方法，用于跳轉(zhuǎn)普通頁(yè)面
????wx.navigateTo({
??????url:?'../detail/detail',
????})
???}
（2）跳轉(zhuǎn)tabBar頁(yè)面
方法① navigator組件
如果要使用navigator組件跳轉(zhuǎn)tabBar頁(yè)面，需要設(shè)置open-type="switchTab"。
?<!--?跳轉(zhuǎn)到tabBar頁(yè)面，不可以通過(guò)返回按鈕返回。因?yàn)樘D(zhuǎn)到指定的tabBar頁(yè)面后，會(huì)關(guān)閉其他所有頁(yè)面?-->
<navigator?url="../list/list"?open-type="switchTab">到列表頁(yè)</navigator>??????????????????????????????????????????????????????????????????????????????????????
方法② switchTab()方法
switchTab()方法，用于跳轉(zhuǎn)tabBar頁(yè)面。
??<view?bindtap="gotoList">到列表頁(yè)</view>
??gotoList(){
????wx.switchTab({
??????url:?'../list/list',
????})
??}
五、確認(rèn)框和消息框
1、wx.showModal() 確認(rèn)框
title：提示的標(biāo)題
content：提示的內(nèi)容
success：接口調(diào)用成功的回調(diào)函數(shù)?；卣{(diào)函數(shù)中的confirm屬性返回true，表示點(diǎn)擊的是確定按鈕，否則是取消按鈕。
?wx.showModal({
??????content:'是否確定刪除',
??????success:({confirm})=>{
????????//confirm返回true，表示點(diǎn)擊的是確定按鈕，否則是取消按鈕
????????if(confirm){
??????}
????})?
2、wx.showToast() 顯示消息提示框
title：提示的內(nèi)容
icon：圖標(biāo)
duration：消息提示框的顯示時(shí)間
mask：是否顯示透明蒙層，防止觸摸穿透
???wx.showToast({
????????title:?'刪除成功',
????????icon:"success",
????????duration:1500,
????????mask:true
???})
[if !supportLists]六、[endif]封裝方法
模塊化語(yǔ)法有兩種：① commonjs規(guī)范，② es6規(guī)范。
nodejs環(huán)境采用的就是commonjs規(guī)范。采用exports 或 module.exports 導(dǎo)出成員，采用require() 導(dǎo)入成員。
微信小程序支持commonjs規(guī)范，同時(shí)還支持官方的ES6規(guī)范。ES6規(guī)范采用export 導(dǎo)出成員，采用import 導(dǎo)入成員。
[if !supportLists]1、[endif]封裝方法并導(dǎo)出
將封裝的方法放到util目錄下的js文件中。可以新建js文件，也可以寫(xiě)在直接util.js文件中。
（1）確認(rèn)框方法
//?定義確認(rèn)框方法，并導(dǎo)出
export?let?$confirm?=?(content)=>{
??return?new?Promise((resolve)=>{
????wx.showModal({
??????content,
??????success:({confirm})=>{
????????if(confirm){
??????????resolve()
????????}
??????}
????})
??})
}
（2）消息框方法
//?定義消息框方法，并導(dǎo)出
export?let?$msg?=?(title,icon='success',duration=1500)=>{
??wx.showToast({
????title,
????icon,
????duration,
????mask:true
??})
}
（3）獲取事件參數(shù)的方法
export?let?$key?=?(e)=>{
??return?e.currentTarget.dataset
}
[if !supportLists]2、[endif]導(dǎo)入方法
import是ES6的導(dǎo)入語(yǔ)句。
//?導(dǎo)入msg模塊中的指定成員
import?{$msg,$confirm}?from?'../../utils/msg'
[if !supportLists]3、[endif]將方法注冊(cè)給全局對(duì)象wx
wx對(duì)象是微信小程序的全局對(duì)象，在任何地方都可以使用。
[if !supportLists]（1）[endif]注冊(cè)語(yǔ)句
wx.$msg?=?$msg
wx.$confirm?=?$confirm
[if !supportLists]（2）[endif]在app.js入口文件中導(dǎo)入
注意：注冊(cè)給wx對(duì)象的方法，需要在app.js文件中導(dǎo)入，才可使用。
//?導(dǎo)入初始化文件
import?'./utils/index'
[if !supportLists]（3）[endif]調(diào)用方法
wx.方法名(參數(shù))
wx.$msg('刪除成功')
[if !supportLists]七、[endif]scroll-view
可滾動(dòng)視圖區(qū)域。使用豎向滾動(dòng)時(shí)，需要給scroll-view一個(gè)固定高度，通過(guò) WXSS 設(shè)置 height。組件屬性的長(zhǎng)度單位默認(rèn)為px，2.4.0起支持傳入單位(rpx/px)。
scroll-x：允許橫向滾動(dòng)。
scroll-y：允許縱向滾動(dòng)。
?<scroll-view?class="left"?scroll-y>??</scroll-view>
[if !supportLists]八、[endif]wx對(duì)象發(fā)送ajax請(qǐng)求
[if !supportLists]1、[endif]wx.request() 發(fā)送請(qǐng)求
注意：小程序?qū)嶋H使用中，請(qǐng)求的接口必須都是已經(jīng)配置過(guò)的接口。開(kāi)發(fā)階段，可以直接設(shè)置“不校驗(yàn)合法域名”，暫不配置。
?wx.request({
??????//?請(qǐng)求接口地址
??????url: 'https://www.bingjs.com:8002/Section/GetSections',
??????//?請(qǐng)求參數(shù)
??????data:{},
??????//?請(qǐng)求方式GET/POST
??????method:"GET",
??????//?請(qǐng)求成功后的回調(diào)
??????success:({data})=>{
????????resolve(data)
??????},
??????//?請(qǐng)求完成后的回調(diào)
??????complete:()=>{
?????????console.log('請(qǐng)求完成');
??????}
????})
[if !supportLists]2、[endif]封裝ajax請(qǐng)求方法
（1）定義請(qǐng)求方法
export?let?$request?=?(url,data={},method='GET')=>{
??return?new?Promise((resolve)=>{
????wx.request({
??????url,
??????data,
??????method,
??????success:({data})=>{
????????resolve(data)
??????},
????})
??})
}
（2）定義get請(qǐng)求方法
export?let?$get?=?(url,data={})=>{
??return?$request(url,data,'GET')
}
（3）定義post請(qǐng)求方法
export?let?$post?=?(url,data={})=>{
??return?$request(url,data,'POST')
}
[if !supportLists]九、[endif]格式化時(shí)間
[if !supportLists]1、[endif]在后臺(tái)對(duì)數(shù)據(jù)里的時(shí)間戳進(jìn)行處理
let?data=?await?wx.$get('Subject/GetSubjects',{section_id:id})
data?=?data.map(r=>{
?return?{
??Title:?r.Title,
??Section:?r.Section,
Createtime:?wx.$formatTime(new?Date(parseInt(r.Createtime)))
}
})
[if !supportLists]2、[endif]WXS
WXS（WeiXin Script）是小程序的一套腳本語(yǔ)言，結(jié)合 WXML，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。
在wxml頁(yè)面中，只能在插值{{ }}中寫(xiě)簡(jiǎn)單的js表達(dá)式，而不能調(diào)用方法。wxs就是為了能在頁(yè)面中使用js而存在的。
[if !supportLists]（1）[endif]語(yǔ)法
① 變量必須使用var聲明，不支持const或者let。
② 不支持箭頭函數(shù)。
③ 不可以使用模板字符串，字符串連接用+ 。
④ 每一個(gè) .wxs 文件和 <wxs> 標(biāo)簽都是一個(gè)單獨(dú)的模塊。每個(gè)模塊都有自己獨(dú)立的作用域。
通過(guò)module.exports導(dǎo)出。
⑤ <wxs> 標(biāo)簽中，module屬性值定義標(biāo)簽的模塊名；src屬性值引入.wxs文件的相對(duì)路徑。
⑥ 生成date對(duì)象使用 getDate()，返回一個(gè)當(dāng)前時(shí)間的對(duì)象。不使用new Date()。
（2）編寫(xiě)在wxml文件中的 標(biāo)簽內(nèi)
<wxs?module="tools">
?var?formatTime?=?function(date)?{
????date?=?getDate(parseInt(date))
????var?year?=?date.getFullYear()
????var?month?=?date.getMonth()?+?1
????var?day?=?date.getDate()
????var?hour?=?date.getHours()
????var?minute?=?date.getMinutes()
????var?second?=?date.getSeconds()
????return?[year,?month,?day].map(formatNumber).join('/')?+?'?'?+?[hour,?minute,?second].map(formatNumber).join(':')
}
var?formatNumber?=function(n)?{
???n?=?n.toString()
???return?n[1]???n?:?'0'?+?n
}
module.exports?=?{
???formatTime:formatTime??
}
</wxs>?
<!--?在模板中，對(duì)時(shí)間數(shù)據(jù)進(jìn)行處理?-->
<view>{{tools.formatTime(item.Createtime)}}</view>
（3）編寫(xiě)在wxs文件中，再導(dǎo)入wxml文件
<!--?導(dǎo)入wxs文件?-->
<wxs?module="tools"?src="../../wxs/filter.wxs"></wxs>
<!--?在模板中，對(duì)時(shí)間數(shù)據(jù)進(jìn)行處理?-->
<view>{{tools.formatTime(item.Createtime)}}</view>
十、生命周期函數(shù)
1、onLoad 監(jiān)聽(tīng)頁(yè)面加載
onLoad函數(shù)對(duì)頁(yè)面狀態(tài)數(shù)據(jù)的初始化，是生命周期回調(diào)—監(jiān)聽(tīng)頁(yè)面加載。一 個(gè)頁(yè)面只會(huì)調(diào)用一次。onLoad函數(shù)的參數(shù)可以接收打開(kāi)當(dāng)前頁(yè)面所調(diào)用的 query參數(shù)。
當(dāng)前頁(yè)面跳轉(zhuǎn)detail頁(yè)面后，調(diào)用query參數(shù)id。
<navigator?url="../detail/detail?id={{item.Id}}"?class="item"?wx:for="{{subjects}}"?wx:key="index">
</navigator>
detail頁(yè)面中onLoad函數(shù)可以獲取傳遞的query參數(shù)id。
??onLoad:?function?(options)?{
????//獲取題目的id
????let?{id}?=?options
??}
2、onReachBottom 上拉觸底
????onReachBottom:function(){
????????this.data.pageIndex++
????????this.getSubjects()
????}
[if !supportLists]3、[endif]onPullDownRefresh 下拉刷新
下拉刷新默認(rèn)是關(guān)閉狀態(tài)，所以需要先在.json文件中設(shè)置允許下拉刷新。
enablePullDownRefresh設(shè)置是否開(kāi)啟當(dāng)前頁(yè)面下拉刷新。
backgroundColor設(shè)置窗口的背景色。
{
??"enablePullDownRefresh":?true,
??"backgroundColor":?"#d1c2d3"
}
下拉刷新動(dòng)效有默認(rèn)時(shí)間。如果想改變默認(rèn)的下拉時(shí)間，可以用定時(shí)器。
wx.stopPullDownRefresh()設(shè)置刷新完成后停止下拉刷新動(dòng)效。
????onPullDownRefresh:function(){
???????setTimeout(()?=>?{
???????????wx.stopPullDownRefresh()
???????},?1000);
????}
