關(guān)于Android的技術(shù)博客好久沒(méi)更新了&＃xff0c;為什么呢&＃xff1f;答案是由于公司業(yè)務(wù)需求&＃xff0c;從一個(gè)Android移動(dòng)端攻城獅轉(zhuǎn)變成了一個(gè)寫小程序的前端攻城獅。愛掏網(wǎng) - it200.com雖然小程序上手比較容易&＃xff0c;但是&＃xff0c;這個(gè)是相對(duì)的————前端攻城獅上手比較容易。愛掏網(wǎng) - it200.com而對(duì)于移動(dòng)端&＃xff0c;那絕對(duì)的是nonono~了。愛掏網(wǎng) - it200.com 相信如果是從Android轉(zhuǎn)過(guò)去的&＃xff0c;會(huì)有各種的吐槽。愛掏網(wǎng) - it200.com不僅僅是語(yǔ)法的規(guī)范&＃xff0c;語(yǔ)法簡(jiǎn)直弱爆了&＃xff0c;還有編譯器的問(wèn)題。愛掏網(wǎng) - it200.com微信web開發(fā)工具相對(duì)于Android Studio,不管是代碼補(bǔ)全&＃xff0c;還是快捷鍵、插件的使用&＃xff0c;尤其是不能查看源碼&＃xff0c;這就太low了。愛掏網(wǎng) - it200.com這個(gè)時(shí)候還是特別感謝自己是一個(gè)Android攻城獅了。愛掏網(wǎng) - it200.com吐槽部分就此告一段落&＃xff0c;接下來(lái)我將會(huì)從一個(gè)初學(xué)者的身份&＃xff0c;當(dāng)然&＃xff0c;此后的文章不會(huì)對(duì)小程序的知識(shí)點(diǎn)一一都做很細(xì)致的介紹&＃xff0c;主要是對(duì)比Android的一些思想&＃xff0c;進(jìn)行一些個(gè)人的想法闡述。愛掏網(wǎng) - it200.com 點(diǎn)擊我查看完整項(xiàng)目
api語(yǔ)法的介紹
一、盒子模型Flex
1、flex-wrap&＃xff1a;
nowrap&＃xff08;默認(rèn)&＃xff09;&＃xff1a;不換行。愛掏網(wǎng) - it200.comwrap&＃xff1a;換行&＃xff0c;第一行在上方。愛掏網(wǎng) - it200.comwrap-reverse&＃xff1a;換行&＃xff0c;第一行在下方。愛掏網(wǎng) - it200.com
2、justify-content&＃xff1a; 所有子view在父View顯示的位置
flex-start&＃xff08;默認(rèn)值&＃xff09;&＃xff1a;左對(duì)齊
flex-end&＃xff1a;右對(duì)齊
center&＃xff1a;居中
*space-between&＃xff1a;兩端對(duì)齊&＃xff0c;項(xiàng)目之間的間隔都相等。愛掏網(wǎng) - it200.com因此這個(gè)可以認(rèn)為是設(shè)置權(quán)重布局&＃xff0c;每個(gè)子View占一份。愛掏網(wǎng) - it200.com如果子View只有一個(gè)&＃xff0c;則等同于flex-start
*space-around&＃xff1a;平均分布在該行上&＃xff0c;兩邊留有一半的間隔空間。愛掏網(wǎng) - it200.com項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。愛掏網(wǎng) - it200.com如果&＃xff08;作用在父view上&＃xff09;只有一個(gè)子view&＃xff0c;則其實(shí)就是讓子View居中對(duì)齊
space-between屬性圖形展示&＃xff1a;
3、align-content
內(nèi)容居中。愛掏網(wǎng) - it200.com只適用于多行的flex容器&＃xff0c;單行不起作用flex-start&＃xff1a;與交叉軸的起點(diǎn)對(duì)齊。愛掏網(wǎng) - it200.comflex-end&＃xff1a;與交叉軸的終點(diǎn)對(duì)齊。愛掏網(wǎng) - it200.comcenter&＃xff1a;與交叉軸的中點(diǎn)對(duì)齊。愛掏網(wǎng) - it200.comspace-between&＃xff1a;與交叉軸兩端對(duì)齊&＃xff0c;軸線之間的間隔平均分布。愛掏網(wǎng) - it200.comspace-around&＃xff1a;每根軸線兩側(cè)的間隔都相等。愛掏網(wǎng) - it200.com所以&＃xff0c;軸線之間的間隔比軸線與邊框的間隔大一倍。愛掏網(wǎng) - it200.comstretch&＃xff08;默認(rèn)值&＃xff09;&＃xff1a;軸線占滿整個(gè)交叉軸。愛掏網(wǎng) - it200.com
4、align-items
讓每個(gè)View在父view的對(duì)齊方式。愛掏網(wǎng) - it200.com適用于所有的flex容器。愛掏網(wǎng) - it200.comflex-start&＃xff1a;交叉軸的起點(diǎn)對(duì)齊。愛掏網(wǎng) - it200.comflex-end&＃xff1a;交叉軸的終點(diǎn)對(duì)齊。愛掏網(wǎng) - it200.comcenter&＃xff1a;交叉軸的中點(diǎn)對(duì)齊。愛掏網(wǎng) - it200.combaseline: 項(xiàng)目的第一行文字的基線對(duì)齊。愛掏網(wǎng) - it200.comstretch&＃xff08;默認(rèn)值&＃xff09;&＃xff1a;如果項(xiàng)目未設(shè)置高度或設(shè)為auto&＃xff0c;將占滿整個(gè)容器的高度。愛掏網(wǎng) - it200.com
5、示例
1&＃xff09;讓容器的子View居中顯示在容器&＃xff08;父View&＃xff09;中添加&＃xff1a;display: flex;align-items: center;2&＃xff09;讓一個(gè)View布局顯示在最底層&＃xff0c;或者最上層,類似于FramLayout布局使用z-index屬性&＃xff1a;
{position:absolute;left:0px;top:0px;z-index:-1;}注意&＃xff1a;1&＃xff09;z-index只能在absolute 中起作用2&＃xff09;z-index:-1&＃xff0c;被修飾的該View在最底層顯示&＃xff08;可以作為背景&＃xff09;z-index:1 &＃xff0c;在最外層顯示
二、js相關(guān)的api
1、變量
我們知道&＃xff0c;在Java中&＃xff0c;如果是在整個(gè)類中需要用到的對(duì)象&＃xff0c;我們將在類中聲明為成員變量&＃xff0c;在某個(gè)具體方法中有效的聲明為局部變量。愛掏網(wǎng) - it200.com那么對(duì)應(yīng)的小程序是&＃xff1a;
var&＃xff1a;java中的成員變量
let&＃xff1a;java中局部變量
2、基本數(shù)據(jù)類型Boolean
var test0 &＃61; "" //falsevar test1 &＃61; "aaaaaaaa" // truevar test2 &＃61; null // falsevar test3 &＃61; 11 // truevar test4 &＃61; 0 // falsevar test5 &＃61; {} // true總結(jié)&＃xff1a;這個(gè)與java區(qū)別還是很大的1&＃xff09;對(duì)于數(shù)字型(int、float),只要是非0的數(shù)字都是true;2)對(duì)于字符串(String)&＃xff0c;只有是null、和“”空串才是false&＃xff0c;其他都是false3&＃xff09;對(duì)于對(duì)象&＃xff0c;除了對(duì)象是null才是false&＃xff0c;其他都是true。愛掏網(wǎng) - it200.com哪怕這個(gè)對(duì)象是一個(gè)空的對(duì)象{}
3、函數(shù)
&＃xff08;1&＃xff09;函數(shù)定義 在page中定義&＃xff1a;
onShow: function (params) {//方法體},
非page中定義&＃xff1a;
function test(params){//方法體
}
總結(jié)&＃xff1a; 1.第一種定義必須在最后面要加“,”逗號(hào)&＃xff0c;而第二種方式不能加 2.與java不同的是&＃xff0c;函數(shù)的參數(shù)params不用指定類型&＃xff0c;所以&＃xff0c;理論上調(diào)用方法的時(shí)候可以傳遞任意類型。愛掏網(wǎng) - it200.com但是一般不這么做。愛掏網(wǎng) - it200.com個(gè)人認(rèn)為還是java嚴(yán)謹(jǐn)更好&＃xff0c;可讀性強(qiáng)。愛掏網(wǎng) - it200.com 3.參數(shù)params的個(gè)數(shù)沒(méi)有限制
&＃xff08;2&＃xff09;回調(diào)函數(shù) 1&＃xff09;函數(shù)定義
function request(onFail){//調(diào)用接口wx.request({success: function (res) { //接口返回?cái)?shù)據(jù)onFail&＃xff08;res&＃xff09;})}
2&＃xff09;函數(shù)調(diào)用
wx.cyou.cache.getCacheValue("key_test", function(result){console.log("result&＃61;&＃61;", result)})
&＃xff08;3&＃xff09;注意事項(xiàng)
1&＃xff09;小程序不支持函數(shù)的重載和函數(shù)的重寫
2)函數(shù)調(diào)用函數(shù)的時(shí)候&＃xff0c;函數(shù)方法不支持直接傳遞。愛掏網(wǎng) - it200.com看下面的示例&＃xff1a;
function request1(function1) {request2(function1&＃xff09;}問(wèn)題&＃xff1a; 這在request1方法調(diào)用request2的時(shí)候&＃xff0c;參數(shù)也是一個(gè)函數(shù)function1&＃xff0c;直接將function1傳遞給request2是不可以的解決方式&＃xff1a;function request1(function1) {request2(new function{function1()}}&＃xff09;}在request2方法的回調(diào)函數(shù)中去調(diào)用function1方法
4、對(duì)象的變量
class Person{String name;int age;
}
在java中&＃xff0c;如果要遍歷獲取Person屬性值name、age&＃xff0c;和屬性類型String、int。愛掏網(wǎng) - it200.com都是用反射去實(shí)現(xiàn)的。愛掏網(wǎng) - it200.com那么&＃xff0c;在小程序中卻比java 簡(jiǎn)單粗暴很多。愛掏網(wǎng) - it200.com具體實(shí)現(xiàn)
for (var propertyName in Person){var name &＃61; propertyName //對(duì)象Person的屬性&＃xff08;String、int&＃xff09;var value &＃61; testInfo[propertyName] // 對(duì)象Person的屬性值(name、age)}
5、export使用
在調(diào)用一個(gè)類中的方法或者屬性值時(shí)&＃xff0c;必須要在被調(diào)用的方法和屬性值&＃xff0c;定義的時(shí)候用export聲明
6、disableScroll使用
問(wèn)題描述&＃xff1a; 有時(shí)候&＃xff0c;小程序跑在蘋果手機(jī)上時(shí)&＃xff0c;會(huì)左右滑動(dòng)退出&＃xff0c;也會(huì)上下滑動(dòng)&＃xff0c;這樣體驗(yàn)不好。愛掏網(wǎng) - it200.com這個(gè)時(shí)候要禁止滑動(dòng)。愛掏網(wǎng) - it200.com
在app.json中&＃xff0c;將disableScroll值設(shè)置為true 就可以了&＃xff1a;"window": {"disableScroll": true}
7、頁(yè)面page數(shù)據(jù)的獲取與設(shè)置
let pages &＃61; getCurrentPages()let curPage &＃61; pages[pages.length - 1] //獲取當(dāng)前頁(yè)面if (curPage.route &＃61;&＃61; url){ //比較獲取的頁(yè)面的url是否跟實(shí)際的一致(如url:"pages/order/order")curPage.setData({ //設(shè)置數(shù)據(jù)usingOrderList: usingOrderList})}
8、獲取所有的頁(yè)面
let pages &＃61; getCurrentPages()// 獲取上一個(gè)頁(yè)面let prePage &＃61; pages[pages.length - 2]//給頁(yè)面設(shè)置數(shù)據(jù)prePage.setData({refreshUserInfo:true})//返回到上一個(gè)頁(yè)面wx.navigateBack({delta: 1})
注意事項(xiàng)&＃xff1a; 調(diào)用getCurrentPages()不需要在page環(huán)境中(可以視為Android中的Context環(huán)境)&＃xff0c;可以在任何地方直接獲取&＃xff0c;即util等自定義類中同樣生效。愛掏網(wǎng) - it200.com類似的還有wx.開頭的方法
9、showToast時(shí)長(zhǎng)設(shè)置失效問(wèn)題
let title &＃61; new String(msg)//延時(shí)彈toast,是為了解決有時(shí)候在接口請(qǐng)求后&＃xff0c;設(shè)置的duration時(shí)間不起作用setTimeout(function () {wx.showToast({title: title,duration: 1200,icon: "none"})}, 100)
10、reLaunch跳轉(zhuǎn)失效問(wèn)題
//延時(shí)跳轉(zhuǎn),是為了解決有時(shí)候wx.reLaunch不起作用&＃xff0c;設(shè)置的時(shí)間不起作用setTimeout(function(){wx.reLaunch({url: &＃39;/pages/home/home&＃39;})},100)
以上對(duì)于小白相信是很實(shí)用的一些知識(shí)。愛掏網(wǎng) - it200.com下一篇繼續(xù)講解關(guān)于小程序中&＃xff0c;代碼冗余、解耦的問(wèn)題分析&＃xff0c;以及解決策略。愛掏網(wǎng) - it200.com
轉(zhuǎn):https://juejin.im/post/5b9cce5e5188255c304fe14d