看我解析小程序云开发模板

最新推荐文章于 2023-06-05 22:26:12 发布
最新推荐文章于 2023-06-05 22:26:12 发布
阅读量885 收藏 3
点赞数 2
分类专栏： 微信小程序 文章标签： 小程序 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42148729/article/details/118386823
版权

快速了解云开发

免鉴权接口调用 免部署后台 高并发

第一步 初始化小程序1

第二步 显示页面

2

第三步 详细介绍

云函数

1、页面显示

image-20210630211457118

Xnip2021-06-30_21-35-38

image-20210630213601982

2、代码分析

关于获取OpenId以及生成小程序码，设计到自定义云函数使用。

获取OpenId

Xnip2021-07-01_08-40-50

getOpenId > index.wxml

<view>
  <view class="box_text">{{ openId ? openId : 'OpenID将展示在这里' }}</view>
  <!--  -->
  <view class="button" bindtap="getOpenId" wx:if="{{!haveGetOpenId}}">获取OpenId</view>
  <view class="button_clear" bindtap="clearOpenId" wx:if="{{haveGetOpenId}}">清空</view>
</view>

点击获取OpenId会触发js事件，显示OpenId

getOpenId > index.js

Page({
  data: {
    haveGetOpenId: false,
    envId: '',
    openId: ''
  },
  onLoad(options) {
    this.setData({
      envId: options.envId
    })
  },
  getOpenId() { //点击获取OpenId按钮
   wx.cloud.callFunction({
      name: 'quickstartFunctions',
      config: {
        env: this.data.envId
      },
      data: {
        type: 'getOpenId' //查询对应的云函数
      }
    }).then((resp) => {
      this.setData({
        haveGetOpenId: true,
        openId: resp.result.openid //从云函数中返回的openid
      })
   })
  },
  clearOpenId() { //点击清空按钮
    this.setData({
      haveGetOpenId: false,
      openId: ''
    })
  }
})

通过getOpenId函数，会查询当前云cloudfunction里面的云函数，quickstartFunctions下的getOpenId函数

image-20210701084904036

生成小程序码

image-20210701092711399

getMiniProgramCode > index.wxml

<view>
  <!--  -->
  <view  wx:if="{{codeSrc}}" class="code_box">
    <image class="code_img" src="{{codeSrc}}"></image>
  </view>
  <!--  -->
  <view class="button" bindtap="getCodeSrc" wx:if="{{!haveGetCodeSrc}}">生成小程序码</view>
  <view class="button_clear" bindtap="clearCodeSrc" wx:if="{{haveGetCodeSrc}}">清空</view>
</view>

getMiniProgramCode > index.js

Page({
  data: {
    haveGetCodeSrc: false,
    envId: '',
    codeSrc: ''
  },
  onLoad(options) {
    this.setData({
      envId: options.envId
    })
  },
  getCodeSrc() {
    wx.showLoading({
      title: '',
    })
    wx.cloud.callFunction({
      name: 'quickstartFunctions',
      config: {
        env: this.data.envId
      },
      data: {
        type: 'getMiniProgramCode'
      }
    }).then((resp) => {
      this.setData({
        haveGetCodeSrc: true,
        codeSrc: resp.result
      })
    })
  },
  clearCodeSrc() {
    this.setData({
      haveGetCodeSrc: false,
      codeSrc: ''
    })
  }
})

通过getMiniProgramCode函数，会查询当前云cloudfunction里面的云函数，quickstartFunctions下的getMiniProgramCode函数

const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 获取小程序二维码云函数入口函数
exports.main = async (event, context) => {
  // 获取小程序二维码的buffer
  const resp = await cloud.openapi.wxacode.get({
    path: 'pages/index/index'
  })
  const { buffer } = resp
  // 将图片上传云存储空间
  const upload = await cloud.uploadFile({
    cloudPath: 'code.png',
    fileContent: buffer
  })
  return upload.fileID
}

数据库

1、页面显示

Xnip2021-06-30_21-14-08

image-20210630213648713

image-20210630213728467

image-20210630213752047

image-20210630213810924

2、代码分析

关于数据库操作，创建表集合、查询操作、修改并更新数据、使用聚合操作，对数据库数据进行整理。

创建集合

image-20210701093247046

更新记录

Index.wxml

