微信小程序开发(二)-----云开发

1、概念

  • 微信小程序的云开发是腾讯云与微信团队深度合作推出的一个全新的小程序的解决方案,它提供了云函数、云数据库与云存储这三大基础能力支持,随着云开发的出现,小程序的开发者可以将服务端的部署和运营的环节进行服务端的托管,让腾讯云去管理,而不需要在运维和管理方面投入太多的精力。

2、传统小程序开发与云开发的区别

  • 小程序传统开发模式:(开发效率低、运维成本高)

           对于小程序传统的开发模式而言,我们需要一个客户端(也就是前端页面),而前端页面展示的数据大多来自于数据库,因此我们还需要一个服务端,把后端的代码以及数据库部署上去,并且前后端联调的过程也是沟通的过程,时间成本比较高;小程序在部署的时候,我们需要购买相对应的域名以及服务器,并且还要进行备案(非常麻烦、耗时长),部署成功后,在运维小程序的过程中,也会遇到很多很多的问题,比如DB运维、文件存储、内容加速(CDN)、网络防护、容器服务、负载均衡以及安全加固等;虽然有的公司没有购买服务器,使用的是阿里云或者腾讯云上面的服务,但是依旧需要维护,因此运维成本非常高。

  • 小程序云开发模式:采用serverless(无服务)模式

          对于小程序的云开发模式而言,依旧需要一个客户端,但是由于小程序提供了云开发,而云开发提供了云函数、云数据库以及云存储三大基础能力支持,我们可以直接在客户端调用云数据库里面的内容,当然也可以通过客户端调用云函数,在云函数里面处理一些业务逻辑,并在云函数里面调用云数据库,同时我们可以在客户端上传相应的文件到云存储当中,或者将云存储中的图片下载到客户端给用户去展示,由于云开发是部署在腾讯云上面的,因此我们不需要额外的运维人员,运维成本也会降低。除此之外,小程序中的云函数采用的是Node.js,云数据库采用的是mongoDB,而node调用mongoDB也是很方便的。

    • 三大基础能力支持:

      • 云数据库:是一个JSON数据库(文档型数据库),提供了2GB的免费存储空间,实现对数据的增删改查的操作;

        • 支持的数据类型:Number、String、Object、Array、Boolean、Date、Null以及GeoPoint(地理位置点);
        • 如何通过代码操作数据库:
          • 初始化:

            const db = wx.cloud.database()
          • 切换环境

            const testDB = wx.cloud.database({
              env: ‘test‘//环境名称
            })
          • 简单数据的增删改查
            • WXML

              <view>数据库的增删改查</view>
              <button size="mini" catchtap="onCatchPostHandler">增加</button>
              <button size="mini" catchtap="onCatchDeleteHandler">删除</button>
              <button size="mini" catchtap="onCatchUpdateHandler">修改</button>
              <button size="mini" catchtap="onCatchGetHandler">查找</button>

            • JS

              // 数据库的初始化
              const db = wx.cloud.database();
              
              Page({
              
                /**
                 * 页面的初始数据
                 */
                data: {
              
                },
                /**
                 * 数据库的添加
                 */
                onCatchPostHandler() {
                  // 回调函数写法
                  /**
                   * db.collection(‘user‘).add({
                    data: {
                      name: ‘wxh‘,
                      age: ‘18‘,
                      job: ‘IT‘
                    },
                    success: (res) => {
                      // 使用了ES6中的箭头函数,目的是为了改变this指向
                      console.log(res)
                    },
                    fail: (error) => {
                      console.log(error)
                    }
                  })
                   */
                  // promise的写法
                  db.collection(‘user‘)
                    .add({
                      data: {
                        name: ‘jerry‘,
                        age: ‘22‘,
                        job: ‘teacher‘
                      }
                    })
                    .then((res) => {
                      console.log(res)
                    })
                    .catch((error) => {
                      console.log(error)
                    })
                },
                /**
                 * 数据库的删除
                 */
                onCatchDeleteHandler() {
                  // 删除一条可以通过小程序端进行控制,而删除多条我们需要小程序调用云函数来操作数据库
                  db.collection(‘user‘)
                    .doc("b040a67a5df1f6d1029170ef7e785160")
                    .remove()
                    .then((res) => {
                      console.log(res)
                    })
                    .catch((error) => {
                      console.log(error)
                    })
                },
                /**
                 * 数据库的修改
                 */
                onCatchUpdateHandler() {
                  db.collection(‘user‘)
                    .doc(‘b040a67a5df1f6d1029170ef7e785160‘)
                    .update({
                      data: {
                        age: ‘19‘
                      }
                    })
                    .then((res) => {
                      console.log(res)
                    })
                    .catch((error) => {
                      console.log(error)
                    })
                },
                /**
                 * 数据库的查找
                 */
                onCatchGetHandler() {
                  db.collection(‘user‘)
                    .where({
                      name: ‘wxh‘
                    })
                    .get({})
                    .then((res) => {
                      console.log(res)
                    })
                    .catch((error) => {
                      console.log(error)
                    })
                },

            • 注意:如果是在数据库手动加入记录,会出现查不到的情况,这个时候我们需要设置

      • 云函数:相当于小程序在服务端的后台代码,可以非常方便的获取到当前登录用户的信息(appid、openid、生成分享图或者调用腾讯云的SDK);

        • 去Node官网(http://nodejs.cn/),安装Node环境(需要nodev8.0及以上版本);
        • 安装成功的标志:windows+r,输入cmd, 打开命令输入  node -v 显示版本号;

        • 创建云函数

          • 很有可能提醒是否需要安装wx-server-sdk    ----- >    点击确定
          • 在调用云函数的过程中提示没有安装wx-server-sdk包,这个时候跟
        • 11
      • 云存储:管理、上传、下载以及分享文件等操作;

3、云开发的开通

  • 打开微信开发工具,点击云开发 -----> 开通 -----> 确定

  • 会出现一个环境配置,每个小程序账号可免费创建两个环境,建议是一、开发环境;二、生产环境;
    • 注意:开发工具右上角点击 “详情” -----> 本地设置(调试基础库的版本必须在2.2.3以上,才可以支持云开发)
  • 云开发提供了一个可视化的控制台,点击云开发即可出现;

4、遇到的问题

原文地址:https://www.cnblogs.com/wxh0929/p/12030677.html

时间: 2024-10-13 02:04:53

微信小程序开发(二)-----云开发的相关文章

微信小程序购物商城系统开发系列-目录结构

上一篇我们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇),相信大家都已经蠢蠢欲试建立一个自己的小程序,去完成一个独立的商城网站. 先别着急我们一步步来,先尝试下写一个自己的小demo. 这一篇文章我们主要的是介绍一下小程序的一些目录结构,以及一些语法,为我们后面的微信小程序商城系统做铺垫. 首先我们来了解下小程序的目录结构 Pages 我们新建的一些页面将保存在这个文件夹下面,每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js.index.

微信小程序购物商城系统开发系列-工具篇

微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统.新的生态,未来大部分应用场景都将给予微信小程序进行研发.基于对它的敬畏以及便于大家快速上手,特整理微信小程序商城开发系列,未来将持续增加微信小程序技术文章,让大家可全面了解如何快速开发微信小程序商城. 本篇文章主要介绍微信小程序官方提供的开发工具,俗话说:欲工善其身,必先利其器. 小程序开发文档地址https://mp.weixi

微信小程序购物商城系统开发系列

微信小程序购物商城系统开发系列 微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统.新的生态,未来大部分应用场景都将给予微信小程序进行研发.基于对它的敬畏以及便于大家快速上手,特整理微信小程序商城开发系列,未来将持续增加微信小程序技术文章,让大家可全面了解如何快速开发微信小程序商城. 本篇文章主要介绍微信小程序官方提供的开发工具,俗话说:欲工善其身,必先利其器. 小程序开发文档地址

微信小程序-视频教程-百度云-下载

微信小程序-视频教程-百度云-下载 什么是微信小程序?小程序是一种不需要下载安装即可使用的应用,它实现了应用「触手可及」的梦想,用户扫一扫或搜一下即可打开应用.也体现了「用完即走」的理念,用户不用关心是否安装太多应用的问题.应用将无处不在,随时可用,但又无需安装卸载. 为什么要学微信小程序?比 NativeApp 简单.比 WebApp 性能稳定.未来商业价值高.如果你是一名前端,那么未来小程序会是你另一个战场:如果你不是BAT,善用微信小程序开发将给你带来流量和用户:如果你是业内大V,新的研究

微信小程序腾讯云php后台解决方案

微信小程序腾讯云php后台解决方案 微信小程序前段需要添加必要的文件以配合后端 (1)wafer2-client-sdk sdk提供了几种接口包括登陆,获取用户openid,图片上传等 (2)config.js /** * 小程序配置文件 */ // 此处主机域名修改成腾讯云解决方案分配的域名 var host = 'https://vqp8djdy.qcloud.la'; var config = { // 下面的地址配合云端 Demo 工作 service: { host, // 登录地址,

微信小程序配置二

tabBar 客户端窗口底部的tab页面切换,只能配置最好两个.最多5个tab 属性说明: 属性 类型 必填 默认值 描述 color HexColor 是 tab上的文字默认颜色 selectedColor HexColor 是 tab上的文字选中时的颜色 backgroundColor HexColor 是 tab的背景颜色 boderStyle String 否 black tab上边框的颜色,仅支持black/white 大专栏  微信小程序配置二> list Array 是 tab的列

微信小程序之使用本地接口开发

本文主要讲解如何使用本地接口进行开发,很多人都会遇到这个问题,特别是小程序上线后. 一.解决思路 在小程序开发工具设置网络代理,然后再通过Charles设置代理,将https域名转为本地接口进行访问. 以下示例的环境为win7 + 老版本的微信开发工具 二.准备工作 1.配置https域名 为小程序配置request合法域名,在登录公众号平台去设置. 2.安装Charles 下载地址:https://www.charlesproxy.com/download/ 三.配置Charles 1.安装根

微信小程序的认识和开发适用性

来源:三节课课堂笔记 小程序认知 初识小程序. ? 目前微信小程序包括各类公众号接口的情况: ? 那么微信拥有的功能产品和对应的互联网产品有哪些: ? 小程序相当于AppStore应用分发市场: ? ? 张小龙对小程序的定义:用完即走.触手可及. 小程序有以下特点:安装包只有1024K大小,用户即用即搜(新的应用场景:直达服务). ???? 结合小程序的特点和新的应用场景,小程序会有哪些机会? 从APP照搬复制:各种开发门槛较低的查询类产品可能会大量复制过来,但照搬不是最好的思路. 别硬拼渠道:

微信小程序开发系列一:微信小程序的申请和开发环境的搭建

我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序: https://mp.weixin.qq.com/cgi-bin/wx 点击按钮"前往注册".注意我们需要使用一个没有注册过微信小程序或者微信公众号的邮箱.我用的是网易邮箱.注册之后,邮箱会收到一封激活邮件. 激活之后,就可以进入小程序主体信息登记页面了.这里需要使用×××号码和手机验

微信小程序蓝牙模块BLE开发说明基础知识

微信小程序蓝牙模块说明 一.简介 微信小程序作为轻量级应用的载体,确实方便了很多的应用场景.传统的产品如果要和手机互联互通,那么必须要开发两套APP,即IOS和安卓.十分的麻烦和成本巨高.但是微信小程序的出现大大的提升了效果.因为微信小程序有两个巨大的特点和优势 1.跨平台    --- 不用单独的去开发安卓和IOS的APP,只用借助微信小程序的API即可 2.依托于微信--- 微信这个常驻手机的核心APP之一 这里我们主要是说明,微信小程序和蓝牙之间的关系: 二.微信小程序关于蓝牙API 1.