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

Posted 前端杂货店

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了看我解析小程序云开发模板相关的知识，希望对你有一定的参考价值。

快速了解云开发

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

第一步 初始化小程序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({