记录一次微信小程序使用云能力开发的过程

news2025/5/19 0:32:07

对于开发微信小程序云开发不知从何起的同学们,可以当作一次参考。虽说官方有文档,有模板示例,但是这些都是片段或者完整的结果展示。对于初学或者开发经验较少的同学们,可能不知先从那里入手进行第一步的开发。下面解析下构建微信小程序云开发的初始步骤,让大家能够一步步创建起自己的小程序。

一、创建小程序

1、创建小程序:选择了不使用模板(会自动默认选中不使用云服务),因为选择了示例,里面的目录内容结构太多太复杂了,示例里的(组件,扩展等)我们也不会全部用到,会让自己的小程序雍肿。

2、开通自己的云开发服务(其实就是开通云服务器,赠有限的免费使用云服务器时间),安装步骤开启就可以了,因为我的已经开启了)。记住此处中出现的环境ID

二、赋予云开发能力 ,使用云函数

 1、与开发能力:首先 再我们的项目目录中创建 云函数存放的文件目录 cloudfunctions,如下图:

鼠标选中编译器中的:资源管理器窗口-选中其中的文件 然后 按 shift+alt+R 键可打开项目目录,再进行目录创建

2、 在项目根目录找到 project.config.json 文件,新增 cloudfunctionRoot 字段,指定本地已存在的目录作为云开发的本地根目录

 

保存后或者手动编译 cloudfunctions文件夹 会有云朵的标识 。

3、创建云函数,且需要安装云服务扩展( wx-server-sdk )
1、鼠标移到如果图(急于赶工拍了一张):右键云开发目录 选中新建Node.js云函数。

 

 

 创建了一个login云函数(名称根据自己的需求写)。 云函数的文件 函数逻辑处理 也根据自己的需求修改,图下是默认的示例:

2、安装扩展

wx-server-sdk扩展不是再主目录中安装的。    

是在cloudfunctions 目录下安装 :

npm install --save wx-server-sdk@latest

如图操作:

 

4、初始化云服务

 创建完云函数,还得再项目中初始化。

先在根目录创建个config.js 配置文件用于定义某些常量的配置 :内容如下

const config = {
  // 云开发环境 ID
  envId: 'xxx-xxxxx',
}
module.exports = config

然后打开项目中的 app.js,并引用及初始化云服务:

// app.js
const config = require('./config')
App({

  //每次进入应用执行,只执行一次
  onLaunch() {
    //初始化云服务
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        env: config.envId,
        traceUser: true,
      })
    }
  }


})

配置完成,下面如何使用云函数:

5、云函数使用

 在wxml页面中 绑定一个点击事件clickLogin ,如图:

然后再在 js文件中 配置:

// index.js
Page({

  data:{

  },

  //获取信息
  clickLogin(){
    // console.log("信息");
    wx.cloud.callFunction({
      name:"login",//云函数名称
      data:{
        a:1,
        b:2,
      },//传给云函数的参数
    }).then(res=>{
      console.log(res,"结果");
    }).catch(console.error);
  },

})

 结果如下:获取到了用户的 openid unionid等信息

即成功请求了云函数,可以着手进行自己微信小程序的云开发了。某些过程还未详细介绍,比如编译器中开启云开发过程,和 安装云服务扩展( wx-server-sdk )这里有些需要注意的,就是根目录还未进行 npm初始化或者安装,则node_modules 则会安装到了 cloudfunction下的,这个需要注意。

以上时个人操作的见解,仅供参考,如不足请补充!

附上demo资源链接-码云 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2278543.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

初学stm32 --- SPI驱动25Q128 NOR Flash

目录 SPI介绍 SPI结构框图介绍 SPI外设对应的引脚 SPI数据发送与接收 SPI工作原理 SPI 全双工模式的通信机制 从机返回主机之前保存的数据 SPI工作模式介绍 SPI相关寄存器介绍(F1 / F4 / F7) SPI控制寄存器1(SPI_CR1) SPI状…

数据库基础练习1(创建表,设置外键,检查,不为空,主键等约束)安装mysql详细步骤

