一、準(zhǔn)備工作
- 申請賬號
- 安裝開發(fā)工具（微信自己的開發(fā)工具）
-
微信自己弄了一套語言纠炮，目錄結(jié)構(gòu)如下
結(jié)構(gòu)
圖片.png
有四種不同類型的文件
- .json 后綴的 JSON 配置文件
- .wxml 后綴的 WXML 模板文件（相當(dāng)于web中的HTML）
- .wxss 后綴的 WXSS 樣式文件（CSS）
- .js 后綴的 JS 腳本邏輯文件(JS)
二一罩、配置
1.小程序配置 app.json
對當(dāng)前小程序的全局配置杨幼，包括了小程序的所有頁面路徑、界面表現(xiàn)聂渊、網(wǎng)絡(luò)超時時間差购、底部 tab 等
很必要的是"pages"的配置（路徑一定要對），描述當(dāng)前小程序所有頁面路徑汉嗽，這是為了讓微信客戶端知道當(dāng)前你的小程序頁面定義在哪個目錄欲逃。
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
//window字段 —— 小程序所有頁面的頂部背景顏色，文字顏色定義在這里的饼暑。
三稳析、WXML模板、WXSS樣式撵孤、JS交互
每一個文件下的index是本文件的根文件迈着，可以對整個文件操作，而每個頁面下的則只對本頁面作用
1.WXML
- 標(biāo)簽用的是 view, button, text 等邪码，都是已包裝好的基本能力裕菠，小程序還有地圖
<map></map>、視頻<video></video>等等組件能力闭专。 - 還有類似于VUE的 wx:if 的屬性以及 {{ }} 的表達(dá)式奴潘。用 MVVM 的開發(fā)模式旧烧，把渲染和邏輯分離。簡單來說就是不要再讓 JS 直接操控 DOM画髓，JS只需要管理狀態(tài)即可掘剪，然后再通過一種模板語法來描述狀態(tài)和界面結(jié)構(gòu)的關(guān)系即可。
如顯示hello world
//WXML
<text></text>
//JS
this.setData({ msg: "Hello World" })
//通過 {{ }} 的語法把一個變量綁定到界面上奈虾，我們稱為數(shù)據(jù)綁定夺谁。
- 僅僅通過數(shù)據(jù)綁定還不夠完整的描述狀態(tài)和界面的關(guān)系，還需要 if/else, for等控制能力肉微，在小程序里邊匾鸥，這些控制能力都用 wx: 開頭的屬性來表達(dá)。
2.WXSS
- 具有 CSS 大部分的特性碉纳，也有了一些擴(kuò)充和修改勿负。
- 新增了尺寸單位。在寫 CSS 樣式時劳曹，開發(fā)者需要考慮到手機(jī)設(shè)備的屏幕會有不同的寬度和設(shè)備像素比奴愉，采用一些技巧來換算一些像素單位。WXSS 在底層支持新的尺寸單位 rpx 铁孵，開發(fā)者可以免去換算的煩惱锭硼，只要交給小程序底層來換算即可，由于換算采用的浮點(diǎn)數(shù)運(yùn)算蜕劝，所以運(yùn)算結(jié)果會和預(yù)期結(jié)果有一點(diǎn)點(diǎn)偏差账忘。
- 提供了全局的樣式和局部樣式。和前邊 app.json的概念相同熙宇，你可以寫一個 app.wxss 作為全局樣式，會作用于當(dāng)前小程序的所有頁面溉浙，局部頁面樣式 page.wxss 僅對當(dāng)前頁面生效烫止。
- WXSS 僅支持部分 CSS 選擇器
3.JS
- 和用戶做交互：響應(yīng)用戶的點(diǎn)擊、獲取用戶的位置等戳稽。
- 在 JS 中調(diào)用小程序提供的豐富的 API馆蠕，利用這些 API 可以很方便的調(diào)起微信提供的能力，例如獲取用戶信息
gegUserInfo惊奇、微信支付requsetPayment等互躬。文件來處理用戶的操作。
四颂郎、邏輯層
1.App()
注冊一個小程序吼渡。接受一個 object 參數(shù)，其指定小程序的生命周期函數(shù)等乓序。
全局的 getApp() 函數(shù)可以用來獲取到小程序?qū)嵗?/p>
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
- 注意：
1.App() 必須在 app.js 中注冊寺酪，且不能注冊多個坎背。
2.不要在定義于 App() 內(nèi)的函數(shù)中調(diào)用 getApp() ，使用 this 就可以拿到 app 實(shí)例寄雀。
3.不要在 onLaunch 的時候調(diào)用 getCurrentPages()得滤，此時 page 還沒有生成。
4.通過 getApp() 獲取實(shí)例之后盒犹，不要私自調(diào)用生命周期函數(shù)懂更。
2.注冊頁面Page
Page()函數(shù)用來注冊一個頁面，接受一個 object 參數(shù)急膀，其指定頁面的初始數(shù)據(jù)沮协、生命周期函數(shù)、事件處理函數(shù)等脖阵。
是在小程序里面用到很重要的一個函數(shù)皂股。（基本都要用）
- 初始化數(shù)據(jù)將作為頁面的第一次渲染。
data 將會以 JSON 的形式由邏輯層傳至渲染層命黔，所以其數(shù)據(jù)必須是可以轉(zhuǎn)成 JSON 的格式：字符串呜呐，數(shù)字，布爾值悍募，對象蘑辑，數(shù)組。
渲染層可以通過 WXML 對數(shù)據(jù)進(jìn)行綁定坠宴。
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})
-
生命周期函數(shù)
mina-lifecycle.png
onLoad: 頁面加載
onShow: 頁面顯示
onReady: 頁面初次渲染完成
onHide: 頁面隱藏
onUnload: 頁面卸載
頁面相關(guān)事件處理函數(shù)
onPullDownRefresh: 下拉刷新
onReachBottom: 上拉觸底
onPageScroll: 頁面滾動
onShareAppMessage: 用戶轉(zhuǎn)發(fā)事件處理函數(shù)
Page 中還可以定義一些特殊的函數(shù)：事件處理函數(shù)洋魂。在渲染層可以在組件中加入，當(dāng)達(dá)到觸發(fā)事件時喜鼓，就會執(zhí)行 Page 中定義的事件處理函數(shù)副砍。
<view bindtap="viewTap"> click me </view>
Page({
viewTap: function() {
console.log('view tap')
}
})
Page.prototype.route:
route 字段可以獲取到當(dāng)前頁面的路徑。
Page.prototype.setData():
setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步）庄岖，同時改變對應(yīng)的 this.data 的值（同步）豁翎。
setData也是很重要的一個函數(shù)
注意：
1.直接修改 this.data 而不調(diào)用 this.setData 是無法改變頁面的狀態(tài)的，還會造成數(shù)據(jù)不一致隅忿。
2.不要把 data 中任何一項(xiàng)的 value 設(shè)為 undefined
3.頁面路由
- 在小程序中所有頁面的路由全部由框架進(jìn)行管理心剥。
-
getCurrentPages()函數(shù)用于獲取當(dāng)前頁面棧的實(shí)例，以數(shù)組形式按棧的順序給出背桐，第一個元素為首頁优烧，最后一個元素為當(dāng)前頁面。
4.模塊化
文件作用域
在 JavaScript 文件中聲明的變量和函數(shù)只在該文件中有效链峭；不同的文件中可以聲明相同名字的變量和函數(shù)畦娄，不會互相影響。通過全局函數(shù)
getApp()可以獲取全局的應(yīng)用實(shí)例，如果需要全局的數(shù)據(jù)可以在App()中設(shè)置
可以將一些公共的代碼抽離成為一個單獨(dú)的 js 文件纷责，作為一個模塊捍掺。模塊只有通過 module.exports 或者 exports 才能對外暴露接口。注意：require 暫時不支持絕對路徑
5.API
6.場景值
- 可在 App 的 onlaunch 和 onshow 中獲取場景值再膳，部分場景值下還可以獲取來源應(yīng)用挺勿、公眾號或小程序的appId
五、視圖層
1.WXML
數(shù)據(jù)綁定
WXML 中的動態(tài)數(shù)據(jù)均來自對應(yīng) Page 的 data喂柒。
使用雙大括號{{ }}將變量包起來列表渲染
wx:for
控制屬性綁定一個數(shù)組不瓶，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。
默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index灾杰，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item蚊丐。
如果要一次性判斷多個組件標(biāo)簽，可以使用一個 <block/> 標(biāo)簽將多個組件包裝起來艳吠，并在上邊使用 wx 控制屬性麦备。<block/> 并不是一個組件，它僅僅是一個包裝元素昭娩，不會在頁面中做任何渲染凛篙，只接受控制屬性。
用 wx:key 來指定列表中項(xiàng)目的唯一的標(biāo)識符栏渺。條件渲染
wx:if
在框架中呛梆，使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊，也可以用 wx:elif 和 wx:else 來添加一個 else 塊磕诊。
可用<block></block>
wx:if 和 hidden區(qū)別：
wx:if 的條件值切換時填物，框架有一個局部渲染的過程，會確保條件塊在切換時銷毀或重新渲染霎终。 wx:if 也是惰性的滞磺，若在初始渲染條件為 false，框架什么也不做莱褒，在條件第一次變成真的時候才開始局部渲染雁刷。
hidden，組件始終會被渲染保礼，只是簡單的控制顯示與隱藏。
一般來說责语，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗炮障。因此，如果需要頻繁切換的情景下坤候，用 hidden 更好胁赢，如果在運(yùn)行時條件不大可能改變則 wx:if 較好。
- 模板
WXML提供模板（template）白筹，可以在模板中定義代碼片段智末，然后在不同的地方調(diào)用谅摄。
使用 is 屬性，聲明需要的使用的模板系馆，然后將模板所需要的 data 傳入
<template is="msgItem" data="{{...item}}"/>
模板擁有自己的作用域送漠，只能使用 data 傳入的數(shù)據(jù)以及模版定義文件中定義的 <wxs /> 模塊。 - 事件
分為冒泡事件和非冒泡事件：
冒泡事件：當(dāng)一個組件上的事件被觸發(fā)后由蘑，該事件會向父節(jié)點(diǎn)傳遞闽寡。
非冒泡事件：當(dāng)一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點(diǎn)傳遞尼酿。
key 以bind（冒泡）或catch（阻止冒泡）開頭爷狈。
捕獲階段，事件到達(dá)節(jié)點(diǎn)的順序與冒泡階段相反裳擎。
- 引用
WXML 提供兩種文件引用方式import和include涎永。
2.WXS
- 模塊
WXS 代碼可以編寫在 wxml 文件中的 <wxs> 標(biāo)簽內(nèi)，或以 .wxs 為后綴名的文件內(nèi)鹿响。
<wxs> 模塊只能在定義模塊的 WXML 文件中被訪問到羡微。使用 <include> 或 <import> 時，<wxs> 模塊不會被引入到對應(yīng)的 WXML 文件中抢野。
<template> 標(biāo)簽中拷淘，只能使用定義該 <template> 的 WXML 文件中定義的 <wxs> 模塊。 - 變量
- 注釋
// 方法一：單行注釋
/*
方法二：多行注釋
*/
/*
方法三：結(jié)尾注釋指孤。即從 /* 開始往后的所有 WXS 代碼均被注釋
- 運(yùn)算符
- 語句
- 數(shù)據(jù)類型：
number： 數(shù)值
string：字符串
boolean：布爾值
object：對象
function：函數(shù)
array: 數(shù)組
date：日期
regexp：正則 - 基礎(chǔ)類庫
3.WXSS
- 尺寸單位 ：rpx
- 樣式導(dǎo)入：@import語句可以導(dǎo)入外聯(lián)樣式表 (相對路徑)
- 內(nèi)聯(lián)樣式
style启涯、class - 選擇器
.class
#id
element
element element
::after
::before - 全局樣式和局部樣式
定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面恃轩。在 page 的 wxss 文件中定義的樣式為局部樣式结洼，只作用在對應(yīng)的頁面，并會覆蓋 app.wxss 中相同的選擇器叉跛。 - 基礎(chǔ)組件快速開發(fā)
- 自定義組件
