概念
小程序是一種不需要下載安裝即可使用的應用，它實現(xiàn)了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。
可以理解成一套嵌套在微信里面的app，和原生app不同的是不需要下載，屬于小而輕的應用。
開發(fā)前的準備
1、注冊賬號
2、下載開發(fā)者工具, 下載1.02.1801081這個版本的，最新版的有bug，編譯的時候調試器Wxml窗口會出現(xiàn)空的page標簽，里面沒有內容。編輯器內復制也會偶爾失效。
3、注冊好后登錄下微信公眾平臺，在設置里找到開發(fā)設置，把appID保存下來，一會開發(fā)的時候需要用到
快速開始
1、此時，工具有了，ID有了，接下來開始我們的擼碼之旅。打開開發(fā)者工具，掃碼登錄后選擇小程序項目，點擊右下角的加號，創(chuàng)建新項目，選擇項目目錄，填寫appID，項目名稱，寫好后點擊確定。
2、確定以后，默認打開后，發(fā)現(xiàn)給我們創(chuàng)建了一些代碼，代碼一會我們再講。
頁面是空白的，打開調試器后發(fā)現(xiàn)頁面有報錯，如下
點擊右上角的詳情，修改下配置，把調試基礎庫改成1.9.1，然后把不校驗安全域名、web-view 域名、TLS 版本以及 HTTPS 證書勾選上，不然我們的請求就必須得是https的了
3、此時控制臺沒有報錯了，頁面展示如下，點擊按鈕，我們可以看到微信授權，點擊允許，我們的頭像和昵稱就顯示在頁面上了
項目結構
我們主要看app.js、app.json、app.wxss三個文件和pages文件夾里面的wxml
1、app.js做為小程序的入口，里面有個App實例，每個小程序只會有一個App實例，小程序啟動以后觸發(fā)onLaunch函數(shù)執(zhí)行，獲取用戶信息
2、app.json是小程序的所有全局配置，pages字段放置所有頁面的路徑，window字段定義所有頁面的頂部背景顏色，文字顏色 詳細配置請戳這里??
3、app.wxss文件就是頁面公用的樣式，僅支持部分css選擇器
4、wxml就是我們的HTML文件，常用標簽為 view 、text 等，沒有所謂的div、span、p一類的標簽了，我們習慣稱它們?yōu)榻M件
設計理念
小程序內部可以理解成一個mvvm的框架，分為邏輯層和視圖層，邏輯層將數(shù)據進行處理后發(fā)送給視圖層，同時接受視圖層的事件反饋。
// pages/test/index.js
Page({
data:{ // 頁面的初始數(shù)據
text: 'hello world'
},
onLoad(){
console.log('hello')
},
change(){
this.setData({
text:'hello'
})
}
})
使用Page函數(shù)來注冊一個頁面，接收一個Object參數(shù)。
這里我們使用了onLoad來監(jiān)聽頁面的加載和定義了一個change函數(shù)
并使用setData函數(shù)將text的值進行更改
更改data數(shù)據的時候必須調用setData函數(shù)進行更改
// pages/test/index.wxml
<view>{{text}}</view> // 顯示hello world
<button bindtap="change">點擊更改上面文字</button> // 顯示hello
我們在button組件上添加了點擊事件，調用了change函數(shù)，完整事件請戳??這里
事件傳遞參數(shù)
有時候我們需要觸發(fā)事件的時候，傳遞一些參數(shù)，那小程序怎么傳遞呢？很不幸，小程序不能類似js里面直接傳遞，往往我們需要將傳遞的數(shù)據綁定到事件元素上
// index.wxml
<button data-test="哈哈" bindtap="change">點擊我</button>
使用e.currentTarget.dataset來獲取值
// index.js
change(e){
e.currentTarget.dataset.test // 哈哈
}
setData函數(shù)拓展
1、修改嵌套多層的數(shù)據，
如果是寫死的參數(shù)可以使用引號將參數(shù)包起來
this.setData({
'text.msg': 'hello'
})
如果是傳遞進來的值呢？很簡單將data的key用[]括起來
// index.wxml
<button bindtap="change" data-key="text.msg">點擊我</button>
// index.js
change(e){
var key = e.currentTarget.dataset.key
this.setData({
key: 'hello' // 數(shù)據不會更改
// [key]: 'hello' // 數(shù)據會更改
})
}
路由
小程序里面所有的頁面路由由框架進行管理
我們可以使用getCurrnetPages函數(shù)獲取當前頁面棧的實例，返回一個數(shù)組, 最后一個元素為當前頁面
小程序定義了五個用于導航跳轉的API，這里列舉兩個常用的，詳細請戳??這里
1、wx.navigateTo 保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面
wx.navigateTo({url:`/pages/text/index?text=${121212}`})
2、wx.redirectTo 關閉當前頁面，跳轉到應用內的某個頁面
wx.navigateTo({url:`/pages/text/index?text=${121212}`})
通過上面的API跳轉帶的參數(shù)，在頁面上我們需要怎么獲取呢？
// text.js
Page({
data:{
... // 頁面數(shù)據
},
onLoad(options){
console.log(options.text) // 121212 獲取上個頁面帶過來的值
}
})
數(shù)據過濾 過濾器
如果你使用過vue、angular框架，對|管道符肯定不陌生，它用來對我們的數(shù)據進行轉換，那小程序里面有沒有過濾器呢，不過這個是真沒有。
但是目前有兩種方法，可以實現(xiàn)過濾。
1、獲取數(shù)據的時候，直接改了，干脆利落、好不優(yōu)雅。
2、使用最后我們要介紹的wxs
WXS
WXS是小程序的一套腳本語言，首先和js是不同的語言，其次運行環(huán)境和js也是隔離開的，wxs不能調用js文件中的函數(shù)，也不能調用小程序的API，它主要用來增強wxml。
wxs不能使用es6語法，人家不是js啦??
接下來我們來實現(xiàn)一個使用wxs實現(xiàn)一個簡單的過濾器
1、首先我們創(chuàng)建filter.wxs文件并寫入以下內容
// 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 = '我是默認的狀態(tài)'
break;
}
return str
}
}
module.exports = {
status: Filter.getSatusStr
}
同級下index.wxml使用
<wxs module="filter" src="./filter.wxs"></wxs>
<view wx:for="{{list}}">
<view>{{filter.status(item.status)}}</view>
</view>
總結：
1、每個wxs標簽都有一個module 屬性
1、wxs可以寫在wxml里面的wxs標簽里和.wxs文件里
2、wxs文件中引入其他wxs文件時候，可以使用require函數(shù)，接受相對路徑
3、在wxml標簽里使用外部wxs文件的時候，src屬性是相對路徑
tip
1、使用sass寫wxss文件，在目錄下創(chuàng)建index.scss文件，當前目錄下執(zhí)行 sass --watch index.scss:index.wxss --style expanded
2、wcss 文件里面不能使用本地圖片，請使用base64、網上圖片或者image
3、修改頁面的背景，類似與css中設置body，可以直接設置page
4、不要直接操作this.data,使用this.setData函數(shù)，切記、切記
