技术开发者怎么看微信小程序?值得一试,但……

作者 | 齐修

微信小程序就是一个类似 RN(React Native)的轮子,可以快速开发,有一定的适用场景,但是也有其局限性。

注:该结论是基于微信小程序的示例代码做的解读,可能存在谬误。

早先,看到很多「权威人士」说小程序是 Hybrid 模式。一度怀疑自己之前判断的准确性,担心误导别人,所以额外备注可能存在谬误。

目前来看,这篇文章的判断比大部分博客文章的判断都准确

简单总结下观点:

  • 微信小程序是原生应用,是 React Native 和 Weex 类似的模式。
  • 微信小程序的生态除了官方提供的组件和 API,几乎没有其他的组件。所以部分看上去「复杂」的功能,开发起来真的很复杂。
  • 微信小程序只能在微信中运行。
  • 由于微信的限制,微信小程序的应用场景极度有限。

想知道微信小程序能干什么?对比服务号就知道了

比如订票、航旅信息、ToDo List、天气日历、星座、理财、实时点菜系统等。其核心是:低频但重要的需求

而且,微信不允许分享(导流),不允许链接(导流或广告)。

所以,想要靠微信朋友圈爆发的小机灵被彻底被浇灭了,媒体也不适合微信小程序

微信和微信小程序确实也有一些不够完善的地方:

1. 微信小程序的官方文档写得不完善,很多方面没有覆盖

  • 如何定义一个组件。
  • 无法使用 LESS 或者 SASS 之类的预编译。
  • WXML 没得到主流编辑器的支持,导致开发速度偏慢。

2. 微信小程序的开发工具极不稳定

  • 和 Shadowsocks 等 VPN 冲突。
  • 经常无故卡死。
  • 开发工具和真机表现偶尔会有差异。
  • 有时候代码无故不生效,需要重启才行。
  • 没有类似 HMR 的机制导致经常刷新。
  • 调试工具不好用等等。

3. 微信小程序的生态和问答社区几乎为零

微信的生态为零,导致部分功能开发起来吃力,比如解析富文本。

微信的问答社区就更差了,遇到问题全靠猜,实在找不到办法就重启。

4. 微信小程序的应用场景太受限

这个和微信的一贯保守风格很像,或许以后会慢慢放开,慢慢期待吧。

以上观点是站在一个普通开发者的角度,对微信小程序的看法。相反,从微信角度出发,某些限制和规范的确很有必要

希望大家客观对待微信小程序。

而本文主要针对微信小程序的示例代码进行分析,想告诉大家以下几件事:

  • 微信小程序到底提供了什么?
  • 开发微信小程序方便么?
  • 微信小程序的具体适用场景?

最后,还自作主张地说了点对于微信小程序的个人观点。

微信小程序都提供了什么?

微信小程序主要为我们提供了两部分东西:底层 API 、组件。

不仅如此,微信小程序还引入新的文件格式。

1. 引入了新的文件格式

微信小程序并不是传统意义的 HTML 5 页面,微信定义了新的文件格式,然后对这些文件做编译解析。

所以,微信小程序是原生应用!是基于微信的原生应用!微信正式尝试做一个 OS(操作系统)

微信小程序组件

上图是一个 wx-action-sheet 组件,文件应用了新的后缀。

其中,WXML 功能和 HTML 类似,WXSS 功能和 CSS 类似,JS 包含组件逻辑。这点是不是和 RN/Weex 很像?

2. 微信提供了一套基础组件库

微信为微信小程序提供了一套基础组件库,可以满足开发的基础开发需求,从而实现简单的快速开发。

至于这些基础组件支持多大程度的自定义,以及能否满足实际项目的需求,就留给后续开发者去体验吧。

基础组件库主要分为四类:

  • 控件(controller)主要包括:action-sheet / button / searchbar / modal / navigator / drawer
  • 表单(form)主要包括:checkbox / radio / form / selector / switch / slider / input / label / picker
  • 媒体(media)主要包括:image / audio / video
  • 视图(view)主要包括:progress / toast / scroll-view / text / view / mask / icon / spinner / swiper / slide-tab

嗯,不用介绍大家也都知道这些组件大概是什么功能了,几乎是每个 UI 组件库都必备的。

以后大家应该都基于这个组件库去开发具体的产品。

和 RN/Weex 不同的是,微信小程序多半只能基于微信提供的组件进行个性化封装,而不能基于系统组件进行个性化封装。

原因很简单,因为微信就是一个「系统」

微信是一个「系统」

我们挑一个稍微复杂的 picker 组件示例来分析分析:

是的,所有的标签都是自定义标签,进一步佐证了微信小程序是原生应用。组件使用很简单,所以很适合快速开发。

也很清晰,通过 this.setData 来设置属性,实现 action-sheet 的显示与隐藏切换。React 的感觉,连 API 都很像。

可以重新设置微信小程序的组件样式,和 CSS 很相似,轻量简洁。

3. 底层 API

没有提供底层 API 的基础组件库都是流氓库,有了底层 API 才能开发真正的原生应用,才能做更多丰富的功能。

其中底层 API 包括:

