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