廖馬兒：IOS程序員學微信小程序開發系列《三》：經驗及知識點 ... ...
一、入門
1.app.js
app.js 是小程序的腳本代碼。我們可以在這個文件中監聽并處理小程序的生命周期函數、聲明全局變量。調用 MINA提供的豐富的 API，如本例的同步存儲及同步讀取本地數據。
2.app.json
app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口 背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何注釋。
eg:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
// 注意：pages/index/index 最后的index，就包含了index.js index.wxml index.wxss三個文件
3.index.js
index.js 是頁面的腳本文件，在這個文件中我們可以監聽并處理頁面的生命周期函數、獲取小程序實例，聲明并處理數據，響應頁面交互事件等。
4..wxss
頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss中指定的樣式規則
-
.json
頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。
6..wxml
布局文件
<!-- logs.wxml --> <view class="container log-list"> </view>
二、生命周期：
在index.js里面：
生命周期是：App Launch -> App Show -> onload -> onShow -> onReady
1)整個app的啟動與現實。app的啟動在app.js中可配置。
2)進入各個頁面的加載顯示等。（這里，loading的指示器顯示等）。
3)界面跳轉：
a)wx.navigateTo(OBJECT):保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。
b)wx.redirectTo(OBJECT):關閉當前頁面，跳轉到應用內的某個頁面。
c)wx.nacigateBack():當前頁面關閉，回退到前一頁面。
三、八大組件
這里可以參考官方文檔，比較全面。
四、外部框架
原生的js插件和外部框架都不能使用，因為他們幾乎都是操作DOM的內容，而微信應用號不允許操作任何DOM。動態設置的rem.js也不能支持。
五、WebSocket
微信提供WebSocket讓我們可以做即時聊天，十分方便。
六、tabBar
*注意：微信的底部菜單最多支持五欄（五個 icons）
tabBar的text屬性可以去掉，而且沒有text屬性的時候，tabBar高度會降低。
七、知識點
1）*注意：wechat開發工具并不完善，每次編輯了哪個頁面，必須ctrl + s：保存一下.
2）F5是刷新頁面，可以刷新測試的demo界面
*注意：修改wxml和wxss下的內容后，直接 F5 刷新就能直接看到效果，修改js則需點擊重啟按鈕才能看到效果。
3）建議在subline或者webStorm下開發微信小程序
4）基于微信開發工具并不人性化目前，建議在新建頁面的時候，首先在app.json的pages中先添加："pages/index/index"，再新建一個wxml文件的同時，把對應的js和wxss文件一起新建好，因為微信應用號的配置特點就是解析到一個wxml文件時，會同時在同級目錄下找到同文件名的js和wxss文件.
5）相對于html的
6）使用class名來設置樣式，id名在這里基本沒有什么用處。原因是主要操作數據，不操作dom。
7）wxss文件是引入的樣式文件，可以直接在里面寫樣式，但是不推薦
eg:
eg:
@import "wxss/index.css";
body{
background:pink;
}
8)app.json中 window是配置頂部的一些樣式
tabBar 是配置底部的配置
9)window作用：
用于設置小程序的狀態欄，導航欄，標題，窗口背景色。// 窗口指的是頁面的back
*注：在app.json中配置的屬性會被子window的屬性所覆蓋。
屬性有：
"navigationBarBackgroundColor":"#666666"
"navigationBarTextStyle":"white" // 注意：這里僅支持white/black/light
"navigationBarTitleText":"微信demo" // 導航欄標題文字
"bacgroundColor":"#333333" // 窗口的背景色
"backgroundTextStyle":"dark" // 下拉背景字體，loading圖的楊啊是，僅僅支持 dark/light
"enablePullDownRefresh":"false" // 是否開啟下拉刷新
10).js文件主要作用邏輯，和生命周期函數處理
11）小程序中的導入：
a).js => require
b).wxss => import
12)在css中display屬性作用
eg:
{
display:none; // 不顯示
display:block; // 此元素將顯示為塊級元素，此元素前后會帶有換行符
display:inline; // 默認。此元素會被顯示為內聯元素，元素前后沒有換行符。
display:inline-block; // 行內塊元素
....... // 參考 [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內核的瀏覽器：safari是一個
*注意：設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
13)rpx單位介紹：
微信小程序中的css尺寸單位，rpx可以根據屏幕寬度進行自適應。規定的屏幕寬度為750rpx.
參考： http://www.51xuediannao.com/javascript/xiaochengxu_rpx.html
14） indicator-dots = "{{indicatorDots}}" 為何用{{}}包裹
<swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}">
解釋：綁定的數據。也可以說是一種MVVM的模板語法。VUE AN基本都是這么干的。語法格式。應該是框架加進去的自定義屬性，{}看框架咋定義，有些事function，有些是參數。標簽里面遇到像data,ng-model, indicator-dots這樣的屬性，一般都是框架加進去的。
15）Page()函數用來注冊一個頁面。接受一個object參數。其指定頁面的初始數據，生命周期函數，時間處理函數等。
Page（）相當于一個構造函數。
Page({
data:{
indicatorDots:true,
vertical:false,
autoplay:true,
interval:3000
},
// 時間處理函數
swiperchange:function(e){
// contents
}
})
16) js中 var that = this; 的解釋
this對象在程序中隨時會改變，而var that=this之后，that沒改變之前仍然是指向當時的this，這樣就不會出現找不到原來的對象
17)App() 函數用來注冊一個小程序。接受一個 object 參數，其指定小程序的生命周期函數等。
前臺、后臺定義： 當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序并沒有直接銷毀，而是進入了后臺；當再次進入微信或再次打開小程序，又會從后臺進入前臺。
只有當小程序進入后臺一定時間，或者系統資源占用過高，才會被真正的銷毀。
App.prototype.getCurrentPage()
getCurrentPage()函數用戶獲取當前頁面的實例。
var app = getApp(); 微信提供了全局的 getApp() 函數，可以獲取到小程序實例。
不要在定義于 App()內的函數中調用 getApp() ，使用 this就可以拿到 app 實例。
不要在onLaunch的時候調用 getCurrentPage()，此時 page 還沒有生成。
通過 getApp() 獲取實例之后，不要私自調用生命周期函數。
實用經驗，自己出錯過的
-
bindtap 不能寫為：bindTap
給view綁定事件的時候
2.Page中的2個方法中， 需要用,隔開:
Page({
onLoad: function () {
console.log('onLoad-search')
},
// 返回前一頁
navigateBack: function(e) {
console.log("back");
}
})
3.設置都是 :, 不是=:
// 清除
clearText: function(e) {
this.setData({
input_str:"" // 之前是=就會報錯
})
},
4.
display:none 與 display:block 相對應后者會顯示
5.主要原則：
不是改變父元素，是改變item對應的數據變量。
6.事件：
Page({
bindViewTap:function(event){
event.target.dataset.alphaBeta === 1 // - 會轉為駝峰寫法
event.target.dataset.alphabeta === 2 // 大寫會轉為小寫
}
})
-
微信小程序判斷
wx-if="{{index==0}}"
8.當前target
console.log(e.currentTarget);
9.表達式
{{}} 里面不能嵌套 {} 或者 {{}} ， 里面自然會使用變量
{{ dic-index }} // 如果index 變量為1. 結果就為dic-1
