前言

已經(jīng)好久沒動(dòng)過微信小程序了颁湖，周五的時(shí)候宣蠕，有一個(gè)朋友說有一個(gè)外快，問我干不干甥捺，幾個(gè)朋友一起搞一下抢蚀，我想了一下，正好周末也沒啥事镰禾，女朋友回家了皿曲，就答應(yīng)下來了，幾個(gè)朋友聚到一起整了兩天整完了吴侦，因?yàn)楸旧沓绦蛞缶筒皇呛芨呶菪荩镁靡矝]寫什么技術(shù)文了，就順手也整理了一篇微信小程序常用的API開發(fā)技巧备韧，想做小程序的朋友可以看一下

第一章 認(rèn)識(shí)微信小程序

微信小程序是一種不需要下載安裝即可使用的全新的連接用戶與服務(wù)的方式博投，它可以在微信內(nèi)被便捷地獲取和傳播，同時(shí)具有“用完即走盯蝴，不用關(guān)心是否安裝太多應(yīng)用”的使用體驗(yàn)毅哗。

微信小程序做成了一個(gè)開放式的平臺(tái)，它讓開發(fā)者可以將自己的想法做成微信小程序的服務(wù)放在平臺(tái)上供人們使用捧挺。通過微信小程序的開發(fā)虑绵，應(yīng)用將無處不在，隨時(shí)可用闽烙。在進(jìn)行開發(fā)之前翅睛，需要進(jìn)行注冊(cè)，綁定開發(fā)者等一系列操作黑竞。詳情移步微信官方文檔捕发。

筆者觀看的教學(xué)視頻于2017年初拍攝，所以當(dāng)時(shí)最新的開發(fā)者工具版本為0.11.122100版很魂，現(xiàn)官方文檔中提供的最新版本為1.02.1907112版本扎酷。

是真的不需要下載安裝即可使用嗎？

不是的遏匆，微信小程序的安裝包小于1MB(最新版改為2MB)法挨，在用戶點(diǎn)擊使用的時(shí)候谁榜，就不到1MB的安裝包，下載安裝的時(shí)候凡纳，用戶本人是感受不到的窃植。

前后端分離的開發(fā)方式

前端先制造假數(shù)據(jù)，可以將假數(shù)據(jù)在頁面很好的展示之后再和服務(wù)器的數(shù)據(jù)進(jìn)行相應(yīng)的對(duì)接荐糜。

前端驅(qū)動(dòng)服務(wù)器開發(fā)的設(shè)計(jì)理念巷怜。由此目的在于設(shè)計(jì)比較合理，api較方便暴氏。

小程序的特點(diǎn)

小程序適合做簡(jiǎn)單的丛版、用完即走的應(yīng)用

小程序適合做低頻的應(yīng)用

小程序適合性能要求不高的應(yīng)用（被折疊放入微信，在操作系統(tǒng)之間還是隔了一層的偏序，不能滿足性能高的應(yīng)用）

【此處可查閱小程序、外部胖替，混合app研儒、原生應(yīng)用的性能區(qū)別】

哪些應(yīng)用適合小程序開發(fā)？

例子：

1独令、知乎------不太適合小程序開發(fā)

原因：

（1）知乎是數(shù)據(jù)型應(yīng)用端朵，用戶停留時(shí)間較長(zhǎng)，不能滿足用完即走的特點(diǎn)燃箭。（如果閱讀的時(shí)候突然來了一條消息冲呢，則會(huì)被迫退出≌欣辏回來的時(shí)候找不到原來的位置）

（2）知乎的使用頻度較高敬拓，不能滿足低頻使用的特點(diǎn)。讓用戶多次打開微信再打開小程序會(huì)用戶體驗(yàn)不好裙戏。

（3）知乎的消息發(fā)布依賴于系統(tǒng)推送乘凸，但是小程序的推送是一種模板推送，屬于一種被動(dòng)觸發(fā)累榜。當(dāng)用戶做一些操作的時(shí)間可以作為一個(gè)消息反饋給用戶营勤。

（4）小程序不支持UIView。也就是說壹罚，小程序沒辦法去加載一個(gè)網(wǎng)頁(服務(wù)器靜態(tài)化好的HTML頁面)葛作。