animation / backgronud-audio / canvas / download-file / file / get-location / get-network-type / get-system-info / get-user-info / image / login / navigation-bar-loading / navigator / on-accelerometer-change/ on-compass-change / open-location / pull-down-refresh / request / request-payment / set-navigation-bar-title / storage / upload-file / voice / web-socket

从名字也能看出个大概,小程序提供了比较完整的 API,能够开发更丰富的功能和程序。

我们仍然挑一个稍微复杂点的、图片相关的 API 使用示例来分析分析:

简单清晰 WXML,居然让选择图片及及预览实现起来这么简单。并且,可以通过简单的 template 语法来引入其他 WXML 文件。

因为微信对这个 API 已经封装得很好了,所以使用起来只需要传入几个参数,绑定一下回调函数即可。

同样,样式表语法近似 CSS,从上面的 rpx 单位可以看出,这不是真正的 CSS,我猜测是 CSS 的子集,类似 RN。

开发微信小程序方便么?

1. 微信小程序的开发目录结构

WX 的开发目录结构也很清晰简单。

WX 目录结构

入口文件就是最外层的 app.jsapp.json, app.wxss

  • app.js 提供了入口文件的一些初始化和绑定。
  • app.json 提供了项目的结构和一些项目配置,微信之所以采用 app.json 的模式,声明项目需要加载的页面和组件,应该是为了方便实现云端编译打包然后下发到微信吧。
  • app.wxss 就是样式啦。
  • page 目录放你需要实现具体功能的页面。
  • util 存放项目需要用到的一些工具函数。

2. 微信小程序的部署流程

微信小程序的整个开发与使用流程都在微信的体系中,所以安装和使用应该都很轻量。

微信采用云端编译打包的方式,将编译后的文件发送到微信上,接着,微信内置的解析器会解析并渲染这个文件。

简而言之,微信小程序的开发体验还算流畅,代码可读性也很高,也不需要做太多新的知识储备,但是有硬伤,后文会分析。

微信小程序适合你吗?

这一块就不细讲了,毕竟不是我擅长的,借用三节课的分析,用两张图片告诉你微信小程序的适用场景。

行业区分

微信小程序适合什么

所以,微信小程序更适合用来做低频高需的服务,比如酒店订阅,火车票/机票订阅,招聘,理财等。

总结点什么?

以下代表个人观点,仅供参考,也欢迎讨论。

从产品层面来说,值得一试!

  1. 微信提供了不错的底层 API 以及还算丰富的组件库,让小程序可以快速开发并且拥有原生体验,相对之前的公众号/服务号,体验更好;
  2. 微信流量很大,对于部分中小产品来说,是一次机会;
  3. 一些低频高需产品也许很适合,比如订票,用户打开页面,简单选择,然后微信支付,感觉还挺爽的。

从技术栈来说,我不喜欢!

  1. 微信小程序是基于微信生态的,而这个生态目前太不成熟;
  2. 只能在微信中运行,多半不支持在浏览器或者其他地方运行,也就是说,并没有减少产品的开发成本,反倒是多了一个开发流水线;
  3. 新的语法糖,开发调试环境也不友好,开发者会有阵痛期。

意淫一下,如果微信小程序的技术栈是 RN 而不是造一个轮子,那感觉才爽。

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

原文发表时间:2016-11-15

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

QQ蠕虫的行为检测方法

作者 Nandisec 选题背景 QQ蠕虫是一种利用QQ等腾讯公司相关产品进行传播的一种特殊蠕虫,该蠕虫的基本原理是利用了QQ帐户的快速登录机制,只要当前...

1778
来自专栏微信小程序开发

小程序可以使用公众号的UnionID,再次登录免授权?

前言:微信公众平台在7月26号发文,更新了同一公众平台下的公众号、APP和小程序可以共用UnionID。详细是这样说的: “ 为保证良好的用户体验,方便开发者将...

5097
来自专栏全华班

微信小程序电商源码

https://gitee.com/sansanC/wechatApp?from=wechat_applet

2672
来自专栏小程序

【云加小程序2018年4月】更新日志

1164
来自专栏小詹同学

Python系列之——如何每天跟女朋友说晚安~

文章来源:http://www.cnblogs.com/botoo/p/8622379.html

1172
来自专栏FreeBuf

漏洞科普:对于XSS和CSRF你究竟了解多少

随着Web2.0、社交网络、微博等等一系列新型的互联网产品的诞生,基于Web环境的互联网应用越来越广泛,企业信息化的过程中各种应用都架设在Web平台上,...

1749
来自专栏网络

网站在上线前要做好哪些准备工作?

无论是企业网站还是个人网站,一个网站在正式上线前都有许多事情需要做,只有把以下这些事情做好,才能保证后期的关键词排名,除非有一些简单的宣传网站(只在名片上出现,...

18410
来自专栏安恒信息

安恒紧急漏洞预警: Linux Glibc溢出漏洞凶猛来袭

GNU glibc 标准库的gethostbyname函数爆出缓冲区溢出漏洞,漏洞编号:CVE-2015-0235,该漏洞可以让攻击者直接远程获取操作系统的控制...

3275
来自专栏Youngxj

无名外推蜘蛛池系统服务端1.5破解版| 站群秒收必备|免授权破解版 (未测)

1737
来自专栏Youngxj

emlog媒体范相关文章的修改

1303

扫码关注云+社区