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

文 | 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 布局,这里不做更多的解释。有兴趣的同学可以找相关资料。

WXML 文件:

WXSS 文件:

3. 微信小程序没有 UITableView

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

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

对于这个页面,Obj-C 下会如何实现呢?这一点已经够 iOS 开发者想半天了。

看看小程序的实现吧,看完后,你绝对有想学小程序的冲动,而且它的流畅度也不亚于原生应用,只是第一次进入时稍微慢点。

直接上代码:

WXML 文件:

WXSS 文件:

看到了吗,就需要这么几行代码,而且图片也会自动加载、自动等比缩放。是不是觉得很简单呢?

通过以上的例子,相信读者朋友已经大体上明白了 FlexBox 布局的基本逻辑。

对于 UI 布局来说,微信小程序的思想值得我们借鉴,主要有以下几点:

各个文件分工明确:WXML 负责页面的布局,也就是布局文件。

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

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

布局简单:创建界面的时候,微信小程序更加简单,而且会自动适配屏幕。不过,建议使用 RPX 为单位。

系统提供了常用的控件:系统提供了我们常用的控件,这样,搭建界面的时候会省很多事。

既然布局这么简单,iOS 方面会不会也有这中布局方式?果不其然,我找到了 Yoga。它是 Facebook 实现的一个库,有兴趣的读者可以研究一下。

4. 网络层

对于 iOS 开发来说,网络层的设计绝对是很重要的一部分,网络层设计的好会直接关系到应用的好坏,还有将来的维护成本。

不过好在,有一些优秀的三方库,帮我们解决了很多问题,比如 AFNetworking,YTKNetwork 就是基于 AFNetworking 的封装。

为了降低开发难度,微信小程序已经为我们做了网络层的封装,但网络访问必须通过 HTTPS 协议。调试环境下,HTTP 协议也可以请求成功,但会有警告。

以下是我写的一个网络请求:

5. 页面跳转及传值

iOS 中,页面跳转常用的函数有 UINavigationControllerModal 形式跳转。

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

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

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

6. 事件

iOS 中,可以为视图添加一个事件,比如点击事件。而小程序中,也可以给视图添加事件,而且可以携带一些参数。

在这里,引用微信官方的一段话:

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

bindtap 后的 bindMenu 为视图绑定的事件名,data-name 中的 name 为事件传递的参数。

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

这样就形成了一个绑定,点击事件后直接把数据传递到了 .js 文件中,这样大大降低了耦合度。

想想看,iOS 中如何实施这样的实现呢?

7. 数据层、缓存

iOS 中,我们可以使用 Sqlite、Realm、NSUserDefault 等,对数据做缓存处理。而小程序中,我们使用 Storage 接口,对数据做缓存处理。

每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStoragewx.setStorageSync)、wx.getStoragewx.getStorageSync)、wx.clearStoragewx.clearStorageSync),对本地缓存进行设置、获取和清理。本地缓存最大为10MB。

总结

这篇文章,主要是为了帮助读者了解小程序的开发过程。

小程序的开发过程,大体上与 iOS 的开发过程上一致。当然如果你有 RN 或者前端开发经验,学习小程序会更容易。

那么移动端开发者,如何学习小程序开发呢?我建议读者,先学习一下 JavaScript、CSS 和 HTML。

有任何疑问,欢迎在评论区中提出来。

原文地址:http://suo.im/1tdvpY

本文由知晓程序授权转载,关注微信号 zxcx0101,可获得以下内容和服务:

  • 在微信后台回复「效率」,获取让小程序开发效率提升 100% 的秘籍。
  • 在微信后台回复任意关键词,还能获得相关小程序推荐,赶紧试试吧!

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-03-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cnblogs

【留言板】可编辑输入框操作总结

闲暇之余,用于加深自己对基础的了解,徒手撸了一个留言板:输入框。废话少说,进入正题。简陋的效果如下(下载代码): ? 一、定义需求 可输入文本,以及插入表情。 ...

18510
来自专栏企鹅号快讯

Google版小程序来了 渣浪微博没有广告了

还记得小安之前跟大家说不用下载app,就可以直接在手机上运行的谷歌的黑科技吗?最近它小试牛刀,弄出了一款没有广告、信息流按照时间排列的渣浪微博PWA版。 ? 目...

2496
来自专栏腾讯云商业智能分析团队的专栏

制作地图及常见问题

地图在制作报表中很常见,主要功能是展示区域信息,如展示区域销售信息,用户区域分布情况等。本文介绍一下地图的制作步骤及常见的问题。

1061
来自专栏非著名程序员

强烈推荐:一个简单高效的截图工具

工欲善其事必先利其器,今天我给大家推荐一个非常简单,非常高效,非常好用的截图工具。没办法,我这个人就是看见好东西喜欢和大家一起分享。真心是忍不住要分享一下。 1...

2728
来自专栏开源项目

5 个优秀前端 UI 框架 | 码云周刊第 65 期

1477
来自专栏小程序·云开发官方专栏

关于小程序的基础库

原文链接:https://godbasin.github.io/2018/09/23/wxapp-basic-lib/

942
来自专栏葡萄城控件技术团队

纯前端控件集 WijmoJS 2018V2发布,在React、Vue和Angular中更易用

作为一款纯前端控件集,WijmoJS 秉承“快如闪电,触控优先”的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进。除在全球...

1072
来自专栏IMWeb前端团队

使用HeadlessChrome做单页应用SEO

随着react、vue、angular等前端框架的流行越来越多的web应用变成了单页应用,它们的特点是异步拉取数据在浏览器中渲染出HTML。使用这些框架极大的...

2625
来自专栏程序员的碎碎念

【分享】Vue.js新手入门指南

最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学...

963
来自专栏Youngxj

emlog评论排行榜插件

1973

扫码关注云+社区