微信小程序云开发框架

article/2025/9/10 15:09:01

 

概述

一直做后端服务器开发,最近看了一篇文章介绍小程序的云开发模式,觉得挺有意思,就尝试了一下,由本文做个记录。

因为不是专业的小程序开发人员,也没有做过网页开发,所以论述中出现错误难以避免,请多谅解。

微信小程序,在我的理解中,就是一个由微信内置的浏览器解析并展示的js页面,支持一些微信特有的功能性API。

通常的框架中,js页面展示布局和框架,页面中的动态内容由后端服务返回数据,所以早先的小程序需要自己开发并部署后端服务和数据库。

随着小程序的发展,现在的后端服务和数据库支持云开发模式。

开发者可以使用云开发快速开发小程序、小游戏、公众号网页等,并且原生打通微信开放能力。

开发者无需搭建服务器,可免鉴权直接使用平台提供的 API 进行业务开发。

最重要的,云开发环境有免费版可以用, 适合个人开发者学习和玩玩。

下面用一个简单的单页面小程序介绍小程序+云函数+云数据库的开发框架。

环境

windows:win10

微信开发值工具Stable v1.05.2110110

wx-server-sdk:~2.4.0

云开发步骤

简单的小程序云开发步骤总结:

  1. 注册微信小程序,获取小程序APPID。
  2. 下载安装微信开发者工具。
  3. 创建项目,后端服务选择云开发模式。
  4. 创建成功后,直接得到一个实例小程序,包含完整的代码框架。
  5. 点击云开发按钮,开通云开发,并创建一个新的云开发环境,云开发环境包含了云函数和云数据库,也包含了云托管、云存储、运营分析、概览等内容。
  6. 现在,你可以专心的写代码了。

详细步骤请参考小程序开发官方文档。

代码树

源代码地址:https://github.com/yuyoucuobei/miniprogram-template.git

# tree base-info/

base-info/                   #项目根目录

├── cloudfunctions        #云函数目录

│   └── quickstartFunctions

│       ├── config.json              #云函数配置文件

│       ├── index.js                   #云函数入口函数

│       ├── package.json           #云函数打包配置

│       ├── selectRecord           

│       │   └── index.js                   #云函数子函数

│       └── updateRecord

│           └── index.js                   #云函数子函数

├── miniprogram          #小程序目录

│   ├── app.js                      #小程序启动入口

│   ├── app.json                  #小程序全局配置

│   ├── app.wxss                 #小程序全局样式

│   ├── components            #自定义组件

│   ├── envList.js                 #环境配置

│   ├── images                    #图片资源

│   ├── pages                     #页面目录

│   │   └── index

│   │       ├── index.js                   #页面代码

│   │       ├── index.json               #页面配置

│   │       ├── index.wxml              #页面布局

│   │       └── index.wxss               #页面样式

│   └── sitemap.json            #微信搜索索引配置

├── project.config.json   #项目配置

├── project.private.config.json

├── README.md

└── uploadCloudFunction.bat

9 directories, 18 files

云函数

云函数的代码编写完成后,要点击上传部署。

上传部署方法:对“quickstartFunctions”目录右键选择“上传并部署,云端安装依赖(不上传node_modules)”,弹窗显示成功即可。

在云开发控制台中,云函数页面,可以看到云函数名称、运行环境、更新时间、状态等信息,也可以看到运行中的日志信息,方便定位问题。

云数据库

在云开发控制台中,数据库页面,可以查看和操作云数据库。

云数据库和mongodb基本一样,或者说就是在mongodb的基础上封装出来的。

collection就是表名,数据使用json格式保存。

支持索引管理和数据权限设置。

代码逻辑

按照上面的代码框架,小程序在启动之后的逻辑流程如下图,截图是使用PC端自动预览中的vconsole日志展示。

 

其中的“111”是在js页面调用云函数之前的日志打印。

云函数返回数据是“Object …”,可以点击查看具体数据内容。

页面效果

 

总结

小程序在云开发模式下,开发人员可以更多的关注代码逻辑的开发,极大的简化了上线的部署流程,方便快捷。


空空如常

求真得真


http://chatgpt.dhexx.cn/article/jwtT5XYi.shtml

相关文章

原生微信小程序项目基础框架搭建

原生微信小程序项目基础框架搭建 文件目录结构 1. 环境变量(开发环境, 线上环境,测试环境)便于在不同环境的切换 接口的urlwebview的前缀url埋点相关的环境参数本地存储的环境变量配置 … 根目录中的 config 文件 中的 env.j…

开发跨端微信小程序框架选型指南

多端框架uni-app和Taro选型对比 一. 背景 小程序原生开发有不少槽点: 1.原生wxml开发对Node、预编译器、webpack支持不好,影响开发效率和工程构建流程。所以大公司都会用框架开发 2.微信定义的这套语法,wxml、wxs,以及wx:if等语…

微信小程序 微信小程序框架API

完整微信小程序(Java后端) 技术贴目录清单页面(必看) 微信小程序框架所提供的API接口也是相当完备的,如果说小程序组件是用来构建小程序的视图层,那么小程序API则在小程序逻辑层担当重任。随着小程序版本的更新迭代,目前小程序框架 API分类已经达到了19…

