# 开发 \| 掌握这 7 个要点，iOS 开发者也能快速入门小程序

- 作者：知晓程序
- 发布时间：2017-03-08 12:30
- 原文：https://www.ifanr.com/minapp/797727

![](https://s3.ifanr.com/wp-content/uploads/2017/03/Featured-6.jpg)

文 \| Lefe

对于一名 iOS 开发者来说，微信小程序的出现，会让我们感觉到些许的不安。

但接触一段时间后，我发现，其实并不是想象中的那样。微信小程序不可能替代原生 app，也没有绝对的优势战胜原生 app。

不过，微信小程序固然有它的好处，比如我们需要用到的那些不常用的服务。对于小企业来说，可以更便捷地宣传他们的服务，或是给顾客一个更好的线下体验。

那么对于一个 iOS 开发的成员来说开发小程序会有哪些挑战呢？

### 回顾 iOS 开发过程

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

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

### 小程序开发流程

**小程序的开发流程，完全可以按照开发一个原生 app 的流程进行**，我也是按照这个流程入门小程序的。总体感觉没那么复杂，只要你静下心来仔细的去研究，那对你来说，开发一款微信小程序是很容易的。#### **1. 开发工具**

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

对于 iOS 开发者来说，UI 布局可以使用坐标（Frame）来直接布局一个视图，也可以使用自动布局。**对于微信小程序开发，建议使用 Flexbox 布局。**这是一种不一样的布局方式。Flexbox 布局，也叫弹性布局，是 CSS3 提出的一种布局解决方案。说到布局时，必须说明一下 RPX。

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

关注知晓程序（微信号 zxcx0101），回复「rpx」，一篇文章带你看懂 RPX。

利用 Flexbox，只需要几行代码就可以搞定下面这样的布局。关于 Flexbox 布局，这里不做更多的解释。有兴趣的同学可以找相关资料。![](https://s3.ifanr.com/wp-content/uploads/2017/03/ios-to-minapp-2.jpg)

**WXML 文件：**

```
<!-- class='xxx',xxx样式，如同CSS样式 -->
<span class="hljs-tag"><<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex-container"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"children1"</span>></span><span class="hljs-tag"></<span class="hljs-title">view</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"children2"</span>></span><span class="hljs-tag"></<span class="hljs-title">view</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"children3"</span>></span><span class="hljs-tag"></<span class="hljs-title">view</span>></span>
<span class="hljs-tag"></<span class="hljs-title">view</span>></span>


```



**WXSS 文件：**

```
.flex-container {
    height: <span class="hljs-number">200</span>rpx; <span class="hljs-comment">/* 注意单位 rpx，当然px也可以 */</span>
    display: flex; <span class="hljs-comment">/* 设置这个属性后，表示为Flexbox布局 */</span>
    flex-direction: row; <span class="hljs-comment">/* 布局方向为行 */</span>
    justify-content: space-around; <span class="hljs-comment">/* X轴的对齐方式 */</span>
    align-items: center; <span class="hljs-comment">/* Y轴的对齐方式 */</span>
    background-color: lightblue;
}
.children1 {
    height: <span class="hljs-number">100</span>rpx;
    width: <span class="hljs-number">100</span>rpx;
    background-color: red;
}
.children2 {
    width: <span class="hljs-number">100</span>rpx;
    height: <span class="hljs-number">100</span>rpx;
    background-color: yellow;
}
.children3 {
    width: <span class="hljs-number">100</span>rpx;
    height: <span class="hljs-number">100</span>rpx;
    background-color: purple;
}
```



#### **3. 微信小程序没有 `UITableView`：**

如果想做一个列表，只能用 `scroll-view`。但它特别好用，**我们只需要把你创建的视图添加到 `scroll-view` 标签中即可**，你甚至不需要计算子视图的高度。

比如，我们做一个类似这样的图文混排的页面。

![](https://s3.ifanr.com/wp-content/uploads/2017/03/ios-to-minapp-1.jpg)

对于这个页面，Obj-C 下会如何实现呢？这一点已经够 iOS 开发者想半天了。看看小程序的实现吧，看完后，你绝对有想学小程序的冲动，而且它的流畅度也不亚于原生应用，只是第一次进入时稍微慢点。直接上代码：**WXML 文件：**

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

```



**WXSS 文件：**

```
.promise-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}
.promise-title-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
    margin-top: 40rpx;
    margin-<span class="hljs-keyword">left</span>: 16rpx;
    margin-<span class="hljs-keyword">right</span>: 40rpx;
    margin-bottom: 40rpx;
}
.promise-title-line {
    height: 1rpx;
    background-color: #<span class="hljs-type">FF4642</span>;
    margin-top: 6rpx;
    width: 177rpx;
}
.promise-title {
    font-size: 44rpx;
}
.promise-content {
    margin-top: 0rpx;
    margin-<span class="hljs-keyword">left</span>: 16rpx;
    margin-<span class="hljs-keyword">right</span>: 16rpx;
    font-size: 32rpx;
    color: #<span class="hljs-number">505050</span>;
    line-height: 40rpx;
}
.good-image {
    margin-top: 8rpx;
    margin-bottom: 8rpx;
}
.good-content {
    margin-top: 8rpx;
    margin-<span class="hljs-keyword">left</span>: 16rpx;
    margin-<span class="hljs-keyword">right</span>: 16rpx;
    font-size: 32rpx;
    color: #<span class="hljs-number">505050</span>;
    line-height: 40rpx;
}

```



看到了吗，就需要这么几行代码，**而且图片也会自动加载、自动等比缩放**。是不是觉得很简单呢？通过以上的例子，相信读者朋友已经大体上明白了 FlexBox 布局的基本逻辑。对于 UI 布局来说，微信小程序的思想值得我们借鉴，主要有以下几点：**各个文件分工明确：**WXML 负责页面的布局，也就是布局文件。

WXSS 负责每个视图的样式，比如字体大小等样式。

JS 监听并处理小程序的生命周期函数、声明全局变量，数据都在这里。

**布局简单：**创建界面的时候，微信小程序更加简单，而且会自动适配屏幕。不过，建议使用 RPX 为单位。**系统提供了常用的控件：**系统提供了我们常用的控件，这样，搭建界面的时候会省很多事。既然布局这么简单，iOS 方面会不会也有这中布局方式？果不其然，我找到了 Yoga。它是 Facebook 实现的一个库，有兴趣的读者可以研究一下。

#### **4. 网络层**

对于 iOS 开发来说，网络层的设计绝对是很重要的一部分，网络层设计的好会直接关系到应用的好坏，还有将来的维护成本。不过好在，有一些优秀的三方库，帮我们解决了很多问题，比如 AFNetworking，YTKNetwork 就是基于 AFNetworking 的封装。为了降低开发难度，**微信小程序已经为我们做了网络层的封装**，但网络访问必须通过 HTTPS 协议。调试环境下，HTTP 协议也可以请求成功，但会有警告。以下是我写的一个网络请求：

```
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">network</span><span class="hljs-params">(baseUrl, api, params,  callback)</span></span>{
    <span class="hljs-keyword">var</span> requestUrl = covertUrl(baseUrl, api);
    wx.request({
      url: requestUrl,
      data: params,
      method: <span class="hljs-string">'GET'</span>, 
      header: {
      <span class="hljs-string">'content-type'</span>: <span class="hljs-string">'application/json'</span>
      },
      success: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(res)</span></span>{
        <span class="hljs-comment">// res.data 网络请求返回的数据</span>
        callback(<span class="hljs-literal">true</span>, res.data);
      },
      fail: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
        <span class="hljs-comment">// fail</span>
        callback(<span class="hljs-literal">false</span>);
      },
      complete: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
        
      }
    })
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">covertUrl</span><span class="hljs-params">(baseUrl, params)</span></span>{
    <span class="hljs-keyword">return</span> baseUrl + params;
}

