關于Android的技術博客好久沒更新了&＃xff0c;為什么呢&＃xff1f;答案是由于公司業務需求&＃xff0c;從一個Android移動端攻城獅轉變成了一個寫小程序的前端攻城獅。愛掏網 - it200.com雖然小程序上手比較容易&＃xff0c;但是&＃xff0c;這個是相對的————前端攻城獅上手比較容易。愛掏網 - it200.com而對于移動端&＃xff0c;那絕對的是nonono~了。愛掏網 - it200.com 相信如果是從Android轉過去的&＃xff0c;會有各種的吐槽。愛掏網 - it200.com不僅僅是語法的規范&＃xff0c;語法簡直弱爆了&＃xff0c;還有編譯器的問題。愛掏網 - it200.com微信web開發工具相對于Android Studio,不管是代碼補全&＃xff0c;還是快捷鍵、插件的使用&＃xff0c;尤其是不能查看源碼&＃xff0c;這就太low了。愛掏網 - it200.com這個時候還是特別感謝自己是一個Android攻城獅了。愛掏網 - it200.com吐槽部分就此告一段落&＃xff0c;接下來我將會從一個初學者的身份&＃xff0c;當然&＃xff0c;此后的文章不會對小程序的知識點一一都做很細致的介紹&＃xff0c;主要是對比Android的一些思想&＃xff0c;進行一些個人的想法闡述。愛掏網 - it200.com 點擊我查看完整項目

api語法的介紹

一、盒子模型Flex

1、flex-wrap&＃xff1a;

nowrap&＃xff08;默認&＃xff09;&＃xff1a;不換行。愛掏網 - it200.comwrap&＃xff1a;換行&＃xff0c;第一行在上方。愛掏網 - it200.comwrap-reverse&＃xff1a;換行&＃xff0c;第一行在下方。愛掏網 - it200.com


2、justify-content&＃xff1a; 所有子view在父View顯示的位置

flex-start&＃xff08;默認值&＃xff09;&＃xff1a;左對齊
flex-end&＃xff1a;右對齊
center&＃xff1a;居中
*space-between&＃xff1a;兩端對齊&＃xff0c;項目之間的間隔都相等。愛掏網 - it200.com因此這個可以認為是設置權重布局&＃xff0c;每個子View占一份。愛掏網 - it200.com如果子View只有一個&＃xff0c;則等同于flex-start
*space-around&＃xff1a;平均分布在該行上&＃xff0c;兩邊留有一半的間隔空間。愛掏網 - it200.com項目之間的間隔比項目與邊框的間隔大一倍。愛掏網 - it200.com如果&＃xff08;作用在父view上&＃xff09;只有一個子view&＃xff0c;則其實就是讓子View居中對齊


space-between屬性圖形展示&＃xff1a;

3、align-content

內容居中。愛掏網 - it200.com只適用于多行的flex容器&＃xff0c;單行不起作用flex-start&＃xff1a;與交叉軸的起點對齊。愛掏網 - it200.comflex-end&＃xff1a;與交叉軸的終點對齊。愛掏網 - it200.comcenter&＃xff1a;與交叉軸的中點對齊。愛掏網 - it200.comspace-between&＃xff1a;與交叉軸兩端對齊&＃xff0c;軸線之間的間隔平均分布。愛掏網 - it200.comspace-around&＃xff1a;每根軸線兩側的間隔都相等。愛掏網 - it200.com所以&＃xff0c;軸線之間的間隔比軸線與邊框的間隔大一倍。愛掏網 - it200.comstretch&＃xff08;默認值&＃xff09;&＃xff1a;軸線占滿整個交叉軸。愛掏網 - it200.com


4、align-items

讓每個View在父view的對齊方式。愛掏網 - it200.com適用于所有的flex容器。愛掏網 - it200.comflex-start&＃xff1a;交叉軸的起點對齊。愛掏網 - it200.comflex-end&＃xff1a;交叉軸的終點對齊。愛掏網 - it200.comcenter&＃xff1a;交叉軸的中點對齊。愛掏網 - it200.combaseline: 項目的第一行文字的基線對齊。愛掏網 - it200.comstretch&＃xff08;默認值&＃xff09;&＃xff1a;如果項目未設置高度或設為auto&＃xff0c;將占滿整個容器的高度。愛掏網 - it200.com


5、示例

1&＃xff09;讓容器的子View居中顯示在容器&＃xff08;父View&＃xff09;中添加&＃xff1a;display: flex;align-items: center;2&＃xff09;讓一個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相關的api

1、變量

我們知道&＃xff0c;在Java中&＃xff0c;如果是在整個類中需要用到的對象&＃xff0c;我們將在類中聲明為成員變量&＃xff0c;在某個具體方法中有效的聲明為局部變量。愛掏網 - it200.com那么對應的小程序是&＃xff1a;
var&＃xff1a;java中的成員變量
let&＃xff1a;java中局部變量


2、基本數據類型Boolean

