微信小程序云开发中的那些事

一、权限控制

微信小程序云开发数据库提供四种权限，如下所示：
我们可以看到，其最大提供的权限也就是所有用户可读，仅创建者可写。当我们需要非创建者对数据库进行写操作时，就显得很无力，会出现无法修改数据库内容的情况。这时，我们可以通过云函数对数据库进行操作，云函数默认管理员权限执行，权限最高。

二、图片上传

• test.wxml

<view class="uploader">
    <view class="uploader-text" bindtap="doUpload">
      <text>上传图片</text>
    </view>
    <view class="uploader-container" wx:if="{{imgUrl}}">
      <image class="uploader-image" src="{{imgUrl}}" mode="aspectFit" bindtap="previewImg"></image>
    </view>
</view>

• test.wxss

.uploader{
  height: auto;
  padding: 0 0 0 40rpx;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}

.uploader-text{
  width: 100%;
  line-height: 52px;
  font-size: 34rpx;
  color: #007aff;
}

.uploader-container {
  width: 100%;
  height: 400rpx;
  padding: 20rpx 20rpx 20rpx 0;
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.uploader-image {
  width: 100%;
  height: 360rpx;
}

• test.js

const app = getApp()

Page({
	data:{
	},
	doUpload: function () {
    // 选择图片
    wx.chooseImage({	// 上传图片API，成功1则返回一个临时的文件路径
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {

        wx.showLoading({
          title: '上传中',
        })

        const filePath = res.tempFilePaths[0]	// 选择成功时的临时图片路径
        
        // 上传图片
        const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]	// 正则匹配拓展名，再与文件名进行组合，组合成图片在云存储中的路径
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            console.log('[上传文件] 成功：', res)

            app.globalData.fileID = res.fileID	// 成功返回res.fileID，其为图片地址，通过访问该地址可访问图片
            app.globalData.cloudPath = cloudPath
            app.globalData.imagePath = filePath
            
            wx.navigateTo({
              url: '../storageConsole/storageConsole'
            })
          },
          fail: e => {
            console.error('[上传文件] 失败：', e)
            wx.showToast({
              icon: 'none',
              title: '上传失败',
            })
          },
          complete: () => {
            wx.hideLoading()
          }
        })

      },
      fail: e => {
        console.error(e)
      }
    })
  }
})

三、用户登录

• test.wxml

<view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
    	<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      	<text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
 </view>

• test.js

//获取应用实例
const app = getApp()

Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

• test.wxss

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

四、生命周期函数

4.1 onLoad函数与onShow函数

onLoad函数在用户进入页面时发生，对于tabBar页面，每次进入小程序只执行一次。
onShow函数在用户进入页面时发生，对于所有页面，只要你进入一次，页面中的该函数就执行一次。

4.2 onUnload函数与onHide函数

onUnload函数在用户退出页面时发生，对于tabBar页面，每次进入小程序只执行一次。
onHide函数在用户退出页面时发生，对于所有页面，只要你退出一次，页面中的该函数就执行一次。

后续待补充…
官方文档是最好的教程
更多细节请查看微信小程序开发官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/