2、餓了么/貓眼電影/滴滴打車------適合小程序開發(fā)

特點(diǎn)：

（1）業(yè)務(wù)邏輯簡(jiǎn)單

（2）使用頻度不算高

（3）提交訂單（表單）性能要求不高

3猖凛、對(duì)于中大型應(yīng)用赂蠢，可以將某些功能拆分出來做成小程序

比如：

美團(tuán)的點(diǎn)外賣、銀行的信用卡查詢等單點(diǎn)的服務(wù)

小程序?qū)﹂_發(fā)者的影響

短期內(nèi)將提升市場(chǎng)對(duì)JavaScript程序員的需求量

小程序是0基礎(chǔ)開發(fā)者很好的入門平臺(tái)

小程序不可以使用現(xiàn)有的JavaScript組件庫

因?yàn)樾〕绦虻钠脚_(tái)是封閉的辨泳，小程序是不支持很多組件

庫客年，比如DOM的霞幅，所以以DOM為對(duì)象的組件庫都是用不了的。

小程序的思想是數(shù)據(jù)優(yōu)先量瓜，所以不能操作DOM司恳。

開發(fā)環(huán)境和開發(fā)邏輯較簡(jiǎn)單，適合新手入門

學(xué)習(xí)小程序需要的基礎(chǔ)

JavaScript

CSS

ES6-很好的特性構(gòu)建簡(jiǎn)潔的小程序代碼

第二章 小程序環(huán)境搭建與開發(fā)工具介紹

小程序開發(fā)環(huán)境

前往開發(fā)工具下載地址去下載

下載完成之后绍傲，通過微信掃一掃打開開發(fā)者工具扔傅，選擇新建項(xiàng)目

AppID選擇使用測(cè)試號(hào)（因?yàn)樽?cè)小程序號(hào)比較麻煩）

其他選項(xiàng)設(shè)置好之后選擇創(chuàng)建，進(jìn)行創(chuàng)建新的小程序項(xiàng)目

平臺(tái)會(huì)自動(dòng)生成一個(gè)小程序HelloWorld的demo

此工具左邊是效果區(qū)烫饼，右邊是代碼區(qū)猎塞。它有一個(gè)特點(diǎn)就是修改某些參數(shù)不需要編譯就可以預(yù)覽。直接Ctrl+S就可以看見修改的效果杠纵。

調(diào)試區(qū)用來打斷點(diǎn)調(diào)試代碼荠耽。點(diǎn)擊上方菜單欄的調(diào)試工具按鈕打開調(diào)試區(qū)。

在調(diào)試區(qū)的js文件：

帶sm后綴的是用來打斷點(diǎn)調(diào)試的文件比藻，和寫的代碼是一樣的铝量。

不帶sm后綴的是編譯過后的文件，和寫的代碼也是一樣的银亲。只不過第一行出現(xiàn)了一個(gè)編譯的信息慢叨。

沒有小程序號(hào)對(duì)開發(fā)者的限制

1、不能上傳和發(fā)布小程序

2务蝠、不能真機(jī)運(yùn)行拍谐，只可以在PC模擬器中運(yùn)行

3、錄音馏段、網(wǎng)絡(luò)狀態(tài)轩拨、羅盤、撥打電話等功能無法使用

4院喜、獲取用戶信息的流程是模擬的而不是真實(shí)的

但是气嫁，不影響我們學(xué)習(xí)小程序開發(fā)

調(diào)試的幾個(gè)區(qū)域

在debug的斷點(diǎn)狀態(tài)時(shí)，快捷鍵和Crome是一樣的够坐。

Console區(qū)域—系統(tǒng)編譯區(qū)

編譯錯(cuò)誤的報(bào)錯(cuò)信息

警告信息

用console.log輸出的調(diào)試信息

注：在打開調(diào)試區(qū)的狀態(tài)下點(diǎn)擊下圖標(biāo)注的按鈕寸宵，可以單獨(dú)將調(diào)試區(qū)打開一個(gè)窗口，并將Console折疊放在窗口下方元咙。

NetWork區(qū)域—網(wǎng)絡(luò)信息的列表

和Crome的NetWork一模一樣

網(wǎng)絡(luò)鏈接的列表

