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