IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 小程序云开发 -> 正文阅读

[移动开发]小程序云开发

小程序云开发

云开发与传统开发的区别

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

好处

  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
        })
      }
    })
  }
  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章           查看所有文章
加:2022-04-01 00:13:15  更:2022-04-01 00:15:41 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 19:45:31-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码