加載的文件

加載耗費(fèi)的時(shí)間

具體查看每一個(gè)網(wǎng)絡(luò)請(qǐng)求信息

Storage區(qū)域—本地緩存列表

用來查看小程序本地緩存數(shù)據(jù)

AppData區(qū)域—所有頁面被綁定數(shù)據(jù)情況

wxml區(qū)域—小程序的UI界面和代碼聯(lián)調(diào)

鼠標(biāo)停留在右邊代碼上面的時(shí)候左邊頁面顯示對(duì)應(yīng)的UI元素

模擬器的上面菜單欄有按鈕切換前后臺(tái)梯影，用來模擬打開別的小程序，本程序在后臺(tái)運(yùn)行的動(dòng)作庶香。當(dāng)后臺(tái)運(yùn)行時(shí)在小程序里會(huì)觸發(fā)一個(gè)事件甲棍。

注：如何快速打開小程序api文檔–點(diǎn)擊上面菜單的：微信開發(fā)者工具–>關(guān)于–>打開api文檔

第三章 從一個(gè)歡迎頁開始制作小程序

生成HelloWorld小程序之后點(diǎn)擊它的主頁面進(jìn)入一個(gè)子頁面可以查看啟動(dòng)的日志信息。

小程序文件類型與目錄結(jié)構(gòu)

js文件：行為文件

json文件：配置文件赶掖，對(duì)應(yīng)一個(gè)個(gè)配置

wxml文件：對(duì)應(yīng)html文件感猛，編寫小程序骨架

wxss文件：對(duì)應(yīng)css樣式文件

app文件：描述應(yīng)用程序整個(gè)狀態(tài)七扰，是惟一的

對(duì)于一個(gè)樣式來講以離頁面最近的配置為準(zhǔn)

應(yīng)用程序和頁面之間的關(guān)系

注：下圖的無限多個(gè)只是理論上的。過多的頁面違背小程序的設(shè)計(jì)初衷陪白。小程序的總體的壓縮文件包的體積超過1MB將不能上傳(最新版本上傳限制在2MB)颈走。

js

json

wxss

wxml

每一個(gè)頁面由以下文件組成

三四五級(jí)頁面--最多五級(jí)

二級(jí)頁面

一級(jí)頁面

應(yīng)用程序入口

無限多個(gè)

無限多個(gè)

無限多個(gè)

小程序自生成的目錄結(jié)構(gòu)

在app.json中設(shè)置打開的是哪個(gè)頁面

P.S.：json文件是不可以隨意加注釋的。

注冊(cè)小程序頁面咱士，View\Image\Text等組件用法

View組件相當(dāng)于html中的div標(biāo)簽立由，起到容器的作用并且可以分割小程序文檔的不同部分。

Image組件用來表示一個(gè)圖片序厉。它的src屬性用來添加路徑锐膜。

text在小程序中用來作為文本標(biāo)簽。

只有text包圍的文字在手機(jī)上才能長(zhǎng)按選中

text可以支持嵌套text內(nèi)置樣式弛房，支持轉(zhuǎn)義字符的轉(zhuǎn)義道盏。（比如將\n轉(zhuǎn)義為換行）

圖片大小px與rpx:

px在這里不是指圖片屬性的物理像素，而是Iphone6上的邏輯分辨率概念文捶。Iphone6上物理分辨率和邏輯像素的2:1的關(guān)系荷逞。也就是說，在iphone6上面拄轻，2rpx=1px。

為了動(dòng)態(tài)去適應(yīng)不同分辨率的設(shè)備伟葫，我們用rpx(邏輯分辨率)做適應(yīng)恨搓。設(shè)計(jì)圖是0-750的像素，大小可以直接轉(zhuǎn)化成rpx筏养。

如何設(shè)置樣式:

方式一（動(dòng)態(tài)樣式）：在標(biāo)簽中加入style屬性斧抱，寫入當(dāng)前標(biāo)簽樣式

方式二（靜態(tài)樣式）：寫wxss文件–在標(biāo)簽上加入一個(gè)class屬性，通過class選擇器寫css樣式渐溶。wxss文件不需要單獨(dú)去引用辉浦。因?yàn)樽?cè)的是以某名字為名名的所有文件。

