小程序云开发

 

 

 

index.wxml 

<button type="primary" bindtap="search">查询云数据库数据</button>
<button type="primary" bindtap="insert">插入云数据库数据</button>
<button type="primary" bindtap="insertmore">插入多条</button>
<button type="primary" bindtap="delete">删除云数据库数据</button>
<button type="primary" bindtap="update">修改数据</button>
<view>------------------------------------------------------</view>
<button type="primary" bindtap="uploadimg">上传图片</button>
<image src="{{tempPath}}" alt="" mode="aspectFill"></image>
<view>------------------------------------------------------</view>
<!-- 视频播放 -->
<view class="page-body" style="margin-left: 30px;">
  <view class="page-section tc">
    <video 
      id="myVideo" 
      src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" 
      binderror="videoErrorCallback" 
      danmu-list="{{danmuList}}" 
      enable-danmu 
      danmu-btn 
      show-center-play-btn='{{false}}' 
      show-play-btn="{{true}}" 
      controls
      picture-in-picture-mode="{{['push', 'pop']}}"
      bindenterpictureinpicture='bindVideoEnterPictureInPicture'
      bindleavepictureinpicture='bindVideoLeavePictureInPicture'
    ></video>
    <view style="margin: 30rpx auto" class="weui-label">弹幕内容</view>
    <input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" />
    <button style="margin: 30rpx auto"  bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">发送弹幕</button>
    <navigator style="margin: 30rpx auto"  url="picture-in-picture" hover-class="other-navigator-hover">
      <button type="primary" class="page-body-button" bindtap="bindPlayVideo">小窗模式</button>
    </navigator>
  </view>
</view>
<!-- //video标签中的src可以是云储存中的云ID -->

<!-- 音频播放 -->
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{audioSrc}}" id="myaudio" controls loop></audio>


<!-- 云函数部分 -->
<!-- //云函数查询数据，可以突破用户权限获取数据 -->
<button type="primary" bindtap="cloudsearch">查询</button>

<!-- 云函数的参数 -->
<button type="warn" bindtap="plus">传递参数相加</button>

<!-- 请求部分 -->
<button type="primary" bindtap="Get">Get请求</button>
<button type="primary" bindtap="Post">Post请求</button>

index.js

// index.js
wx.cloud.init()//建议全局使用(app.js)
const db = wx.cloud.database()