var test0 &＃61; "" //falsevar test1 &＃61; "aaaaaaaa" // truevar test2 &＃61; null // falsevar test3 &＃61; 11 // truevar test4 &＃61; 0 // falsevar test5 &＃61; {} // true總結&＃xff1a;這個與java區別還是很大的1&＃xff09;對于數字型(int、float),只要是非0的數字都是true;2)對于字符串(String)&＃xff0c;只有是null、和“”空串才是false&＃xff0c;其他都是false3&＃xff09;對于對象&＃xff0c;除了對象是null才是false&＃xff0c;其他都是true。愛掏網 - it200.com哪怕這個對象是一個空的對象{}


3、函數

&＃xff08;1&＃xff09;函數定義 在page中定義&＃xff1a;

onShow: function (params) {//方法體},


非page中定義&＃xff1a;

function test(params){//方法體
}


總結&＃xff1a; 1.第一種定義必須在最后面要加“,”逗號&＃xff0c;而第二種方式不能加 2.與java不同的是&＃xff0c;函數的參數params不用指定類型&＃xff0c;所以&＃xff0c;理論上調用方法的時候可以傳遞任意類型。愛掏網 - it200.com但是一般不這么做。愛掏網 - it200.com個人認為還是java嚴謹更好&＃xff0c;可讀性強。愛掏網 - it200.com 3.參數params的個數沒有限制

&＃xff08;2&＃xff09;回調函數 1&＃xff09;函數定義

function request(onFail){//調用接口wx.request({success: function (res) { //接口返回數據onFail&＃xff08;res&＃xff09;})}


2&＃xff09;函數調用

wx.cyou.cache.getCacheValue("key_test", function(result){console.log("result&＃61;&＃61;", result)})


&＃xff08;3&＃xff09;注意事項

1&＃xff09;小程序不支持函數的重載和函數的重寫
2)函數調用函數的時候&＃xff0c;函數方法不支持直接傳遞。愛掏網 - it200.com看下面的示例&＃xff1a;


function request1(function1) {request2(function1&＃xff09;}問題&＃xff1a; 這在request1方法調用request2的時候&＃xff0c;參數也是一個函數function1&＃xff0c;直接將function1傳遞給request2是不可以的解決方式&＃xff1a;function request1(function1) {request2(new function{function1()}}&＃xff09;}在request2方法的回調函數中去調用function1方法


4、對象的變量

class Person{String name;int age;
}


在java中&＃xff0c;如果要遍歷獲取Person屬性值name、age&＃xff0c;和屬性類型String、int。愛掏網 - it200.com都是用反射去實現的。愛掏網 - it200.com那么&＃xff0c;在小程序中卻比java 簡單粗暴很多。愛掏網 - it200.com具體實現

for (var propertyName in Person){var name &＃61; propertyName //對象Person的屬性&＃xff08;String、int&＃xff09;var value &＃61; testInfo[propertyName] // 對象Person的屬性值(name、age)}


5、export使用

在調用一個類中的方法或者屬性值時&＃xff0c;必須要在被調用的方法和屬性值&＃xff0c;定義的時候用export聲明

6、disableScroll使用

問題描述&＃xff1a; 有時候&＃xff0c;小程序跑在蘋果手機上時&＃xff0c;會左右滑動退出&＃xff0c;也會上下滑動&＃xff0c;這樣體驗不好。愛掏網 - it200.com這個時候要禁止滑動。愛掏網 - it200.com

在app.json中&＃xff0c;將disableScroll值設置為true 就可以了&＃xff1a;"window": {"disableScroll": true}


7、頁面page數據的獲取與設置

let pages &＃61; getCurrentPages()let curPage &＃61; pages[pages.length - 1] //獲取當前頁面if (curPage.route &＃61;&＃61; url){ //比較獲取的頁面的url是否跟實際的一致(如url:"pages/order/order")curPage.setData({ //設置數據usingOrderList: usingOrderList})}

8、獲取所有的頁面

let pages &＃61; getCurrentPages()// 獲取上一個頁面let prePage &＃61; pages[pages.length - 2]//給頁面設置數據prePage.setData({refreshUserInfo:true})//返回到上一個頁面wx.navigateBack({delta: 1})


注意事項&＃xff1a; 調用getCurrentPages()不需要在page環境中(可以視為Android中的Context環境)&＃xff0c;可以在任何地方直接獲取&＃xff0c;即util等自定義類中同樣生效。愛掏網 - it200.com類似的還有wx.開頭的方法

9、showToast時長設置失效問題

let title &＃61; new String(msg)//延時彈toast,是為了解決有時候在接口請求后&＃xff0c;設置的duration時間不起作用setTimeout(function () {wx.showToast({title: title,duration: 1200,icon: "none"})}, 100)


10、reLaunch跳轉失效問題

//延時跳轉,是為了解決有時候wx.reLaunch不起作用&＃xff0c;設置的時間不起作用setTimeout(function(){wx.reLaunch({url: &＃39;/pages/home/home&＃39;})},100)


以上對于小白相信是很實用的一些知識。愛掏網 - it200.com下一篇繼續講解關于小程序中&＃xff0c;代碼冗余、解耦的問題分析&＃xff0c;以及解決策略。愛掏網 - it200.com

轉:https://juejin.im/post/5b9cce5e5188255c304fe14d