1.  我想大(dà)家做iOS移動端開發去做微信小程序感覺挺新奇的(de)本人(rén)是(shì)這(zhè)個(gè)想法，願意嘗試。這(zhè)段時(shí)間不(bù)是(shì)很忙公司留給時(shí)間學習微信小程序開發。我也(yě)就(jiù)小結一下。我依舊是(shì)菜鳥無法與大(dà)神相提并論，大(dà)神的(de)話不(bù)許要(yào / yāo)看下面可以(yǐ)直接走開。入門前還是(shì)要(yào / yāo)對小程序有所了(le／liǎo)解。微信小程序簡單，快捷，用後即關。我這(zhè)種用戶就(jiù)是(shì)這(zhè)樣，需要(yào / yāo)了(le／liǎo)看下，不(bù)需要(yào / yāo)百年都不(bù)會打開看一眼。

2.  準備工作：

1> 看官方文檔，全都看完了(le／liǎo)解一下。我是(shì)這(zhè)麽搞的(de)。

2> 不(bù)建議直接開發，你畢竟是(shì)iOS開發工程師。你甚至不(bù)懂html就(jiù)不(bù)要(yào / yāo)搞wxml。js、css、及json文件都是(shì)搞啥的(de)。開發前要(yào / yāo)明白這(zhè)些。本人(rén)是(shì)知道(dào)後直接上(shàng)手的(de)。

3> 不(bù)需要(yào / yāo)急因爲(wéi / wèi)沒用，就(jiù)如讓你搞個(gè)即時(shí)通信自做（Websocket）你都不(bù)知道(dào)是(shì)啥搞個(gè)毛，不(bù)推薦直接上(shàng)手，我無法堅持，毛都不(bù)會如何上(shàng)手，這(zhè)看一點那看一點。最後還是(shì)亂套迷糊。走過的(de)坑高速自己還是(shì)一步步來(lái)。很快就(jiù)可以(yǐ)搞得定。搞程序切記眼高手低。本人(rén)還是(shì)回歸根本。我是(shì)一隻小小鳥，隻想跟随大(dà)神們的(de)腳步，一步步走。

4> 如果你公司有個(gè)做前端的(de)，那麽恭喜你。你可以(yǐ)減少一半的(de)學習時(shí)間。我是(shì)比較幸運的(de)。微信小程序開發工具确實不(bù)是(shì)很友善各種字符硬敲，各種标簽，我一搞iOS開發的(de)看見就(jiù)煩，但還是(shì)要(yào / yāo)靜下心。畢竟出(chū)來(lái)沒多長時(shí)間，相信一定會越來(lái)越好。

5> 本人(rén)是(shì)從布局開始搞起的(de)因爲(wéi / wèi)掉過很多坑了(le／liǎo)。統一學習的(de)。慢慢總結，還是(shì)要(yào / yāo)靠一些記憶力的(de)。對于(yú)方法封裝及傳數據，及等等吧，也(yě)大(dà)差不(bù)差。不(bù)過不(bù)要(yào / yāo)再以(yǐ)iOS的(de)寫法标準考慮小程序。完全不(bù)一個(gè)東西。

3. css小結一下：

display:flex; 這(zhè)是(shì)什麽鬼東西呢，

1. flex布局爲(wéi / wèi)默認橫向排列元素

2. flex-direction 決定元素排列方向

3. flex-wrap 決定元素如何換行（數據多的(de)時(shí)候）

nowrap 默認值。規定靈活的(de)項目不(bù)拆行或不(bù)拆列。

wrap  規定靈活的(de)項目在(zài)必要(yào / yāo)的(de)時(shí)候拆行或拆列。

wrap-reverse  規定靈活的(de)項目在(zài)必要(yào / yāo)的(de)時(shí)候拆行或拆列，但是(shì)以(yǐ)相反的(de)順序。

initial 設置該屬性爲(wéi / wèi)它的(de)默認值。請參閱 initial。

inherit 從父元素繼承該屬性。請參閱 inherit。

4.flex-flow

flex-flow: wrap row，編譯運行結果：如圖5所示，flex-flow相當于(yú) flex-direction和(hé / huò) flex-wrap兩個(gè)屬性的(de)組合

5. justify-content:center

:space-between每個(gè)子(zǐ)view左右都有留邊，但是(shì)首尾兩個(gè)view各自左右對齊不(bù)留邊

:space-around---效果如圖8所示，每個(gè)子(zǐ)view左右都有留邊

6.position: relative;  // 相對定位 position: absolute;      // 絕對定位

。。。。。。。。

下面你看到(dào)就(jiù)熟悉了(le／liǎo)哦。開心一下。

1. 尺寸

width: 228rpx;  // 寬度

height: 228rpx; //  高度

min-width:    //最小寬度

max-width:    //最大(dà)寬度

min-height:  //最小高度

max-height:  //最大(dà)高度

...

2. 背景

background-color: darkcyan;  //背景顔色

...

3. 邊框

border-radius: 20%;    //邊框圓角

border-width: 5px;      //邊框寬度

border-color: #ddd;    //邊框顔色

border-style: solid;    //邊框樣式

...

4. 邊距

margin: 20rpx;      //外邊距，邊框距離父級元素的(de)距離

margin: 14rpx 50rpx 30rpx 50rpx;    // 上(shàng)右下左   1px =2rpx

padding: 20rpx;    //内邊距，邊框距離元素的(de)距離

padding: 10rpx 20rpx 30rpx 40rpx;    // 上(shàng)右下左

5. 文本

font-size: 30px;    //字體大(dà)小

這(zhè)隻是(shì)其中一點點哦可見路還很遙遠對吧。沒錯，不(bù)過相信自己一定可以(yǐ)的(de)。本人(rén)以(yǐ)前考空餘時(shí)間搞過java語法，考這(zhè)個(gè)自己還做了(le／liǎo)一個(gè)小賣鋪的(de)系統。哈哈