来自原文地址

本文由 iMetalk 团队的成员 Lefe 完成，主要帮助读者从iOS的角度入门小程序。 
对于一名iOS开发者来说，微信小程序的出现，让我们感觉到些许的不安，Lefe接触一段时间后，发现其实不然，微信小程序不可能替代原生APP，也没有绝对的优势战胜原生APP。不过，微信小程序固然有它的好处，比如我们需要用到的那些不常用的服务。对于小企业来说，可以更便捷地宣传他们的服务，给顾客一个更好的线下体验。那么对于一个iOS开发的成员来说开发小程序会有哪些挑战呢？

回顾iOS的开发过程

最基本的iOS开发，大致会有以下流程:

• 开发工具，Xcode；
• UI层，页面的搭建；
• 网络层，基本的网络请求；
• 页面跳转及传值；
• 事件；
• 数据层，缓存；

小程序开发流程

小程序的开发流程完全可以按照开发一个原生APP的流程，Lefe也是按照这个流程入门小程序的。总体感觉没那么复杂，相信只要你静下心来仔细的去研究，开发一款微信小程序是很容易的。

一：开发工具

iOS开发我们使用Xcode开发，下载直接安装，新建一个项目，即可运行。微信小程序使用官方提供的工具微信Web开发者工具，下载安装，即可创建项目，不过创建项目时需要微信授权登录。同样，创建项目的时候微信提供了一个模板，打开项目即可看到实时预览的效果。不过这里有一个比较坑的问题是，预览小程序时不能链接VPN。Lefe建议打开微信Web开发者工具前关闭VPN，等项目运行起来后再打开VPN。

二：搭建UI界面

对于iOS开发者来说，UI布局可以使用坐标（Frame）来直接布局一个视图，也可以使用自动布局。而对于微信小程序来说，建议使用Flexbox布局，它会给你一种不一样的布局方式。Flexbox布局，也叫弹性布局，是CSS3提出的一种布局解决方案。说到布局时，必须说明一下rpx，这种屏幕适配解决方案让我们羡慕忌妒恨（开玩笑呢）。

rpx的全称是responsive pixel，它是小程序自己定义的一个尺寸单位，可以根据当前设备屏幕宽度进行自适应。小程序中规定，所有的设备屏幕宽度都为750rpx，根据设备屏幕实际宽度的不同，1rpx所代表的实际像素值也不一样。

比如我们要实现以下布局，仅需要不多的几行代码就可以搞定，关于Flexbox布局这里不做更多的解释。有兴趣的同学可以找相关资料。

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，当然px也可以
    display: flex; // 设置这个属性后，表示为Flexbox布局
    flex-direction: row; // 布局方向为行
    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：

对于这个页面，OC会咋么实现呢？思考中……，看看小程序的实现吧，看完后，你绝对有想学小程序的冲动，而且它的流畅度也不亚于原生应用，只是第一次进入时稍微慢点。直接上代码：

.wxml文件:

<view class="promise-container">
    <view class="promise-title-container">
      //goodInfo 是一个Json，存放数据
      <text class="promise-title"></text>
      <view class="promise-title-line"></view>
    </view>
   //相当于一个for循环
  <block wx:for="">
    //根据不同类型来渲染图片还是文字
    <view wx:if=""