#前端# 小程序雲開發

基本功能:

目錄結構:

index.html

<view>
  username: <input bindinput="addName"></input>
  password: <input type="password" bindinput="addPwd"></input>
  <button class="btn" bindtap="add" type="primary">添加數據</button>

  <button bindtap="search" type="primary">查詢數據</button>
  
  id: <input bindinput="delId"></input>
  <button bindtap="del">刪除數據</button>

  更新的id: <input bindinput="updId"></input>
  更新的用戶名: <input bindinput="updUsername"></input>
  <button bindtap="upd">更新數據</button>

  <button bindtap="addFunc">調用加法雲函數</button>

  <button bindtap="getOpenId">獲取openId</button>

  <button bindtap="searchFromSQl">數據庫查詢列表</button>
  <button bindtap="searchFromCloud">雲函數查詢列表</button>

  <button bindtap="uploadImg">上傳圖片</button>
  <image src="{{ img }}"></image>

  <button bindtap="uploadFile">上傳文件(doc/exec/pdf)</button>
  <button bindtap="openXslx">下載並打開文檔</button>
</view>

index.js

//index.js
//獲取應用實例
const app = getApp()
const db = wx.cloud.database()

Page({
  data: {
    username: '',
    password: '',
    id: '',
    img: ''
  },
  openXslx() {
    wx.cloud.downloadFile({
      fileID: 'cloud://mysstic-ca0eef.6d79-mysstic-ca0eef-1256866225/工作計劃.xlsx',
      success: res => {
        // get temp file path
        console.log(res.tempFilePath)
        wx.openDocument({
          filePath: res.tempFilePath,
          success: function (res) {
            console.log('打開文檔成功')
          }
        })
      },
      fail: err => {
        // handle error
      }
    })
  },
  uploadFile() {
    let that = this
    wx.chooseMessageFile({
      count: 10,
      type: 'all',
      success (res) {
        // tempFilePath可以作爲img標籤的src屬性顯示圖片
        const tempFilePaths = res.tempFiles
        console.log(tempFilePaths)
        wx.cloud.uploadFile({
          cloudPath: tempFilePaths[0].name,
          filePath: tempFilePaths[0].path, // 文件路徑
          success: res => {
            // get resource ID
            console.log(res.fileID)
          },
          fail: err => {
            // handle error
          }
        })
      }
    })
  },
  uploadImg() {
    let that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        const tempFilePaths = res.tempFilePaths
        wx.cloud.uploadFile({
          cloudPath: new Date().getTime() + '.jpg', // 上傳至雲端的路徑
          filePath: tempFilePaths[0], // 小程序臨時文件路徑
          success: res => {
            that.setData({
              img: tempFilePaths
            })
            console.log(res.fileID)
          },
          fail: console.error
        })
      }
    })
  },
  updUsername(e) {
    this.setData({
      username: e.detail.value
    })
  },
  updId(e) {
    this.setData({
      id: e.detail.value
    })
  },
  delId(e) {
    console.log(e.detail.value)
    this.setData({
      id: e.detail.value
    })
  },
  addName(e) {
    console.log(e.detail.value)
    this.setData({
      username: e.detail.value
    })
  },
  addPwd(e) {
    console.log(e.detail.value)
    this.setData({
      password: e.detail.value
    })
  },

  add() {
    db.collection('users').add({
      data: {
        useranme: this.data.username,
        password: this.data.password
      },
      success: function() {
        console.log('添加成功')
      }
      
    })
  },
  search() {
    db.collection('users').get({
      success: function(res) {
        console.log('查詢成功',res)
      }
    })
  },
  del() {
    db.collection('users').doc(this.data.id).remove({
      success(res) {
        console.log('刪除成功', res)
      },
      fail(res) {
        console.log('刪除失敗', res)
      }
    })
  },
  upd() {
    db.collection('users').doc(this.data.id).update({
      data: {
        username: this.data.username
      },
      success(res) {
        console.log(res, 'update success...')
      },
      fail(res) {
        console.log(res, 'update fail...')
      }
    })
  },
  addFunc() {
    wx.cloud.callFunction({
      name: 'add',
      data: {
        a: 1,
        b: 2
      },
      success(res) {
        console.log('success',res)
      },
      fail(res) {
        console.log('fail')
      }
    })
  },
  getOpenId() {
    wx.cloud.callFunction({
      name: 'getOpenId',
      success(res) {
        console.log('success', res)
      },
      fail(err) {
        console.log(err)
      }
    })
  },
  searchFromSQl() {
    db.collection('users').get({
      success(res) {
        console.log(res)
      },
      fail(err) {
        console.log(err)
      }
    })
  },
  searchFromCloud() {
    wx.cloud.callFunction({
      name: 'getList',
      success(res) {
        console.log(res)
      },
      fail(err) {
        console.log(err)
      }
    })
  }
})

project.config.json

// 要加上 cloudfunctionRoot 雲函數文件夾路徑配置
{
	"cloudfunctionRoot": "cloud/",
	"description": "項目配置文件",
	"packOptions": {
		"ignore": []
	},
	"setting": {
		"urlCheck": true,
		"es6": true,
		"postcss": true,
		"minified": true,
		"newFeature": true,
		"coverView": true,
		"autoAudits": false,
		"showShadowRootInWxmlPanel": true,
		"scopeDataCheck": false,
		"checkInvalidKey": true,
		"checkSiteMap": true,
		"uploadWithSourceMap": true,
		"babelSetting": {
			"ignore": [],
			"disablePlugins": [],
			"outputPath": ""
		},
		"useCompilerModule": true
	},
	"compileType": "miniprogram",
	"libVersion": "2.11.1",
	"appid": "wxf1f5610935280545",
	"projectname": "haimansi",
	"debugOptions": {
		"hidedInDevtools": []
	},
	"isGameTourist": false,
	"simulatorType": "wechat",
	"simulatorPluginLibVersion": {},
	"condition": {
		"search": {
			"current": -1,
			"list": []
		},
		"conversation": {
			"current": -1,
			"list": []
		},
		"game": {
			"currentL": -1,
			"list": []
		},
		"miniprogram": {
			"current": -1,
			"list": []
		}
	}
}

雲函數入口文件 index.js

// 雲函數入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 雲函數入口函數
exports.main = async (event, context) => {
	// 具體的業務邏輯
  return await cloud.database().collection('users').get()
}