用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序初体验

Rolan 2017-12-1 00:26

本周在团队内做了一次分享,主题就是关于小程序的,所以将内容整理成文章,以便大家共同探讨。 一、什么是小程序定义首先我们先来了解一下一度导致业界为之高潮的“小程序”究竟是个什么鬼。 微信小程序是一种全新 ...

本周在团队内做了一次分享,主题就是关于小程序的,所以将内容整理成文章,以便大家共同探讨。

一、什么是小程序

定义

首先我们先来了解一下一度导致业界为之高潮的“小程序”究竟是个什么鬼。

微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

上面是微信官方对小程序的一个定义,再来看一下张小龙对小程序的定义:

张小龙定义
张小龙定义

从字面上看,小程序就是一个基于微信的应用,这种应用无需从应用市场下载安装,通过扫码或搜索的方式便可直接使用,简单来说就是:基于微信,无需安装,触手可及,用完即走。
既然是基于微信,触手可及,在保证方便快捷体验同时便会有一些限制,而这个限制就体现在“小”上面,我们来看一下“小”在哪里:

限制

无法同时打开超过5个窗口

在一个小程序中,用户的页面浏览层级最多为5级,超出后会报错,所以对于电商应用来说,这是个需要重点关注的地方,以豌豆公主为例,我们商品详情页中含有品牌、视频、推荐等模块,用户的浏览路径很容易便超过5级。

代码编译后大小不超过2M

最初时的限制为1M,这就导致我们在写码是需要尽量注意命名,同时图片等资源不要放在本地,以便控制代码包的大小。

DOM节点不超过16000个

这个限制对于一个轻量的应用来说还好,并不太容易触碰。

二、如何上手

前面我们对小程序有了一个基本的了解,接下来看一下,如何快速上手。

因为小程序是基于微信的,所以整套开发、上传、审核、发布流程都有着严格的限制,很像iOS平台的应用开发流程。首先必须到微信的小程序后台去申请账号,流程和申请公众号相似,申请通过会拿到一个APPID,然后需要下载微信开发者工具,通过开发者工具,可以进行开发、调试、编译、上传等各环节的操作。下载后输入APPID,可以快速创建一个项目:

开发者工具
开发者工具

基本的代码结构如下:

小程序代码结构
小程序代码结构

json配置

我们可以看到在项目的根目录有一个 app.json 和 project.config.json,此外在 pages/logs 目录下还有一个 logs.json.其中app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、底部 tab 等。而page目录下的json文件是对独立页面属性的配置。

WXML模板

我们平时的前端开发工作中,接触到较多的是HTML,而在小程序里,充当页面模板角色的便是WXML,与HTML不同的是,WXML是基于基础组件和事件系统构建页面的标签语言,微信提供了一些基础的组件如view、text、button等,同时我们可以在组件上进行事件绑定,如bindtap等。

WXSS

参考WXML,WXSS具有CSS的大部分特性,但同时对CSS进行了扩充和修改,最大的一点不同便是,小程序中的尺寸专用单位——rpx,可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

JS交互逻辑

在小程序中,处理页面事件及业务逻辑的代码都写在js中,同时我们还可以调用微信封装的丰富的API。

三、运行机制

在前面的介绍中,我们发现小程序的代码结构与我们平时前端开发的技术栈(HTML+CSS+JavaScript)十分相似,编码规范基本符合Web规范,本质上也是在Web体系下构建的,那么,我们是否可以理解小程序就是HTML5呢?

答案肯定是否定的,我们来分析下为什么是否定的:首先小程序是运行在微信App中的,而非Browser或者Node环境中,不存在window对象,无法操作DOM,更无法直接访问系统API(可以间接通过微信封装的API访问)。其次,上面代码结构中我们也可以看出WXML,WXSS与HTML和CSS还是有着很大的差别的。所以,小程序与HTML5是两个不同的概念。

运行环境

我们前面说到小程序运行在微信App中,这一点没有错,但不够全面,因为忽略了很重要的一端——微信开发者工具。相信很对同学都知道,微信开发者工具是基于NWjs开发的(Mac系统用户可以通过此路径访问到源码:/Applications/wechatwebdevtools.app/Contents/Resources )这里说一点题外话,这个NW.js是个什么鬼呢?NW.js 是基于 Chromium 和 Node.js 运行的, 以前也叫nodeWebkit,可以通过前端开发技术进行桌面应用的开发,与此相似的还有一个叫做Electron的框架,像我们熟悉的VSCode、Atom便是基于Electron开发的,相比于NW,Electron在社区活跃度、文档维护等多方面都是有较大优势的,此前也在网上有看到大家猜测微信为何没有Electron而选用NW,有人猜测是因为代码安全考虑,有人猜测是因为NW兼容WindowsXP系统,每个理由似乎都有些道理,但我咨询过微信官方人员后,对方表示“乃们都想太多了,采用NW.js最根本的原因是它对调试工具的支持更完备”。