例子：

wxml文件：

wxss文件：

Flex彈性盒子模型

用來將堆疊在一起的元素變規(guī)整茎辐，顯示成列排布

colum:列排布

row:橫向排布

align-items用來設(shè)置對(duì)齊版式宪郊，center表示左右居中

全局一樣的樣式可以提到全局的樣式設(shè)置里面設(shè)置。

關(guān)于背景：

不能在容器中直接設(shè)置background-color的顏色拖陆。因?yàn)槿萜鳑]有設(shè)置高度和寬度弛槐，它會(huì)自適應(yīng)里面元素的高度和寬度。如果直接給一個(gè)高度的話依啰，如果里面內(nèi)容是一個(gè)動(dòng)態(tài)內(nèi)容乎串，可能會(huì)超出規(guī)定的高度和寬度，造成內(nèi)容溢出速警。

解決方案：

經(jīng)過調(diào)試我們發(fā)現(xiàn)叹誉，系統(tǒng)在我們規(guī)定的view容器外面還包了一層名叫page的容器鸯两。我們?nèi)ピO(shè)置page的樣式

設(shè)置導(dǎo)航欄背景色：

在app.json中有window配置項(xiàng) 用于設(shè)置小程序的標(biāo)題、狀態(tài)欄长豁、導(dǎo)航條钧唐、窗口背景色。

其中navigationBarBackgroundColor用來設(shè)置導(dǎo)航欄背景色蕉斜。

移動(dòng)端分辨率及小程序自適應(yīng)單位RPX

從一張?jiān)O(shè)計(jì)圖的實(shí)現(xiàn)說起

如何在比例不失真的情況下顯示一張圖片逾柿？

pt:邏輯分辨率≌耍可以理解為一個(gè)視覺長(zhǎng)度單位机错。與屏幕尺寸有關(guān)系。

px:物理分辨率父腕。與屏幕尺寸無直接關(guān)系弱匪。理解為像素點(diǎn)。

1個(gè)pt可以有1個(gè)px構(gòu)成璧亮，也可以有2個(gè)萧诫，3個(gè)甚至更多構(gòu)成

一個(gè)pt下px越多，圖像顯示越細(xì)膩枝嘶。兩倍已經(jīng)達(dá)到了人眼能夠分辨的極限帘饶，所以plus版本并不能比6和6S更加清晰。

iphone6下2個(gè)px構(gòu)成1個(gè)pt

屏幕尺寸：指的是屏幕對(duì)角線之間的距離群扶。

PPI:每英寸包含了多少個(gè)物理像素點(diǎn)

PPI=px開根號(hào)/屏幕尺寸

為什么模擬器下的ip6的分辨率是375而設(shè)計(jì)圖一般給750

因?yàn)槲⑿判〕绦蝻@示的375是邏輯分辨率及刻，而設(shè)計(jì)圖一般給的是物理分辨率。

如何適配不同的機(jī)型

使用rpx作為單位竞阐，小程序會(huì)自動(dòng)在不同的分辨率下進(jìn)行轉(zhuǎn)換缴饭。

在iphone6的尺寸進(jìn)行設(shè)計(jì)的話，一個(gè)像素就是一個(gè)rpx骆莹。

不是所有的單位都適合用rpx

比如颗搂，文字不適合用rpx，不然設(shè)備自適應(yīng)以后看不清文字幕垦。

錯(cuò)誤VM285:1 pages/index/index.js 出現(xiàn)腳本錯(cuò)誤或者未正確調(diào)用 Page()

需要在這個(gè)js里寫一個(gè)page方法丢氢，里面什么都不寫就可以。

第四章 開發(fā)新聞閱讀列表

1先改、在page文件夾下新建posts文件夾卖丸，在其中建立.js.wxml.wxss文件，并在.js文件中填入空的Page函數(shù)（如果不填會(huì)報(bào)錯(cuò)）盏道。

2稍浆、將原先的app.json的pages屬性數(shù)組之中加入新建的.wxml文件的地址（當(dāng)把它放在第一個(gè)的時(shí)候，運(yùn)行時(shí)默認(rèn)先顯示它）。

注：快捷鍵F1打開命令面板衅枫，有很多快捷選項(xiàng)

