小程序云开发

news/2024/7/20 0:55:28 标签: 微信小程序, 小程序, 微信, 腾讯云

小程序云开发

云开发与传统开发的区别

​ 大多数小程序(纯静态的除外)都需要服务端与客户端进行交互,当然云开发也是能和客户端进行交互的,只不过与客户端交互的对象变成云端。

好处

  1. 在云函数中,我们可以很方便的获取到用户的appidopenId这些重要的鉴权信息。
  2. 能在没有后端接口的情况下,使前端能独立的完成小程序的开发! 当然也不需要服务器操作。

那么代价呢?

  1. 性能相对来说差一点
  2. 前端工作量增加

准备

  1. 注册好的小程序开发账号
  2. 微信开发者工具,尽可能使用新的版本
  3. 一台能开机的电脑

创建项目

双击打开你的微信开发者工具,选择小程序。选择使用云开发,然后点击确认创建项目。

无法选择云开发解决方法

  1. 云开发不支持使用测试号,需换成小程序账号
  2. 你可能注册的是小游戏账号!注:一个微信号只能有一个小程序,企业有5个。

项目创建成功

可以看出来比普通的项目多几个文件。模拟器中可能会存在一些例子,可以参考一下。根据自己的需求进行删除。

在这里插入图片描述

资源选型

点击菜单栏下面的云开发按钮,进入云开发控制台。

点击付费配额可以更改配置,一看价格果然很腾讯。好的本篇文章到此结束 欢迎各位的观看。

在这里插入图片描述

吐槽归吐槽,企业也是要吃饭发工资的。

数据库

点击上方按钮中的数据,跳转到数据库界面。

左侧的集合你可以当成数据库中的表,右侧是表里的内容。可以进行添加数据操作,可以根据需求删除原有集合。

增删查改

数据库的初始化和引用

// 1. 微信云开发初始化
wx.cloud.init()
 // 2. 获取数据库引用
 const db = wx.cloud.database()
 //需写在page的上方
 Page({})

异步使用方法

//增加
addStudent(){
    db.collection('students').add({
      // data 字段表示需新增的 JSON 数据
      data: {
        username:'jim',
        score:98,
        // done代表是否毕业
        done: false
      } 
    }).then(res=>{
      console.log(res)
    }).catch(err=>{
      console.log(err)
    })
  },

或者回调函数使用

//更新数据
updateStudent(){
//doc是你是你要更改数据的_id,可在数据库中查看。   db.collection('students').doc('617ef50c620cc89f0617afa83f464bfa').update({
      data:{
        score:98
      },
      success:(res)=>{
        console.log(res)
      },
      fail:(err)=>{
        console.log(err)
      }
    })
  }

wxml中写调用条件

<button catchtap="addStudent">增加数据</button>
<button bindtap="updateStudent">更新数据 </button>

查询与删除

<button bindtap="getOne">查询数据</button>
<button bindtap="delStudent">删除数据</button>

调用方法

//查
getOne(){
  db.collection('students').where({
      username:'tom'
    }).get().then(res=>{
      console.log(res)
    }).catch(err=>{
      console.log(err)
    })
  },
  //删除
  delStudent(){         db.collection('students').doc('617ef50c620cc89f0617afa83f464bfa').remove().then(res=>{
      console.log(res)
    })
  }

云函数

定义

云函数就是子面意思,即运行在云端的函数。来看官方对它的定义

在这里插入图片描述

需安装node.js

需要安装node.js,没有node.js的话,搜索官网下载安装即可。

查询是否安装成功:win+R 输入cmd,然后输入以下代码。就会出现你安装成功的版本号。

node -v

全局初始化云函数

在 app.js 文件的 onLaunch方法中插入一行代码,用以初始化小程序云函数

wx.cloud.init({
  traceUser: true,
})

然后选中cloudfunctions文件夹,右键新建一个node.js云函数。文件夹里会自动生成三个文件,config.jsonindex.jspackage.json。右键你创建的文件,选中上传并部署:安装云端依赖

即可在你的云开发控制台中的云函数中查看

云函数操作

云函数的传入参数有两个,一个是 event 对象,一个是 context 对象。event 指的是触发云函数的事件,当小程序端调用云函数时,event 就是小程序端调用云函数时传入的参数。

注意:你刚才修改了云函数里面的代码必须鼠标右键再上传同步到云平台,最后才能正常调用。

例子

本地页面的js文件

getRes(){
    // 调用云函数实现求和功能
    wx.cloud.callFunction({
      // 云函数名称
      name: 'getsum',
      // 传给云函数的参数
      data: {
        a: 1,
        b: 2,
      },
      success: function(res) {
        console.log(res.result.sum) // 3
      },
      fail: function(err){
        console.log(err)
      }
    })
  }

本地wxml文件

<!-- 云函数代码 -->
<button bindtap="getRes">调用云函数实现求和功能</button>

cloudfunctions文件夹里你创建的getnum文件夹里的index.js文件

