一硫眯、入門
1.app.js
app.js 是小程序的腳本代碼乓旗。我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)禽最、聲明全局變量嗤攻。調(diào)用 MINA提供的豐富的 API毛嫉，如本例的同步存儲及同步讀取本地數(shù)據(jù)。
2.app.json
app.json 是對整個小程序的全局配置妇菱。我們可以在這個文件中配置小程序是由哪些頁面組成承粤，配置小程序的窗口 背景色暴区，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題辛臊。注意該文件不可添加任何注釋仙粱。
eg:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
// 注意：pages/index/index 最后的index，就包含了index.js index.wxml index.wxss三個文件
3.index.js
index.js 是頁面的腳本文件彻舰，在這個文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)缰盏、獲取小程序?qū)嵗暶鞑⑻幚頂?shù)據(jù)淹遵，響應(yīng)頁面交互事件等口猜。
4..wxss
頁面的樣式表是非必要的。當(dāng)有頁面樣式表時透揣，頁面的樣式表中的樣式規(guī)則會層疊覆蓋 app.wxss 中的樣式規(guī)則济炎。如果不指定頁面的樣式表，也可以在頁面的結(jié)構(gòu)文件中直接使用 app.wxss中指定的樣式規(guī)則
- .json
頁面的配置文件是非必要的辐真。當(dāng)有頁面的配置文件時须尚，配置項在該頁面會覆蓋app.json的window中相同的配置項。如果沒有指定的頁面配置文件侍咱，則在該頁面直接使用app.json中的默認(rèn)配置耐床。
6..wxml
布局文件
<!-- logs.wxml -->
<view class="container log-list">
</view>
二、生命周期：
在index.js里面：
生命周期是：App Launch -> App Show -> onload -> onShow -> onReady
1)整個app的啟動與現(xiàn)實楔脯。app的啟動在app.js中可配置撩轰。
2)進(jìn)入各個頁面的加載顯示等。（這里昧廷，loading的指示器顯示等）堪嫂。
3)界面跳轉(zhuǎn)：
a)wx.navigateTo(OBJECT):保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面木柬，使用wx.navigateBack可以返回到原頁面皆串。
b)wx.redirectTo(OBJECT):關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面眉枕。
c)wx.nacigateBack():當(dāng)前頁面關(guān)閉恶复，回退到前一頁面。
三速挑、八大組件
這里可以參考官方文檔谤牡，比較全面。
四梗摇、外部框架
原生的js插件和外部框架都不能使用拓哟，因為他們幾乎都是操作DOM的內(nèi)容，而微信應(yīng)用號不允許操作任何DOM伶授。動態(tài)設(shè)置的rem.js也不能支持断序。
五流纹、WebSocket
微信提供WebSocket讓我們可以做即時聊天，十分方便违诗。
六漱凝、tabBar
*注意：微信的底部菜單最多支持五欄（五個 icons）
tabBar的text屬性可以去掉，而且沒有text屬性的時候诸迟，tabBar高度會降低茸炒。
七、知識點(diǎn)
1）*注意：wechat開發(fā)工具并不完善阵苇，每次編輯了哪個頁面壁公，必須ctrl + s：保存一下.
2）F5是刷新頁面，可以刷新測試的demo界面
*注意：修改wxml和wxss下的內(nèi)容后绅项，直接 F5 刷新就能直接看到效果紊册，修改js則需點(diǎn)擊重啟按鈕才能看到效果。
3）建議在subline或者webStorm下開發(fā)微信小程序
4）基于微信開發(fā)工具并不人性化目前快耿，建議在新建頁面的時候囊陡，首先在app.json的pages中先添加："pages/index/index"，再新建一個wxml文件的同時掀亥，把對應(yīng)的js和wxss文件一起新建好撞反，因為微信應(yīng)用號的配置特點(diǎn)就是解析到一個wxml文件時，會同時在同級目錄下找到同文件名的js和wxss文件.
5）相對于html的<div>搪花，在小程序中使用<view>
6）使用class名來設(shè)置樣式遏片，id名在這里基本沒有什么用處。原因是主要操作數(shù)據(jù)鳍侣，不操作dom丁稀。
7）wxss文件是引入的樣式文件，可以直接在里面寫樣式倚聚，但是不推薦
eg:
@import "wxss/index.css";
body{
background:pink;
}
8)app.json中 window是配置頂部的一些樣式
tabBar 是配置底部的配置
9)window作用：
用于設(shè)置小程序的狀態(tài)欄，導(dǎo)航欄凿可，標(biāo)題惑折，窗口背景色。// 窗口指的是頁面的back
*注：在app.json中配置的屬性會被子window的屬性所覆蓋枯跑。
屬性有：
"navigationBarBackgroundColor":"#666666"
"navigationBarTextStyle":"white" // 注意：這里僅支持white/black/light
"navigationBarTitleText":"微信demo" // 導(dǎo)航欄標(biāo)題文字
"bacgroundColor":"#333333" // 窗口的背景色
"backgroundTextStyle":"dark" // 下拉背景字體惨驶，loading圖的楊啊是，僅僅支持 dark/light
"enablePullDownRefresh":"false" // 是否開啟下拉刷新
10).js文件主要作用邏輯敛助，和生命周期函數(shù)處理
11）小程序中的導(dǎo)入：
a).js => require
b).wxss => import
12)在css中display屬性作用
eg:
{
display:none; // 不顯示
display:block; // 此元素將顯示為塊級元素粗卜，此元素前后會帶有換行符
display:inline; // 默認(rèn)。此元素會被顯示為內(nèi)聯(lián)元素纳击，元素前后沒有換行符续扔。
display:inline-block; // 行內(nèi)塊元素
....... // 參考 [display解釋](http://www.w3school.com.cn/cssref/pr_class_display.asp)
}
在微信小程序中：
`display:flex;` // 參考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 作用是 `flex `是` flexiable box` 用于移動布局攻臀。 為盒狀模型提供了最大的靈活性。任何一個容器都能夠制定為Flex布局纱昧。
webkit內(nèi)核的瀏覽器：safari是一個
*注意：設(shè)為Flex布局以后刨啸，子元素的float、clear和vertical-align屬性將失效识脆。
13)rpx單位介紹：
微信小程序中的css尺寸單位设联，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定的屏幕寬度為750rpx.
參考： http://www.51xuediannao.com/javascript/xiaochengxu_rpx.html
14） indicator-dots = "{{indicatorDots}}" 為何用{{}}包裹
<swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}">
解釋：綁定的數(shù)據(jù)灼捂。也可以說是一種MVVM的模板語法离例。VUE AN基本都是這么干的。語法格式悉稠。應(yīng)該是框架加進(jìn)去的自定義屬性粘招，{}看框架咋定義，有些事function偎球，有些是參數(shù)洒扎。標(biāo)簽里面遇到像data,ng-model, indicator-dots這樣的屬性，一般都是框架加進(jìn)去的衰絮。
15）Page()函數(shù)用來注冊一個頁面袍冷。接受一個object參數(shù)。其指定頁面的初始數(shù)據(jù)猫牡，生命周期函數(shù)胡诗，時間處理函數(shù)等。
Page（）相當(dāng)于一個構(gòu)造函數(shù)淌友。
Page({
data:{
indicatorDots:true,
vertical:false,
autoplay:true,
interval:3000
},
// 時間處理函數(shù)
swiperchange:function(e){
// contents
}
})
-
js中var that = this;的解釋
this對象在程序中隨時會改變煌恢，而var that=this之后，that沒改變之前仍然是指向當(dāng)時的this震庭，這樣就不會出現(xiàn)找不到原來的對象
17)App() 函數(shù)用來注冊一個小程序瑰抵。接受一個 object 參數(shù)，其指定小程序的生命周期函數(shù)等器联。
前臺二汛、后臺定義： 當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開微信拨拓，小程序并沒有直接銷毀肴颊，而是進(jìn)入了后臺；當(dāng)再次進(jìn)入微信或再次打開小程序渣磷，又會從后臺進(jìn)入前臺婿着。
只有當(dāng)小程序進(jìn)入后臺一定時間，或者系統(tǒng)資源占用過高，才會被真正的銷毀竟宋。
App.prototype.getCurrentPage()
getCurrentPage()函數(shù)用戶獲取當(dāng)前頁面的實例提完。
var app = getApp(); 微信提供了全局的 getApp() 函數(shù)，可以獲取到小程序?qū)嵗?/p>
不要在定義于 App()內(nèi)的函數(shù)中調(diào)用 getApp() 袜硫，使用 this就可以拿到 app 實例氯葬。
不要在onLaunch的時候調(diào)用 getCurrentPage()，此時 page 還沒有生成婉陷。
通過 getApp() 獲取實例之后帚称，不要私自調(diào)用生命周期函數(shù)。
實用經(jīng)驗秽澳，自己出錯過的
- bindtap 不能寫為：bindTap
給view綁定事件的時候
2.Page中的2個方法中闯睹， 需要用,隔開:
Page({
onLoad: function () {
console.log('onLoad-search')
},
// 返回前一頁
navigateBack: function(e) {
console.log("back");
}
})
3.設(shè)置都是 :, 不是=:
// 清除
clearText: function(e) {
this.setData({
input_str:"" // 之前是=就會報錯
})
},
display:none 與 display:block 相對應(yīng)后者會顯示
5.主要原則：
不是改變父元素，是改變item對應(yīng)的數(shù)據(jù)變量担神。
6.事件：
Page({
bindViewTap:function(event){
event.target.dataset.alphaBeta === 1 // - 會轉(zhuǎn)為駝峰寫法
event.target.dataset.alphabeta === 2 // 大寫會轉(zhuǎn)為小寫
}
})
- 微信小程序判斷
wx-if="{{index==0}}"
8.當(dāng)前target
console.log(e.currentTarget);
9.表達(dá)式
{{}} 里面不能嵌套 {} 或者 {{}} 楼吃， 里面自然會使用變量
{{ dic-index }} // 如果index 變量為1. 結(jié)果就為dic-1
