Add some samples: canvas2D, WebGL, VideoPictureInPicture

cloudfunctions/getServerDataDemo/package.json

@@ -11,4 +11,4 @@
   "dependencies": {
     "wx-server-sdk": "latest"
   }
-}
+}

cloudfunctions/getTempFileURL/package.json

@@ -11,4 +11,4 @@
   "dependencies": {
     "wx-server-sdk": "latest"
   }
-}
+}

cloudfunctions/wxContext/package.json

@@ -11,4 +11,4 @@
   "dependencies": {
     "wx-server-sdk": "latest"
   }
-}
+}

miniprogram/app.json

@@ -23,6 +23,7 @@
     "page/component/pages/image/image",
     "page/component/pages/audio/audio",
     "page/component/pages/video/video",
+    "page/component/pages/video/picture-in-picture",
     "page/component/pages/map/map",
     "page/component/pages/canvas/canvas",
     "page/component/pages/ad/ad",

miniprogram/config.js

@@ -40,10 +40,10 @@ const config = {
   downloadExampleUrl: `https://${host}/static/weapp.jpg`,
 
   // 云开发环境 ID
-  envId: 'release-b86096',
+  envId: 'mac-c0dgh',
 
   // 云开发-存储 示例文件的文件 ID
-  demoImageFileId: 'cloud://release-b86096.7265-release-b86096/demo.jpg',
+  demoImageFileId: 'cloud://mac-c0dgh.6d61-mac-c0dgh-1301916662/upload/5.png',
   demoVideoFileId: 'cloud://release-b86096.7265-release-b86096/demo.mp4',
 }
 

miniprogram/page/component/pages/canvas/canvas.js

