开发 | 掌握这 7 个要点，iOS 开发者也能快速入门小程序
文 | Lefe
对于一名 iOS 开发者来说，微信小程序的出现，会让我们感觉到些许的不安。
但接触一段时间后，我发现，其实并不是想象中的那样。微信小程序不可能替代原生 app，也没有绝对的优势战胜原生 app。
不过，微信小程序固然有它的好处，比如我们需要用到的那些不常用的服务。对于小企业来说，可以更便捷地宣传他们的服务，或是给顾客一个更好的线下体验。
那么对于一个 iOS 开发的成员来说开发小程序会有哪些挑战呢？
回顾 iOS 开发过程
最基本的 iOS 开发，大致会有以下流程:
- 开发工具，Xcode
- UI 层，页面的搭建
- 网络层，基本的网络请求
- 页面跳转及传值
- 事件
- 数据层，缓存
小程序开发流程
1. 开发工具
2. 搭建 UI 界面
RPX 的全称是 responsive pixel，它是小程序自己定义的一个尺寸单位，可以根据当前设备屏幕宽度进行自适应。
小程序中规定，所有的设备屏幕宽度都为 750 rpx，根据设备屏幕实际宽度的不同，1 rpx 所代表的实际像素值也不一样。
关注知晓程序（微信号 zxcx0101），回复「rpx」，一篇文章带你看懂 RPX。
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;
}
3. 微信小程序没有 UITableView：
如果想做一个列表，只能用 scroll-view。但它特别好用，我们只需要把你创建的视图添加到 scroll-view 标签中即可，你甚至不需要计算子视图的高度。
比如，我们做一个类似这样的图文混排的页面。
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="" class="promise-container">
<image src="" class="good-image"></image>
</view>
<view wx:if="" class="promise-container">
<text class="good-content"></text>
</view>
</block>
</view>
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-left: 16rpx;
margin-right: 40rpx;
margin-bottom: 40rpx;
}
.promise-title-line {
height: 1rpx;
background-color: #FF4642;
margin-top: 6rpx;
width: 177rpx;
}
.promise-title {
font-size: 44rpx;
}
.promise-content {
margin-top: 0rpx;
margin-left: 16rpx;
margin-right: 16rpx;
font-size: 32rpx;
color: #505050;
line-height: 40rpx;
}
.good-image {
margin-top: 8rpx;
margin-bottom: 8rpx;
}
.good-content {
margin-top: 8rpx;
margin-left: 16rpx;
margin-right: 16rpx;
font-size: 32rpx;
color: #505050;
line-height: 40rpx;
}
各个文件分工明确：WXML 负责页面的布局，也就是布局文件。
WXSS 负责每个视图的样式，比如字体大小等样式。
JS 监听并处理小程序的生命周期函数、声明全局变量，数据都在这里。
既然布局这么简单，iOS 方面会不会也有这中布局方式？果不其然，我找到了 Yoga。它是 Facebook 实现的一个库，有兴趣的读者可以研究一下。
4. 网络层
以下是我写的一个网络请求：
function network(baseUrl, api, params, callback){
var requestUrl = covertUrl(baseUrl, api);
wx.request({
url: requestUrl,
data: params,
method: 'GET',
header: {
'content-type': 'application/json'
},
success: function(res){
// res.data 网络请求返回的数据
callback(true, res.data);
},
fail: function() {
// fail
callback(false);
},
complete: function() {
}
})
}
function covertUrl(baseUrl, params){
return baseUrl + params;
}
module.exports = {
network: network
}
5. 页面跳转及传值
iOS 中，页面跳转常用的函数有 UINavigationController 与 Modal 形式跳转。
而在小程序当中，我们使用官方提供的接口进行页面跳转。
以 wx.navigateTo(OBJECT) 为例来说明。url 是要跳转到页面的路径，name 是给下一个页面传递的数据。
这样做，就如同 iOS 中的 Push。相信有 iOS 的基础的人，理解这个概念是很容易的。
bindMenu: function(event){
wx.navigateTo({
url: 'category?name=${event.currentTarget.dataset.name}'
})
}
6. 事件
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息，如 id, dataset, touches。
bindtap 后的 bindMenu 为视图绑定的事件名，data-name 中的 name 为事件传递的参数。
<view bindtap="bindMenu" data-name="">
<image src=""/>
</view>
我们只需要在 .js 文件中实现函数：
bindMenu: function(event){
var name = event.currentTarget.dataset.name;
},
.js 文件中，这样大大降低了耦合度。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% 的秘籍。
- 在微信后台回复任意关键词，还能获得相关小程序推荐，赶紧试试吧！
