来自iOS的微信小程序

从原来的地址

本文由iMetalk团队成员Lefe完成，主要从iOS的角度帮助读者入门小程序。对于一个iOS开发者来说，微信APPlet的出现让我们感到有些不安。乐菲接触了一段时间后发现其实并不是这样。微信小程序无法替代原生app，相对原生app也没有绝对优势。然而，微信小程序当然有它的优势，比如我们需要使用的不常见的服务。对于小企业来说，宣传自己的服务更方便，给客户更好的线下体验。那么对于一个iOS开发者来说，开发小程序有哪些挑战呢？

回顾iOS的开发过程

最基础的iOS开发会有以下流程：

开发工具，Xcode；UI层，页面的构建；网络层，基本网络请求；页面跳转和价值转移；事件；数据层，缓存；

小程序开发流程

APPlet的开发流程完全可以遵循开发一个原生app的流程，而Lefe也是遵循这个流程开始使用APPlet的。整体感觉没有那么复杂。相信只要静下心来仔细研究，开发一个微信小程序是很容易的。

一.发展工具

IOS开发我们使用Xcode进行开发，直接下载安装，创建新项目运行。微信小程序使用官方工具微信Web开发者工具，可以下载安装创建项目。但是创建项目时，需要通过微信授权登录。同样的，创建项目时，微信提供模板，打开项目就可以看到实时预览的效果。然而，这里有一个相当尴尬的问题。预览小程序时不能链接VPN。Lefe建议在打开微信Web开发者工具前关闭VPN，项目运行后再打开VPN。

第二，构建用户界面

对于iOS开发者来说，UI布局可以使用Frame直接布局视图，也可以使用自动布局。对于微信小程序，建议使用Flexbox布局，会给你不同的布局。Flexbox布局，又称柔性布局，是CSS3提出的一种布局解决方案。说到布局，我们必须解释rpx。这种屏幕适配解决方案让我们羡慕(开玩笑)。

rpx的全称是responsive pixel，这是一个由applet本身定义的大小单位，可以根据当前设备屏幕宽度进行自适应。小程序显示，所有设备的屏幕宽度都是750rpx，1rpx表示的实际像素值根据设备的实际屏幕宽度不同而不同。

例如，我们只需要几行代码就可以实现下面的布局，这里就不解释Flexbox的布局了。感兴趣的同学可以找相关资料。

1.简单的弹性框布局：

简单的代码行：wxml文件：

//class='xxx '，xxx样式，就像CSS样式view class=' flex-container ' view class=' children 1 '/view view class=' children 2 '/view class=' children 3 '/view/view