小程序在开发者工具里是通过nwjs+react实现的,node提供本地API支持,webkit提供web环境,这里不做赘述,我们重点研究一下小程序在真机环境中的运行。

在真机中的实现和ReactNative有点相似,但不同的是RN是调用系统原生组件渲染,而小程序依然是在Webview里进行渲染的,绝大部分组件还是会被转成HTML代码进行渲染的,而JS分别在JSCore(iOS)和腾讯浏览器的X5内核(Android)运行我们先来看一下它的架构:

架构
架构

从上图可以看出,小程序的前端架构主要分为两部分:View视图层和App Service逻辑层。顾名思义,View层是进行UI渲染的,将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。AppService层用来逻辑处理、数据请求、接口调用,它们在两个线程里运行,视图层和逻辑层通过系统层的JSBridage进行通信,逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理。View层和逻辑层是通过事件的publish和subscribe机制实现通信的,这一点感兴趣的同学可以看一下WeixinJSBridge对象的封装。

小程序在最后都会打包成这样一个结构:

结构
结构

最上面的WAService.js ,提供逻辑层基础的API能力,WAWebview.js ,提供视图层基础的API能力,WAConsole.js 控制台,app-config.js 是小程序完整的配置,包含我们通过app.json里的所有配置,app-service.js 我们自己的JS代码,全部打包到这个文件,page-frame.html 小程序视图的模板文件,所有的页面都使用此加载渲染,且所有的WXML都拆解为JS实现打包到这里,我们通过开发版微信对小程序进行调试可以看到这样的一个情况:

调试代码
调试代码

小程序的页面最终还是一个html文件,并没有什么不一样的,联想到前面提到的近似原生的操作体验,无非是多了一个页面缓存能力,本质上依然是Webview渲染的网页。看到这里,有些同学不免有些失望,说好的原生组件渲染呢?不要急,我们在文档中还看到了这样一段话

map、canvas、video、textarea 是由客户端创建的原生组件,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。 原生组件暂时还无法放在 scroll-view 上,也无法对原生组件设置 css 动画。

这就不难理解了,常规的view、text等组件最终被转成html的标签进行渲染,但是里面还是提供很多系统的原生组件进行渲染的,证据在这里:

截图
截图

截图
截图

上面截图中的页面包含了个video组件,而这个组件正是调用系统原生组件渲染的,我们在调试代码中无法找到这个节点,因为没有进一步查看这一部分是如何实现的,简单猜想一下是,在Webview上面还会有一个层,从图中可以看出,上滑时视频会盖住fix在顶部的导航,这一层便是用来渲染系统原生组件的,两层叠加在一起,便是我们看到的样子了,这一部分,有兴趣的同学可以再深入一步进行分析研究。

四、当前存在的问题

接触一段时间小程序开发后,还是会发现他的一些不尽如人意的地方,比如,不支持cookie,基于现有的服务端接口开发的话,必须需要自己去模拟一套cookie的实现,我们这边是通过localstorage进行封装的;限于包的大小,WXSS无法使用本地的资源。

五、新能力

新组件

前段时间新增一个酷炫的组件,这一点改进可以说是十分大的,因为此前的小程序仅限于自己程序内页面的跳转,无法访问h5页面,而新增的组件只需在后台配置好信任的域名,便可以轻松实现跳转了,脑补一下,以后是不是只需要把小程序做一个壳子,内嵌入原有的移动端站点,便可以迅速将服务拓展到小程序端了。

通知

常规的h5移动站点一个硬伤便是无法对用户进行触达,小程序这边的一个优势便是微信中的模板消息功能,用户在小程序内触发支付表单提交操作后,可允许开发者向用户在7天内推送有限条数的模板消息,这一点在召回上有很大的意义。
除了上面两点,小程序还支持客服、数据统计等辅助功能。

六、总结

历经两个多月断断续续的开发,豌豆公主的小程序已经发布上线,感兴趣的同学可以体验一下

小程序自面世以来,先是万众期待,后面表现不尽如人意,经历了一段漫长的尴尬期;8月份开始,一些小规模的电商应用从小程序端获取到了可观的流量,同时引起了资本市场的一些关注,可以说发展的道路是曲折的。然而作为技术,作为前端,我觉得小程序的健康发展对整个行业的生态是有很大好处的,给行业以更多可能,给开发者以更多回报(毕竟是基于前端技术栈的),这还不够吗?

以上只是鄙人的一些愚见,还请众大侠指点,一定虚心接受,微信号(xysz1991)

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 壮壮壮 来自: 掘金

相关阅读