<view>
  <view  wx:if="{{record}}" class="code_box">
    <view class="code_box_title">地区销量统计</view>
    <view class="code_box_record">
      <view class="code_box_record_title">地域</view>
      <view class="code_box_record_title">城市</view>
      <view class="code_box_record_title">销量</view>
    </view>
    <view class="line"></view>
    <view class="code_box_record" wx:for="{{record}}" wx:key="_id">
      <view class="code_box_record_detail">{{item.region}}</view>
      <view class="code_box_record_detail">{{item.city}}</view>
      <input class="code_box_record_detail" bindinput="bindInput" data-index="{{index}}" value="{{item.sales}}" type="number"></input>
    </view>
  </view>
  <view class="button" bindtap="updateRecord">更新</view>
</view>

Index.js

Page({
  data: {
    haveGetRecord: false,
    envId: '',
    record: ''
  },

  onLoad(options) {
    this.setData({
      envId: options.envId
    })
  },
  updateRecord() {
    wx.showLoading({
      title: '',
    })
    wx.cloud.callFunction({
      name: 'quickstartFunctions',
      config: {
        env: this.data.envId
      },
      data: {
        type: 'updateRecord',
        data: this.data.record
      }
    }).then((resp) => {
      wx.navigateTo({
        url: `/pages/updateRecordSuccess/index`,
      })
      wx.hideLoading()
    })
  },
  bindInput (e) {
    const index = e.currentTarget.dataset.index
    const record = this.data.record
    record[index].sales = Number(e.detail.value)
    this.setData({
      record
    })
  }
})

通过updateRecord函数，会查询当前云cloudfunction里面的云函数，quickstartFunctions下的updateRecord函数

const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database()

// 修改数据库信息云函数入口函数
exports.main = async (event, context) => {
  try {
    // 遍历修改数据库信息
    for (let i = 0; i < event.data.length; i++) {
      await db.collection('sales').where({
        _id: event.data[i]._id
      })
        .update({
          data: {
            sales: event.data[i].sales
          },
        })
    }
    return {
      success: true,
      data: event.data
    }
  } catch (e) {
    return {
      success: false,
      errMsg: e
    }
  }
}

查询记录

image-20210701093702812

index.wxml

<view>
  <view  wx:if="{{record}}" class="code_box">
    <view class="code_box_title">地区销量统计</view>
    <view class="code_box_record">
      <view class="code_box_record_title">地域</view>
      <view class="code_box_record_title">城市</view>
      <view class="code_box_record_title">销量</view>
    </view>
    <view class="line"></view>
    <view class="code_box_record" wx:for="{{record}}" wx:key="_id">
      <view class="code_box_record_detail">{{item.region}}</view>
      <view class="code_box_record_detail">{{item.city}}</view>
      <view class="code_box_record_detail">{{item.sales}}</view>
    </view>
  </view>
  <view class="button" bindtap="getRecord" wx:if="{{!haveGetRecord}}">查询记录</view>
  <view class="button_clear" bindtap="clearRecord" wx:if="{{haveGetRecord}}">清空</view>
</view>

index.js

Page({
  data: {
    haveGetRecord: false,
    envId: '',
    record: ''
  },
  onLoad(options) {
    this.setData({
      envId: options.envId
    })
  },
  getRecord() {
   wx.cloud.callFunction({
      name: 'quickstartFunctions',
      config: {
        env: this.data.envId
      },
      data: {
        type: 'selectRecord'
      }
    }).then((resp) => {
      this.setData({
        haveGetRecord: true,
        record: resp.result.data
      })
   })
  },
  clearRecord() {
    this.setData({
      haveGetRecord: false,
      record: ''
    })
  }
})

通过selectRecord函数，会查询当前云cloudfunction里面的云函数，quickstartFunctions下的selectRecord函数

image-20210701094954042

聚合操作

sumRecord() {
  wx.navigateTo({
    url: `/pages/sumRecordResult/index?envId=${this.data.envId}`,
	})
},

image-20210701100937317

Index.wxml

<view>
  <view  wx:if="{{record}}" class="code_box">
    <view class="code_box_title">地区销量统计</view>
    <view class="code_box_record">
      <view class="code_box_record_title">地域</view>
      <view class="code_box_record_title">销量</view>
    </view>
    <view class="line"></view>
    <view class="code_box_record" wx:for="{{record}}" wx:key="_id">
      <view class="code_box_record_detail">{{item._id}}</view>
      <view class="code_box_record_detail">{{item.sum}}</view>
    </view>
  </view>
  <view class="button" bindtap="goBack">返回上一步</view>
