码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2019-12-12 17:59:05      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:png   必须   std   就是   cloud   本地   页面   过程   delete   

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>
              View Code
            • 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)
                    })
                },
              View Code
            • 注意:如果是在数据库手动加入记录,会出现查不到的情况,这个时候我们需要设置

                                                              技术图片

      • 云函数:相当于小程序在服务端的后台代码,可以非常方便的获取到当前登录用户的信息(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、遇到的问题

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

标签:png   必须   std   就是   cloud   本地   页面   过程   delete   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!