[个人向]超快速了解微信小程序:看这篇就够了!(注册、语言、框架、配额等简要说明)

[个人向]超快速了解微信小程序看这篇就够了+相关简要说明

本文精炼微信小程序开发文档相关内容,旨在对初次接触并准备开发小程序的童鞋(比如自己)提供一个快速了解攻略。其中包括注册相关、语言、框架模式、相关配额等说明。在具体深入小程序文档之前可以大概浏览浏览~

1 定位与介绍

微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。是一种无需安装即可使用的手机“应用”。微信小程序的四个特点:1.无需安装随时可用、2.触手可及、3.用完即走、4.无需卸载。

2 注册相关

小程序注册 è 登记主体信息 è 登记管理员信息。具体操作如下参考链接:

https://developers.weixin.qq.com/miniprogram/introduction/#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%B3%A8%E5%86%8C

3 开发相关

3.1开发工具

微信小程序开发工具

工具开发界面如下:

在这里插入图片描述
另外,vscode添加相关插件也能进行开发。

3.2开发文件与编译语言

小程序中文件类型主要包括:

  • json 后缀的 JSON 配置文件 èJSON扮演的静态配置的角色。
  • wxml 后缀的 WXML 模板文件 è描述当前这个页面的结构,组件(标签)要素,相当于HTML。
  • wxss 后缀的 WXSS 样式文件 è描述页面的样子、尺寸布局等,相当于CSS
  • js 后缀的 JS 脚本逻辑文件 è界面与用户做交互:响应用户的点击、获取用户的位置等,以及与后台、控制层进行交互。(和web开发的JS功能类似)。

补充一下小程序开发和传统web开发的一些差异:

网页开发渲染线程和脚本线程是互斥的,这也是为什么长时间的脚本运行可能会导致页面失去响应。网页开发者可以使用到各种浏览器暴露出来的 DOM API,进行 DOM 选中和操作。

而在小程序中,开发渲染线程和脚本线程是分开的,分别运行在不同的线程中。小程序逻辑层运行在 JSCore 中,并没有一个完整浏览器对象,因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库,例如 jQuery、 Zepto 等,在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同,所以一些 NPM 的包在小程序中也是无法运行的。

3.3小程序宿主环境

微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能。详情点这里

3.3.1渲染层和逻辑层

小程序的运行环境分成渲染层逻辑层,其中 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。

小程序的渲染层和逻辑层分别由个线程管理:渲染层的界面使用了进行渲染;逻辑层采用线程运行脚本。一个小程序存在多个界面,所以渲染层存在多个线程,这两个线程的通信会经由微信客户端(下文中也会采用来代指微信客户端)做中转,逻辑层发送网络请求也经由转发,小程序的通信模型下图所示。

在这里插入图片描述

3.3.2组件

小程序提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼合成自己的小程序。就像 HTML 的 div, p 等标签一样,在小程序里边,你只需要在 WXML 写上对应的组件标签名字就可以把该组件显示在界面上

3.3.3API

为了让开发者可以很方便的调起微信提供的能力,例如获取用户信息、地理位置、分享、下拉刷新、时间选择器、微信支付等等,小程序提供了很多现成的API给开发者去使用。

3.4开发模式和流程

参考了开发文档的一些例子,查阅了网上一些相关案例。发现有将小程序作为一个前端,用php搭建服务器、甚至结合Java开发中SpringMVC搭建后台框架的。

此次开发的小程序整体架构模式应该算是一种类MVC模式。view层由上文提到的wxml与wss构成,control层由js对module层数据进行封装,拿到view层进行展示。Module层可以像传统web开发一样,通过后台服务器,加之MySql等数据库进行数据持久化。在这里使用的是微信小程序自带的云开发(云函数、云存储与云数据库,之后会针对云开发详细介绍)

更为详细一点来说,就是将各种表和记录存放在云数据库、一些需要上传下载的图片存放在云存储。编写云函数对其进行操作,逻辑控制层函数调用云函数并接收其结果。User通过页面视图层中的一些事件(刷新、点击等)调用控制层相应函数进而传输数据,达到一个前后端的交互的过程。

下图是一个小程序云开发架构模型:(画的有点问题:云函数应该也是属于云端的)

在这里插入图片描述

4 云开发

云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。

云开发提供了几大基础能力支持:

在这里插入图片描述

云开发管理控制台:

在这里插入图片描述

