对于一名iOS开发者来说,微信小程序的出现,让我们感到有些不安。
但用了一段时间之后发现并不是想象中的那样,微信小程序并不能取代原生应用,也不具备比原生应用绝对的优势。
不过微信小程序当然也有它的好处,比如我们需要用到一些不常用的服务,对于小企业来说,小程序可以让他们更方便的推广自己的服务,或者给客户更好的线下体验。
那么对于iOS开发者来说,开发小程序面临哪些挑战?
iOS开发流程回顾
最基本的iOS开发一般有以下流程:
小程序开发流程
小程序的开发流程完全可以按照原生APP的开发流程来进行,我也是按照这个流程开始接触小程序的。
总体感觉不是太复杂,只要静下心来仔细研究一下,开发一个微信小程序还是很简单的。
1.开发工具
我们用它来进行iOS开发,直接下载安装,新建项目,运行就可以了。
微信小程序采用官方微信网页开发者工具,下载安装后即可创建项目,不过创建项目时需要微信授权登录。
同样,在创建项目时,微信提供了模板,打开项目也可以看到实时预览效果。不过这里有一个比较棘手的问题,就是启动开发者工具时无法连接VPN。
我建议你在打开微信网页开发者工具之前关闭VPN,然后在项目启动后重新打开它。
2.构建UI界面
对于iOS开发者来说,UI布局可以使用坐标()直接布局一个视图,或者使用自动布局。
对于微信小程序开发,建议使用,这是一种不一样的布局方式。
布局又叫弹性布局,是CSS3提出的一种布局解决方案。
说到布局,必须解释一下RPX。
RPX的全称是,是小程序自己定义的尺寸单位,可以根据当前设备屏幕宽度进行自适应。
小程序规定所有设备的屏幕宽度都是,1rpx所代表的实际像素值根据设备屏幕实际宽度不同而不同。
关注智晓程旭(微信号)回复“rpx”,即可获取一篇文章,帮助你了解RPX。
使用它,只需几行代码就可以创建如下的布局。
关于布局,这里就不多解释了,有兴趣的同学可以去查找相关资料。
WXML 文件:
WXSS 文件:
3.微信小程序没有:
如果要制作列表的话,只能使用-view。不过使用起来非常方便。我们只需要将你创建的视图添加到-view标签中即可,甚至不需要计算子视图的高度。
例如,我们制作一个像这样混合文本和图像的页面。
这个页面该如何用Obj-C来实现呢?这够iOS开发者思考好久了。
看一下小程序的实现,看完之后你肯定会有学习小程序的冲动,它的流畅度丝毫不亚于原生应用,只是第一次进入的时候会慢一点。
直接上代码:
WXML 文件:
WXSS 文件:
看到了吧?只需要几行代码,图片就会自动加载并按比例缩放。是不是很简单?
通过上面的例子,相信读者已经大致了解了布局的基本逻辑。
对于UI布局,微信小程序的思路值得借鉴,主要有以下几点:
各个文件都有明确的分工:WXML负责页面的布局,也就是布局文件。
WXSS负责各个视图的样式,比如字体大小等。
JS监控和处理小程序的生命周期函数,声明全局变量,所有的数据都存储在这里。
布局简洁:微信小程序在制作界面时比较简洁,会自动适配屏幕,但建议以RPX为单位。
系统提供常用控件:系统提供常用控件,在构建界面的时候省去了很多麻烦。
既然布局这么简单,那iOS 上会不会也有这种布局呢?果然,我找到了 Yoga,就是一个实现它的库,有兴趣的读者可以研究一下。
4.网络层
对于iOS开发来说,网络层的设计绝对是非常重要的一个部分,网络层的设计好不好,会直接影响到应用的质量以及日后的维护成本。
幸运的是,有一些优秀的第三方库可以帮助我们解决很多问题。例如基于封装的。
为了降低开发难度,微信小程序已经帮我们封装好了网络层,但是网络访问必须通过协议,在调试环境下,HTTP协议也能请求成功,但是会有警告。
这是我写的网络请求:
5.页面跳转与值传递
在iOS中,页面跳转常用的函数有er和表单跳转。
在小程序中,我们使用官方的接口来跳转页面。
以wx.()为例,url是要跳转到的页面的路径,name是传递给下一个页面的数据。
这样做就如同iOS中的Push一样。我相信对iOS有基本了解的人会很容易理解这个概念。
6. 活动
在iOS中,你可以给视图添加事件,比如点击事件。在小程序中,你也可以给视图添加事件,还可以添加一些参数。
这里我引用微信官方的一段话:
下面是视图绑定的事件名,data-name中的名字是事件传递的参数。
我们只需要在.js文件中实现该函数即可:
这样就形成了一个绑定,点击事件之后数据就直接传递给.js文件了,大大降低了耦合度。
仔细想想,在 iOS 中如何实现这样的实现?
7.数据层、缓存
在iOS中我们可以使用、、等来缓存数据,在小程序中我们是通过接口来缓存数据的。
每个微信小程序可以拥有自己的本地缓存,可以通过 wx.(wx.)、wx.(wx.)、wx.(wx.) 设置、获取和清除本地缓存,本地缓存最大为 10MB。
总结
本文主要是为了帮助读者了解小程序的开发流程。
小程序的开发流程大体和iOS一致,当然如果你有RN或者前端开发经验的话,学习小程序会更加容易。
那么移动开发者如何学习小程序开发呢?我建议读者先学习 、CSS 和 HTML。
如果您有任何疑问,请随时在评论部分提问。