</view>

index.js

Page({
  data: {
    haveGetRecord: false,
    envId: '',
    record: ''
  },
  onLoad(options) {
    this.setData({
      envId: options.envId
    })
    wx.cloud.callFunction({
      name: 'quickstartFunctions',
      config: {
        env: this.data.envId
      },
      data: {
        type: 'sumRecord'
      }
    }).then((resp) => {
      this.setData({
        record: resp.result.list
      })
      wx.hideLoading()
    })
  },
  goBack() {
   wx.navigateBack()
  }
})

通过sumRecord函数，会查询当前云cloudfunction里面的云函数，quickstartFunctions下的sumRecord函数

sumRecord > index.js

const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database()
const $ = db.command.aggregate

// 聚合记录云函数入口函数
exports.main = async (event, context) => {
  // 返回数据库聚合结果
  return db.collection('sales').aggregate()
    .group({
      _id: '$region',
      sum: $.sum('$sales')
    })
    .end()
}

云存储

1、页面显示

Xnip2021-06-30_21-10-50

Xnip2021-06-30_21-11-32

Xnip2021-06-30_21-13-04

2、代码分析

关于上传文件的代码分析，点击上传文件，会跳转到子页面，继续点击上传一张图片，会更新当前的空白显示，显示出图片以及文件路径，下面有个清空按钮。

image-20210701102615324

index.wxml

<view>
  <view  wx:if="{{imgSrc}}" class="code_box">
    <image class="code_img" src="{{imgSrc}}"></image>
    <view class="img_info">
      <view class="img_info_title">文件路径</view>
      <view class="img_info_detail">{{imgSrc}}</view>
    </view>
  </view>
  <view class="button" bindtap="uploadImg" wx:if="{{!haveGetImgSrc}}">上传一张图片</view>
  <view class="button_clear" bindtap="clearImgSrc" wx:if="{{haveGetImgSrc}}">清空</view></view>
</view>

index.js

Page({
  data: {
    haveGetImgSrc: false,
    envId: '',
    imgSrc: ''
  },
  onLoad(options) {
    this.setData({
      envId: options.envId
    })
  },
  uploadImg() {
    // 让用户选择一张图片
    wx.chooseImage({
      count: 1,
      success: chooseResult => {
        // 将图片上传至云存储空间
        wx.cloud.uploadFile({
          // 指定上传到的云路径
          cloudPath: 'my-photo.png',
          // 指定要上传的文件的小程序临时文件路径
          filePath: chooseResult.tempFilePaths[0],
          config: {
            env: this.data.envId
          }
        }).then(res => {
          console.log('上传成功', res)
          this.setData({
            haveGetImgSrc: true,
            imgSrc: res.fileID
          })
        }).catch((e) => {
          console.log(e)
        })
      },
    })
  },
  clearImgSrc() {
    this.setData({
      haveGetImgSrc: false,
      imgSrc: ''
    })
  }
})

云托管

Xnip2021-06-30_21-09-15

Xnip2021-06-30_21-10-19

自定义云函数

image-20210701095451337

index.js

const getOpenId = require('./getOpenId/index')
const getMiniProgramCode = require('./getMiniProgramCode/index')
const createCollection = require('./createCollection/index')
const selectRecord = require('./selectRecord/index')
const updateRecord = require('./updateRecord/index')
const sumRecord = require('./sumRecord/index')

// 云函数入口函数
exports.main = async (event, context) => {
  switch (event.type) {
    case 'getOpenId':
      return await getOpenId.main(event, context)
    case 'getMiniProgramCode':
      return await getMiniProgramCode.main(event, context)
    case 'createCollection':
      return await createCollection.main(event, context)
    case 'selectRecord':
      return await selectRecord.main(event, context)
    case 'updateRecord':
      return await updateRecord.main(event, context)
    case 'sumRecord':
      return await sumRecord.main(event, context)
  }
}

总结

