开发 | 掌握这 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 条评论
登录 后参与评论

相关文章

来自专栏理论坞

UI(用户界面)设计规则和规范

界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。同时界面如同人的面孔,具...

1433
来自专栏IMWeb前端团队

简述tabs react组件的简单实现

在DOM操作时代,tabs的结构一般如下: div.tabs ul.tabs-hd li.hd-tt*n div.tabs-b...

31510
来自专栏我和未来有约会

令人激动的silverlight 3行为(behavior)效果

令人激动的silverlight 3行为(behaviors)效果 Mix09大会带来了很多的惊喜。 看完了http://videos.visitmix.com...

2925
来自专栏ml

JavaWeb学习之环境搭建

 1. HTML(Hyper Text Markup Language) , 超文本标记语言。 HTML文件的后缀名一般是: .htm , .html 表单(f...

2693
来自专栏游戏杂谈

Chrome、FF在swf处理中的问题小记

当时的需求是点击网页装扮的时候会弹出一个层,层内有很多TAB选项卡,而有一个对图片处理的swf(让用户选择一张图片、编辑图片)放在其中一个选项卡中,而当来回切换...

1113
来自专栏小特工作室

WinForm中播放视频示例(含源码)

1背景 这几天一老友要求我做个小软件,在WinForm播放视频.印象中微软有个WM控件直接可以使用,晚上研究下 2实现方式 2.1微软草根 最简单的方式,是...

2046
来自专栏编程

网站代码优化我们必须要做的那些事

想必有很多的SEO小白只知道网站的优化要做内容、用户体验、站外这些优化,非也,代码优化也是很重要的,搜索引擎蜘蛛只能看懂网站的代码,另外网站代码优化的好坏也决定...

1758
来自专栏FD的专栏

前端下半场:构建跨框架的 UI 库

跨框架的 UI 库,即前端 UI 库可以不经任何修改,直接能运行在 React、Angular、Vue 等框架上。

1021
来自专栏ionic3+

【技巧】ionic3视频播放

一般视频的展示方式有两种:缩略图和直接播放,分别对应下面两种效果(可参考直播应用和今日头条视频):

2103
来自专栏练小习的专栏

从前端界面开发谈微信小程序体验

这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程。

16.8K15

扫码关注云+社区