专业 靠谱 的软件研发伙伴

您的位置:首页 > 新闻动态 > 微信小程序应用开发及实践系列 - 1.关于微信小程序开发( 草稿)

发布日期:2222-02-02

微信小程序应用开发及实践系列 - 1.关于微信小程序开发( 草稿)



本文将包括以下三方面的内容:

1. 为什么要关注小程序的开发?

2. 我们的基于云生态的小程序应用

3. 关于小程序的开发


1. 为什么要关心小程序应用开发

“阿拉丁小程序统计平台和阿拉丁指数在2020年1月2日共同发布的2019年小程序互联网发展白皮书中指出:小程序数量已超过300万,日活用户数到达3.3亿,预计今年(2020年)将会到达4.5亿。2019小程序的交易GMV1.2万亿。小程序发展两年,交易GMV过百亿的企业数量已有5家。业内人士估计未来三年小程序约交易GMV过百亿的企业数量会超过25家。” 。尽管已经有多种小程序平台,但目前使用最广泛、知名度最高的仍是微信小程序。


2. 我们的基于云生态的小程序应用

最近应业务上的要求,需快速开发一个内容类产品发布与销售平台。最后选择采用serverless架构和微信小程序平台。比如: 销售前台为基于云生态的微信小程序(本文中以后统称“小程序”)应用。小程序的后端服务使用小程序云服务。并采用一些可复用的组件。整个系统从设计到开发用了约两周的时间。

所采用的相关架构与技术简单描述为:

商品发布网站及后台管理平台:

前台及后台基于node、mongodb、vue、 js、html、 css、网站模板等技术及框架。系统提供基于REST的API接口。并可发布及更新内容到商品销售平台。为BS应用。

商品销售及后台管理平台:

目前销售平台的前台为小程序端及云平台。采用serverless架构。小程序通过原生接口调用云数据库、云函数及云存储。

销售平台的后台采用基于node、vue等技术。采用了serverless架构。

第一版在用户测试及打磨阶段,不久上线。随附几张截图(由于去敏的原因,内容部分打了马赛克)。所示内容为测试内容。

小程序开发

产品列表截屏



小程序开发

产品详情页截屏一


小程序开发

产品详情页截屏二



小程序开发

预订截屏一


小程序开发

预订截屏二

小程序开发

"我的"界面截屏

小程序开发

消息通知截屏



3. 关于小程序的开发


这里仅对小程序的开发做个简单介绍(详细介绍可参阅底部的小程序开发文档链接)。包括:

1. 小程序开发环境

2. 小程序的代码构成

3. 小程序的宿主环境

4. 小程序的运行环境

5. 小程序的框架

6. 小程序的组件

7. 小程序API接口

8. 小程序云开台

9. ……


若对小程序应用有开发外包、设计咨询或培训的需求,可联系我们。(这里顺便给公司打个广告。)


什么是基于serverless架构的云开发模式?

在传统开发模式中需要搭建并维护一个后端应用环境。这需要企业开发并维护一个后端系统。然而这会在开发、维护与团队沟通协作上带来一些不确定因素及额外成本。采用Serverless架构的小程序应用可以使企业不再需要自己搭建和维护一个后端服务系统。而将这部分伙儿都托给Serverless服务平台提供商。小程序的应用开发可有三种模式:

1. 后端服务在本地:

此模式下的小程序相当于一个本地应用。应用所涉及的业务逻辑、数据、文件都将在用户手机里。

2. 后端服务及数据文件不在用户本地手机。但不使用小程序云开发:

企业将后端应用搭建在自己的主机或第三方云平台上(如:阿里云、腾讯云等)。企业需自己在云平台上安装后台程序并需要自己维护。

3. 后端服务使用小程序云服务(小程序云开发/serverless):

在这个模式下,“小程序云开发为开发者提供数据库、存储和云函数等完整的云端支持。无需搭建服务器。使用平台提供的API进行核心业务开发。可实现小程序快速上线和迭代。”

云开发模式中小程序通过原生接口调用去操作云数据库、云函数及云存储。开发者不用关心这样内容是布署在哪里以及相关的运维问题。

就微信小程序开发(后统称小程序)而言,其与第二种云开发的优势表现在:开发大为简便、快捷。以微信登录为例:

小程序开发环境

开发小程序需要先到微信小程序注册页面注册个小程序(见下图)。然后下载小程序开发工具进行开发(见下图)。

小程序开发

小程序注册页面

小程序开发

小程疼开发工具


小程序的代码构成

小程序项目包括以下四类代码文件:

json 后缀的 JSON 配置文件

.wxml 后缀的 WXML 模板文件

.wxss 后缀的 WXSS 样式文件

.js 后缀的 JS 脚本逻辑文件

这4种文件可分布在不同的作用域下(如:全局、page、components)。其作用可参见微信小程序开发文档(见文未)。


小程序的宿主环境

