概念
小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想槽棍，用戶(hù)掃一掃或者搜一下即可打開(kāi)應(yīng)用。
可以理解成一套嵌套在微信里面的app拼岳，和原生app不同的是不需要下載耐版，屬于小而輕的應(yīng)用滴须。
開(kāi)發(fā)前的準(zhǔn)備
1扔水、注冊(cè)賬號(hào)
2、下載開(kāi)發(fā)者工具, 下載1.02.1801081這個(gè)版本的主届，最新版的有bug君丁，編譯的時(shí)候調(diào)試器Wxml窗口會(huì)出現(xiàn)空的page標(biāo)簽绘闷，里面沒(méi)有內(nèi)容。編輯器內(nèi)復(fù)制也會(huì)偶爾失效扒最。
3吧趣、注冊(cè)好后登錄下微信公眾平臺(tái)再菊，在設(shè)置里找到開(kāi)發(fā)設(shè)置，把a(bǔ)ppID保存下來(lái)泛豪，一會(huì)開(kāi)發(fā)的時(shí)候需要用到
快速開(kāi)始
1诡曙、此時(shí)略水，工具有了渊涝，ID有了跨释，接下來(lái)開(kāi)始我們的擼碼之旅。打開(kāi)開(kāi)發(fā)者工具岁疼，掃碼登錄后選擇小程序項(xiàng)目捷绒，點(diǎn)擊右下角的加號(hào)暖侨，創(chuàng)建新項(xiàng)目，選擇項(xiàng)目目錄函荣，填寫(xiě)appID傻挂，項(xiàng)目名稱(chēng)金拒，寫(xiě)好后點(diǎn)擊確定套腹。
2幢码、確定以后症副，默認(rèn)打開(kāi)后政基，發(fā)現(xiàn)給我們創(chuàng)建了一些代碼沮明，代碼一會(huì)我們?cè)僦v荐健。
頁(yè)面是空白的摧扇，打開(kāi)調(diào)試器后發(fā)現(xiàn)頁(yè)面有報(bào)錯(cuò)扛稽，如下
點(diǎn)擊右上角的詳情，修改下配置矮慕，把調(diào)試基礎(chǔ)庫(kù)改成1.9.1啄骇，然后把不校驗(yàn)安全域名缸夹、web-view 域名虽惭、TLS 版本以及 HTTPS 證書(shū)勾選上，不然我們的請(qǐng)求就必須得是https的了
3、此時(shí)控制臺(tái)沒(méi)有報(bào)錯(cuò)了研侣，頁(yè)面展示如下庶诡，點(diǎn)擊按鈕寓盗，我們可以看到微信授權(quán)璧函，點(diǎn)擊允許傀蚌，我們的頭像和昵稱(chēng)就顯示在頁(yè)面上了
項(xiàng)目結(jié)構(gòu)
我們主要看app.js、app.json蘸吓、app.wxss三個(gè)文件和pages文件夾里面的wxml
1善炫、app.js做為小程序的入口，里面有個(gè)App實(shí)例库继，每個(gè)小程序只會(huì)有一個(gè)App實(shí)例箩艺，小程序啟動(dòng)以后觸發(fā)onLaunch函數(shù)執(zhí)行，獲取用戶(hù)信息
2宪萄、app.json是小程序的所有全局配置，pages字段放置所有頁(yè)面的路徑拜英，window字段定義所有頁(yè)面的頂部背景顏色静汤，文字顏色 詳細(xì)配置請(qǐng)戳這里??
3、app.wxss文件就是頁(yè)面公用的樣式，僅支持部分css選擇器
4虫给、wxml就是我們的HTML文件藤抡，常用標(biāo)簽為 view 、text 等抹估，沒(méi)有所謂的div缠黍、span、p一類(lèi)的標(biāo)簽了药蜻，我們習(xí)慣稱(chēng)它們?yōu)榻M件
設(shè)計(jì)理念
小程序內(nèi)部可以理解成一個(gè)mvvm的框架瓷式，分為邏輯層和視圖層，邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層语泽，同時(shí)接受視圖層的事件反饋蒿往。
// pages/test/index.js
Page({
data:{ // 頁(yè)面的初始數(shù)據(jù)
text: 'hello world'
},
onLoad(){
console.log('hello')
},
change(){
this.setData({
text:'hello'
})
}
})
使用Page函數(shù)來(lái)注冊(cè)一個(gè)頁(yè)面，接收一個(gè)Object參數(shù)湿弦。
這里我們使用了onLoad來(lái)監(jiān)聽(tīng)頁(yè)面的加載和定義了一個(gè)change函數(shù)
并使用setData函數(shù)將text的值進(jìn)行更改
更改data數(shù)據(jù)的時(shí)候必須調(diào)用setData函數(shù)進(jìn)行更改
// pages/test/index.wxml
<view>{{text}}</view> // 顯示hello world
<button bindtap="change">點(diǎn)擊更改上面文字</button> // 顯示hello
我們?cè)赽utton組件上添加了點(diǎn)擊事件瓤漏，調(diào)用了change函數(shù)，完整事件請(qǐng)戳??這里
事件傳遞參數(shù)
有時(shí)候我們需要觸發(fā)事件的時(shí)候颊埃，傳遞一些參數(shù)蔬充，那小程序怎么傳遞呢？很不幸班利，小程序不能類(lèi)似js里面直接傳遞饥漫，往往我們需要將傳遞的數(shù)據(jù)綁定到事件元素上
// index.wxml
<button data-test="哈哈" bindtap="change">點(diǎn)擊我</button>
使用e.currentTarget.dataset來(lái)獲取值
// index.js
change(e){
e.currentTarget.dataset.test // 哈哈
}
setData函數(shù)拓展
1、修改嵌套多層的數(shù)據(jù)罗标，
如果是寫(xiě)死的參數(shù)可以使用引號(hào)將參數(shù)包起來(lái)
this.setData({
'text.msg': 'hello'
})
如果是傳遞進(jìn)來(lái)的值呢庸队？很簡(jiǎn)單將data的key用[]括起來(lái)
// index.wxml
<button bindtap="change" data-key="text.msg">點(diǎn)擊我</button>
// index.js
change(e){
var key = e.currentTarget.dataset.key
this.setData({
key: 'hello' // 數(shù)據(jù)不會(huì)更改
// [key]: 'hello' // 數(shù)據(jù)會(huì)更改
})
}
路由
小程序里面所有的頁(yè)面路由由框架進(jìn)行管理
我們可以使用getCurrnetPages函數(shù)獲取當(dāng)前頁(yè)面棧的實(shí)例，返回一個(gè)數(shù)組, 最后一個(gè)元素為當(dāng)前頁(yè)面
小程序定義了五個(gè)用于導(dǎo)航跳轉(zhuǎn)的API闯割，這里列舉兩個(gè)常用的彻消，詳細(xì)請(qǐng)戳??這里
1、wx.navigateTo 保留當(dāng)前頁(yè)面宙拉，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面宾尚，使用wx.navigateBack可以返回到原頁(yè)面
wx.navigateTo({url:`/pages/text/index?text=${121212}`})
2、wx.redirectTo 關(guān)閉當(dāng)前頁(yè)面谢澈，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面
wx.navigateTo({url:`/pages/text/index?text=${121212}`})
通過(guò)上面的API跳轉(zhuǎn)帶的參數(shù)煌贴，在頁(yè)面上我們需要怎么獲取呢？
// text.js
Page({
data:{
... // 頁(yè)面數(shù)據(jù)
},
onLoad(options){
console.log(options.text) // 121212 獲取上個(gè)頁(yè)面帶過(guò)來(lái)的值
}
})
數(shù)據(jù)過(guò)濾 過(guò)濾器
如果你使用過(guò)vue锥忿、angular框架牛郑，對(duì)|管道符肯定不陌生，它用來(lái)對(duì)我們的數(shù)據(jù)進(jìn)行轉(zhuǎn)換敬鬓，那小程序里面有沒(méi)有過(guò)濾器呢淹朋，不過(guò)這個(gè)是真沒(méi)有灶似。
但是目前有兩種方法，可以實(shí)現(xiàn)過(guò)濾瑞你。
1酪惭、獲取數(shù)據(jù)的時(shí)候，直接改了者甲，干脆利落春感、好不優(yōu)雅。
2虏缸、使用最后我們要介紹的wxs
WXS
WXS是小程序的一套腳本語(yǔ)言鲫懒，首先和js是不同的語(yǔ)言，其次運(yùn)行環(huán)境和js也是隔離開(kāi)的刽辙，wxs不能調(diào)用js文件中的函數(shù)窥岩，也不能調(diào)用小程序的API，它主要用來(lái)增強(qiáng)wxml宰缤。
wxs不能使用es6語(yǔ)法颂翼，人家不是js啦??
接下來(lái)我們來(lái)實(shí)現(xiàn)一個(gè)使用wxs實(shí)現(xiàn)一個(gè)簡(jiǎn)單的過(guò)濾器
1、首先我們創(chuàng)建filter.wxs文件并寫(xiě)入以下內(nèi)容
// filter.wxs
var Filter = {
getSatusStr: function(num){
var str = '';
switch (num) {
case 0:
string = '我是0的狀態(tài)'
break;
case 1:
string = '我是1的狀態(tài)'
break;
default:
string = '我是默認(rèn)的狀態(tài)'
break;
}
return str
}
}
module.exports = {
status: Filter.getSatusStr
}
同級(jí)下index.wxml使用
<wxs module="filter" src="./filter.wxs"></wxs>
<view wx:for="{{list}}">
<view>{{filter.status(item.status)}}</view>
</view>
總結(jié)：
1慨灭、每個(gè)wxs標(biāo)簽都有一個(gè)module 屬性
1朦乏、wxs可以寫(xiě)在wxml里面的wxs標(biāo)簽里和.wxs文件里
2、wxs文件中引入其他wxs文件時(shí)候氧骤，可以使用require函數(shù)呻疹，接受相對(duì)路徑
3、在wxml標(biāo)簽里使用外部wxs文件的時(shí)候筹陵，src屬性是相對(duì)路徑
tip
1刽锤、使用sass寫(xiě)wxss文件，在目錄下創(chuàng)建index.scss文件朦佩，當(dāng)前目錄下執(zhí)行 sass --watch index.scss:index.wxss --style expanded
2并思、wcss 文件里面不能使用本地圖片，請(qǐng)使用base64吕粗、網(wǎng)上圖片或者image
3纺荧、修改頁(yè)面的背景，類(lèi)似與css中設(shè)置body颅筋，可以直接設(shè)置page
4、不要直接操作this.data,使用this.setData函數(shù)输枯，切記议泵、切記