安装MySQL详细步骤 1. 下载 MySQL 安装程序 访问 MySQL 官方网站:MySQL Downloads。在下载页面,选择 "MySQL Community (GPL) Downloads"。在 "MySQL Community Server" 部分,根据你的操作系统(Windows&…

[c语言日寄](bit)位检查——初探字节之下

哈喽大家好啊,在今天的快乐刷题中,我遇到了一个很有意思的题目: 题目 统计二进制中1的个数 基本思路 没错……这道题的对象比较特殊。 不同于过去常见的题目,之前的题目的对象都是基本数据类型,而这道题的对象却是…

基于SpringCloud的广告系统设计与实现(一)

一、广告系统概论 广告系统中计费方式:CPM 千次广告展现收费/CPT 按时间段/CPC用户点击类广告收费。 Mysql:进行广告数据的存储,以及检索系统监听Mysql做增量索引 Kafka:实现各微服务之间的通信 比如地域维度,时间维度 二、微服务…

React Native的现状与未来:从发展到展望

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

Python在多个Excel文件中找出缺失数据行数多的文件

本文介绍基于Python语言,针对一个文件夹下大量的Excel表格文件,基于其中每一个文件内、某一列数据的特征,对其加以筛选,并将符合要求与不符合要求的文件分别复制到另外两个新的文件夹中的方法。 首先,我们来明确一下本…

【JSqlParser】Java使用JSqlParser解析SQL语句总结

简述 Java解析SQL语句有很多工具都可以做到,比如Mybatis、Druid、目前用来用去最全面的仍然是Jsqlparser,它是一个Github上的开源项目,JSqlParser是一个用于解析SQL语句的Java库,它可以帮助开发者分析和操作SQL语句的结构。无论是…

WINFORM - DevExpress -> alertControl1提示信息框

第一个按钮为常规按钮, 单击触发 ButtonClick 事件. 第二个按钮有选中和未选中状态. 单击触发 ButtonDownChanged 事件。 if (e.ButtonName "alertButton2") { } 在dev用户界面中进行提示(usecontrolwinform) AlertInfo info new AlertInfo("提示",…

springboot全局异常处理示例

这种错误交给前端无法处理。 需要自定义一些错误响应类给前端 package cn.yam.bloomfilter.exception;import org.springframework.web.bind.annotation.ControllerAdvice; import org.springframework.web.bind.annotation.ExceptionHandler; import org.springframework.ht…

Windows远程桌面网关出现重大漏洞

微软披露了其Windows远程桌面网关(RD Gateway)中的一个重大漏洞,该漏洞可能允许攻击者利用竞争条件,导致拒绝服务(DoS)攻击。该漏洞被标识为CVE-2025-21225,已在2025年1月的补丁星期二更新中得到…

Shell正则表达式与文本处理三剑客(grep、sed、awk)

一、正则表达式 Shell正则表达式分为两种: 基础正则表达式:BRE(basic regular express) 扩展正则表达式:ERE(extend regular express),扩展的表达式有、?、|和() 1.1 基本正则表…

基于 Spring Boot 和 Vue.js 的全栈购物平台开发实践

在现代 Web 开发中,前后端分离的架构已经成为主流。本文将分享如何使用 Spring Boot 和 Vue.js构建一个全栈购物平台,涵盖从后端 API 开发到前端页面实现的完整流程。 1. 技术栈介绍 后端技术栈 JDK 1.8:稳定且广泛使用的 Java 版本。 Spring…

Golang Gin系列-3:Gin Framework的项目结构

在Gin教程的第3篇,我们将讨论如何设置你的项目。这不仅仅是把文件扔得到处都是,而是要对所有东西的位置做出明智的选择。相信我,这些东西很重要。如果你做得对,你的项目会更容易处理。当你以后不再为了找东西或添加新功能而绞尽脑…

网络编程-UDP套接字

文章目录 UDP/TCP协议简介两种协议的联系与区别Socket是什么 UDP的SocketAPIDatagramSocketDatagramPacket 使用UDP模拟通信服务器端客户端测试 完整测试代码 UDP/TCP协议简介 两种协议的联系与区别 TCP和UDP其实是传输层的两个协议的内容, 差别非常大, 对于我们的Java来说, …

3.数据库系统

3.1数据库的基本概念 3.1.1:数据库体系结构 3.1.1.1集中式数据库系统 数据是集中的 数据管理是集中的 数据库系统的素有功能(从形式的用户接口到DBMS核心)都集中在DBMS所在的计算机 3.1.1.2C/S结构 客户端负责数据表示服务服务器主要负责数据库服务 数据库系统分为前端和后端…

探索 Transformer²:大语言模型自适应的新突破

目录 一、来源: 论文链接:https://arxiv.org/pdf/2501.06252 代码链接:SakanaAI/self-adaptive-llms 论文发布时间:2025年1月14日 二、论文概述: 图1 Transformer 概述 图2 训练及推理方法概述 图3 基于提示的…

【北京迅为】iTOP-4412全能版使用手册-第八十七章 安装Android Studio

iTOP-4412全能版采用四核Cortex-A9,主频为1.4GHz-1.6GHz,配备S5M8767 电源管理,集成USB HUB,选用高品质板对板连接器稳定可靠,大厂生产,做工精良。接口一应俱全,开发更简单,搭载全网通4G、支持WIFI、蓝牙、…

LDD3学习8--linux的设备模型(TODO)

在LDD3的十四章,是Linux设备模型,其中也有说到这个部分。 我的理解是自动在应用层也就是用户空间实现设备管理,处理内核的设备事件。 事件来自sysfs和/sbin/hotplug。在驱动中,只要是使用了新版的函数,相应的事件就会…

Jira中bug的流转流程

Jira中bug的状态 1. 处理Bug的流程2. bug状态流转详述bug的状态通常包括 1. 处理Bug的流程 2. bug状态流转详述 bug的状态通常包括 未解决 1. 测试人员创建一个bug,填写bug的详细信息,如概要、bug级别、复现步骤、现状、预期结果等 2. 定位bug&#x…

解决关于Xcode16提交审核报错

# 问题描述 The following issues occurred while distributing your application. Asset validation failed Invalid Executable. The executable xxx.app/Frameworks/HappyDNS.framework/HappyDNS contains bitcode.(lD:ef5dd249-731f-4731-8173-8e4a12519352) Asset valida…