關(guān)于Android的技術(shù)博客好久沒更新了蚓土，為什么呢？答案是由于公司業(yè)務(wù)需求赖淤，從一個Android移動端攻城獅轉(zhuǎn)變成了一個寫小程序的前端攻城獅。雖然小程序上手比較容易谅河，但是咱旱，這個是相對的————前端攻城獅上手比較容易。而對于移動端绷耍，那絕對的是nonono~了吐限。
相信如果是從Android轉(zhuǎn)過去的，會有各種的吐槽褂始。不僅僅是語法的規(guī)范诸典，語法簡直弱爆了，還有編譯器的問題崎苗。微信web開發(fā)工具相對于Android Studio,不管是代碼補(bǔ)全狐粱，還是快捷鍵、插件的使用胆数，尤其是不能查看源碼肌蜻，這就太low了。這個時候還是特別感謝自己是一個Android攻城獅了必尼。吐槽部分就此告一段落蒋搜，接下來我將會從一個初學(xué)者的身份，當(dāng)然判莉，此后的文章不會對小程序的知識點一一都做很細(xì)致的介紹豆挽，主要是對比Android的一些思想，進(jìn)行一些個人的想法闡述券盅。
點擊我查看完整項目
api語法的介紹
一帮哈、盒子模型Flex
1、flex-wrap：
nowrap（默認(rèn)）：不換行渗饮。
wrap：換行但汞，第一行在上方宿刮。
wrap-reverse：換行，第一行在下方私蕾。
2僵缺、justify-content： 所有子view在父View顯示的位置
flex-start（默認(rèn)值）：左對齊
flex-end：右對齊
center：居中
*space-between：兩端對齊，項目之間的間隔都相等踩叭。因此這個可以認(rèn)為是設(shè)置權(quán)重布局磕潮，每個子View占一份。如果子View只有一個容贝，則等同于flex-start
*space-around：平均分布在該行上自脯，兩邊留有一半的間隔空間。項目之間的間隔比項目與邊框的間隔大一倍斤富。如果（作用在父view上）只有一個子view膏潮，則其實就是讓子View居中對齊
space-between屬性圖形展示：
3、align-content
內(nèi)容居中满力。只適用于多行的flex容器焕参，單行不起作用
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊油额。
center：與交叉軸的中點對齊叠纷。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布潦嘶。
space-around：每根軸線兩側(cè)的間隔都相等涩嚣。所以，軸線之間的間隔比軸線與邊框的間隔大一倍掂僵。
stretch（默認(rèn)值）：軸線占滿整個交叉軸航厚。
4、align-items
讓每個View在父view的對齊方式看峻。適用于所有的flex容器阶淘。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊互妓。
center：交叉軸的中點對齊溪窒。
baseline: 項目的第一行文字的基線對齊。
stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto冯勉，將占滿整個容器的高度澈蚌。
5、示例
1）讓容器的子View居中顯示
在容器（父View）中添加：
display: flex;
align-items: center;
2）讓一個View布局顯示在最底層灼狰，或者最上層,類似于FramLayout布局
使用z-index屬性：
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
注意：
1）z-index只能在absolute 中起作用
2）z-index:-1宛瞄，被修飾的該View在最底層顯示（可以作為背景）
z-index:1 ，在最外層顯示
二交胚、js相關(guān)的api
1份汗、變量
我們知道盈电，在Java中，如果是在整個類中需要用到的對象杯活，我們將在類中聲明為成員變量匆帚，在某個具體方法中有效的聲明為局部變量。那么對應(yīng)的小程序是：
var：java中的成員變量
let：java中局部變量
2旁钧、基本數(shù)據(jù)類型Boolean
var test0 = "" //false
var test1 = "aaaaaaaa" // true
var test2 = null // false
var test3 = 11 // true
var test4 = 0 // false
var test5 = {} // true
總結(jié)：這個與java區(qū)別還是很大的
1）對于數(shù)字型(int吸重、float),只要是非0的數(shù)字都是true;
2)對于字符串(String)，只有是null歪今、和“”空串才是false嚎幸，其他都是false
3）對于對象，除了對象是null才是false寄猩，其他都是true嫉晶。哪怕這個對象是一個空的對象{}
3、函數(shù)
（1）函數(shù)定義
在page中定義：
onShow: function (params) {
//方法體
},
非page中定義：
function test(params){
//方法體
}
總結(jié)：
1.第一種定義必須在最后面要加“,”逗號田篇，而第二種方式不能加
2.與java不同的是车遂，函數(shù)的參數(shù)params不用指定類型，所以斯辰，理論上調(diào)用方法的時候可以傳遞任意類型。但是一般不這么做坡疼。個人認(rèn)為還是java嚴(yán)謹(jǐn)更好彬呻，可讀性強(qiáng)。
3.參數(shù)params的個數(shù)沒有限制
（2）回調(diào)函數(shù)
1）函數(shù)定義
function request(onFail){
//調(diào)用接口
wx.request({
success: function (res) { //接口返回數(shù)據(jù)
onFail（res）
})
}
2）函數(shù)調(diào)用
wx.cyou.cache.getCacheValue("key_test", function(result){
console.log("result==", result)
})
（3）注意事項
>1）小程序不支持函數(shù)的重載和函數(shù)的重寫
>2)函數(shù)調(diào)用函數(shù)的時候柄瑰，函數(shù)方法不支持直接傳遞闸氮。看下面的示例：
function request1(function1) {
request2(function1）
}
問題： 這在request1方法調(diào)用request2的時候教沾，參數(shù)也是一個函數(shù)function1蒲跨，直接將function1傳遞給request2是不可以的
解決方式：
function request1(function1) {
request2(new function{
function1()
}}）
}
在request2方法的回調(diào)函數(shù)中去調(diào)用function1方法
4、對象的變量
class Person{
String name;
int age;
}
在java中授翻，如果要遍歷獲取Person屬性值name或悲、age，和屬性類型String堪唐、int巡语。都是用反射去實現(xiàn)的。那么淮菠，在小程序中卻比java 簡單粗暴很多男公。具體實現(xiàn)
for (var propertyName in Person){
var name = propertyName //對象Person的屬性（String、int）
var value = testInfo[propertyName] // 對象Person的屬性值(name合陵、age)
}
5枢赔、export使用
在調(diào)用一個類中的方法或者屬性值時澄阳，必須要在被調(diào)用的方法和屬性值，定義的時候用export聲明
6踏拜、disableScroll使用
問題描述：
有時候碎赢，小程序跑在蘋果手機(jī)上時，會左右滑動退出执隧，也會上下滑動揩抡，這樣體驗不好。這個時候要禁止滑動镀琉。
在app.json中峦嗤，將disableScroll值設(shè)置為true 就可以了：
"window": {
"disableScroll": true
}
7、頁面page數(shù)據(jù)的獲取與設(shè)置
let pages = getCurrentPages()
let curPage = pages[pages.length - 1] //獲取當(dāng)前頁面
if (curPage.route == url){ //比較獲取的頁面的url是否跟實際的一致(如url:"pages/order/order")
curPage.setData({ //設(shè)置數(shù)據(jù)
usingOrderList: usingOrderList
})
}
8屋摔、獲取所有的頁面
let pages = getCurrentPages()
// 獲取上一個頁面
let prePage = pages[pages.length - 2]
//給頁面設(shè)置數(shù)據(jù)
prePage.setData({
refreshUserInfo:true
})
//返回到上一個頁面
wx.navigateBack({
delta: 1
})
注意事項：
調(diào)用getCurrentPages()不需要在page環(huán)境中(可以視為Android中的Context環(huán)境)烁设，可以在任何地方直接獲取，即util等自定義類中同樣生效钓试。類似的還有wx.開頭的方法
9装黑、showToast時長設(shè)置失效問題
let title = new String(msg)
//延時彈toast,是為了解決有時候在接口請求后，設(shè)置的duration時間不起作用
setTimeout(function () {
wx.showToast({
title: title,
duration: 1200,
icon: "none"
})
}, 100)
10弓熏、reLaunch跳轉(zhuǎn)失效問題
//延時跳轉(zhuǎn),是為了解決有時候wx.reLaunch不起作用恋谭，設(shè)置的時間不起作用
setTimeout(function(){
wx.reLaunch({
url: '/pages/home/home'
})
},100)
以上對于小白相信是很實用的一些知識。下一篇繼續(xù)講解關(guān)于小程序中挽鞠，代碼冗余疚颊、解耦的問題分析，以及解決策略信认。
