微信小程序开发实践

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

<!--pages/index/index.wxml-->
<!-- 变量 -->
<view>{{name}}</view>
<!-- 列表 -->
<view wx:for="{{arr}}" wx:key="{{index}}">
  {{index}} {{item}}
</view>
<!-- 条件 -->
<view wx:if="{{isLogin}}">已登录</view>
<view wx:else>请登录</view>

/* 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/index/index.js
Page({
  handleButtonTap: function (event) {
    console.log(event);
    // 更新数据
    this.setData({
      count: this.data.count + 1,
    });
  },
});

// /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
handleCallFunc: function() {
    wx.cloud.callFunction({
      name: 'sum',
      data: {
        a: 2,
        b: 3
      }
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  },

// /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()
}

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

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>

// pages/about/about.js
// 初始化云数据库
const db = wx.cloud.database();
Page({
  data: {
    images: []
  },
 getFileList: function() {
    // 获取图片列表
    wx.cloud.callFunction({
      name: 'login',
    }).then(res => {
      db.collection('files').where({
        _openid: res.result.openid
      }).get().then(res => {
        console.log(res)
        this.setData({
          images: res.data
        })
      })
    })
  },
  handleDownloadFile: function(event) {
    // 下载文件
    console.log(event.target.dataset.fileid)
    wx.cloud.downloadFile({
      fileID: event.target.dataset.fileid, // 文件 ID
      success: res => {
        // 返回临时文件路径
        console.log(res.tempFilePath)
        // 保存图片到相册
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) { 
            wx.showToast({
              title: '保存成功',
            })
          }
        })
      },
      fail: console.error
    })
  }
})

npm i @vant/weapp -S --production