张春成

V2

2022/05/03阅读:22主题:默认主题

小程序开发记录

小程序开发记录

微信小程序是基于微信的独特交互方式,

小程序简介

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

鉴于微信生态在中国的巨大体量,可以这样说,它是任何工作走向大众、走向互联网的不可或缺的一环。

本文是这样一个记录,是我这样一个互联网门外汉,试图了解其开发方式所做的一些尝试和分享。恰恰是因为我对这个领域什么不都懂,所以可能会闹一些笑话,写出一些不太专业的描述,不是用各种专业名词,而是用自己的语言和逻辑对其中涉及的概念进行一定程度的抽象和归并。

当然,我还是希望最终呈现出来的逻辑是简明和自洽的,并且希望对读者您是有些用的。


网页视图

如果你够细心、或者够无聊,一定会在各种操作系统、各种APP的描述中看到这样一个概念

Web view

它就是网页视图。简单来说,打开手机,你看到的几乎一切互联网内容都是可以称作 Web view。

  • 有基于安卓的
 7.5.1 WebView(网页视图)基本用法 | 菜鸟教程 (runoob.com)
7.5.1 WebView(网页视图)基本用法 | 菜鸟教程 (runoob.com)

7.5.1 WebView(网页视图)基本用法 | 菜鸟教程 (runoob.com)

  • 有基于微软浏览器的
Introduction to Microsoft Edge WebView2 - Microsoft Edge Development | Microsoft Docs
Introduction to Microsoft Edge WebView2 - Microsoft Edge Development | Microsoft Docs

Introduction to Microsoft Edge WebView2 - Microsoft Edge Development | Microsoft Docs

  • 有基于 iOS 的
Web Views - Views - iOS - Human Interface Guidelines - Apple Developer
Web Views - Views - iOS - Human Interface Guidelines - Apple Developer

Web Views - Views - iOS - Human Interface Guidelines - Apple Developer

  • 当然还有涉及小程序的
小程序简介 | 微信开放文档 (qq.com)
小程序简介 | 微信开放文档 (qq.com)

小程序简介 | 微信开放文档 (qq.com)

那么 Web view 是什么呢?好像并没有人给它下合适的定义。但是这种概念的缺失并不妨碍我们理解这个东西。因为你可以随便找一台电脑,打开随便一个网页,然后按下 F12 键。你的网页会变小,然后空出来的区域会显示这样的一个东西

Web view example-1
Web view example-1

Web view example-1

这就是 Web view 中的一个 view。当然,这不是个俏皮话。因为你打开里面的每一个 body,每一个 div,每一个 textarea,或类似的许多东西。你会发现,这些东西与网页上的“内容”是一一对应的。也就是说,你刚才看到的网页是一个 view,这些一行一行的代码是另一个 view,但这两个 view 其实是一个“东西”的两种表达方式。这个“东西”就是内容。

这个内容是从哪来的?是你(用户)从内容提供者(网络服务器,简称服务器)上请求的,由服务器进行加工后得到内容对象。内容对象通过路由返回用户处进行解析,得到了你看到的内容条目。

也就是说,服务器返回的原始内容经过初步加工后,形成了诸如 body、div、textarea 的内容条目。这些内容条目再经过操作系统、浏览器或特定软件进行二次加工,按照人类阅读习惯呈现成网页的形式

这也是浏览互联网内容的一般过程。这时立即产生了一个问题,既然流程如此的标准,那么为什么会有如此多的 Web view 种类呢?

这是因为各个互联网巨头都有自己的 Web view 标准

百家争鸣

那么,什么叫做自己的 Web view 标准呢?我们首先来看一个例子。这个例子是一个设置,它要把要呈现的内容旋转 30 度。

transform:rotate(30deg);     //w3c统一标识语
-ms-transform:rotate(30deg);      //-ms代表ie内核识别码
-moz-transform:rotate(30deg);      //-moz代表火狐内核识别码
-webkit-transform:rotate(30deg);     //-webkit代表苹果的Safari浏览器及谷歌内核识别码
-o-transform:rotate(30deg);       //-o代表欧朋【opera】内核识别码
————————————————
版权声明:本文为CSDN博主「05431」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_45856470/article/details/116704517

这是什么意思呢?这代表对于不同的浏览器,我们的内容语句要写成各自兼容的形式,才能让这些浏览器都认识它。这里不仅仅是语句标记的改变,它还意味着不同的浏览器是以不同的方式对它们进行解释和执行。

为了上面的例子将问题过于简单化,这里有一张更全面的图,说明了不同浏览器之间的巨大差异,

浏览器对CSS3的支持(CSS3浏览器兼容性一览表) (biancheng.net)
浏览器对CSS3的支持(CSS3浏览器兼容性一览表) (biancheng.net)

浏览器对CSS3的支持(CSS3浏览器兼容性一览表) (biancheng.net)

尽管它们在用户面前看上去都差不多,但是从程序编写和兼容的角度上讲,说它们是完全不同的物种都显得不是特别过分。

小程序的网页视图

那么回到我们的小程序,在官方文档上,它有这么一段人畜无害的描述

小程序与普通网页开发的区别

小程序的主要开发语言是 JavaScript ,小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言,从网页开发迁移到小程序的开发成本并不高,但是二者还是有些许区别的。

事实上,在熟悉了小程序的构架思路之后,小程序开发会变得和其他浏览器的网页开发一样简单,都能够形成一套相当切实可行的标准化流程。但在达到这一状态之前,我觉得这个描述有些过于轻描淡写了。因为小程序开发者需要适应它的逻辑体系,这个体系与一般的 Web view 开发的不同之处在于它需要更进一步。进到哪里呢?进到浏览页面之间的消息传递和功能协同上。

我的初步理解是

小程序是以 Pages 和 Components 为单位的,基于页面的定制 HTML 。 它称为 .wxml 和 .wxss,分别对应 .html 和 .css。

另外,由于小程序天生的具有云端支持,不管是运行时环境,还是数据库都具有天然地“附着”在微信这一平台之上。因此,内建的云函数(cloudfunctions)体系,也是小程序开发的重点之一。

总之一句话,尽管小程序的框架很优秀,但学习成本还是不小的。

【未完待续】

分类:

后端

标签:

后端

作者介绍

张春成
V2