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

我就是我 2022-10-11 14:53 163阅读 0赞

## 快速了解云开发 ##

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

## 第一步 初始化小程序![1][] ##

## 第二步 显示页面 ##

![2][]

## 第三步 详细介绍 ##

### 云函数 ###

1、页面显示

![image-20210630211457118][]

![Xnip2021-06-30\_21-35-38][Xnip2021-06-30_21-35-38]

![image-20210630213601982][]

2、代码分析

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

获取OpenId

![Xnip2021-07-01\_08-40-50][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][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-10-50]

![Xnip2021-06-30\_21-11-32][Xnip2021-06-30_21-11-32]

![Xnip2021-06-30\_21-13-04][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-09-15]

![Xnip2021-06-30\_21-10-19][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里面写过多的数据库交互逻辑，要全部写在云函数里面。这就是学习云开发的初步了解。

[1]: /images/20221005/c02ad2ef32e94c51b2affcee7f4f98af.png
[2]: /images/20221005/0a2bc7ac2f8e478ba9236c6ae6f83502.png
[image-20210630211457118]: /images/20221005/2dc85c1077f34cbdb291759849ebad85.png
[Xnip2021-06-30_21-35-38]: /images/20221005/efb4ee286279477d91a2d394fc9ee846.png
[image-20210630213601982]: /images/20221005/66c9ab2e7e29482b83f3b2d95c986ce2.png
[Xnip2021-07-01_08-40-50]: /images/20221005/a6cbfaad148a4eadb300af2e8ca049cb.png
[image-20210701084904036]: /images/20221005/9ca3cc7d6a3f479db9da5f927ed9b4cc.png
[image-20210701092711399]: /images/20221005/548bf13648184634b0b9678fed72aedd.png
[Xnip2021-06-30_21-14-08]: /images/20221005/e6e40f9d998f4ce9bc7b641636d7466b.png
[image-20210630213648713]: /images/20221005/b2bacbdfc6f2405188f658a91c155957.png
[image-20210630213728467]: /images/20221005/882a090523164698847907ae3c532e79.png
[image-20210630213752047]: /images/20221005/877a2b969b4c4b2591a0edeeeab3a86c.png
[image-20210630213810924]: /images/20221005/011b79199ca84ecebe875bd51e3e6749.png
[image-20210701093247046]: /images/20221005/8a9afca978724f149b1e7da79d42763a.png
[image-20210701093702812]: /images/20221005/dd324f42b5f74170a38939d76b1d4d16.png
[image-20210701094954042]: /images/20221005/d856bc2428c14bd8a729cdf090c0f8e8.png
[image-20210701100937317]: /images/20221005/ba56278bde644246bb8dddaf8315067b.png
[Xnip2021-06-30_21-10-50]: /images/20221005/67eca4f1e93e4f93b407ce34f6fae47b.png
[Xnip2021-06-30_21-11-32]: /images/20221005/1b29c70ff4314c83ba8114811fbbe217.png
[Xnip2021-06-30_21-13-04]: /images/20221005/0e5418ee5ac943f693956fd8679771b2.png
[image-20210701102615324]: /images/20221005/ea8d93f1af7c4f9ca4d043bd9ce1de62.png
[Xnip2021-06-30_21-09-15]: /images/20221005/9c4290d29d74495f8466b23bf99394ab.png
[Xnip2021-06-30_21-10-19]: /images/20221005/886441d6d70b42c08ad26e480371e266.png
[image-20210701095451337]: /images/20221005/e64559d31ad34b4db28250b9a1306c7f.png