Swiper組件的應(yīng)用-------輪播圖

swiper標(biāo)簽代表輪播圖嫁艇，里面的字標(biāo)簽swiper-item代表每個(gè)圖片。

swipper-item沒辦法設(shè)置高寬弦撩，系統(tǒng)自動(dòng)將swipper-item的高寬設(shè)置成swipper高寬的100%步咪，但是如果swipper-item里面有image，需要再在image里設(shè)置一下高寬益楼。因?yàn)閕mage不會(huì)繼承上級(jí)的高寬猾漫。

swipper不決定輪播的是什么內(nèi)容，它只是一個(gè)容器感凤。swipper-item里面放什么內(nèi)容就輪播什么內(nèi)容悯周。

代碼示例：

swiper的相關(guān)屬性：

App.json里關(guān)于導(dǎo)航欄、標(biāo)題的配置

在子頁面的json文件里可以配置頁面的導(dǎo)航欄顏色等配置陪竿，從而不影響全局的配置禽翼。

但是只能配置window這一個(gè)參數(shù)的屬性，所以window就不標(biāo)了族跛。直接將app.json里的window參數(shù)展開闰挡，平鋪到子頁面的json文件中。

絕對(duì)路徑與相對(duì)路徑

以" / "為開頭的是絕對(duì)路徑礁哄，用來表示從根目錄下一級(jí)一級(jí)往下找而找到的資源

以". . / . ."開頭的是相對(duì)路徑长酗，用來表示資源相對(duì)當(dāng)前文件的位置

部分代碼示例

posts.wxss

經(jīng)驗(yàn)：水平用rpx，垂直用px桐绒。（水平如果元素少到不可能發(fā)生換行也可用px）

posts.wxml

Page頁面與應(yīng)用程序的生命周期

在編碼過程中夺脾，可以使用腳本文件將服務(wù)器的數(shù)據(jù)對(duì)接到小程序中。

編寫腳本文件時(shí)掏膏，在js文件中輸入page劳翰，開發(fā)工具會(huì)生成一個(gè)默認(rèn)的腳本文件結(jié)構(gòu)敦锌。

js文件所有的腳本代碼都會(huì)在名叫Page的json結(jié)構(gòu)體中運(yùn)行馒疹。

其中包含下列生命周期函數(shù)：

onLoad：頁面加載后調(diào)用

onReady：頁面初次渲染完成后調(diào)用

onShow：頁面顯示完成后調(diào)用

onHide：頁面隱藏完成后調(diào)用

onUnload：頁面卸載后調(diào)用

onPullDownRefresh：用戶下拉動(dòng)作后調(diào)用

onReachBottom：頁面上拉觸底事件的處理函數(shù)

onShareAppMessage：用戶點(diǎn)擊右上角分享后調(diào)用

應(yīng)用的生命周期：

先進(jìn)行頁面初始化(onLoad)—>頁面顯示(onShow)–>頁面渲染完成(onReady)

注：js腳本中可以自定義函數(shù)進(jìn)行調(diào)用

在公眾平臺(tái)之中小程序完整的生命周期圖片如下

數(shù)據(jù)綁定（核心）

在網(wǎng)頁開發(fā)的過程中，我們要把一個(gè)數(shù)據(jù)顯示到頁面上的操作是：

先獲取DOM對(duì)象乙墙，再對(duì)獲取的節(jié)點(diǎn)的數(shù)據(jù)進(jìn)行操作颖变。

在小程序中提倡數(shù)據(jù)優(yōu)先的思想。

在小程序中不支持DOM听想，所以在小程序的開發(fā)中的操作應(yīng)該是：

在js腳本的data屬性中以json格式放入數(shù)據(jù)腥刹，在wxml文件中使用雙大括號(hào)調(diào)用。

示例如下：

js腳本：

wxml:

小程序在這里實(shí)現(xiàn)的數(shù)據(jù)綁定是單向數(shù)據(jù)綁定

也就是說汉买，數(shù)據(jù)可以從腳本文件向wxml文件傳遞的時(shí)候可直接賦值衔峰，但是如果數(shù)據(jù)被wxml文件所改變，腳本文件中的數(shù)據(jù)不會(huì)發(fā)生變化。如果要通過wxml改變腳本文件中的數(shù)據(jù)垫卤，則需要采取事件傳遞的形式威彰。