<span class="hljs-built_in">module</span>.exports = {
    network: network
}

```



#### **5. 页面跳转及传值**

iOS 中，页面跳转常用的函数有 UINavigationController 与 Modal 形式跳转。

而在小程序当中，我们使用官方提供的接口进行页面跳转。

以 wx.navigateTo(OBJECT) 为例来说明。url 是要跳转到页面的路径，name 是给下一个页面传递的数据。

这样做，就如同 iOS 中的 Push。相信有 iOS 的基础的人，理解这个概念是很容易的。

```
bindMenu: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(event)</span></span>{
   wx.navigateTo({
     url: '<span class="hljs-string">category?name=<span class="hljs-subst">${event.currentTarget.dataset.name}'</span></span>
   })
}

```



#### **6. 事件**

iOS 中，可以为视图添加一个事件，比如点击事件。而小程序中，也可以给视图添加事件，而且可以携带一些参数。在这里，引用微信官方的一段话：

> - 事件是视图层到逻辑层的通讯方式。
> - 事件可以将用户的行为反馈到逻辑层进行处理。
> - 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
> - 事件对象可以携带额外信息，如 id, dataset, touches。

`bindtap` 后的 `bindMen` `u` 为视图绑定的事件名，`data-name` 中的 `name` 为事件传递的参数。

```
<span class="hljs-tag"><<span class="hljs-title">view</span> <span class="hljs-attribute">bindtap</span>=<span class="hljs-value">"bindMenu"</span> <span class="hljs-attribute">data-name</span>=<span class="hljs-value">""</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">image</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">""</span>/></span>
<span class="hljs-tag"></<span class="hljs-title">view</span>></span>

```



我们只需要在 `.js` 文件中实现函数：

```
 bindMenu: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(event)</span></span>{
   <span class="hljs-keyword">var</span> name = event.currentTarget.dataset.name;
 },

```



这样就形成了一个绑定，点击事件后直接把数据传递到了 `.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% 的秘籍。
- 在微信后台回复任意关键词，还能获得相关小程序推荐，赶紧试试吧！

![zxcx&#95;0208](https://s3.ifanr.com/wp-content/uploads/2017/02/zxcx_0208.png)