微信小程序云开发框架

微信小程序云开发框架

概述

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

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

微信小程序,在我的理解中,就是一个由微信内置的浏览器解析并展示的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)”,弹窗显示成功即可。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzypzw.html