小程序是以微信客户端为宿主的。这样小程序可直接使用微信的功能那不用像原生的android 和ios App那样需要下载安装在用户手机上。同时又具有比基于Browser的web网页应用更好的性能。当用户打开小程序时,代码会从后台小载到用户手机上。由于代码量很少,所以用户一般感觉不到。

小程序的运行环境

小程序与普通页的开发与运行环境差别还是挺大的。其中最大的区别是小程序运行在微信客户端或开发者工具上而不是运行在浏览器上的。小程序可以运行在多种平台上:。如:iOS微信客户端、Android微信客户端、PC微信客户端、Mac微信客户端、微信开发者工具。但各平台脚本执行环境以及用于渲染非原生组件的环境各不相同。详见下图:

小程序开发

小程序在各平台的运行环境比较


小程序开发

小程序的通信模型

与大多数前端Web框架不同,小程序使用的是一种双线性模型。其目的是为了更好地实现对小程序的的管控及运行环境的安全。如上图所示小程序的运行环境在逻辑上分成以下两层并且由不同的线程进行管理。这两个线程的通信会经由微信客户端(以后皆称Native)做中转,逻辑层发送网络请求也经由Native转发。

1)渲染层:

WXML 模板和 WXSS 样式工作在渲染层。渲染层的界面使用了WebView 线程进行渲染。由于一个小程序存在多个界面,所以存在多个WebView线程。

2)逻辑层:

JS 脚本工作在逻辑层。逻辑层采用JsCore线程运行JS脚本。

另外,在渲染层,宿主环境会把WXML转化成对应的JS对象,在逻辑层发生数据变更的时候,我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层,再经过对比前后差异,把差异应用在原来的Dom树上,渲染出正确的UI界面,如下图所示:

小程序开发

小程序运行环境图



小程序运行机制

小程序启动后,界面被展示给用户,此时小程序处于前台状态。需要说明的是: 当小程序第一次启动时,微信需要下载小程序代码包(此代码包为经过编译、压缩、打包之后的代码包。不是源代码)。以后再启动小程序时,微信会根据根据缓存的代码包的更新状态判断是否要再次下载代码包。

当用户点击右上角胶囊按钮关闭小程序,或者按了设备 Home 键离开微信时,小程序并没有完全终止运行,而是进入了后台状态,小程序还可以运行一小段时间。

当用户再次进入微信或再次打开小程序,小程序又会从后台进入前台。但如果用户很久没有再进入小程序,或者系统资源紧张,小程序可能被销毁,即完全终止运行。

小程序启动可以分为两种情况,一种是冷启动,一种是热启动。

冷启动:如果用户首次打开,或小程序销毁后被用户再次打开,此时小程序需要重新加载启动,即冷启动。

热启动:如果用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时小程序并未被销毁,只是从后台状态进入前台状态,这个过程就是热启动。

通常,只有当小程序进入后台一定时间,或者系统资源占用过高,才会被销毁。具体而言包括以下几种情形:

1) 当小程序进入后台,可以会维持一小段时间的运行状态,如果这段时间内都未进入前台,小程序会被销毁。

2) 当小程序占用系统资源过高,可能会被系统销毁或被微信客户端主动回收。

在 iOS 上,当微信客户端在一定时间间隔内连续收到系统内存告警时,会根据一定的策略,主动销毁小程序,并提示用户 「运行内存不足,请重新打开该小程序」。具体策略会持续进行调整优化。

建议小程序在必要时使用 wx.onMemoryWarning 监听内存告警事件,进行必要的内存清理。


小程序的框架

小程序的框架主要包括以下几个内容:

1)小程序框架分为逻辑层(App Service)和视图层(View)。其基于响应的数据绑定机制使得数据与视图保持同步。关于逻辑层所涉及的内容(如:App全局和Page的配置与注册、Page的生命周期、路由、模块化、API等)及视图层的内容(如:WXML、WXSS、WXS、WXS事件响应机制、基础组件等)将不在这里介绍。可详见小程序开发文档。实践内容将在另外的文中介绍。

2)框架管理了小程序页面的路由和页一面的生命周期(见下图)。开发者只需完成页面的数据、方法和生命周期函数即可。

小程序开发

页面生命周期


3)框架提供了一套自带微信风格样式及逻辑的基础组件供开发者使用。

4)框架提供了微信原生API供开发者调取微信提供的能力。


小程序云开发

开发者可使用腾讯提供的云端开发能力而无需搭建服务器。腾讯为小程序提供以下云开发能力:

小程序开发

小程序云开发能力列表


每一个小程序默认可拥有最多两个环境。开发文档建议一个可创建为 test 测试环境,另一个创建为 release 正式环境。一个环境对应一整套独立的云开发资源,包括数据库、存储空间、云函数等资源。各个环境是相互独立的。

…………

参考文档

1. 微信小程序官方地址:https://developers.weixin.qq.com/miniprogram /dev/framework/structure.html


(未完。持续更新中…)


推荐阅读: