來自原文地址

本文由 iMetalk 團(tuán)隊(duì)的成員 Lefe 完成，主要幫助讀者從iOS的角度入門小程序。 
對于一名iOS開發(fā)者來說，微信小程序的出現(xiàn)，讓我們感覺到些許的不安，Lefe接觸一段時(shí)間后，發(fā)現(xiàn)其實(shí)不然，微信小程序不可能替代原生APP，也沒有絕對的優(yōu)勢戰(zhàn)勝原生APP。不過，微信小程序固然有它的好處，比如我們需要用到的那些不常用的服務(wù)。對于小企業(yè)來說，可以更便捷地宣傳他們的服務(wù)，給顧客一個(gè)更好的線下體驗(yàn)。那么對于一個(gè)iOS開發(fā)的成員來說開發(fā)小程序會(huì)有哪些挑戰(zhàn)呢？

回顧iOS的開發(fā)過程

最基本的iOS開發(fā)，大致會(huì)有以下流程:

• 開發(fā)工具，Xcode；
• UI層，頁面的搭建；
• 網(wǎng)絡(luò)層，基本的網(wǎng)絡(luò)請求；
• 頁面跳轉(zhuǎn)及傳值；
• 事件；
• 數(shù)據(jù)層，緩存；

小程序開發(fā)流程

小程序的開發(fā)流程完全可以按照開發(fā)一個(gè)原生APP的流程，Lefe也是按照這個(gè)流程入門小程序的?？傮w感覺沒那么復(fù)雜，相信只要你靜下心來仔細(xì)的去研究，開發(fā)一款微信小程序是很容易的。

一：開發(fā)工具

iOS開發(fā)我們使用Xcode開發(fā)，下載直接安裝，新建一個(gè)項(xiàng)目，即可運(yùn)行。微信小程序使用官方提供的工具微信Web開發(fā)者工具，下載安裝，即可創(chuàng)建項(xiàng)目，不過創(chuàng)建項(xiàng)目時(shí)需要微信授權(quán)登錄。同樣，創(chuàng)建項(xiàng)目的時(shí)候微信提供了一個(gè)模板，打開項(xiàng)目即可看到實(shí)時(shí)預(yù)覽的效果。不過這里有一個(gè)比較坑的問題是，預(yù)覽小程序時(shí)不能鏈接VPN。Lefe建議打開微信Web開發(fā)者工具前關(guān)閉VPN，等項(xiàng)目運(yùn)行起來后再打開VPN。

二：搭建UI界面

對于iOS開發(fā)者來說，UI布局可以使用坐標(biāo)（Frame）來直接布局一個(gè)視圖，也可以使用自動(dòng)布局。而對于微信小程序來說，建議使用Flexbox布局，它會(huì)給你一種不一樣的布局方式。Flexbox布局，也叫彈性布局，是CSS3提出的一種布局解決方案。說到布局時(shí)，必須說明一下rpx，這種屏幕適配解決方案讓我們羨慕忌妒恨（開玩笑呢）。

rpx的全稱是responsive pixel，它是小程序自己定義的一個(gè)尺寸單位，可以根據(jù)當(dāng)前設(shè)備屏幕寬度進(jìn)行自適應(yīng)。小程序中規(guī)定，所有的設(shè)備屏幕寬度都為750rpx，根據(jù)設(shè)備屏幕實(shí)際寬度的不同，1rpx所代表的實(shí)際像素值也不一樣。

比如我們要實(shí)現(xiàn)以下布局，僅需要不多的幾行代碼就可以搞定，關(guān)于Flexbox布局這里不做更多的解釋。有興趣的同學(xué)可以找相關(guān)資料。

1.簡單的Flexbox布局：

簡單的幾行代碼： 
.wxml文件:

// class='xxx',xxx樣式，如同CSS樣式
<view class="flex-container">
    <view class="children1"></view>
    <view class="children2"></view>
    <view class="children3"></view>
</view>

.wxss文件:

.flex-container {
    height: 200rpx; // 注意單位 rpx，當(dāng)然px也可以
    display: flex; // 設(shè)置這個(gè)屬性后，表示為Flexbox布局
    flex-direction: row; // 布局方向?yàn)樾?
    justify-content: space-around; // X軸的對齊方式
    align-items: center; // Y軸的對齊方式
    background-color: lightblue;
}
.children1 {
    height: 100rpx;
    width: 100rpx;
    background-color: red;
}
.children2 {
    width: 100rpx;
    height: 100rpx;
    background-color: yellow;
}
.children3 {
    width: 100rpx;
    height: 100rpx;
    background-color: purple;
}

2.微信小程序沒有UITableView：

對于這個(gè)頁面，OC會(huì)咋么實(shí)現(xiàn)呢？思考中……，看看小程序的實(shí)現(xiàn)吧，看完后，你絕對有想學(xué)小程序的沖動(dòng)，而且它的流暢度也不亞于原生應(yīng)用，只是第一次進(jìn)入時(shí)稍微慢點(diǎn)。直接上代碼：

.wxml文件:

<view class="promise-container">
    <view class="promise-title-container">
      //goodInfo 是一個(gè)Json，存放數(shù)據(jù)
      <text class="promise-title"></text>
      <view class="promise-title-line"></view>
    </view>
   //相當(dāng)于一個(gè)for循環(huán)
  <block wx:for="">
    //根據(jù)不同類型來渲染圖片還是文字
    <view wx:if=""