这是一个云开发的模板，通过分析此代码，了解明白小程序云开发的开发步骤。本模板的功能点，云函数方面，获取OpenId、生成小程序码，安全、免鉴权运行业务代码。数据库操作方面，创建表集合、更新表记录、查询表记录、聚合表操作，安全稳定的文档型数据库。云存储方面，使用云开发内的存储项，可以上传文件操作，自带CDN加速文件存储。云托管方面，不限语言的全托管容器服务。这就是官方云开发模板的介绍。使用wx.cloud.callFunction调用云函数，可以不用在js里面写过多的数据库交互逻辑，要全部写在云函数里面。这就是学习云开发的初步了解。

互联网小队
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
小程序云开发之用户注册登录
12-28
本文实例为大家分享了小程序云开发用户注册登录的具体代码，供大家参考，具体内容如下 注册界面和文件 登录界面和文件 这里的UI使用iviewUI 不懂可以看我的另一篇文章IviewUI 先说注册界面 json如下 wxml如下...
微信小程序开发从0基础到unit-app开发
03-08
微信小程序开发从0基础到UI开发,如Vant组件、uniApp。文章从0基础讲起到各个组件的使用，都包含了代码事例，可以作为平常开发时的手册使用，也是我开发时打算用来作为开发手册使用了，毕竟人大脑不可能记住所有的...
小程序云开发（一）：新建云开发模板
qq_42050067的博客
10-07 1679
一，介绍 二，新建项目 1. 新建云开发模板 也可以省略此步骤，直接在已有项目上开通和使用云开发。 新建项目选择一个空目录，填入 AppID（使用云开发能力必须填写 AppID），勾选创建 “云开发 QuickStart 项目”，点击创建即可得到一个展示云开发基础能力的示例小程序。该小程序与普通 QuickStart 小程序有以下不同需注意： 无游客模式、也不可以使用 测试号 project.c...
【微信小程序】【云开发模板】云开发篇（五）——自定义初始化云开发模板（供直接下载源码）
南方者的博客
05-14 991
主要做一个适合自己的小程序云开发公共模板项目，方便自己创建进行开发。做了个简单的页面DEMO！主要使用组件是lin-ui...
（Day1）配置云开发提供的模板
最新发布
ZeroSwift的博客
06-05 416
配置云开发学习模板
小程序云开发：由空白项目构建云开发环境
weixin_42195593的博客
05-16 1103
（1）首先在根目录下新建一个文件夹cloudFunctions （2）指定配置，打开project.config.json: 加上 "cloudfunctionRoot": "cloudfunctions/" 然后就可以看到有个云函数的标志了。 ...
基于微信云开发的简单商城小程序源码与配置指导
qq_51180625的博客
01-14 1万+
基于微信云开发的简单商城小程序实现了首页、分类页面、商品列表页面、商品详情页面、购物车及其个人页面，由于开发时间有限，项目页面不是很完善，功能也比较简单，比较适合小白参考学习，数据是在微信云开发数据库中存储，有需要的朋友在根据下面的操作完成后可以在数据库中修改自己想要的wxss样式以及图片。（本程序部分参考了网络上大佬的代码片段并加上自己的理解根据自己的需求进行编写修改，商品图片来源于百度）
微信小程序开发实现消息推送
12-11
微信小程序的消息推送简单的说就是发送一条微信通知给用户，用户点开消息可以查看消息内容，可以链接进入到小程序的指定页面。 微信小程序消息推送需要用户触发动作才能发送消息，比如用户提交订单、支付成功。一次...
微信小程序云开发实现一对一即时聊天，发送语音、文件、图片、添加好友等功能
06-16
利用云开发的即时通信demo做的仿照微信好友聊天。 实现 即时通信，即时发送文件，即时发送语音，更换聊天背景图、发送朋友圈(图片，视频等)，利用订阅消息发送好友申请的通知。 可以直接部署，具体的文章请看我的两...
微信小程序期末大作业 点餐小程序
12-07
点餐小程序（免积分下载），详情看我的文章介绍。
envconfig：envconfig提供了一个从环境变量获取配置对象的功能
02-04
envconfig：envconfig提供了一个从环境变量获取配置对象的功能
【小程序】微信小程序云开发笔记详细教程（建议收藏）
11-18 5945
无需搭建服务器，快速构建小程序、公众号；无需搭建服务器，只需使用平台提供的各项能力，即可快速开发业务。直白来讲，小程序云开发就是让前端程序员拥有后端的能力云开发提供了一个 JSON 数据库，顾名思义，数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合（相当于关系型数据中的表），集合可看做一个 JSON 数组，数组中的每个对象就是一条记录，记录的格式是 JSON 对象。云函数即在云端（服务器端）运行的函数。
微信小程序开发使用security.imgSecCheck检查用户上传的图片
yuluo的博客
11-04 772
微信小程序开发使用security.imgSecCheck检查用户上传的图片 云函数 const cloud = require('wx-server-sdk') /** * by yuluo * 测试 成功 */ cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 图片检测云函数入口函数 exports.main = async (event, context) => { console.log("test") cons
微信小程序中的云开发初步模板建立
小火车况且况且况且的博客
02-28 605
微信小程序中的云开发初步模板建立 新建一个云开发模板：注意这里的AppID必须填入，云开发没有游客模式 模板界面：多出来的cloudfunctions文件就是云开发的文件，后面跟着的|wx-project是先前配置的云环境 创建一个云环境 3.1 进入云开发的控制台 3.2 配置环境 云环境配置完之后就是初步的使用获取openid 4.1 首先得回到miniproject文件夹下面的a...
小程序云开发教程一: 新建一个云开发项目以及基本布局
Johnny Liao的博客
09-25 1万+
大家好,之前本人用业余时间(捣鼓了大概两三天),开发了一个小程序【糗皮虎】，里面包含了查看段子，点赞，分享，评论，发帖，登录等等功能，功能还是有待完善的，希望我的踩坑，可以为各位带来一些启示。 部分截图如下： 一,如何新建小程序云开发项目 首先，先去申请账号：https://developers.weixin.qq.com/miniprogram/dev/index.html?t=...
微信小程序云开发使用方法新手初体验
热门推荐
qq_37942845的博客
09-11 5万+
今天看到微信推送了一条小程序云上线通知，作为一个前端er，满怀期待的去看了看，很不错先看看文档上怎么说的： 开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力，6的一匹。 云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。（就...
【微信小程序】云开发篇（四）——开通云开发
南方者的博客
12-09 1697
【微信小程序】云开发篇（一）——申请小程序 【微信小程序】云开发篇（二）——初始化云开发（微信开发者工具） 【微信小程序】云开发篇（三）——代码管理 【微信小程序】云开发篇（四）——开通云开发 【微信小程序】【云开发模板】云开发篇（五）——自定义初始化云开发模板（供直接下载源码） 微信云开发官方文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html 文章目录1. 开通云开发 1. 开通云开
微信小程序云开发（一）
chenzikong的博客
10-27 2316
1.2 项目的创建与配置 要开始小程序云开发，首先就需要先注册一个小程序，开通云开发服务，然后下载开发者工具和翻阅小程序开发与云开发的技术文档。除此之外，还需要在创建云开发项目时，注意一些配置的细节。 1.2.1 注册微信小程序 小程序的注册非常方便，打开小程序注册页面，按照要求填入个人的信息，验证邮箱和手机号，扫描二维码绑定你的微信号即可，3分钟左右的时间即可搞定。 注册页面：小程序注册页面 注册小程序时不能使用注册过微信公众号、微信开放平台的邮箱哦，也就是需要你使用一个其他邮箱才行。小程序和微信.
微信小程序万能模板（tabBar\openid\授权登录\云开发之一个云函数实现云数据库增删查改！）
m0_51907564的博客
10-18 908
微信小程序万能模板。首先，一般来说做一个微信小程序第一步就是分析功能，建立依据功能划分tabBar;其次，小程序少不了用户登录，这是小程序的一个基本功能；再次，在记录用户信息和行为时我们需要用到能够唯一标识用户身份的openid；最后也是最重要的，小程序的一切功能都离不开数据库的“增删查改”操作，这里用很简洁的方式将云数据库的增删查改封装起来，简化代码，便于应用。
怎样产看我的ubuntu上有哪些中文字体，并解析字体名
05-05
你可以使用以下命令来查看你的 Ubuntu 系统上已安装的中文字体： ``` ...``` 该命令会列出所有支持中文的字体，包括 TrueType、OpenType、Type1 等格式的字体。每个字体名称都包含在一对单引号中，字体名称的后面则是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

互联网小队

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值