文 | Lefe
对于一名 iOS 开发者来说，微信小程序的出现，会让我们感觉到些许的不安。
但接触一段时间后，我发现，其实并不是想象中的那样。微信小程序不可能替代原生 app，也没有绝对的优势战胜原生 app。
不过，微信小程序固然有它的好处，比如我们需要用到的那些不常用的服务。对于小企业来说，小程序可以让他们更便捷地宣传他们的服务，或是给顾客一个更好的线下体验。
那么对于一个 iOS 开发的成员来说，开发小程序会有哪些挑战呢？
回顾 iOS 开发过程
最基本的 iOS 开发，大致会有以下流程:
- 开发工具，Xcode
- UI 层，页面的搭建
- 网络层，基本的网络请求
- 页面跳转及传值
- 事件
- 数据层，缓存
小程序开发流程
小程序的开发流程，完全可以按照开发一个原生 app 的流程进行，我也是按照这个流程入门小程序的。
总体感觉没那么复杂，只要你静下心来仔细的去研究，那对你来说，开发一款微信小程序是很容易的。
1. 开发工具
我们使用 Xcode 进行 iOS 开发，下载直接安装，新建一个项目，即可运行。
微信小程序使用官方提供的微信 Web 开发者工具，下载安装后即可创建项目。但创建项目时，需要微信授权登录。
同样，创建项目的时候微信提供了一个模板，打开项目即可看到实时预览的效果。不过这里有一个比较坑的问题是，启动开发者工具时，不能链接 V**。
我建议，打开微信 Web 开发者工具前，先主动关闭 V**，等项目启动后再打开。
2. 搭建 UI 界面
对于 iOS 开发者来说，UI 布局可以使用坐标（Frame）来直接布局一个视图，也可以使用自动布局。
对于微信小程序开发，建议使用 Flexbox 布局。这是一种不一样的布局方式。
Flexbox 布局，也叫弹性布局，是 CSS3 提出的一种布局解决方案。
说到布局时，必须说明一下 RPX。
RPX 的全称是 responsive pixel，它是小程序自己定义的一个尺寸单位，可以根据当前设备屏幕宽度进行自适应。
小程序中规定，所有的设备屏幕宽度都为 750 rpx，根据设备屏幕实际宽度的不同，1 rpx 所代表的实际像素值也不一样。
关注知晓程序（微信号 zxcx0101），回复「rpx」，一篇文章带你看懂 RPX。
利用 Flexbox，只需要几行代码就可以搞定下面这样的布局。
关于 Flexbox 布局，这里不做更多的解释。有兴趣的同学可以找相关资料。
WXML 文件：
WXSS 文件：
3. 微信小程序没有 UITableView：
如果想做一个列表，只能用 scroll-view。但它特别好用，我们只需要把你创建的视图添加到 scroll-view 标签中即可，你甚至不需要计算子视图的高度。
比如，我们做一个类似这样的图文混排的页面。
对于这个页面，Obj-C 下会如何实现呢？这一点已经够 iOS 开发者想半天了。
看看小程序的实现吧，看完后，你绝对有想学小程序的冲动，而且它的流畅度也不亚于原生应用，只是第一次进入时稍微慢点。
直接上代码：
WXML 文件：
WXSS 文件：
看到了吗，就需要这么几行代码，而且图片也会自动加载、自动等比缩放。是不是觉得很简单呢？
通过以上的例子，相信读者朋友已经大体上明白了 FlexBox 布局的基本逻辑。
对于 UI 布局来说，微信小程序的思想值得我们借鉴，主要有以下几点：
各个文件分工明确：WXML 负责页面的布局，也就是布局文件。
WXSS 负责每个视图的样式，比如字体大小等样式。
JS 监听并处理小程序的生命周期函数、声明全局变量，数据都在这里。
布局简单：创建界面的时候，微信小程序更加简单，而且会自动适配屏幕。不过，建议使用 RPX 为单位。
系统提供了常用的控件：系统提供了我们常用的控件，这样，搭建界面的时候会省很多事。
既然布局这么简单，iOS 方面会不会也有这中布局方式？果不其然，我找到了 Yoga。它是 Facebook 实现的一个库，有兴趣的读者可以研究一下。
4. 网络层
对于 iOS 开发来说，网络层的设计绝对是很重要的一部分，网络层设计的好会直接关系到应用的好坏，还有将来的维护成本。
不过好在，有一些优秀的三方库，帮我们解决了很多问题，比如 AFNetworking，YTKNetwork 就是基于 AFNetworking 的封装。
为了降低开发难度，微信小程序已经为我们做了网络层的封装，但网络访问必须通过 HTTPS 协议。调试环境下，HTTP 协议也可以请求成功，但会有警告。
以下是我写的一个网络请求：
5. 页面跳转及传值
iOS 中，页面跳转常用的函数有 UINavigationController 与 Modal 形式跳转。
而在小程序当中，我们使用官方提供的接口进行页面跳转。
以 wx.navigateTo(OBJECT) 为例来说明。url 是要跳转到页面的路径，name 是给下一个页面传递的数据。
这样做，就如同 iOS 中的 Push。相信有 iOS 的基础的人，理解这个概念是很容易的。
6. 事件
iOS 中，可以为视图添加一个事件，比如点击事件。而小程序中，也可以给视图添加事件，而且可以携带一些参数。
在这里，引用微信官方的一段话：
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息，如
id、dataset、touches。
bindtap 后的 bindMenu 为视图绑定的事件名，data-name 中的 name 为事件传递的参数。
我们只需要在 .js 文件中实现函数：
这样就形成了一个绑定，点击事件后直接把数据传递到了 .js 文件中，这样大大降低了耦合度。
想想看，iOS 中如何实施这样的实现呢？
7. 数据层、缓存
iOS 中，我们可以使用 Sqlite、Realm、NSUserDefault 等，对数据做缓存处理。而小程序中，我们使用 Storage 接口，对数据做缓存处理。
每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync），对本地缓存进行设置、获取和清理。本地缓存最大为10MB。
总结
这篇文章，主要是为了帮助读者了解小程序的开发过程。
小程序的开发过程，大体上与 iOS 的开发过程上一致。当然如果你有 RN 或者前端开发经验，学习小程序会更容易。
那么移动端开发者，如何学习小程序开发呢？我建议读者，先学习一下 JavaScript、CSS 和 HTML。
有任何疑问，欢迎在评论区中提出来。
原文地址：http://suo.im/1tdvpY
本文由知晓程序授权转载，关注微信号 zxcx0101，可获得以下内容和服务：
- 在微信后台回复「效率」，获取让小程序开发效率提升 100% 的秘籍。
- 在微信后台回复任意关键词，还能获得相关小程序推荐，赶紧试试吧！