// 云函数入口函数
exports.main = async (event, context) => {
  return {
    sum:event.a+event.b
  }
}

注意:你刚才修改了云函数里面的代码必须鼠标右键再上传同步到云平台,最后才能正常调用。

云存储

云开发提供了一块存储空间,提供了上传文件到云端、带权限管理的云端下载能力,开发者可以在小程序端和云函数端通过 API 使用云存储功能。

小程序端可以分别调用 wx.cloud.uploadFilewx.cloud.downloadFile完成上传和下载云文件操作.

例子

wxml页面中

<button bindtap="upload">上传文件</button>

test.js中定义upload函数,调用微信的上传图片的接口,把图片上传到云存储。

 // 上传文件
  upload(){
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)
        wx.cloud.uploadFile({
          cloudPath: 'example.png', // 上传至云端的路径
          filePath: tempFilePaths[0], // 小程序临时文件路径  因为是数组 我们示例上传一个 所以取值为索引0
          success: res => {
            // 返回文件 ID
            console.log(res.fileID)
          },
          fail: console.error
        })
      }
    })
  }

上传后可在云开发控制台查看你上传的图片。

把路径保存在数据库或者集合中的代码

upload(){
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)
        wx.cloud.uploadFile({
          cloudPath: new Date().getTime()+'.png', // 上传至云端的路径
          filePath: tempFilePaths[0], // 小程序临时文件路径  因为是数组 我们示例上传一个 所以取值为索引0
          success: res => {
            // 返回文件 ID
            console.log(res.fileID)
            db.collection('students').add({
              // data 字段表示需新增的 JSON 数据
              data: {
                username:'jack',
                score:66,
                imageUrl:res.fileID,
                // done代表是否毕业
                done: false
              } 
            }).then(res=>{
              console.log(res)
            }).catch(err=>{
              console.log(err)
            })
          },
          fail: console.error
        })
      }
    })
  }

http://www.niftyadmin.cn/n/571663.html

相关文章

RK3399平台开发系列讲解(Regmap子系统)4.51、Regmap子系统

平台内核版本安卓版本RK3399Linux4.4Android7.1🚀返回专栏总目录 文章目录 一、Regmap子系统概述二、数据结构三、实现沉淀、分享、成长,让自己和他人都能有所收获!😄 📢Regmap子系统详解。 一、Regmap子系统概述 内核版本3.1中引入了Regmap API,用于统一内核开发人员…

高通平台开发系列讲解(外设篇)TDM配置

文章目录 一、配置设备树二、修改machine驱动三、channel/bit format的set和put函数沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇章主要讲解TDM的配置 一、配置设备树 在设备树中增加 QUAT_TDM_RX group device and AFE port IDs 的配置: msm-audio-lpass.dts…

递归限制级数

遇到一个问题&#xff1a;使用递归时&#xff0c;用户操作使父级等于子级&#xff0c;结果陷入死循环&#xff0c;崩了。。。 这个说明自己考虑不周全&#xff0c;如果限制级数的话&#xff0c;也不至于整个程序挂掉。于是乎&#xff0c;写了下面的测试级数的代码。 void Main(…

VS code+docker配置nginx

VS codedocker配置nginx 安装 首先你需要在你的电脑中安装vscode和docker应用程序&#xff0c;两个软件都能免费下载使用&#xff0c;就不演示了。安装好Docker后注册登录。.然后在VScode中安装Docker的官方插件&#xff0c;安装完成后&#xff0c;你VScode的左侧就会出现一个…

高通平台开发系列讲解(系统篇)系统关机流程

文章目录 一、关机流程图二、执行关机流程2.1、kernel_shutdown_prepare流程2.2、migrate_to_reboot_cpu流程2.3、syscore_shutdown流程2.4、machine_power_off流程沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇章主要图解高通平台系统关机流程。 一、关机流程图…

高通平台开发系列讲解(外设篇)BMI160基本配置

文章目录 一、BMI160相关宏二、设备树配置沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇章主要介绍BMI160基本配置 一、BMI160相关宏 添加下面的宏 CONFIG_SENSORS_BMI160_IIO=y CONFIG_SENSORS_BMI160_IIO_RING=y CONFIG_IIO_TRIGGER=y CONFIG_IIO_TRIGGERED_…

GitHub Copilot收费了

今天一早收到邮件看到提示收费的邮件&#xff0c;才想起来还有个这个插件。 废话少说直接链接 https://github.com/features/copilot 个人看法 功能 首先功能确实是比一般的代码提示强不少&#xff0c;但要做到 //我&#xff1a;hello,GitHub Copilot!帮我做完今天的任务…

程序面试题——C实现

平台&#xff1a;win10 x64 VC6.0 2019/5/22 1.合并三个有序的链表链表节点定义struct node{ int val; struct node* next;};struct node* merge_3 (形参由你定义){ //这部分是实现}当输入的有序链表是多个的时候&#xff0c;请给出合并算法&#xff0c;并假设链表个数…