function getRandomColor() {
  const rgb = []
  for (let i = 0; i < 3; ++i) {
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length === 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}//实现视频弹幕的随机颜色出现

Page({
  inputValue: '',
  data:{
    //图片路径
    tempPath:'',
    //视频路径
    src: 'cloud://cloud1-6gkopodf88507569.636c-cloud1-6gkopodf88507569-1310875828/snsdyvideodownload.mp4',
    // 音频路径
    audioSrc:'https://636c-cloud1-6gkopodf88507569-1310875828.tcb.qcloud.la/%E6%88%91%E4%BB%AC%E7%9A%84%E6%97%B6%E5%85%89.mp3?sign=5833159bda16843bcefe1859eaf1c4c6&t=1664846928',//这里用下载地址，不用云ID
    poster:'https://img2.baidu.com/it/u=3994052977,3052925735&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    name:'我们的时光',
    author:'赵雷',
    danmuList:
    [{
      text: '第 1s 出现的弹幕',
      color: '#ff0000',
      time: 1
    }, {
      text: '第 3s 出现的弹幕',
      color: '#ff00ff',
      time: 3
    }]

  },
  //查询云数据库数据
  search(){
    db.collection('demo').get().then(res => {
      // res.data 包含该记录的数据
      console.log(res.data)
    })
  },

  // //插入单条数据
  // insert(){
  //   db.collection('demo').add({
  //     data:{
  //       username:'wjwj',
  //       age:23
  //     }
  //   }).then(res => {
  //     console.log(res)
    
  //   })
  // }
  

  //插入单条数据(封装好的插入数据的一个方法通过promise)
  insert(username,age){
    // 返回promise对象
   return new Promise((resolve,reject) => {
    db.collection('demo').add({
      data:{
        username:username,
        age:age
      }
    }).then(res => {
      resolve(res)
    })
   });
  },


  //  async function(){}//async:代表异步函数(await),表示第一个做完，再去做第二个
  //插入多条数据
  insertmore(){
    let that = this
    async function func(){
      await that.insert('lucy',18)
      await that.insert('any',19)
    }
    //调用异步方法
    func();
  },
 //删除数据
  delete(){
    db.collection('demo').where({
      username:'any'
    }).remove().then(res => {
      console.log(res)
    })
  },

  //修改数据
  update(){
    db.collection('demo').where({
      username:'张三'
    }).update({
      data:{
        username:'月月'
      }
    }).then(res => {
      console.log(res)
    })
  },

  //上传文件
  uploadimg(){
    let that = this
    wx.chooseImage({
      success (res) {
        const tempFilePaths = res.tempFilePaths
        that.setData({
          tempPath:tempFilePaths[0]
        })
        // console.log(tempFilePaths)
        wx.cloud.uploadFile({
          cloudPath: 'example.jpg',
          filePath: tempFilePaths[0], // 文件路径
        }).then(res => {
          // get resource ID
          console.log(res.fileID)
        }).catch(error => {
          // handle error
          console.log(error)
        })
      }
    })
  },

  //视频播放
  onShareAppMessage() {
    return {
      title: 'video',
      path: 'page/component/pages/video/video'
    }
  },




  bindInputBlur(e) {
    this.inputValue = e.detail.value
  },

  bindButtonTap() {
    const that = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: ['front', 'back'],
      success(res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  },

  bindVideoEnterPictureInPicture() {
    console.log('进入小窗模式')
  },

  bindVideoLeavePictureInPicture() {
    console.log('退出小窗模式')
  },

  bindPlayVideo() {
    console.log('1')
    this.videoContext.play()
  },
  bindSendDanmu() {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  },

  videoErrorCallback(e) {
    console.log('视频错误信息:')
    console.log(e.detail.errMsg)
  },

  onShareAppMessage() {
    return {
      title: 'video',
      path: 'page/component/pages/video/video'
    }
  },

  onReady() {
    this.videoContext = wx.createVideoContext('myVideo'),
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myaudio')
  },

  onHide() {

  },

  inputValue: '',
  data: {
    src: '',
    danmuList:
    [{
      text: '第 1s 出现的弹幕',
      color: '#ff0000',
      time: 1
    }, {
      text: '第 3s 出现的弹幕',
      color: '#ff00ff',
      time: 3
    }],
  },

  bindInputBlur(e) {
    this.inputValue = e.detail.value
  },

  bindButtonTap() {
    const that = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: ['front', 'back'],
      success(res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  },

  bindVideoEnterPictureInPicture() {
    console.log('进入小窗模式')
  },

  bindVideoLeavePictureInPicture() {
    console.log('退出小窗模式')
  },

  bindPlayVideo() {
    console.log('1')
    this.videoContext.play()
  },
  bindSendDanmu() {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  },

  videoErrorCallback(e) {
    console.log('视频错误信息:')
    console.log(e.detail.errMsg)
  },

  //云函数查询 客户端获取db,加上wx,云函数获取db,不加wx
  cloudsearch(){
    wx.cloud.callFunction({
      name:"chaxun"
    }).then(res => {
      console.log(res)
    })
  },

  //传两个参数给服务端，让服务端相加后返回结果
  plus(){
    wx.cloud.callFunction({
      name:"plus",
      data:{
        a:1,
        b:2
      }
    }).then(res => {
      console.log(res.result)
    })
  },

  //发起get请求，  -->查文档
  Get(){
    wx.request({
      url:'https://api.readhub.cn/topic',//默认请求都是GET
      method:'GET',
      data:{
        pageSize:10
      },
      success(res){
        console.log(res.data)
      }
    })
  },

  Post(){
    wx.request({
      url:'http://kumanxuan1.f3322.net:8001/auth/loginByWeb',
      method:'POST',
      data:{
        username:'wx',
        pwd:'wx'
      },
      success(res){
        console.log(res)
      }

    })
  }

})


// 云开发用的比较少，一般的小程序用的是前端加上后端
//小程序不用解决，所以在分离开发中比较友好

云函数 --> chaxun

// index.js
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境
const db = cloud.database()
// 注意任何一个云函数，必须返回一个东西
// 其次在云函数中console.log没有意义
// 因为你写的代码不再是客户端的代码，而是服务端的代码，服务端的代码
// 不会在客户端打印，所以你要return出去，在客户端进行打印


// 云函数入口函数
exports.main = async (event, context) => {

  // 一.查询数据
  return db.collection('demo').get().then(res => {
    // res.data 包含该记录的数据
    return res;
  })


  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}