下面将分别对云函数、云数据库、云存储进行介绍,其后将介绍云开发的一些配额说明等。

4.1云数据库

云数据库是一个JSON格式的文档型数据库。

官方似乎只提供了一个数据库,可建多张表(集合)。可手动添加或删除记录,也可以由JSON格式导入或导出。提供一个默认的不可删除的PrimeryKey:_id,添加记录时可自由修改,不改则默认为一个长字符串。

每张表的每个记录里的格式不用完全相同。常用数据类型包括:String:字符串;Number:数字;Object:对象;Array:数组;Bool:布尔值;Date:时间。

crud操作与传统的后台开发思路类似,最大的不同在于返回类型为JSON格式。查询处理同样也能够进行聚合函数操作、连接查询(刚开始没搞明白,走了不少弯路)。另外也支持事务操作(这部分没太明白)。

操作权限:在前端也能够直接访问云数据库,但只允许创建者进行写操作。通过云函数调用访问则没这一限制了。

在这里插入图片描述

读写权限:小程序前端单次读取数据库最多条,云函数单次读取数据库最多条。

4.2 云存储

云存储提供高可用、高稳定、强安全的云端存储服务,支持任意数量和形式的非结构化数据存储,如视频和图片,并在控制台进行可视化管理。

以一个图片为例,调用api上传到云存储空间后生成fileID和下载地址。fileID用于描述文图片的位置,下载地址可调用函数进行下载。

在这里插入图片描述

4.3云函数

云函数即在云端(服务器端)运行的函数。在物理设计上,一个云函数可由多个文件组成,占用一定量的 CPU 内存等计算资源;各云函数完全独立;可分别部署在不同的地区。开发者无需购买、搭建服务器,只需编写函数代码并部署到云端即可在小程序端调用,同时云函数之间也可互相调用。

一个云函数的写法与一个在本地定义的 JavaScript 方法无异,代码运行在云端 Node.js 中。当云函数被小程序端调用时,定义的代码会被放在 Node.js 运行环境中执行。我们可以如在 Node.js 环境中使用 JavaScript 一样在云函数中进行网络请求等操作,而且我们还可以通过云函数后端 SDK 搭配使用多种服务,比如使用云函数 SDK 中提供的数据库和存储 API 进行数据库和存储的操作,这部分可参考数据库和存储后端 API 文档。

云开发的云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时,云函数的传入参数中会被注入小程序端用户的 openid,开发者无需校验 openid 的正确性因为微信已经完成了这部分鉴权,开发者可以直接使用该 openid。

4.4相关配额

云开发控制台上就有:
在这里插入图片描述

资源生命周期具体没查到,不过并非到期后存储内容消失,应该是重新分配空间。

由于我并没有花钱,上述是免费版的配额:数据库2G,数据库请求数5万次/日,存储容量5G。

(ps:CDN的全称Content Delivery Network,即内容分发网络。本原理是广泛采用各种缓存服务器,将这些缓存服务器分布到用户访问相对集中的地区或网络中,在用户访问网站时,利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上,由缓存服务器直接响应用户请求。)

另外,官方也推出了许多付费版的以满足更大需求:

其中包括均衡型、数据库资源消耗型、云函数资源消耗型等以满足不同种类的需求。

在这里插入图片描述

在这里插入图片描述

配额详情

5 个人开发感受

云开发模式的小程序开发效率确实挺高。从完全没接触过到完成投票app大概花了不到一个月,除前端页面部分排版样式是参考开源程序外,大部分逻辑函数、对数据库操作的云函数的编写、数据表设计,均参照官方开发文档及api完成,一边学一边写,遇到问题现查先用。优点是上手速度快、开发简洁、调试方便;缺点是容易卡壳,后面实在写不动了才会想着研究手册,导致很多前面写的代码(特别是操作数据库)非常之low和不规范,查询效率应该也是大打折扣。

不过云开发也有缺点,个人感受在于1、数据库不够规范(主外键约束之类的可能需要自己搞定)2、对文档型数据库的一些较为复杂的操作感觉比关系型sql语句复杂(可能是自己因为不太熟悉)。

最后附上:

数据库不够规范(主外键约束之类的可能需要自己搞定)2、对文档型数据库的一些较为复杂的操作感觉比关系型sql语句复杂(可能是自己因为不太熟悉)。

最后附上:

小程序开发文档

小程序个人中心

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章