顯示從服務(wù)器動(dòng)態(tài)獲取的數(shù)據(jù)

假設(shè)數(shù)據(jù)是從腳本文件向服務(wù)器動(dòng)態(tài)獲取的，那么應(yīng)該在頁面初始化之后顯示數(shù)據(jù)穴肘。也就是說數(shù)據(jù)綁定的操作應(yīng)該寫在onLoad函數(shù)里面來歇盼，之后再使用setData()函數(shù)平鋪入data數(shù)組之中。

示例：

js腳本

對(duì)應(yīng)wxml文件

注：

如果綁定的數(shù)據(jù)是放在標(biāo)簽的屬性中的评抚，需要在雙花括號(hào)外面加上雙引號(hào)

數(shù)據(jù)綁定的運(yùn)算與邏輯

當(dāng)某個(gè)屬性以"false"進(jìn)行賦值時(shí)并不能得到想要的效果

原因：賦給這個(gè)屬性的false是個(gè)字符串豹缀，小程序在解析字符串的時(shí)候會(huì)將其轉(zhuǎn)換成布爾值，此字符串的布爾值是true慨代。

例子如下：

解決方法：使用數(shù)據(jù)綁定的語法邢笙，將false用雙花括號(hào)括起來，這樣才會(huì)解析成false鱼响。

同理鸣剪，設(shè)置某個(gè)屬性為true的時(shí)候，隨便置入一個(gè)字符串的值丈积，都會(huì)被解析成true筐骇。

如果js腳本外再包一層json對(duì)象，那么需要通過"{{對(duì)象名.屬性名}}"進(jìn)行調(diào)用

示例：

注：兩個(gè)數(shù)據(jù)綁定挨在一起是可以正常解析的江滨。

wx-if:控制標(biāo)簽元素的顯示與隱藏

使用示例：

當(dāng)然铛纬，可以通過腳本文件來動(dòng)態(tài)控制標(biāo)簽元素的顯示與隱藏。

數(shù)據(jù)綁定的雙花括號(hào)里可進(jìn)行簡(jiǎn)單的運(yùn)算

比如：

同理唬滑，也可以在雙花括號(hào)之中進(jìn)行加減乘除的數(shù)字計(jì)算告唆。

wx-for:循環(huán)顯示數(shù)據(jù)

如果服務(wù)器拿過來的數(shù)據(jù)是一個(gè)json數(shù)組，那么需要小程序的for循環(huán)進(jìn)行動(dòng)態(tài)的展示晶密。

json數(shù)組示例：

以上做法會(huì)出現(xiàn)顯示不了的問題

原因：this.setData方法是將參數(shù)平鋪置入data數(shù)組中擒悬，在進(jìn)行循環(huán)顯示的時(shí)候會(huì)顯示不全。

解決方法：給數(shù)據(jù)數(shù)組一個(gè)key并置入data中稻艰，這樣data解析出來就會(huì)是一個(gè)數(shù)組懂牧。

wxml展示示例：

block標(biāo)簽：理解為括號(hào)，將循環(huán)體給包裹起來

wx:for后面引入數(shù)組數(shù)據(jù)

wx:for-item后面引入元素指代（默認(rèn)命名：item）

wx:for-index后面指代的子元素的序號(hào)（默認(rèn)命名：index）

注：如果指代為item尊勿，則可省略僧凤。因?yàn)槲⑿判〕绦蚰J(rèn)的元素指代就是以item命名的。

頁面跳轉(zhuǎn)

1元扔、在app.json的頁面指定的位置將歡迎頁設(shè)置為第一個(gè)頁面躯保。

2、目的：點(diǎn)擊歡迎頁的按鈕澎语，跳轉(zhuǎn)到之前做好的新聞?wù)故卷撝校ㄉ蠄D頁面對(duì)應(yīng)posts）

3途事、綁定事件–tap事件(tap事件詳情見如下表格)

標(biāo)簽事件綁定的寫法：事件名前面加bind

4.在腳本文件中寫入函數(shù)負(fù)責(zé)頁面跳轉(zhuǎn)

wx.navigateTo函數(shù)負(fù)責(zé)頁面跳轉(zhuǎn)

注：填入的url可以是相對(duì)路徑也可以是絕對(duì)路徑验懊，但是需要和app.json中配置的形式一致（不要加.wxml）

5.設(shè)置將跳轉(zhuǎn)進(jìn)來的頁面不設(shè)為上一個(gè)頁面的子頁面（取消左上角返回）

wx.redirectTo函數(shù)負(fù)責(zé)重定向頁面(不可返回)

實(shí)現(xiàn)兩個(gè)頁面之間的平行跳轉(zhuǎn)。

效果：

關(guān)于這兩個(gè)函數(shù)完整的參數(shù)：

wx.navigateTo和wx.redirectTo的區(qū)別

當(dāng)調(diào)用wx.redirectTo方法時(shí)尸变，腳本后臺(tái)會(huì)調(diào)用onUnLoad（頁面被卸載之后觸發(fā)）事件鲁森。

當(dāng)調(diào)用wx.navigateTo方法時(shí)，腳本后臺(tái)會(huì)調(diào)用onHide（頁面被隱藏之后觸發(fā)）事件振惰。

事件與事件對(duì)象

什么是事件歌溉？

事件是視圖層到邏輯層的通訊方式。事件可以將用戶的行為反饋到邏輯層進(jìn)行處理骑晶。

事件可以綁定在組件上痛垛，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)桶蛔。

事件對(duì)象可以攜帶額外信息匙头，如 id, dataset, touches。

使用WXS函數(shù)響應(yīng)事件–基礎(chǔ)庫 2.4.4 開始支持仔雷，低版本需做兼容處理蹂析。

??從基礎(chǔ)庫版本2.4.4開始，支持使用WXS函數(shù)綁定事件碟婆，WXS函數(shù)接受2個(gè)參數(shù)电抚，第一個(gè)是event，在原有的event的基礎(chǔ)上加了event.instance對(duì)象竖共，第二個(gè)參數(shù)是ownerInstance蝙叛，和event.instance一樣是一個(gè)ComponentDescriptor對(duì)象。

事件分類

事件分為冒泡事件和非冒泡事件：

冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后公给，該事件會(huì)向父節(jié)點(diǎn)傳遞借帘。

非冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞淌铐。

WXML的冒泡事件列表：

注：除上表之外的其他組件自定義事件如無特殊聲明都是非冒泡事件肺然，如 form 的submit事件，input 的input事件腿准，scroll-view 的scroll事件际起，(詳見各個(gè)組件)

事件綁定和冒泡

事件綁定的寫法同組件的屬性，以 key释涛、value 的形式加叁。

key 以bind或catch開頭倦沧，然后跟上事件的類型唇撬，如bindtap、catchtouchstart展融。自基礎(chǔ)庫版本 1.5.0 起窖认，在非原生組件中，bind和catch后可以緊跟一個(gè)冒號(hào)，其含義不變扑浸，如bind:tap烧给、catch:touchstart。

value 是一個(gè)字符串喝噪，需要在對(duì)應(yīng)的 Page 中定義同名的函數(shù)础嫡。不然當(dāng)觸發(fā)事件的時(shí)候會(huì)報(bào)錯(cuò)。

bind事件綁定不會(huì)阻止冒泡事件向上冒泡酝惧，catch事件綁定可以阻止冒泡事件向上冒泡榴鼎。

第五章 小程序的模塊化與模板化

正常的流程應(yīng)該是從腳本文件向服務(wù)器發(fā)一個(gè)請(qǐng)求去請(qǐng)求數(shù)據(jù)到j(luò)s腳本文件，但是小程序目前沒有服務(wù)器數(shù)據(jù)晚唇，將數(shù)據(jù)大量羅列到j(luò)s腳本文件非常的不利于閱讀巫财。

解決方式：

將所需數(shù)據(jù)全都放到一個(gè)單獨(dú)的文件中去，從腳本文件加載數(shù)據(jù)文件哩陕，從而模擬從服務(wù)器加載數(shù)據(jù)的過程平项。

AppData區(qū)域介紹

小程序緩存

流量限制

列表渲染（核心）

Template模板的使用（核心）