当前位置: 首页 > article >正文

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

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

一、创建小程序

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.kler.cn/a/506445.html

相关文章:

  • 【JavaEE进阶】SpringMVC 响应
  • Android Studio历史版本包加载不出来,怎么办?
  • JAVA:在IDEA引入本地jar包的方法(不读取maven目录jar包)
  • 从代码层面熟悉UniAD,开始学习了解端到端整体架构
  • SK海力士(SK Hynix)是全球领先的半导体制造商之一,其在无锡的工厂主要生产DRAM和NAND闪存等存储器产品。
  • STM32-keil安装时遇到的一些问题以及解决方案
  • java8新特性-1
  • 399. 除法求值【 力扣(LeetCode) 】
  • 关于Nvidia显卡在windows系统下存在部分软件屏闪/闪烁问题与解决方法
  • k8s集群换IP
  • mac配置 iTerm2 使用lrzsz与服务器传输文件
  • kotlin中的flow使用,Flow跟生命周期结合
  • 大数据组件常用端口(hdfs端口、hive端口、yarn端口)
  • HTML5教程(中)
  • ubuntu20.04的虚拟机突然打不开terminal了
  • springweb项目练手附spring学习笔记链接
  • element-ui textarea备注 textarea 多行输入框
  • vue 纯前端导出 Excel
  • docker在不删除容器的情况下修改端口映射
  • PWM(Pulse Width Modulation,脉冲宽度调制)
  • 端口镜像和端口安全
  • 在Android Studio中如何实现contentprovider实验+SQLite数据库(保姆级教程)
  • 人工智能任务19-基于BERT、ELMO模型对诈骗信息文本进行识别与应用
  • 【Java】—— 基于Websocket实现页面聊天效果
  • 数据结构学习记录-数据结构概念
  • mysql 快速转为 sqlalchemy 模型 文件