微信小程序开发实践

// pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    name: "Tom",
    arr: ["cat", "dog"],
    isLogin: true,
  },
});

/* pages/index/index.wxss */
@import "../../style/guide.wxss";
.box {
  width: 200rpx;
  height: 200rpx;
  background-color: #eeeeee;
}

<!--pages/index/index.wxml-->
<view>{{count}}</view>
<button bindtap="handleButtonTap" data-id="666" size="mini">点击</button>

// /pages/about/about.js
// 初始化云数据库
const db = wx.cloud.database();
// 添加数据
handleInsert: function(){
  db.collection('data').add({
    data: {
      name: 'Tom'
    }
  }).then(res=>{
    console.log(res)
  }).catch(err=>{
    console.log(err)
  })
},
// 更新数据
handleUpdate: function () {
  db.collection('data').doc('a9bfcffc5eb78e810058cf6f4b4a03c5').update({
    data: {
      age: 20
    }
  }).then(res => {
    console.log(res)
  }).catch(err => {
    console.log(err)
  })
},
// 查找数据
handleFind: function () {
  db.collection('data').where({
    name: 'Tom'
  }).get().then(res => {
    console.log(res)
  }).catch(err => {
    console.log(err)
  })
},
// 移除数据
handleRemove: function () {
  db.collection('data').doc('a9bfcffc5eb78e810058cf6f4b4a03c5').remove().then(res => {
    console.log(res)
  }).catch(err => {
    console.log(err)
  })
},

node -v
v10.16.0

npm install --save wx-server-sdk@latest

// cloudfunctions/sum/index.js
// 云函数 求和
exports.main = async (event, context) => {
  return event.a + event.b;
}

// /pages/about/about.js
handleLoing: function(){
    wx.cloud.callFunction({
      name: 'login'
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  }

// cloudfunctions/batchDelete/index.js
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  return await db.collection('data').where({
    name: 'Tom'
  }).remove()
}

handleUploadFile: function(){
    // 选择图片
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)
        // 上传图片
        wx.cloud.uploadFile({
          // 上传至云端的路径
          cloudPath: new Date().getTime() + '.png', 
          filePath: tempFilePaths[0], // 小程序临时文件路径
          success: res => {
            // 返回文件 ID
            const fileID = res.fileID
            // 存储文件路径
            db.collection('files').add({
              data:{
                fileID: fileID
              }
            }).then(res=>{
              console.log(res)
            }).catch(err=>{
              console.log(err)
            })
          },
          fail: console.error
        })
      }
    })
  }

<block wx:for="{{images}}" wx:key="index">
  <image src="{{item.fileID}}"></image>
  <view>
    <button data-fileid="{{item.fileID}}" bindtap="handleDownloadFile">下载图片</button>
  </view>
</block>

npm i @vant/weapp -S --production