@@ -1,3 +1,32 @@
+//WebGL
+const vs = `
+  precision mediump float;
+
+  attribute vec2 vertPosition;
+  attribute vec3 vertColor;
+  varying vec3 fragColor;
+
+  void main() {
+    gl_Position = vec4(vertPosition, 0.0, 1.0);
+    fragColor = vertColor;
+  }
+`
+
+const fs = `
+  precision mediump float;
+
+  varying vec3 fragColor;
+  void main() {
+    gl_FragColor = vec4(fragColor, 1.0);
+  }
+`
+
+const triangleVertices = [
+  0.0, 0.5, 1.0, 1.0, 0.0,
+  -0.5, -0.5, 0.7, 0.0, 1.0,
+  0.5, -0.5, 0.1, 1.0, 0.6
+];
+
 Page({
   onShareAppMessage() {
     return {
@@ -7,6 +36,7 @@ Page({
   },
 
   onReady() {
+    // canvas
     this.position = {
       x: 150,
       y: 150,
@@ -16,6 +46,63 @@ Page({
 
     this.drawBall()
     this.interval = setInterval(this.drawBall, 17)
+
+    // canvas2D
+    this.position2D = {
+      x: 150,
+      y: 150,
+      vx: 2,
+      vy: 2
+    }
+    this.x = -100;
+
+    wx.createSelectorQuery()
+      .select('#canvas2D')
+      .fields({
+        node: true,
+        size: true,
+      })
+      .exec(this.init.bind(this))
+
+    // WebGL
+    wx.createSelectorQuery()
+      .select('#canvasWebGL')
+      .node()
+      .exec((res) => {
+        const canvas = res[0].node
+        this.renderWebGL(canvas)
+      })
+  },
+
+  init(res) {
+    const width = res[0].width
+    const height = res[0].height
+
+    const canvas = res[0].node
+    const ctx = canvas.getContext('2d')
+
+    const dpr = wx.getSystemInfoSync().pixelRatio
+    canvas.width = width * dpr
+    canvas.height = height * dpr
+    ctx.scale(dpr, dpr)
+
+    const renderLoop = () => {
+      this.render(canvas, ctx)
+      canvas.requestAnimationFrame(renderLoop)
+    }
+    canvas.requestAnimationFrame(renderLoop)
+
+    const img = canvas.createImage()
+    img.onload = () => {
+      this._img = img
+    }
+    img.src = './car.png'
+  },
+
+  render(canvas, ctx) {
+    ctx.clearRect(0, 0, 305, 305)
+    this.drawBall2D(ctx)
+    this.drawCar(ctx)
   },
 
   drawBall() {
@@ -54,10 +141,111 @@ Page({
     ball(300 - p.x, 300 - p.y)
     ball(p.x, 300 - p.y)
     ball(300 - p.x, p.y)
-
     context.draw()
   },
 
+  drawBall2D(ctx) {
+    const p = this.position2D
+    p.x += p.vx
+    p.y += p.vy
+    if (p.x >= 300) {
+      p.vx = -2
+    }
+    if (p.x <= 7) {
+      p.vx = 2
+    }
+    if (p.y >= 300) {
+      p.vy = -2
+    }
+    if (p.y <= 7) {
+      p.vy = 2
+    }
+
+    function ball(x, y) {
+      ctx.beginPath()
+      ctx.arc(x, y, 5, 0, Math.PI * 2)
+      ctx.fillStyle = '#1aad19'
+      ctx.strokeStyle = 'rgba(1,1,1,0)'
+      ctx.fill()
+      ctx.stroke()
+    }
+
+    ball(p.x, 150)
+    ball(150, p.y)
+    ball(300 - p.x, 150)
+    ball(150, 300 - p.y)
+    ball(p.x, p.y)
+    ball(300 - p.x, 300 - p.y)
+    ball(p.x, 300 - p.y)
+    ball(300 - p.x, p.y)
+  },
+
+  drawCar(ctx) {
+    if (!this._img) return
+    if (this.x > 350) {
+      this.x = -100
+    }
+    ctx.drawImage(this._img, this.x++, 150 - 25, 100, 50)
+    ctx.restore()
+  },
+
+  renderWebGL(canvas) {
+
+    const gl = canvas.getContext('webgl')
+    if (!gl) {
+      console.error('gl init failed', gl)
+      return
+    }
+    gl.viewport(0, 0, 305, 305)
+    const vertShader = gl.createShader(gl.VERTEX_SHADER)
+    gl.shaderSource(vertShader, vs)
+    gl.compileShader(vertShader)
+
+    const fragShader = gl.createShader(gl.FRAGMENT_SHADER)
+    gl.shaderSource(fragShader, fs)
+    gl.compileShader(fragShader)
+
+    const prog = gl.createProgram()
+    gl.attachShader(prog, vertShader)
+    gl.attachShader(prog, fragShader)
+    gl.deleteShader(vertShader)
+    gl.deleteShader(fragShader)
+    gl.linkProgram(prog)
+    gl.useProgram(prog)
+
+    const draw = () => {
+      const triangleVertexBufferObject = gl.createBuffer()
+      gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferObject)
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW)
+
+      const positionAttribLocation = gl.getAttribLocation(prog, 'vertPosition')
+      const colorAttribLocation = gl.getAttribLocation(prog, 'vertColor')
+      gl.vertexAttribPointer(
+        positionAttribLocation,
+        2,
+        gl.FLOAT,
+        gl.FALSE,
+        5 * Float32Array.BYTES_PER_ELEMENT,
+        0
+      )
+      gl.vertexAttribPointer(
+        colorAttribLocation,
+        3,
+        gl.FLOAT,
+        gl.FALSE,
+        5 * Float32Array.BYTES_PER_ELEMENT,
+        2 * Float32Array.BYTES_PER_ELEMENT
+      )
+
+      gl.enableVertexAttribArray(positionAttribLocation)
+      gl.enableVertexAttribArray(colorAttribLocation)
+      gl.drawArrays(gl.TRIANGLES, 0, 3)
+      canvas.requestAnimationFrame(draw)
+    }
+
+    canvas.requestAnimationFrame(draw)
+  },
+
   onUnload() {
     clearInterval(this.interval)
   }

miniprogram/page/component/pages/canvas/canvas.wxml

@@ -5,8 +5,34 @@
   <template is="head" data="{{title: 'canvas'}}"/>
 
   <view class="page-body">
-    <view class="page-body-wrapper">
-      <canvas canvas-id="canvas" class="canvas"></canvas>
+    <view class="page-section">
+      <view class="page-section-title">
+      Canvas
+      </view>
+      <view class="page-section-spacing">
+        <view class="page-body-wrapper">
+          <canvas canvas-id="canvas" class="canvas"></canvas>
+        </view>
+      </view>
+    </view>
+
+    <view class="page-section">
+      <view class="page-section-title">
+        Canvas 2D
+      </view>
+      <view class="page-section-spacing">
+        <view class="page-body-wrapper">
+          <canvas type="2d" id="canvas2D" class="canvas"></canvas>    
+        </view>
+      </view>
+    </view>
+    <view class="page-section">
+      <view class="page-section-title">
+        WebGL
+      </view>
+      <view class="page-body-wrapper">
+        <canvas class="canvas" type="webgl" id="canvasWebGL"></canvas>
+      </view>
     </view>
   </view>
 

miniprogram/page/component/pages/canvas/canvas.wxss

@@ -1,5 +1,7 @@
+
 .canvas {
   width: 305px;
   height: 305px;
   background-color: #fff;
-}
+  margin-top: 60rpx;
+}

miniprogram/page/component/pages/video/picture-in-picture.js

@@ -0,0 +1,17 @@
+Page({
+  data: {
+  },
+  onLoad(options) {
+
+  },
+  onReady() {
+
+  },
+  // onShareAppMessage() {
+  //   return {
+  //     title: 'video',
+  //     path: 'page/component/pages/video/video'
+  //   }
+  // },
+});
+

miniprogram/page/component/pages/video/picture-in-picture.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "video"
+}

miniprogram/page/component/pages/video/picture-in-picture.wxml

@@ -0,0 +1,7 @@
+<import src="../../../common/head.wxml" />
+<import src="../../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: '小窗模式'}}"/>
+  <template is="foot" />
+</view>

miniprogram/page/component/pages/video/video.js

@@ -20,6 +20,10 @@ Page({
     this.videoContext = wx.createVideoContext('myVideo')
   },
 
+  onHide() {
+
+  },
+
   inputValue: '',
   data: {
     src: '',
@@ -32,7 +36,7 @@ Page({
       text: '第 3s 出现的弹幕',
       color: '#ff00ff',
       time: 3
-    }]
+    }],
   },
 
   bindInputBlur(e) {
@@ -53,6 +57,18 @@ Page({
     })
   },
 
+  bindVideoEnterPictureInPicture() {
+    console.log('进入小窗模式')
+  },
+
+  bindVideoLeavePictureInPicture() {
+    console.log('退出小窗模式')
+  },
+
+  bindPlayVideo() {
+    console.log('1')
+    this.videoContext.play()
+  },
   bindSendDanmu() {
     this.videoContext.sendDanmu({
       text: this.inputValue,