微信小程序框架(一)-全面详解(学习总结---从入门到深化)

目录 小程序与普通网页开发的区别 体验小程序 微信小程序账号申请 微信小程序开发者工具 下载安装 创建项目 开发者工具说明 小程序目录结构 描述整体的 app 描述各自页面的 page 全局配置_Pages Pages配置 entryPagePath 快捷生成页面方案 全局配置_window 常用属性…

微信小程序学习笔记(二)-- 开发之框架

一、小程序框架介绍(了解) 小程序框架包含小程序的配置、框架接口、场景值、WXML 和 WXS 等 二、小程序的配置(精通) 小程序的配置分为全局配置、页面配置以及sitemap 配置 1、全局配置 小程序根目录下的 app.json 文件用来对…

微信小程序框架

框架 小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。 整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。小程序提供了自己的视图层描述语言…

【微信小程序】小程序框架分析

1.MVC MVC是Model-View- Controller的简写,即模型-视图-控制器,简单来说就是通过controller的控制去操作model层的数据,并且返回给view层展示。 当用户出发事件的时候,view层会发送指令到controller层,接着controller去通知mode…

微信小程序常见的UI框架/组件库总结

图片 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库。 1:WeUI 小程序–使用教程 ht…

强烈推荐:小程序常用的6款框架总结

随着前端的知识不断更新,小程序也成为了我们开发中的日常。微信小程序、百度小程序、支付宝小程序、头条小程序等等不断涌入我们的生活,随着小程序的火爆,各种小程序框架不断出现,也在不断更新。路漫漫,学不完呀&#…

微信小程序框架介绍以及项目目录结构

完整微信小程序(Java后端) 技术贴目录清单页面(必看) 微信小程序框架介绍 微信团队为小程序提供的框架命名为MINA。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能,对上层提供一整套JavaScript API&am…

爬虫入门

爬虫入门 1. 概述 本文首先介绍Requests库如何自动爬取HTML页面以及如何自动网络请求提交,随后将会讲解如何阅读网络爬虫排除标准。获取了网页之后用BeautifulSoup库解析HTML页面,然后讲解正则表达式,以及如何用正则表达式提取网页关键信…

一个简单爬虫的入门教程

前言 我毕业论文要写文本大数据情绪分析,没有现成的数据。淘宝要价600块我又舍不得,只能自学爬虫。我一点计算机网络的基础都没有,光是入门就花了一周(不知道从何下手),所幸爬虫不难,只要见过就…

python爬虫入门教程:开始一个简单的爬虫

本文下面所有的Python基础都有详细的配套教程以及源码,都已经打包好上传到百度云了,链接在文章结尾处! 扫码此处领取大家自行获取即可~~~ 1.爬虫的过程分析 当人类去访问一个网页时,是如何进行的?   ①打开浏览器&…

从原理到实战,一份详实的 Scrapy 爬虫教程

之前分享了很多 requests 、selenium 的 Python 爬虫文章,本文将从原理到实战带领大家入门另一个强大的框架 Scrapy。如果对Scrapy感兴趣的话,不妨跟随本文动手做一遍! 一、Scrapy框架简介 Scrapy是:由Python语言开发的一个快速、高层次的屏幕…

超级简单的Python爬虫教程,python爬虫菜鸟教程官网

毫无基础的人如何入门 Python ? Python是一种计算机程序设计语言。你可能已经听说过很多种流行的编程语言,比如非常难学的C语言,非常流行的Java语言,适合初学者的Basic语言,适合网页编程的JavaScript语言等等。 那Python是一种…

爬虫教程(1)基础入门

爬虫介绍 网络爬虫,英译为 web crawler ,是一种自动化程序,现在我们很幸运,生处互联网时代,有大量的信息在网络上都可以查得到,但是有时我们需要网络上的数据,活着文章,图片等等&…

爬虫的简单入门

本文旨在教会读者能够简单使用两种爬虫,完成一些基础的爬虫操作,会给出一些优化思路,并不会深入的讲解优化方法。 目录 前言 一、爬虫部分——网页源码获取 1、Requests 2、Selenium 二、数据处理——解析网页 BeautifulSoup 三、成功入门之后…

网页爬虫教程

转自https://morvanzhou.github.io/tutorials/data-manipulation/scraping/ 了解网页结构 学习爬虫, 首先要懂的是网页. 支撑起各种光鲜亮丽的网页的不是别的, 全都是一些代码. 这种代码我们称之为 HTML, HTML 是一种浏览器(Chrome, Safari, IE, Firefox等)看得懂的语言, 浏览…

一个简单的爬虫入门教程!

前言 我毕业论文要写文本大数据情绪分析,没有现成的数据。淘宝要价600块我又舍不得,只能自学爬虫。我一点计算机网络的基础都没有,光是入门就花了一周(不知道从何下手),所幸爬虫不难,只要见过就…

【爬虫教程】吐血整理,最详细的爬虫入门教程~

初识爬虫 学习爬虫之前,我们首先得了解什么是爬虫。 来自于百度百科的解释: 网络爬虫(又称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则&a…