Merge branch 'master' into master

app.js

@@ -1,6 +1,7 @@
 //app.js
 App({
-  onLaunch: function () {
+  onLaunch: function (opt) {
+    console.log('onLaunch: ', opt)
     // 展示本地存储能力
     var logs = wx.getStorageSync('logs') || []
     logs.unshift(Date.now())

app.json

@@ -32,8 +32,14 @@
     "pages/component/movable/movable",
     "pages/component/doc-web-view/doc-web-view",
     "pages/component/page-meta/page-meta",
+    "pages/component/map/map",
+    "pages/component/multiple-map/multiple-map",
+    "pages/component/keyboard-accessory/keyboard-accessory",
     "pages/component/camera/camera",
-    "pages/component/cover-view/cover-view"
+    "pages/component/cover-view/cover-view",
+    "pages/component/webrtc/webrtc",
+    "pages/component/page-container/page-container",
+    "pages/component/share-element/share-element"
   ],
   "subpackages": [
     {
@@ -83,7 +89,10 @@
         "pages/FileSystemManager/writefile",
         "pages/EventChannel/firstpage/index",
         "pages/EventChannel/secondpage/index",
-        "pages/Accelerometer/index"
+        "pages/Accelerometer/index",
+        "pages/getRandomValues/getRandomValues",
+        "pages/checkIsOpenAccessibility/index",
+        "pages/locationapi/index"
       ]
     }
   ],

fide.project.config.json

@@ -0,0 +1,12 @@
+{
+  "description": "项目配置文件",
+  "packOptions": {
+    "ignore": []
+  },
+  "setting": {
+    "useOldBuilder": false
+  },
+  "compileType": "miniprogram",
+  "projectname": "applet-demo",
+  "isGameTourist": false
+}

packageAPI/pages/FileSystemManager/writefile.js

@@ -1,526 +1,167 @@
 // pages/writefile/index.js
 console.log('page 打印', wx.env.USER_DATA_PATH);
+
+// const base64 = require('../../utils/data')
+let fs = null
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-    filePath: `${wx.env.USER_DATA_PATH}/d`,
+    // base64,
-    data: "",
+    // 配置路径循环生成
-    encoding: "utf-8",
+    paths: [
-    source: "",
+      `finfile://usr/a.txt`,
-    readencoding:"utf-8"
+      `finfile://usr/b.txt`,
+      `finfile://usr/c.txt`,
+      `finfile://usr/test`,
+      `finfile://usr/1.zip`,
+      `finfile://usr/test/a.txt`,
+      `finfile://usr/test/b.txt`,
+      `finfile://usr/test/c.txt`,
+      `finfile://temp/c.txt`,
+      `finfile://temp/a/b/c`,
+      `finfile://store/c.txt`,
+      `http://usr/1.zip`,
+      `http://usr/aa`,
+      `http://usr/aa/ab.txt`,
+      `http://store/a.txt`,
+      `http://store/b.txt`,
+      `http://store/test`,
+      `wxfile://usr/aa`,
+      `wxfile://usr/aa/abc.txt`,
 
-  },
-
-  readFileFunc(path, encoding,position,length) {
-    console.log('readFile encoding:', encoding, '; path:', path);
-
-    const fs = wx.getFileSystemManager()
-    fs.readFile({
-      filePath: path,
-      encoding,
-      position,
-      length,
-
-      success(res) {
-        console.log('readFile success:', res)
-      },
-      fail(res) {
-        console.log('readFile fail:', res)
-      }
-    })
-  },
-
-  readFileSyncFunc(path, encoding, position, length) {
-    console.log('readFileSync encoding:', encoding, '; path:', path);
-
-    const fs = wx.getFileSystemManager()
-
-    try {
-      const res = fs.readFileSync(path, encoding,position,length)
-      console.log('readFileSync res:', res)
-    } catch (e) {
-      console.log('readFileSync error:', e)
-    }
-  },
-
-  //同步
-  writeFileSync() {
-    const fs = wx.getFileSystemManager()
-    try {
-      const res = fs.writeFileSync(
-         /* `${wx.env.USER_DATA_PATH}/hello.mp3` */null, "", 'utf8'
-      )
-      console.log('writeFileSync:', res)
-
-    } catch (e) {
-      console.error('writeFileSync err:', e)
-    }
-  },
-
-  //异步文件测试 
-  writeFile() {
-    console.log("打印地址", this.data.filePath)
-    console.log("当前选中deta：",this.data.data)
-    const fs = wx.getFileSystemManager()
-    fs.writeFile({
-      filePath: this.data.filePath,
-      data: this.data.data,
-      encoding: this.data.encoding,
-      success: (res) => {
-        console.log('writeFile success:', res)
-        console.log(`${wx.env.USER_DATA_PATH}/d`)
-        this.readFileSyncFunc(this.data.filePath, this.data.encoding,1,3)
-        this.readFileFunc(this.data.filePath, this.data.encoding,2,4)
-      },
-      fail(res) {
-        console.log('writeFile fail:', res)
-        console.log(`${wx.env.USER_DATA_PATH}/d`)
-      }
-    })
-  },
-
-  writeFileStartRange() {
-    console.log("打印地址", this.data.filePath)
-    console.log("当前选中deta：",this.data.data)
-    const fs = wx.getFileSystemManager()
-    fs.writeFile({
-      filePath: this.data.filePath,
-      data: this.data.data,
-      encoding: this.data.encoding,
-      success: (res) => {
-        console.log('writeFile success:', res)
-        console.log(`${wx.env.USER_DATA_PATH}/d`)
-        this.readFileSyncFunc(this.data.filePath, this.data.encoding,3,1)
-        this.readFileFunc(this.data.filePath, this.data.encoding,3,1)
-      },
-      fail(res) {
-        console.log('writeFile fail:', res)
-        console.log(`${wx.env.USER_DATA_PATH}/d`)
-      }
-    })
-  },
-
-  writeFileLength0() {
-    console.log("打印地址", this.data.filePath)
-    console.log("当前选中deta：",this.data.data)
-    const fs = wx.getFileSystemManager()
-    fs.writeFile({
-      filePath: this.data.filePath,
-      data: this.data.data,
-      encoding: this.data.encoding,
-      success: (res) => {
-        console.log('writeFile success:', res)
-        console.log(`${wx.env.USER_DATA_PATH}/d`)
-        this.readFileSyncFunc(this.data.filePath, this.data.encoding,2,0)
-        this.readFileFunc(this.data.filePath, this.data.encoding,2,0)
-      },
-      fail(res) {
-        console.log('writeFile fail:', res)
-        console.log(`${wx.env.USER_DATA_PATH}/d`)
-      }
-    })
-  },
-
-  writeFileLengthPoint() {
-    console.log("打印地址", this.data.filePath)
-    console.log("当前选中deta：",this.data.data)
-    const fs = wx.getFileSystemManager()
-    fs.writeFile({
-      filePath: this.data.filePath,
-      data: this.data.data,
-      encoding: this.data.encoding,
-      success: (res) => {
-        console.log('writeFile success:', res)
-        console.log(`${wx.env.USER_DATA_PATH}/d`)
-        this.readFileSyncFunc(this.data.filePath, this.data.encoding,2,1.2)
-        this.readFileFunc(this.data.filePath, this.data.encoding,2,1.2)
-      },
-      fail(res) {
-        console.log('writeFile fail:', res)
-        console.log(`${wx.env.USER_DATA_PATH}/d`)
-      }
-    })
-  },
-
-
-  writeFileReadnoEncoding() {
-    console.log("打印地址", this.data.filePath)
-    console.log("当前选中deta：",this.data.data)
-    const fs = wx.getFileSystemManager()
-    const path = `${wx.env.USER_DATA_PATH}/nc`
-    fs.writeFile({
-      filePath:path,
-      data: this.data.data,
-      encoding: this.data.encoding,
-      success: (res) => {
-        console.log('writeFile success:', res)
-        console.log('写文件路径：' ,path),
-        this.readFileSyncFunc(path)
-        this.readFileFunc(path)
-      },
-      fail(res) {
-        console.log('writeFile fail:', res)
-//        console.log(`${wx.env.USER_DATA_PATH}/d`)
-      }
-    })
-  },
-
-  writeFilePermission() {
-    console.log("打印地址", this.data.filePath)
-    console.log("当前选中deta：",this.data.data)
-    const fs = wx.getFileSystemManager()
-    fs.writeFile({
-
-      data: this.data.data,
-      filePath:`${wx.env.USER_DATA_PATH}/d`, 
-      encoding: this.data.encoding,
-      success: (res) => {
-        console.log('writeFile success:', res)
-        console.log(`${wx.env.USER_DATA_PATH}/d`)
-        this.readFileSyncFunc(this.data.filePath, this.data.encoding,1,3)
-        this.readFileFunc(this.data.filePath, this.data.encoding,2,4)
-      },
-      fail(res) {
-        console.log('writeFile fail:', res)
-        console.log(`${wx.env.USER_DATA_PATH}/d`)
-      }
-    })
-  },
-
-  writeFileNotFound() {
-    console.log("打印地址", this.data.filePath)
-    console.log("当前选中deta：",this.data.data)
-    const fs = wx.getFileSystemManager()
-    fs.writeFile({
-
-      data: this.data.data,
-      filePath:`${wx.env.USER_DATA_PATH}/d`, 
-      encoding: this.data.encoding,
-      success: (res) => {
-        console.log('writeFile success:', res)
-        console.log(`${wx.env.USER_DATA_PATH}/d`)
-        this.readFileSyncFunc(`${wx.env.USER_DATA_PATH}/dl`,this.data.encoding,1,3)
-        this.readFileFunc(`${wx.env.USER_DATA_PATH}/dl`, this.data.encoding,2,4)
-      },
-      fail(res) {
-        console.log('writeFile fail:', res)
-        console.log(`${wx.env.USER_DATA_PATH}/d`)
-      }
-    })
-  },
-
-  base64File() {
-    const path = `${wx.env.USER_DATA_PATH}/d`
-    wx.fileToBase64({
-      url: path,
-      success: (res) =>  {
-        console.log('fileToBase64 success:  ', res)
-        console.log(res.data)
-      },
-      fail(res) {
-        console.log('fileToBase64 fail:  ', res)
-      }
-    })
-  },
-
-  saveFile() {
-    wx.saveFile({
-      filePath: `${wx.env.USER_DATA_PATH}/d`,
-      success(res) {
-        console.log("保存成功", res)
-      },
-      fail(res) {
-        console.log("保存失败", res)
-      }
-    })
-  },
-
-
-
-  downFile() {
-    wx.downloadFile({
-      url: `${wx.env.USER_DATA_PATH}/d`,
-      success(res) {
-        console.log("下载成功", res)
-      },
-      fail(res) {
-        console.log("下载失败", res)
-      }
-    })
-  },
-
-  //图片
-  writeImage() {
-    const fs = wx.getFileSystemManager()
-    const path = `${wx.env.USER_DATA_PATH}/a`
-    fs.writeFile({
-      filePath: path,
-      data: this.data.data,
-      encoding: this.data.encoding,
-      success: (res) => {
-        console.log('writeImagSuccess', res)
-        console.log(path)
-        this.readFileSyncFunc(path, 'base64')
-        this.readFileFunc(path, 'base64')
-      },
-      fail(res) {
-        console.log('writeImageFail', res)
-      }
-    })
-  },
-
-  imagePreview() {
-    wx.previewImage({
-      urls: [`${wx.env.USER_DATA_PATH}/a`],
-      success(res) {
-        console.log("图片预览成功", res)
-      },
-      fail(res) {
-        console.log("图片预览失败", res)
-      }
-    })
-  },
-
-
-  imageCompress() {
-
-    wx.compressImage({
-      src: '`${wx.env.USER_DATA_PATH}/a`',
-
-      success(res) {
-        console.log("图片压缩成功", res)
-      },
-      fail(res) {
-        console.log("图片压缩失败", res)
-      }
-    })
-  },
-
-
-  imageSaveToPhotosAlbum() {
-    wx.saveImageToPhotosAlbum({
-      filePath: `${wx.env.USER_DATA_PATH}/a`,
-
-      success(res) {
-        console.log("图片保存到相册成功", res)
-      },
-      fail(res) {
-        console.log("图片保存到相册失败", res)
-      }
-    })
-  },
-
-  fileUpload() {
-
-    wx.uploadFile({
-      filePath: `${wx.env.USER_DATA_PATH}/a`,
-      name: 'file',
-      url: 'https://finchat-mop-b.finogeeks.club/api/v1/mop/finstore/dev/files?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2MjUxOTQyMjgsImZjaWQiOiI1ZmYzZDhmZWU3YzNiNTAwMDExYWQxMmEiLCJpYXQiOjE2MjUxODcwMjgsImlzcyI6Ijc1NWUxNnFrNVZLUnBlcWhKM1IySVFwV2NOdlQ5TWJOIn0.IQXdjiH5One-GVsU9E5KTze0fXJ7InJE-BrmcQs9yIc',
-      success(res) {
-        console.log("文件上传成功", res)
-      },
-      fail(res) {
-        console.log("文件上传失败", res)
-      }
-    })
-  },
-
-
-
-  //视频
-  writeVideo() {
-    const fs = wx.getFileSystemManager()
-    const path = `${wx.env.USER_DATA_PATH}/b.mp4`
-    fs.writeFile({
-      filePath: path,
-      data: this.data.data,
-      encoding: this.data.encoding,
-      success: (res) => {
-        console.log('writeVideo Success', res)
-        console.log(`${wx.env.USER_DATA_PATH}/b.mp4`)
-
-        this.readFileSyncFunc(path, 'base64')
-        this.readFileFunc(path, 'base64')
-      },
-
-      fail(res) {
-        console.log('writeFail', res)
-      }
-    })
-  },
-
-  videoSaveToPhotosAlbum() {
-    wx.saveVideoToPhotosAlbum({
-      filePath: `${wx.env.USER_DATA_PATH}/b.mp4`,
-      success(res) {
-        console.log("视频保存到相册成功", res)
-      },
-      fail(res) {
-        console.log("视频保存到相册失败", res)
-      }
-    })
-  },
-
-
-  mediaPreview() {
-    wx.previewMedia({
-      sources: [
-        {
-          "url": `${wx.env.USER_DATA_PATH}/b.mp4`,
-          "type": "video"
-        }
     ],
-      success(res) {
+
-        console.log("视频播放成功", res)
+
+    filePath: '',
+    data: "",
+    encoding: "",
+    recursive: null,
+    path1: '',
+    path2: '',
+    flag: '',
+    position: '',
+    offset:'',
+    entries:''
   },
-      fail(res) {
+
-        console.log("视频播放失败", res)
+  onLoad() {
+    this.setData({
+      filePath: `${wx.env.USER_DATA_PATH}`
+    })
+    fs = wx.getFileSystemManager()
+  },
+
+  setParams(e) {
+    const { key } =  e.currentTarget.dataset
+    this.setData({
+      [key]: e.detail.value
+    })
+  },
+
+
+  
+
+  downZipSave(){
+    const  fs=wx.getFileSystemManager()
+    wx.downloadFile({
+      url: 'https://app.finogeeks.com/finchat/sdk/FinApplet-dev-2.34.0-alpha20210826v06.zip',
+      success(res){
+        console.log("文件下载成功",res)
+        fs.saveFile({
+          tempFilePath: res.tempFilePath,
+          filePath: `${wx.env.USER_DATA_PATH}/1.zip`,          
+          success(res){
+            console.log("zip保存成功",res)
+          },
+          fail(res){
+            console.log("zip保存失败",res)
+          }
+        })
       }
     })
   },
 
 
-  videoPreview() {
+  invokeApi(e) {
-    wx.previewVideo({
+    console.log('点击了 button')
+    const { api, encoding, data, recursive, flag, length, entries, position, offset, arr = [], set, arrayBuffer, ...params } =  e.currentTarget.dataset
 
-      url: `${wx.env.USER_DATA_PATH}/b.mp4`,
+    if (api) {
-      autoplay: true,
+      // 将配置的参数转换为 data 参数
-      success(res) {
+      Object.keys(params).forEach(value => {
-        console.log('视频播放成功', res)
+        const key = params[value]
-      },
+        params[value] = this.data[key]
-      fail(res) {
+      })
-        console.log('播放失败', res)
+
+      // encoding 和 data 有配置就是 true，直接赋值
+      if (encoding !== undefined) {
+        params.encoding = this.data.encoding
       }
-    })
 
-  },
+      if (entries !== undefined) {
-
+        params.entries = this.data.entries
-  //语音
-  writeAudio() {
-    const fs = wx.getFileSystemManager()
-    const path = `${wx.env.USER_DATA_PATH}/c.mp3`
-    fs.writeFile({
-      filePath: path,
-      data: this.data.data,
-      encoding: this.data.encoding,
-      success: (res) => {
-        console.log('writeAudio Success', res)
-        console.log(`${wx.env.USER_DATA_PATH}/c.mp3`)
-        this.readFileSyncFunc(path, 'base64',10,13)
-        this.readFileFunc(path, 'base64',20,15)
-      },
-
-      fail(res) {
-        console.log('writeFail', res)
       }
-    })
-  },
 
-  innerAudioPlay() {
+      if (length !== undefined) {
-    const ctx = wx.createInnerAudioContext()
+        params.length = this.data.length
-    ctx.src = `${wx.env.USER_DATA_PATH}/c.mp3`
+      }
-    /*     ctx.seek(20) */
+      if (position !== undefined) {
-    ctx.play()
+        params.position = this.data.position
-    ctx.onPlay(() => {
+      }
-      console.log('开始播放')
+
+      if (data !== undefined) {
+        params.data = this.data.data
+      }
+      if (recursive !== undefined) {
+        params.recursive = this.data.recursive
+      }
+
+      if (flag !== undefined) {
+        params.flag = this.data.flag
+      } 
+
+      if (arrayBuffer !== undefined) {
+        params.arrayBuffer = new ArrayBuffer(arrayBuffer)
+      }
+      
+      if (api.endsWith('Sync') && arr && arr.length) {
+        let list = arr.split(',').map(key => this.data[key])
+        console.log('准备执行同步 api：', api, list)
+        fs[api].apply(this, list)
+      } else {
+        console.log('准备执行 api：', api, params)
+        const res = fs[api]({
+          ...params,
+          success: (res) =>{
+            if (set && res[set]) {
+              this.setData({
+                [set]: res[set]
               })
-    ctx.onError((res) => {
+            }
-      console.log(res.errMsg)
+            console.log('调用成功 success')
-      console.log(res.errCode)
             console.log(res)
-    })
           },
-
+          fail (res) {
-
+            console.log('调用失败 fail')
-  voicePlay() {
+            console.log(res)
-
-    wx.playVoice({
-      filePath: `${wx.env.USER_DATA_PATH}/c.mp3`,
-      success(res) {
-        console.log("播放成功", res)
-      },
-      fail(res) {
-        console.log("播放失败", res)
           }
         })
-  },
+        if (res) {
-
+          console.log('调用成功 success:', res)
-
-  documentOpen() {
-    const fs = wx.getFileSystemManager()
-    fs.writeFile({
-      filePath: `${wx.env.USER_DATA_PATH}/wd.doc`,
-      data: this.data.data,
-      encoding: this.data.encoding,
-      success(res) {
-        console.log('writeSuccess', res)
-        console.log(`${wx.env.USER_DATA_PATH}/wd.doc`)
-        wx.openDocument({
-          filePath: `${wx.env.USER_DATA_PATH}/wd.doc`,
-
-          success(res) {
-            console.log("文件打开成功", res)
-          },
-          fail(res) {
-            console.log("文件打开失败", res)
         }
-        })
+        if (set) {
-      },
-      fail(res) {
-        console.log('writeFail', res)
-      }
-    })
-  },
-
-
-
-
-
-
-
-
-  writeFileArrayBuffer() {
-    console.log("打印地址", this.data.filePath)
-    /*     console.log("打印data",this.data.data) */
-    const fs = wx.getFileSystemManager()
-    fs.writeFile({
-      data: wx.base64ToArrayBuffer(this.data.data),
-      filePath: `${wx.env.USER_DATA_PATH}/d`,
-      encoding: this.data.encoding,
-      success(res) {
-        console.log('writeSuccess', res)
-        console.log(`${wx.env.USER_DATA_PATH}/d`)
-      },
-      fail(res) {
-        console.log('writeFail', res)
-        console.log(`${wx.env.USER_DATA_PATH}/d`)
-      }
-    })
-  },
-
-
-
-
-  bindchangepath(e) {
           this.setData({
-      filePath: e.detail.value
+            [set]: res
           })
-  },
+        }
-
+      }
-  bindchangeencoding(e) {
-    this.setData({
-      encoding: e.detail.value
-    })
-  },
-
-  bindchangedata(e) {
-    this.setData({
-      data: e.detail.value
-    })
-  },
 
 
+
+    }
+  }
 })
+ 

packageAPI/pages/FileSystemManager/writefile.json

@@ -1,4 +1,3 @@
 {
-  "usingComponents": {},
+  "usingComponents": {}
-  "disableScroll":false
 }

packageAPI/pages/FileSystemManager/writefile.wxss

@@ -1,8 +1,6 @@
-/* pages/writefile/index.wxss */
+/* pages/file-2/index.wxss */
-
+.box {
-.title {
+  display: flex;
-  padding: 10rpx 20rpx;
+  flex-wrap: wrap;
-  font-size: 30rpx;
+  padding-bottom: 300rpx;
-  font-weight: bold;
-  text-align: center;
 }

packageAPI/pages/canvas/canvas.js

@@ -1,5 +1,14 @@
 const example = require('./example.js')
 
+function randomHexColor() {
+  var r = Math.floor(Math.random() * 256); //随机生成256以内r值
+  var g = Math.floor(Math.random() * 256); //随机生成256以内g值
+  var b = Math.floor(Math.random() * 256); //随机生成256以内b值
+  var alpha = Math.random() * 0.4 + 0.6; //随机生成1以内a值
+  return `rgba(${r},${g},${b},${alpha})`; //返回rgba(r,g,b,a)格式颜色
+
+}
+
 Page({
   onShareAppMessage() {
     return {
@@ -8,53 +17,165 @@ Page({
     }
   },
 
+  log1(e) {
+    console.log('ctx1:', e.type, e)
+  },
+
+  log2(e) {
+    console.log('ctx2:', e.type, e)
+  },
+
   onLoad() {
-    this.context = wx.createContext()
-    console.log('wx.createContext', this.context);
 
     const methods = Object.keys(example)
-    console.log(methods);
     this.setData({
       methods
     })
 
+    // 旧获取 canvas 方式
+    const ctx1 = wx.createCanvasContext('canvas1');
+    console.log('ctx1', ctx1)
+
+    // 新获取 canvas 方式
+    let ctx2
+    let canvas2
+    const query = wx.createSelectorQuery()
+    query.select('#canvas2').fields({ node: true, size: true }).exec((res) => {
+      canvas2 = res[0].node
+      ctx2 = canvas2.getContext('2d')
+
+      // 可以设置 dpr 的值，绘制高分辨率的图
+      const dpr = 1 || wx.getSystemInfoSync().pixelRatio
+      canvas2.width = res[0].width * dpr
+      canvas2.height = res[0].height * dpr
+      console.log('ctx2', ctx2)
+    })
+
+    // fino 基础库兼容新旧写法，两者均可获取到同样的 context
+    // 当 canvas 带 native 时，表示用原生组件
+    // 原生组件下，仅 putImageData 和 getImageData api 会有区别
+
     const that = this
     methods.forEach(function (method) {
       that[method] = function () {
-        // 写法1 官方文档有描述的写法， 微信基础库支持，我们不支持
+        console.log("run:", method)
-        // 
+        let color = null
-        console.log('call action', method)
+        if (method === 'setRandom') {
-        const ctx = wx.createCanvasContext('canvas');
+          color = randomHexColor()
-        example[method](ctx)
+        }
-        ctx.draw(false, (res) => { console.log(res) });
+        example[method](ctx1, true, color)
-        const actions = that.context.getActions()
+        // 旧版需要调用 draw 接口
-        console.log('that.context.getActions()', actions, ctx);
+        ctx1.draw(true, (res) => { console.log('ctx1 draw finish:', res) });
 
-        // 写法2 更旧版本的写法 微信支持，fino基础库不支持
+        example[method](ctx2, false, color, canvas2)
-        // wx.createContext 和 wx.drawCanvas 疑似已经被从官方基础库文档中移除，但是官方基础库依旧支持
+        try {
-
+          // 微信新的 canvas 没有 draw 方法，加个报错兼容
-        // example[method](that.context)
+          ctx2.draw(true, (res) => { console.log('ctx2 draw finish:', res) })
-        // const actions = that.context.getActions()
+        } catch (err) {
-        // wx.drawCanvas({
+        }
-        //   canvasId: 'canvas',
-        //   actions
-        // })
-
-        // 写法3 同层渲染的原生canvas 就没实现
       }
     })
   },
 
   toTempFilePath() {
     wx.canvasToTempFilePath({
-      canvasId: 'canvas',
+      canvasId: 'canvas1',
       success(res) {
-        console.log(res)
+        console.log('canvas1', res)
       },
 
       fail(res) {
-        console.log(res)
+        console.log('canvas1', res)
       }
     })
+
+    const query = wx.createSelectorQuery()
+    query.select('#canvas2').fields({ node: true, size: true }).exec((res) => {
+      const canvas = res[0].node
+
+      wx.canvasToTempFilePath({
+        canvas,
+        success(res) {
+          console.log('canvas2', res)
+        },
+
+        fail(res) {
+          console.log('canvas2', res)
+        }
+      })
+    })
+  },
+  imageData() {
+
+    // 旧版
+    // 整一个绿色方块
+    const arr = new Array(100 * 100 * 4);
+    for (var i = 0; i < arr.length; i += 4) {
+      arr[i + 0] = 0;
+      arr[i + 1] = 255;
+      arr[i + 2] = 0;
+      arr[i + 3] = 255;
+    }
+    // 把绿色方块画到 0 0 坐标
+    wx.canvasPutImageData({
+      canvasId: 'canvas1',
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+      data: new Uint8ClampedArray(arr),
+      success(res) {
+        console.log(res)
+      },
+      fail: console.log
+    })
+    // 获取 0 0 坐标，100 * 100 的图
+    wx.canvasGetImageData({
+      canvasId: 'canvas1',
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 100,
+      success(res) {
+        console.log(res)
+        // 把获取到的，画到 200 0 坐标上
+        // 会出现两个绿色方块
+        wx.canvasPutImageData({
+          canvasId: 'canvas1',
+          x: 200,
+          y: 0,
+          width: 100,
+          height: 100,
+          data: res.data,
+          success(res) {
+            console.log(res)
+          },
+          fail: console.log
+        })
+      },
+      fail: console.log
+    })
+
+
+    // 新版
+    const query = wx.createSelectorQuery()
+    query.select('#canvas2').fields({ node: true, size: true }).exec((res) => {
+      const canvas = res[0].node
+      const context = canvas.getContext('2d')
+      // 一个绿色方块数据
+      const imgData = context.createImageData(100, 100);
+      for (var i = 0; i < imgData.data.length; i += 4) {
+        imgData.data[i + 0] = 0;
+        imgData.data[i + 1] = 255;
+        imgData.data[i + 2] = 0;
+        imgData.data[i + 3] = 255;
+      }
+
+      context.putImageData(imgData, 0, 0, 20, 20, 100, 100)
+
+      const image = context.getImageData(50, 50, 100, 100)
+      context.putImageData(image, 200, 0, 20, 20, 100, 100)
+    })
+
   }
 })

packageAPI/pages/canvas/canvas.wxml

@@ -2,16 +2,47 @@
 <import src="../../common/foot.wxml" />
 
 <view class="container">
-  <template is="head" data="{{title: 'createContext'}}"/>
+  <template is="head"
-  <view>本demo使用官方文档中的CanvasContext的调用方式</view>
+            data="{{title: 'createContext'}}" />
   <view class="page-body">
     <view class="page-section">
-      <canvas class="canvas-element" canvas-id="canvas"></canvas>
+      <!-- 旧 canvas 写法 -->
-      <scroll-view class="canvas-buttons" scroll-y="true">
+      <canvas class="canvas-element"
-        <button class="canvas-button" bindtap="toTempFilePath">toTempFilePath</button>
+              style="border: 1rpx solid green;"
-        <block wx:for="{{methods}}" wx:for-item="method">
+              disable-scroll="{{true}}"
-          <button class="canvas-button" bindtap="{{method}}" >{{method}}</button>
+              bindtouchstart="log1"
+              bindtouchmove="log1"
+              bindtouchend="log1"
+              bindtouchcancel="log1"
+              bindlongtap="log1"
+              binderror="log1"
+              canvas-id="canvas1"></canvas>
+      <!-- 新 canvas 写法 -->
+      <canvas native
+              class="canvas-element"
+              style="border: 1rpx solid rosybrown;"
+              id="canvas2"
+              disable-scroll="{{true}}"
+              bindtouchstart="log2"
+              bindtouchmove="log2"
+              bindtouchend="log2"
+              bindtouchcancel="log2"
+              bindlongtap="log2"
+              binderror="log2"
+              type="2d"></canvas>
+      <scroll-view class="canvas-buttons"
+                   scroll-y="true">
+        <view class="canvas-button-box">
+          <button class="canvas-button"
+                  bindtap="toTempFilePath">toTempFilePath</button>
+          <button class="canvas-button"
+                  bindtap="imageData">imageData</button>
+          <block wx:for="{{methods}}"
+                 wx:for-item="method">
+            <button class="canvas-button"
+                    bindtap="{{method}}">{{method}}</button>
           </block>
+        </view>
       </scroll-view>
     </view>
   </view>

packageAPI/pages/canvas/canvas.wxss

@@ -2,20 +2,32 @@
   display: block;
   margin-bottom: 50px;
 }
+
 .canvas-element {
   width: 100%;
-  height: 250px;
+  height: 200px;
   background-color: #ffffff;
-}
-.canvas-buttons {
-  padding: 15px 25px 5px;
-  width: 100%;
-  height: 330px;
   box-sizing: border-box;
 }
-.canvas-button {
+
-  float: left;
+.canvas-buttons {
-  line-height: 2;
+  padding: 5px;
-  width: 150px;
+  width: 100%;
-  margin: 8px 11px;
+  height: 450px;
+  box-sizing: border-box;
+}
+
+.canvas-button-box {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.canvas-button {
+  flex: 0 1 45% !important;
+  width: 45% !important;
+  line-height: 2;
+  padding: 4rpx;
+  margin: 0 4rpx 4rpx 0 !important;
+  border: 1rpx solid #666;
 }

packageAPI/pages/canvas/example.js

@@ -1,18 +1,211 @@
 const example = {}
 
-example.measureText = function (context) {
+example.setGreen = function (context, isOld) {
+  example.setRandom(context, isOld, 'green')
+}
+
+example.setRed = function (context, isOld) {
+  example.setRandom(context, isOld, 'red')
+}
+
+// 设置随机颜色
+example.setRandom = function (context, isOld, color) {
+  if (isOld) {
+    context.setFillStyle(color)
+    context.setStrokeStyle(color)
+    context.setFontSize(10)
+    context.setShadow(10, 10, 30, color)
+    context.setLineCap('butt')
+    context.setLineJoin('miter')
+    context.setLineWidth(1)
+    context.setMiterLimit(10)
+  } else {
+    context.fillStyle = color
+    context.strokeStyle = color
+    context.fontSize = 10
+    context.shadowColor = color
+    context.shadowBlur = 30
+    context.shadowOffsetX = 10
+    context.shadowOffsetY = 10
+    context.lineCap = 'butt'
+    context.lineJoin = 'miter'
+    context.lineWidth = 1
+    context.miterLimit = 10
+  }
+}
+
+// 重置颜色
+example.reset = function (context, isOld) {
+  context.beginPath()
+
+  if (isOld) {
+    context.setFillStyle('#000000')
+    context.setStrokeStyle('#000000')
+    context.setFontSize(10)
+    context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)')
+    context.setLineCap('butt')
+    context.setLineJoin('miter')
+    context.setLineWidth(1)
+    context.setMiterLimit(10)
+  } else {
+    context.fillStyle = '#000000'
+    context.strokeStyle = '#000000'
+    context.fontSize = 10
+    context.shadowColor = 'rgba(0, 0, 0, 0)'
+    context.shadowBlur = 0
+    context.shadowOffsetX = 0
+    context.shadowOffsetY = 0
+    context.lineCap = 'butt'
+    context.lineJoin = 'miter'
+    context.lineWidth = 1
+    context.miterLimit = 10
+  }
+}
+
+example.transform = function (context, isOld) {
+  context.transform(1, 0, 0, 1, 30, 10)
+}
+
+example.measureText = function (context, isOld) {
   const data = context.measureText('123')
   console.log(`width: ${data.width}`)
 }
 
-example.rotate = function (context) {
+example.arc = function (context, isOld) {
   context.beginPath()
-  context.rotate(10 * Math.PI / 180)
+  context.arc(75, 75, 50, 0, Math.PI * 2, true)
-  context.rect(225, 75, 20, 10)
+  context.moveTo(110, 75)
-  context.fill()
+  context.arc(75, 75, 35, 0, Math.PI, false)
+  context.moveTo(65, 65)
+  context.arc(60, 65, 5, 0, Math.PI * 2, true)
+  context.moveTo(95, 65)
+  context.arc(90, 65, 5, 0, Math.PI * 2, true)
+
+  context.stroke()
 }
 
-example.scale = function (context) {
+example.arcTo = function (context, isOld) {
+  context.beginPath();
+  context.moveTo(20, 20);           // 创建开始点
+  context.lineTo(100, 20);          // 创建水平线
+  context.arcTo(150, 20, 150, 70, 50); // 创建弧
+  context.lineTo(150, 120);
+  context.arcTo(200, 120, 200, 170, 20); // 创建弧
+  context.stroke();
+}
+
+example.beginPath = function (context, isOld) {
+  context.beginPath()
+  context.moveTo(20, 75)
+  context.lineTo(250, 75)
+  context.stroke()
+
+  context.beginPath()
+  context.moveTo(50, 20)
+  context.lineTo(150, 130)
+  context.stroke()
+}
+
+example.bezierCurveTo = function (context, isOld) {
+  context.beginPath()
+  context.moveTo(20, 20)
+  context.bezierCurveTo(20, 100, 200, 100, 200, 20)
+  context.stroke()
+  context.beginPath()
+  context.moveTo(60, 60)
+  context.bezierCurveTo(60, 100, 200, 100, 200, 60)
+  context.stroke()
+}
+
+example.clearRect = function (context, isOld) {
+  context.beginPath()
+  context.rect(0, 0, 300, 150)
+  context.fill()
+  context.clearRect(20, 20, 100, 50)
+}
+
+example.clip = function (context, isOld) {
+  // 剪切矩形区域
+  context.rect(50, 20, 200, 120)
+  context.stroke()
+  context.clip()
+  context.fillRect(0, 0, 150, 100)
+}
+
+example.closePath = function (context, isOld) {
+  context.beginPath()
+  context.moveTo(20, 20)
+  context.lineTo(20, 100)
+  context.lineTo(70, 100)
+  context.closePath()
+  context.stroke()
+
+  context.beginPath()
+  context.moveTo(100, 100)
+  context.lineTo(120, 120)
+  context.lineTo(100, 200)
+  context.closePath()
+  context.stroke()
+}
+
+example.rotate = function (context, isOld) {
+  context.beginPath()
+  context.rotate(10 * Math.PI / 180)
+  context.rect(225, 75, 50, 50)
+  context.fill()
+  context.strokeStyle = 'red'
+  context.rect(225, 75, 50, 50)
+  context.stroke()
+}
+
+example.createCircularGradient = function (context, isOld) {
+  if (isOld) {
+    const grd = context.createCircularGradient(75, 50, 50)
+    grd.addColorStop(0, 'red')
+    grd.addColorStop(1, 'green')
+    context.setFillStyle(grd)
+    context.fillRect(10, 10, 150, 80)
+    context.draw()
+  } else {
+    const grd = context.createRadialGradient(75, 50, 5, 20, 20, 20);
+    grd.addColorStop(0, "red")
+    grd.addColorStop(1, "green")
+    context.fillStyle = grd
+    context.fillRect(10, 10, 150, 80)
+  }
+}
+
+example.createLinearGradient = function (context, isOld) {
+  const grd = context.createLinearGradient(0, 0, 170, 0)
+  grd.addColorStop(0, "black")
+  grd.addColorStop(1, "white")
+  if (isOld) {
+    context.setFillStyle(grd)
+  } else {
+    context.fillStyle = grd
+  }
+  context.fillRect(20, 20, 150, 100)
+}
+
+example.createPattern = function (context, isOld, color, canvas) {
+  if (isOld) {
+    const pat = context.createPattern('../../../image/icon_cloud_HL.png', "repeat")
+    context.setFillStyle(pat)
+    context.rect(0, 0, 150, 100)
+    context.fill()
+  } else {
+    const img = canvas.createImage()
+    img.onload = () => {
+      const pat = context.createPattern(img, "repeat")
+      context.fillStyle = pat
+      context.rect(0, 0, 150, 100)
+      context.fill()
+    }
+    img.src = '../../../image/icon_cloud_HL.png'
+  }
+}
+
+example.scale = function (context, isOld) {
   context.beginPath()
   context.rect(25, 25, 50, 50)
   context.stroke()
@@ -22,50 +215,58 @@ example.scale = function (context) {
   context.beginPath()
   context.rect(25, 25, 50, 50)
   context.stroke()
-}
 
-example.reset = function (context) {
+
+  context.scale(3, 3)
   context.beginPath()
+  context.rect(40, 40, 50, 50)
+  context.stroke()
 
-  context.setFillStyle('#000000')
-  context.setStrokeStyle('#000000')
-  context.setFontSize(10)
 
-  context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)')
+  context.scale(1, 1)
 
-  context.setLineCap('butt')
-  context.setLineJoin('miter')
-  context.setLineWidth(1)
-  context.setMiterLimit(10)
 }
 
-example.translate = function (context) {
+example.translate = function (context, isOld) {
   context.beginPath()
   context.rect(10, 10, 100, 50)
   context.fill()
 
   context.translate(70, 70)
+  context.beginPath()
+  context.fill()
+
+  context.translate(120, 120)
 
   context.beginPath()
   context.fill()
 }
 
-example.save = function (context) {
+example.save = function (context, isOld) {
   context.beginPath()
+  if (isOld) {
     context.setStrokeStyle('#00ff00')
+  } else {
+    context.strokeStyle = '#00ff00'
+  }
   context.save()
 
   context.scale(2, 2)
+  if (isOld) {
     context.setStrokeStyle('#ff0000')
+  } else {
+    context.strokeStyle = '#ff0000'
+  }
   context.rect(0, 0, 100, 100)
   context.stroke()
   context.restore()
 
   context.rect(0, 0, 50, 50)
   context.stroke()
+  context.scale(1, 1)
 }
 
-example.restore = function (context) {
+example.restore = function (context, isOld) {
   [3, 2, 1].forEach(function (item) {
     context.beginPath()
     context.save()
@@ -76,27 +277,37 @@ example.restore = function (context) {
   })
 }
 
-example.drawImage = function (context) {
+example.drawImage = function (context, isOld, color, canvas) {
+  if (isOld) {
     context.drawImage('/image/wechat.png', 0, 0)
+  } else {
+    const img = canvas.createImage()
+    img.onload = () => {
+      context.drawImage(img, 0, 0)
+    }
+    img.src = '/image/wechat.png'
+  }
 }
 
-example.fillText = function (context) {
+example.fillText = function (context, isOld) {
-  context.setStrokeStyle('#ff0000')
-
   context.beginPath()
   context.moveTo(0, 10)
   context.lineTo(300, 10)
   context.stroke()
 
-  // context.save()
-  // context.scale(1.5, 1.5)
-  // context.translate(20, 20)
-  context.setFontSize(10)
-  context.fillText('Hello World', 0, 30)
-  context.setFontSize(20)
-  context.fillText('Hello World', 100, 30)
 
-  // context.restore()
+  if (isOld) {
+    context.setFontSize(10)
+  } else {
+    context.font = '10px arial'
+  }
+  context.fillText('Hello World', 0, 30)
+  if (isOld) {
+    context.setFontSize(20)
+  } else {
+    context.font = '20px arial'
+  }
+  context.fillText('Hello World', 100, 30)
 
   context.beginPath()
   context.moveTo(0, 30)
@@ -104,160 +315,281 @@ example.fillText = function (context) {
   context.stroke()
 }
 
-example.fill = function (context) {
+example.fill = function (context, isOld) {
   context.beginPath()
   context.rect(20, 20, 150, 100)
-  context.setStrokeStyle('#00ff00')
   context.fill()
 }
 
-example.stroke = function (context) {
+example.stroke = function (context, isOld) {
   context.beginPath()
   context.moveTo(20, 20)
   context.lineTo(20, 100)
   context.lineTo(70, 100)
-  context.setStrokeStyle('#00ff00')
   context.stroke()
 }
 
-example.clearRect = function (context) {
+example.strokeRect = function (context, isOld) {
-  context.setFillStyle('#ff0000')
+  context.strokeRect(20, 20, 150, 100)
-  context.beginPath()
+  context.strokeRect(160, 180, 200, 200)
-  context.rect(0, 0, 300, 150)
-  context.fill()
-  context.clearRect(20, 20, 100, 50)
 }
 
-example.beginPath = function (context) {
+example.strokeText = function (context, isOld) {
-  context.beginPath()
+  context.font = "20px arial"
-  context.setLineWidth(5)
+  context.strokeText("Hello World!", 10, 50)
-  context.setStrokeStyle('#ff0000')
-  context.moveTo(0, 75)
-  context.lineTo(250, 75)
-  context.stroke()
 
-  context.beginPath()
+  context.font = "30px arial"
-  context.setStrokeStyle('#0000ff')
+  // 创建渐变
-  context.moveTo(50, 0)
+  const gradient = context.createLinearGradient(0, 0, 200, 0)
-  context.lineTo(150, 130)
+  gradient.addColorStop("0", "magenta")
-  context.stroke()
+  gradient.addColorStop("0.5", "blue")
+  gradient.addColorStop("1.0", "red")
+  // 用渐变填色
+  if (isOld) {
+    context.setStrokeStyle(gradient)
+  } else {
+    context.strokeStyle = gradient
+  }
+  context.strokeText("finclip", 10, 90)
 }
 
-example.closePath = function (context) {
-  context.beginPath()
-  context.moveTo(20, 20)
-  context.lineTo(20, 100)
-  context.lineTo(70, 100)
-  context.closePath()
-  context.stroke()
-}
 
-example.moveTo = function (context) {
+example.moveTo = function (context, isOld) {
   context.beginPath()
   context.moveTo(0, 0)
   context.lineTo(300, 150)
   context.stroke()
+
+  context.beginPath()
+  context.moveTo(40, 40)
+  context.lineTo(200, 180)
+  context.stroke()
 }
 
-example.lineTo = function (context) {
+example.lineTo = function (context, isOld) {
   context.beginPath()
   context.moveTo(20, 20)
   context.lineTo(20, 100)
   context.lineTo(70, 100)
   context.stroke()
+
+  context.beginPath()
+  context.moveTo(40, 40)
+  context.lineTo(200, 180)
+  context.lineTo(70, 100)
+  context.stroke()
 }
 
-example.rect = function (context) {
+example.rect = function (context, isOld) {
   context.beginPath()
   context.rect(20, 20, 150, 100)
   context.stroke()
-}
 
-example.arc = function (context) {
   context.beginPath()
-  context.arc(75, 75, 50, 0, Math.PI * 2, true)
+  context.rect(40, 40, 180, 100)
-  context.moveTo(110, 75)
-  context.arc(75, 75, 35, 0, Math.PI, false)
-  context.moveTo(65, 65)
-  context.arc(60, 65, 5, 0, Math.PI * 2, true)
-  context.moveTo(95, 65)
-  context.arc(90, 65, 5, 0, Math.PI * 2, true)
   context.stroke()
 }
 
-example.quadraticCurveTo = function (context) {
+example.quadraticCurveTo = function (context, isOld) {
   context.beginPath()
   context.moveTo(20, 20)
   context.quadraticCurveTo(20, 100, 200, 20)
   context.stroke()
-}
 
-example.bezierCurveTo = function (context) {
   context.beginPath()
-  context.moveTo(20, 20)
+  context.moveTo(60, 60)
-  context.bezierCurveTo(20, 100, 200, 100, 200, 20)
+  context.quadraticCurveTo(30, 130, 200, 20)
   context.stroke()
 }
 
-example.setFillStyle = function (context) {
+example.setFillStyle = function (context, isOld) {
   ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
+    if (isOld) {
       context.setFillStyle(item)
+    } else {
+      context.fillStyle = item
+    }
     context.beginPath()
     context.rect(0 + 75 * index, 0, 50, 50)
     context.fill()
   })
 }
 
-example.setStrokeStyle = function (context) {
+example.setStrokeStyle = function (context, isOld) {
   ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
+    if (isOld) {
       context.setStrokeStyle(item)
+    } else {
+      context.strokeStyle = item
+    }
     context.beginPath()
     context.rect(0 + 75 * index, 0, 50, 50)
     context.stroke()
   })
 }
 
-example.setGlobalAlpha = function (context) {
+
-  context.setFillStyle('#000000');
+example.setTextAlign = function (context, isOld) {
+  // 在位置 150 创建蓝线
+  function setTextAlign(text) {
+    if (isOld) {
+      context.setTextAlign(text)
+    } else {
+      context.textAlign = text
+    }
+  }
+  context.moveTo(150, 20)
+  context.lineTo(150, 170)
+  context.stroke()
+
+  context.font = "15px Arial"
+
+  // 显示不同的 textAlign 值
+  setTextAlign("start")
+  context.fillText("textAlign=start", 150, 60)
+  setTextAlign("end")
+  context.fillText("textAlign=end", 150, 80)
+  setTextAlign("left")
+  context.fillText("textAlign=left", 150, 100)
+  setTextAlign("center")
+  context.fillText("textAlign=center", 150, 120)
+  setTextAlign("right")
+  context.fillText("textAlign=right", 150, 140)
+}
+
+example.setTextBaseline = function (context, isOld) {
+  // 在位置 150 创建蓝线
+
+  function setTextBaseline(text) {
+    if (isOld) {
+      context.setTextBaseline(text)
+    } else {
+      context.textBaseline = text
+    }
+  }
+  context.moveTo(5, 100)
+  context.lineTo(395, 100)
+  context.stroke()
+
+  context.font = "20px Arial"
+
+  // 显示不同的 textAlign 值
+  setTextBaseline("top")
+  context.fillText("Top", 5, 100)
+  setTextBaseline("bottom")
+  context.fillText("Bottom", 50, 100)
+  setTextBaseline("middle")
+  context.fillText("Middle", 120, 100)
+  setTextBaseline("alphabetic")
+  context.fillText("Alphabetic", 190, 100)
+  setTextBaseline("hanging")
+  context.fillText("Hanging", 290, 100)
+}
+
+example.setTransform = function (context, isOld) {
+  // 在位置 150 创建蓝线
+
+  context.fillRect(0, 0, 250, 100)
+
+  context.setTransform(1, 0.5, -0.5, 1, 30, 10)
+  if (isOld) {
+    context.setFillStyle('red')
+  } else {
+    context.fillStyle = 'red'
+  }
+  context.fillRect(0, 0, 250, 100);
+
+  context.setTransform(1, 0.5, -0.5, 1, 30, 10)
+  if (isOld) {
+    context.setFillStyle('blue')
+  } else {
+    context.fillStyle = 'blue'
+  }
+  context.fillRect(0, 0, 250, 100)
+}
+
+example.setGlobalAlpha = function (context, isOld) {
   [1, 0.5, 0.1].forEach(function (item, index) {
+    try {
       context.setGlobalAlpha(item)
+    } catch (e) {
+      context.globalAlpha = item
+    }
     context.beginPath()
     context.rect(0 + 75 * index, 0, 50, 50)
     context.fill()
   })
 }
 
-example.setShadow = function (context) {
+example.setShadow = function (context, isOld) {
   context.beginPath()
-  context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)')
   context.rect(10, 10, 100, 100)
   context.fill()
+
+  context.beginPath()
+  context.rect(50, 50, 100, 100)
+  context.fill()
 }
 
-example.setFontSize = function (context) {
+example.setFontSize = function (context, isOld) {
   [10, 20, 30, 40].forEach(function (item, index) {
+    if (isOld) {
       context.setFontSize(item)
+    } else {
+      context.font = item + 'px arial'
+    }
     context.fillText('Hello, world', 20, 20 + 40 * index)
   })
 }
 
-example.setLineCap = function (context) {
+example.setLineCap = function (context, isOld) {
-  context.setLineWidth(10);
+  context.setLineWidth(10)
+  if (isOld) {
+    context.setLineWidth(10)
+  } else {
+    context.lineWidth = 10
+  }
   ['butt', 'round', 'square'].forEach(function (item, index) {
     context.beginPath()
+    if (isOld) {
       context.setLineCap(item)
+    } else {
+      context.lineCap = item
+    }
     context.moveTo(20, 20 + 20 * index)
     context.lineTo(100, 20 + 20 * index)
     context.stroke()
   })
 }
 
-example.setLineJoin = function (context) {
+example.setLineDash = function (context, isOld) {
-  context.setLineWidth(10);
+  context.beginPath()
+  context.setLineDash([5, 15])
+  context.moveTo(0, 50)
+  context.lineTo(300, 50)
+  context.stroke()
+
+  // Solid line
+  context.beginPath()
+  context.setLineDash([])
+  context.moveTo(0, 100)
+  context.lineTo(300, 100)
+  context.stroke()
+}
+
+example.setLineJoin = function (context, isOld) {
+  if (isOld) {
+    context.setLineWidth(10)
+  } else {
+    context.lineWidth = 10
+  }
   ['bevel', 'round', 'miter'].forEach(function (item, index) {
     context.beginPath()
-
+    if (isOld) {
       context.setLineJoin(item)
+    } else {
+      context.lineJoin = item
+    }
     context.moveTo(20 + 80 * index, 20)
     context.lineTo(100 + 80 * index, 50)
     context.lineTo(20 + 80 * index, 100)
@@ -265,22 +597,34 @@ example.setLineJoin = function (context) {
   })
 }
 
-example.setLineWidth = function (context) {
+example.setLineWidth = function (context, isOld) {
   [2, 4, 6, 8, 10].forEach(function (item, index) {
     context.beginPath()
+    if (isOld) {
       context.setLineWidth(item)
+    } else {
+      context.lineWidth = item
+    }
     context.moveTo(20, 20 + 20 * index)
     context.lineTo(100, 20 + 20 * index)
     context.stroke()
   })
 }
 
-example.setMiterLimit = function (context) {
+example.setMiterLimit = function (context, isOld) {
-  context.setLineWidth(4);
 
+  if (isOld) {
+    context.setLineWidth(4)
+  } else {
+    context.lineWidth = 4
+  }
   [2, 4, 6, 8, 10].forEach(function (item, index) {
     context.beginPath()
+    if (isOld) {
       context.setMiterLimit(item)
+    } else {
+      context.miterLimit = item
+    }
     context.moveTo(20 + 80 * index, 20)
     context.lineTo(100 + 80 * index, 50)
     context.lineTo(20 + 80 * index, 100)
@@ -288,4 +632,67 @@ example.setMiterLimit = function (context) {
   })
 }
 
+example.globalCompositeOperation = function (context, isOld) {
+  if (isOld) {
+    context.setFillStyle('red')
+  } else {
+    context.fillStyle = 'red'
+  }
+  context.fillRect(20, 20, 75, 50)
+  context.globalCompositeOperation = "source-over"
+  if (isOld) {
+    context.setFillStyle('blue')
+  } else {
+    context.fillStyle = 'blue'
+  }
+  context.fillRect(50, 50, 75, 50)
+
+  if (isOld) {
+    context.setFillStyle('red')
+  } else {
+    context.fillStyle = 'red'
+  }
+  context.fillRect(150, 20, 75, 50)
+  context.globalCompositeOperation = "destination-over"
+  if (isOld) {
+    context.setFillStyle('blue')
+  } else {
+    context.fillStyle = 'blue'
+  }
+  context.fillRect(180, 50, 75, 50)
+}
+
+example.createImage = function (context, isOld, color, canvas) {
+  if (isOld) {
+    context.fillText('createImage 不会生效', 20, 20)
+  } else {
+    // 本地路径 1
+    const img = canvas.createImage()
+    img.src = '../../../image/wechat.png'
+    img.onload = () => {
+      context.drawImage(img, 0, 0, 100, 100)
+    }
+
+    wx.getImageInfo({
+      src: 'http://img.daimg.com/uploads/allimg/210526/3-2105261P1490-L.jpg',
+      success(res) {
+        const img = canvas.createImage()
+        img.src = res.path
+        // finfile
+        img.onload = () => {
+          context.drawImage(img, 120, 0, 100, 100)
+        }
+      }
+    })
+
+    // 网络路径
+    const img2 = canvas.createImage()
+    img2.src = 'http://img.daimg.com/uploads/allimg/211113/3-2111131612510-L.jpg'
+    img2.onload = () => {
+      context.drawImage(img2, 240, 0, 100, 100)
+    }
+
+  }
+}
+
 module.exports = example

packageAPI/pages/checkIsOpenAccessibility/index.js

@@ -0,0 +1,21 @@
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    status: ''
+  },
+  checkIsOpenAccessibility () {
+    const self = this
+    wx.checkIsOpenAccessibility({
+      complete (res) {
+        console.log('checkIsOpenAccessibility complete: ', res)
+        self.setData({
+          status: res.open
+        })
+      }
+    })
+  }
+})

packageAPI/pages/checkIsOpenAccessibility/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

packageAPI/pages/checkIsOpenAccessibility/index.wxml

@@ -0,0 +1,6 @@
+<view>
+  <view>
+    无障碍功能开启状态:  {{status}}
+  </view>
+  <button type="primary" bindtap="checkIsOpenAccessibility">checkIsOpenAccessibility</button>
+</view>

packageAPI/pages/checkIsOpenAccessibility/index.wxss

@@ -0,0 +1 @@
+/* pages/navcustom/navcustom.wxss */

packageAPI/pages/get-system-info/get-system-info.js

@@ -32,6 +32,21 @@ Page({
       // Do something when catch error
     }
   },
+  getSystemInfoAsync () {
+    const that = this;
+    console.log('getSystemInfoAsync start')
+    wx.getSystemInfoAsync({
+      success(res) {
+        that.setData({
+          systemInfo: res
+        })
+      },
+      complete (res) {
+        console.log('getSystemInfoAsync complete: ', res)
+      }
+    })
+    console.log('getSystemInfoAsync end')
+  },
   clearInfo() {
     this.setData({
       systemInfo: {}

packageAPI/pages/get-system-info/get-system-info.wxml

@@ -76,6 +76,7 @@
       <view class="btn-area">
         <button type="primary" bindtap="getSystemInfo">获取手机系统信息</button>
         <button type="primary" bindtap="getSystemInfoSync">同步获取手机系统信息</button>
+        <button type="primary" bindtap="getSystemInfoAsync">异步获取手机系统信息getSystemInfoAsync</button>
         <button bindtap="clearInfo">清空</button>
       </view>
     </view>

packageAPI/pages/getRandomValues/getRandomValues.js

@@ -0,0 +1,15 @@
+const app = getApp()
+
+Page({
+  data: {
+    
+  },
+  getRandomValues () {
+    wx.getRandomValues({
+      length: 20,
+      complete (res) {
+        console.log('getRandomValues complete: ', res)
+      }
+    })
+  }
+})

packageAPI/pages/getRandomValues/getRandomValues.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

packageAPI/pages/getRandomValues/getRandomValues.wxml

@@ -0,0 +1,3 @@
+<view>
+  <button type="primary" bindtap="getRandomValues">getRandomValues</button>
+</view>

packageAPI/pages/innerAudioContext/index.js

@@ -4,24 +4,25 @@ const app = getApp()
 
 Page({
   data: {
-    volume:1,
+    volume: 1,
-    rate:1,
+    rate: 1,
   },
-  onLoad(){
+  onLoad() {
     const innerAudioContext = wx.createInnerAudioContext()
     this.ctx = innerAudioContext
     console.log(innerAudioContext)
 
     // innerAudioContext.playbackRate = 2.0
 
-    innerAudioContext.src = '/packageAPI/pages/innerAudioContext/mucis.mp3'
+    // innerAudioContext.src = '/packageAPI/pages/innerAudioContext/mucis.mp3'
     // innerAudioContext.src = 'http://cdn.amathclass.cn/quesAudio/42fe780d-1607959109843.m4a'
+    innerAudioContext.src = 'https://public-1251849568.cos.ap-guangzhou.myqcloud.com/temp/mucis.mp3'
 
     const listener = ['Canplay', 'Ended', 'Pause', 'Play', 'Seeked', 'Seeking', 'Stop', 'TimeUpdate', 'Waiting']
 
-    listener.forEach(key=>{
+    listener.forEach(key => {
-      innerAudioContext['on'+key](()=>{
+      innerAudioContext['on' + key](() => {
-        console.log('on'+key)
+        console.log('on' + key)
       })
     })
     innerAudioContext.onError((res) => {
@@ -38,33 +39,33 @@ Page({
     this.ctx.destroy()
     console.log(this.ctx)
   },
-  play(){
+  play() {
     this.ctx.play()
     // this.ctx.src = '/mucis.mp3'
     // this.ctx.autoplay = true
   },
-  seek(){
+  seek() {
     this.ctx.seek(60)
   },
-  pause(){
+  pause() {
     this.ctx.pause()
   },
-  destroy(){
+  destroy() {
     this.ctx.destroy()
     console.log(this.ctx)
   },
-  stop(){
+  stop() {
     this.ctx.stop()
   },
-  handleVolumeChange(e){
+  handleVolumeChange(e) {
     this.setData({
-      volume:e.detail.value
+      volume: e.detail.value
     })
     this.ctx.volume = this.data.volume
   },
-  handleRateChange(e){
+  handleRateChange(e) {
     this.setData({
-      rate:e.detail.value
+      rate: e.detail.value
     })
     this.ctx.playbackRate = this.data.rate
   }

packageAPI/pages/locationapi/index.js

@@ -0,0 +1,149 @@
+
+Page({
+  data: {
+    openLocation_latitude: 22.53332,
+    openLocation_longitude: 113.93041,
+    openLocation_scale: 18,
+    openLocation_name: 'testname',
+    openLocation_address: 'addressaddressaddressaddress',
+    getLocation_type: 'gcj02',
+    getLocation_altitude: 'false',
+    getLocation_isHighAccuracy: 'false',
+    getLocation_highAccuracyExpireTime: 3000,
+    chooseLocation_latitude: 22.53332,
+    chooseLocation_longitude: 113.93041
+  },
+  onLoad() {
+    
+  },
+  valueChange (e) {
+    const { changekey } = e.target.dataset
+    const { value } = e.detail
+    const obj = {}
+    obj[changekey] = value
+    this.setData(obj)
+  },
+  emitopenLocation () {
+    let { 
+      openLocation_latitude: latitude,
+      openLocation_longitude: longitude,
+      openLocation_scale: scale,
+      openLocation_name: name,
+      openLocation_address: address
+    } = this.data
+    const args = {}
+    try {
+      latitude = JSON.parse(latitude)
+    } catch (e) {}
+    try {
+      longitude = JSON.parse(longitude)
+    } catch (e) {}
+    try {
+      scale = JSON.parse(scale)
+    } catch (e) {}
+    // try {
+    //   name = JSON.parse(name)
+    // } catch (e) {}
+    // try {
+    //   address = JSON.parse(address)
+    // } catch (e) {}
+    latitude !== 'no' && (args.latitude = latitude)
+    longitude !== 'no' && (args.longitude = longitude)
+    scale !== 'no' && (args.scale = scale)
+    name !== 'no' && (args.name = name)
+    address !== 'no' && (args.address = address)
+    console.log('openLocation 参数: ', args)
+    wx.openLocation({
+      ...args,
+      success (res) {
+        console.log('openLocation success: ', res)
+      },
+      fail (res) {
+        console.log('openLocation fail: ', res)
+      },
+      complete (res) {
+        console.log('openLocation complete: ', res)
+      }
+    })
+  },
+  emitgetLocation () {
+    let {
+      getLocation_type: type,
+      getLocation_altitude: altitude,
+      getLocation_isHighAccuracy: isHighAccuracy,
+      getLocation_highAccuracyExpireTime: highAccuracyExpireTime,
+    } = this.data
+    const args = {}
+    try {
+      type = JSON.parse(type)
+    } catch (e) {}
+    try {
+      altitude = JSON.parse(altitude)
+    } catch (e) {}
+    try {
+      isHighAccuracy = JSON.parse(isHighAccuracy)
+    } catch (e) {}
+    try {
+      highAccuracyExpireTime = JSON.parse(highAccuracyExpireTime)
+    } catch (e) {}
+    type !== 'no' && (args.type = type)
+    altitude !== 'no' && (args.altitude = altitude)
+    isHighAccuracy !== 'no' && (args.isHighAccuracy = isHighAccuracy)
+    highAccuracyExpireTime !== 'no' && (args.highAccuracyExpireTime = highAccuracyExpireTime)
+    console.log('getLocation 参数: ', args)
+    wx.getLocation({
+      ...args,
+      success (res) {
+        console.log('getLocation success: ', res)
+      },
+      fail (res) {
+        console.log('getLocation fail: ', res)
+      },
+      complete (res) {
+        console.log('getLocation complete: ', res)
+      }
+    })
+  },
+  emitchoosePoi () {
+    wx.choosePoi({
+      success (res) {
+        console.log('emitchoosePoi success: ', res)
+      },
+      fail (res) {
+        console.log('emitchoosePoi fail: ', res)
+      },
+      complete (res) {
+        console.log('emitchoosePoi complete: ', res)
+      }
+    })
+  },
+  emitchooseLocation () {
+    let {
+      chooseLocation_latitude: latitude,
+      chooseLocation_longitude: longitude
+    } = this.data
+    const args = {}
+    try {
+      latitude = JSON.parse(latitude)
+    } catch (e) {}
+    try {
+      longitude = JSON.parse(longitude)
+    } catch (e) {}
+    
+    latitude !== 'no' && (args.latitude = latitude)
+    longitude !== 'no' && (args.longitude = longitude)
+    console.log('chooseLocation 参数: ', args)
+    wx.chooseLocation({
+      ...args,
+      success (res) {
+        console.log('chooseLocation success: ', res)
+      },
+      fail (res) {
+        console.log('chooseLocation fail: ', res)
+      },
+      complete (res) {
+        console.log('chooseLocation complete: ', res)
+      }
+    })
+  }
+})

packageAPI/pages/locationapi/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

packageAPI/pages/locationapi/index.wxml

@@ -0,0 +1,59 @@
+<view>
+  <view>
+  输入框规则与map组件的一致，可以输入json串解析成各种类型的数据，no不传参
+  </view>
+
+  <view class="item">
+    <view class="key-change">
+      latitude: <input type="text" value="{{openLocation_latitude}}" bindinput="valueChange" data-changekey="openLocation_latitude" />
+    </view>
+    <view class="key-change">
+      longitude: <input type="text" value="{{openLocation_longitude}}" bindinput="valueChange" data-changekey="openLocation_longitude" />
+    </view>
+    <view class="key-change">
+      scale: <input type="text" value="{{openLocation_scale}}" bindinput="valueChange" data-changekey="openLocation_scale" />
+    </view>
+    <view class="key-change">
+      name: <input type="text" value="{{openLocation_name}}" bindinput="valueChange" data-changekey="openLocation_name" />
+    </view>
+    <view class="key-change">
+      address: <input type="text" value="{{openLocation_address}}" bindinput="valueChange" data-changekey="openLocation_address" />
+    </view>
+    <button bindtap="emitopenLocation" type="primary">openLocation</button>
+  </view>
+
+
+  <view class="item">
+    <view class="key-change">
+      type: <input type="text" value="{{getLocation_type}}" bindinput="valueChange" data-changekey="getLocation_type" />
+    </view>
+    <view class="key-change">
+      altitude: <input type="text" value="{{getLocation_altitude}}" bindinput="valueChange" data-changekey="getLocation_altitude" />
+    </view>
+    <view class="key-change">
+      isHighAccuracy: <input type="text" value="{{getLocation_isHighAccuracy}}" bindinput="valueChange" data-changekey="getLocation_isHighAccuracy" />
+    </view>
+    <view class="key-change">
+      highAccuracyExpireTime: <input type="text" value="{{getLocation_highAccuracyExpireTime}}" bindinput="valueChange" data-changekey="getLocation_highAccuracyExpireTime" />
+    </view>
+    <button bindtap="emitgetLocation" type="primary">getLocation</button>
+  </view>
+
+
+  <view class="item">
+    <button bindtap="emitchoosePoi" type="primary">choosePoi</button>
+  </view>
+
+  <view class="item">
+    <view class="key-change">
+      latitude: <input type="text" value="{{chooseLocation_latitude}}" bindinput="valueChange" data-changekey="chooseLocation_latitude" />
+    </view>
+    <view class="key-change">
+      longitude: <input type="text" value="{{chooseLocation_longitude}}" bindinput="valueChange" data-changekey="chooseLocation_longitude" />
+    </view>
+    <button bindtap="emitchooseLocation" type="primary">chooseLocation</button>
+  </view>
+
+
+
+</view>

packageAPI/pages/locationapi/index.wxss

@@ -0,0 +1,34 @@
+/**index.wxss**/
+.userinfo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #aaa;
+}
+
+.userinfo-avatar {
+  overflow: hidden;
+  width: 128rpx;
+  height: 128rpx;
+  margin: 20rpx;
+  border-radius: 50%;
+}
+
+.usermotto {
+  margin-top: 200px;
+}
+
+.item{
+  border-bottom: 1px solid #dddddd;
+  padding: 20rpx;
+  margin-top: 20rpx;
+}
+
+.key-change{
+  display: flex;
+  padding: 7rpx;
+}
+.key-change input{
+  border: 1px solid #abcdef;
+  flex-grow: 1;
+}

packageAPI/pages/on-network-status-change/on-network-status-change.js

@@ -12,12 +12,13 @@ Page({
   },
   onLoad() {
     const that = this
-    wx.onNetworkStatusChange(function (res) {
+    this.onNetworkStatusChange()
-      that.setData({
+    // wx.onNetworkStatusChange(function (res) {
-        isConnected: res.isConnected,
+    //   that.setData({
-        networkType: res.networkType
+    //     isConnected: res.isConnected,
-      })
+    //     networkType: res.networkType
-    })
+    //   })
+    // })
   },
   onShow() {
     const that = this
@@ -29,5 +30,17 @@ Page({
         })
       }
     })
+  },
+  networkstatuschangehandler (res) {
+    this.setData({
+      isConnected: res.isConnected,
+      networkType: res.networkType
+    })
+  },
+  onNetworkStatusChange () {
+    wx.onNetworkStatusChange(this.networkstatuschangehandler)
+  },
+  offNetworkStatusChange () {
+    wx.offNetworkStatusChange(this.networkstatuschangehandler)
   }
 })

packageAPI/pages/on-network-status-change/on-network-status-change.wxml

@@ -16,6 +16,10 @@
           <text class="page-body-text-network-type">{{networkType}}</text>
         </block>
       </view>
+      <view>
+        <button type="primary" bindtap="offNetworkStatusChange">停止网络状态监听offNetworkStatusChange</button>
+        <button type="primary" bindtap="onNetworkStatusChange">开始网络状态监听onNetworkStatusChange</button>
+      </view>
     </view>
   </view>
 

packageAPI/pages/previewMedia/index.js

@@ -67,19 +67,19 @@ Page({
     wx.previewMedia({
       sources: [
         {
-          url: typeof url === 'string' ? url : 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1830914723,3154965800&fm=26&gp=0.jpg',
+          url: typeof url === 'string' ? url : 'https://public-1251849568.cos.ap-guangzhou.myqcloud.com/temp/304-400x400.jpeg',
           type: 'image',
-          poster: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1091405991,859863778&fm=26&gp=0.jpg'
+          poster: 'https://public-1251849568.cos.ap-guangzhou.myqcloud.com/temp/1071-400x600.jpeg'
         },
         {
-          url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1091405991,859863778&fm=26&gp=0.jpg',
+          url: 'https://public-1251849568.cos.ap-guangzhou.myqcloud.com/temp/1071-400x600.jpeg',
           type: 'image',
-          poster: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1091405991,859863778&fm=26&gp=0.jpg'
+          poster: 'https://public-1251849568.cos.ap-guangzhou.myqcloud.com/temp/1071-400x600.jpeg'
         },
         {
           url: 'https://dn-odum9helk.qbox.me/spjc/1.mp4',
           type: 'video',
-          poster: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1091405991,859863778&fm=26&gp=0.jpg'
+          poster: 'https://public-1251849568.cos.ap-guangzhou.myqcloud.com/temp/1071-400x600.jpeg'
         }
       ],
       success(res) {
@@ -95,7 +95,7 @@ Page({
   },
   previewMedialocal: function() {
     wx.getImageInfo({
-      src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1078861629,3747050294&fm=26&gp=0.jpg',
+      src: 'https://public-1251849568.cos.ap-guangzhou.myqcloud.com/temp/1071-400x600.jpeg',
       success: (res)=> {
         console.log(res)
         this.previewMedia(res.path)
@@ -108,8 +108,8 @@ Page({
   previewImage() {
     wx.previewImage({
       urls: [
-        'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1830914723,3154965800&fm=26&gp=0.jpg',
+        'https://public-1251849568.cos.ap-guangzhou.myqcloud.com/temp/304-400x400.jpeg',
-        'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1091405991,859863778&fm=26&gp=0.jpg',
+        'https://public-1251849568.cos.ap-guangzhou.myqcloud.com/temp/1071-400x600.jpeg',
       ],
       showmenu: true
     })

pages/API/index/index.js

@@ -190,6 +190,9 @@ Page({
           }, {
             zh: '使用原生地图选择位置',
             url: 'choose-location/choose-location'
+          }, {
+            zh: 'locationapi',
+            url: 'locationapi/index'
           }
         ]
       }, {
@@ -236,6 +239,24 @@ Page({
             url: 'Accelerometer/index'
           }
         ],
+      }, {
+        id: 'encryption',
+        name: '加密',
+        pages: [
+          {
+            zh: 'getRandomValues',
+            url: 'getRandomValues/getRandomValues'
+          }
+        ],
+      }, {
+        id: 'checkIsOpenAccessibility',
+        name: '无障碍',
+        pages: [
+          {
+            zh: 'checkIsOpenAccessibility',
+            url: 'checkIsOpenAccessibility/index'
+          }
+        ],
       }
     ],
     isSetTabBarPage: false,

pages/component/camera/camera.wxml

@@ -43,8 +43,8 @@
   </radio-group>
 
     <view class="preview-tips">预览</view>
-    <image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
     <video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
+    <image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
 
   </view>
 

pages/component/canvas/canvas.wxml

@@ -2,32 +2,35 @@
 <import src="../../common/foot.wxml" />
 
 <view class="container">
-  <template is="head" data="{{title: 'canvas'}}"/>
+  <template is="head"
+            data="{{title: 'canvas'}}" />
 
   <view class="page-body">
     <view class="page-section page-section-gap">
       <view class="page-section-title">绘制</view>
       <view class="body-view">
-        <canvas canvas-id="canvas" class="canvas"></canvas>
+        <canvas canvas-id="canvas"
+                class="canvas"></canvas>
       </view>
     </view>
 
     <view class="page-section page-section-gap">
       <view class="page-section-title">绘制图片</view>
       <view class="body-view">
-        <canvas canvas-id="canvas2" class="canvas"></canvas>
+        <canvas canvas-id="canvas2"
+                class="canvas"></canvas>
       </view>
     </view>
 
     <view class="page-section page-section-gap">
       <view class="page-section-title">绘制图片-高清</view>
       <view class="body-view">
-        <canvas canvas-id="canvas3" class="canvas" hidpi></canvas>
+        <canvas canvas-id="canvas3"
+                class="canvas"
+                hidpi></canvas>
       </view>
     </view>
   </view>
 
   <template is="foot" />
 </view>
-
-

pages/component/index/index.js

@@ -12,7 +12,7 @@ Page({
         id: 'view',
         name: '视图容器',
         open: false,
-        pages: ['view', 'scroll-view', 'swiper', 'match-media', 'movable', 'cover-view']
+        pages: ['view', 'scroll-view', 'swiper', 'match-media', 'movable', 'cover-view','page-container', 'share-element']
       }, {
         id: 'content',
         name: '基础内容',
@@ -22,7 +22,7 @@ Page({
         id: 'form',
         name: '表单组件',
         open: false,
-        pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'picker-view', 'radio', 'slider', 'switch', 'textarea','editor']
+        pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'picker-view', 'radio', 'slider', 'switch', 'textarea','editor','keyboard-accessory']
       }, {
         id: 'nav',
         name: '导航',
@@ -32,7 +32,7 @@ Page({
         id: 'media',
         name: '媒体组件',
         open: false,
-        pages: ['image', 'video', 'camera']
+        pages: ['image', 'video', 'camera', 'webrtc']
       }, {
         id: 'canvas',
         name: '画布',
@@ -47,6 +47,10 @@ Page({
         id: 'page-attr',
         name: '页面属性配置节点',
         pages: ['page-meta']
+      }, {
+        id: 'map',
+        name: '地图',
+        pages: ['map','multiple-map']
       }
     ],
     theme: 'light'

pages/component/keyboard-accessory/keyboard-accessory.js

@@ -0,0 +1,78 @@
+const app = getApp()
+
+Page({
+  data: {
+    height: 50,
+    flex: 1,
+    show: true,
+    position: 0,
+    kbastyle: `height: 66px;position:44;`,
+    editingvalue: `height: 66px;`,
+    covershow: false
+  },
+  onLoad: function () {
+    
+  },
+
+  focus1() {
+    console.log('focus input\n')
+  },
+
+  blur1() {
+    console.log('blur input')
+  },
+
+  focus2() {
+    console.log('focus textarea')
+  },
+
+  blur2() {
+    console.log('blur textarea')
+  },
+
+  tap (e) {
+    console.log('bindtap', e)
+  },
+
+  positionchange (e) {
+    console.log(e.detail.value)
+    this.setData({
+      position: e.detail.value
+    })
+  },
+
+  textareainput (e) {
+    const value = e.detail.value || ''
+    console.log('textareainput', value)
+    // const reg = new RegExp(`(?<=;)position:.*?(?=;)`)
+    // const hasp = reg.exec(value)
+    const hasp = value.indexOf('position:')
+    console.log('textareainput', hasp)
+    if (hasp > -1) {
+      console.log('textareainput hasp ', value.slice((hasp+9), -1))
+      this.setData({
+        position: value.slice((hasp+9), -1)
+      })
+    }
+    this.setData({
+      kbastyle: value
+    })
+  },
+
+  kbheightchange (e) {
+    console.log('~~~~~~~~~~kbheightchange~~~~~~~~', e)
+  },
+
+  kbfocus () {
+    console.log('~~~~~~~~~~kbfocus~~~~~~~~')
+  },
+
+  kbblur () {
+    console.log('~~~~~~~~~~kbblur~~~~~~~~')
+  },
+  changecovershow () {
+    this.setData({
+      covershow: !this.data.covershow
+    })
+  }
+})

pages/component/keyboard-accessory/keyboard-accessory.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/component/keyboard-accessory/keyboard-accessory.wxml

@@ -0,0 +1,36 @@
+<view>
+
+  <input type="text" value="{{position}}" 
+        bindinput="positionchange" 
+        placeholder="keyboard-accessory的position" 
+        bindkeyboardheightchange="kbheightchange"
+        bindfocus="kbfocus"
+        bindblur="kbblur"
+        />
+
+  <input style="margin-top: 100px;" placeholder="input" bindfocus="focus1" bindblur="blur1" hold-keyboard>
+    <keyboard-accessory position="{{position}}" style="height: 250px;width: 150px;padding-left: 40px;">
+      <cover-view bindtap="tap" style="flex: 1; width: 50px; background: green;width: 30px; height: 150px;">
+        <cover-view style="width: 30px; height: 30px; background: blue;color: cornsilk;">click</cover-view>
+      </cover-view>
+      <cover-image bindtap="tap" src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" style="flex: 1; width: 50px;height: 150px; background: red;">
+      </cover-image>
+    </keyboard-accessory>
+  </input>
+
+  <textarea hold-keyboard="{{true}}" style="margin-top: 200px;" placeholder="textarea1" bindfocus="focus2" bindblur="blur2" cursor-spacing="70">
+    <keyboard-accessory position="{{position}}" class="container" style="height: 50px;width: 500px;">
+      <cover-view bindtap="tap" style="flex: 1; width: 50px; background: green;">textarea1</cover-view>
+      <cover-view bindtap="tap" style="flex: 1; width: 50px; background: red;">2</cover-view>
+    </keyboard-accessory>
+  </textarea>
+
+  <view>测试update。 以下输入框的内容将会作为keyboard-accessory的style属性。 匹配position改变position值。 例如：height: 66px;position:44;</view>
+  <textarea value="{{kbastyle}}" hold-keyboard="{{true}}" placeholder="keyboard-accessary组件update事件" bindfocus="focus2" bindblur="blur2" bindinput="textareainput">
+    <keyboard-accessory position="{{position}}" class="container" style="{{kbastyle}}">
+      <cover-view bindtap="tap" style="flex: 1; width: 50px; background: green;">textarea1</cover-view>
+      <cover-view bindtap="tap" style="flex: 1; width: 50px; background: red;">2</cover-view>
+    </keyboard-accessory>
+  </textarea>
+
+</view>

pages/component/keyboard-accessory/keyboard-accessory.wxss

@@ -0,0 +1,8 @@
+.intro {
+  margin: 30px;
+  text-align: center;
+}
+
+.container {
+  display: flex;
+}

pages/component/map/map.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {},
+  "enablePullDownRefresh": false,
+  "navigationBarTitleText": "map组件用例"
+}

pages/component/map/map.wxss

@@ -0,0 +1,58 @@
+.my-map{
+  width: 100%;
+  height: 200px;
+}
+.change-item{
+  display: flex;
+  border-bottom: 1px solid #4caf50;
+  padding: 5px;
+}
+.change-item2{
+  padding: 5px;
+  border-bottom: 1px solid #4caf50;
+}
+.change-input{
+  border: 1px solid #03e3ff;
+  display: inline-block;
+  border-radius: 5px;
+  width: 100%;
+}
+.label{
+  margin-right: 5px;
+  font-size: 40rpx;
+  color: deeppink;
+}
+.tabs{
+  display: flex;
+  white-space: nowrap;
+}
+.tab{
+  /* border: 1px solid #4caf50; */
+  margin: 5px;
+  border-radius: 5px;
+  padding: 5px;
+  border: 1px solid #3875FF;
+  color: #3875FF;
+  width: auto;
+  display: inline-block;
+}
+.tab.choosen{
+  background: #3875FF;
+  color: #ffffff;
+}
+.btn{
+  width: 100%!important;
+}
+scroll-view{
+  padding-bottom: 100rpx;
+}
+.my-picker{
+  color: #795548;
+  font-weight: 500;
+  font-size: 18px;
+}
+
+.callout1{
+  background-color: #03e3ff;
+  color: #ffffff;
+}

pages/component/multiple-map/multiple-map.js

@@ -0,0 +1,111 @@
+// pages/mapmultiple/mapmultiple.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    no1: null,
+    no2: null,
+    no3: null,
+    non4: null
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    const no1 = wx.createMapContext('abcdef1')
+    const no2 = wx.createMapContext('abcdef2')
+    const no3 = wx.createMapContext('abcdef3')
+    const no4 = wx.createMapContext('abcdef4')
+    this.setData({
+      no1,
+      no2,
+      no3,
+      no4
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  emitaddmarkers (e) {
+    console.log(e.target.dataset.mapid)
+    const mapcontext = this.data[`no${e.target.dataset.mapid}`]
+    mapcontext.getCenterLocation({
+      complete:(res) => {
+        console.log(res)
+        const { latitude, longitude } = res
+        mapcontext.addMarkers({
+          markers: [{
+            latitude, longitude
+          }],
+          complete: (res)=> {
+            console.log('addMarkers complete: ',res)
+          }
+        })
+      }
+    })
+  },
+  emitgetcenterlocation(e) {
+    const mapcontext = this.data[`no${e.target.dataset.mapid}`]
+    mapcontext.getCenterLocation({
+      iconPath: '/assets/images/logo.png',
+      success: (res) => {
+        console.log('debug: getCenterLocation succcess ', res)
+      },
+      fail: (res) => {
+        console.log('debug: getCenterLocation fail ', res)
+      },
+      complete: (res) => {
+        console.log('debug: getCenterLocation complete ', res)
+      }
+    })
+  }
+}) 

pages/component/multiple-map/multiple-map.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "multiple map"
+}

pages/component/multiple-map/multiple-map.wxml

@@ -0,0 +1,24 @@
+<view>
+    <view>
+    地图1   id: abcdef1
+    </view>
+    <map id="abcdef1"></map>
+    <view>
+    地图2   id: abcdef2 (只传latitude)
+    </view>
+    <map id="abcdef2" latitude="22.53332"></map>
+    <view>
+    地图3   id: abcdef3  (只传longitude)
+    </view>
+    <map id="abcdef3" longitude="113.93041"></map>
+    <view>
+    地图4   id: abcdef4
+    </view>
+    <map id="abcdef4"></map>
+
+    <button data-mapid="1" bindtap="emitaddmarkers">地图1 addMarkers</button>
+    <button data-mapid="1" bindtap="emitgetcenterlocation">地图1 getCenterLocation</button>
+    <button data-mapid="2" bindtap="emitaddmarkers">地图2 addMarkers</button>
+    <button data-mapid="3" bindtap="emitaddmarkers">地图3 addMarkers</button>
+    <button data-mapid="4" bindtap="emitaddmarkers">地图4 addMarkers</button>
+</view>

pages/component/multiple-map/multiple-map.wxss

@@ -0,0 +1 @@
+/* pages/mapmultiple/mapmultiple.wxss */

pages/component/page-container/page-container.js

@@ -0,0 +1,96 @@
+const app = getApp()
+
+Page({
+  data: {
+    show: false,
+    duration: 300,
+    position: 'right',
+    round: false,
+    overlay: false,
+    customStyle: '',
+    overlayStyle: '',
+  },
+  onLoad: function () {
+    
+  },
+  onShow() {
+   
+  },
+
+  popup(e) {
+    const position = e.currentTarget.dataset.position
+    let customStyle = ''
+    let duration = this.data.duration
+    switch(position) {
+      case 'top':
+      case 'bottom': 
+        customStyle = 'height: 30%;'
+        break
+      case 'right':
+        break
+    }
+    this.setData({
+      position,
+      show: true,
+      customStyle,
+      duration
+    })
+  },
+
+  changeRound() {
+    this.setData({round: !this.data.round})
+  },
+
+  changeOverlay() {
+    this.setData({overlay: !this.data.overlay, show: true})
+  },
+
+  changeOverlayStyle(e) {
+    let overlayStyle = ''
+    const type = e.currentTarget.dataset.type
+    switch(type) {
+      case 'black':
+        overlayStyle = 'background-color: rgba(0, 0, 0, 0.7)'
+        break
+      case 'white':
+        overlayStyle = 'background-color: rgba(255, 255, 255, 0.7)'
+        break
+      case 'blur':
+        overlayStyle = 'background-color: rgba(0, 0, 0, 0.7); filter: blur(4px);'
+    }
+    this.setData({overlayStyle, show: true})
+
+  },
+
+  exit() {
+    // this.setData({show: false})
+    wx.navigateBack()
+  },
+
+  goTo(e) {
+    wx.navigateTo({url: `../shareElement/index`})
+  },
+
+  onBeforeEnter(res) {
+    console.log(res)
+  },
+  onEnter(res) {
+    console.log(res)
+  },
+  onAfterEnter(res) {
+    console.log(res)
+  },
+  onBeforeLeave(res) {
+    console.log(res)
+  },
+  onLeave(res) {
+    console.log(res)
+  },
+  onAfterLeave(res) {
+    console.log(res)
+  },
+
+  onClickOverlay(res) {
+    console.log(res)
+  }
+})

pages/component/page-container/page-container.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/component/page-container/page-container.wxml

@@ -0,0 +1,48 @@
+<view class="content">
+
+  <view class="title">弹出位置</view>
+<view class="box">
+  <button class="btn" bindtap="popup" data-position="right">右侧弹出</button>
+  <button class="btn" bindtap="popup" data-position="top">顶部弹出</button>
+  <button class="btn" bindtap="popup" data-position="bottom">底部弹出</button>
+  <button class="btn" bindtap="popup" data-position="center">中央弹出</button>
+</view>
+
+
+<view class="title">弹窗圆角</view>
+<view class="box">
+  <button class="btn" bindtap="changeRound">设置{{round ? '直角' : '圆角'}}</button>
+</view>
+
+<view class="title">遮罩层</view>
+<view class="box">
+  <button class="btn" bindtap="changeOverlay">设置{{overlay ? '无' : '有'}}遮罩</button>
+  <button class="btn" bindtap="changeOverlayStyle" data-type="black">黑色半透明遮罩</button>
+  <button class="btn" bindtap="changeOverlayStyle" data-type="white">白色半透明遮罩</button>
+  <button class="btn" bindtap="changeOverlayStyle" data-type="blur">模糊遮罩</button>
+
+</view>
+
+
+<page-container 
+  show="{{show}}"
+  round="{{round}}"
+  overlay="{{overlay}}"
+  duration="{{duration}}"
+  position="{{position}}"
+  close-on-slide-down="{{true}}"
+  bindbeforeenter="onBeforeEnter"
+  bindenter="onEnter"
+  bindafterenter="onAfterEnter"
+  bindbeforeleave="onBeforeLeave"
+  bindleave="onLeave"
+  bindafterleave="onAfterLeave"
+  bindclickoverlay="onClickOverlay"
+  custom-style="{{customStyle}}"
+  overlay-style="{{overlayStyle}}"
+>
+  <view class="detail-page">
+    <button type="primary" bindtap="exit">推出</button>
+  </view>
+</page-container>
+</view>

pages/component/page-container/page-container.wxss

@@ -0,0 +1,36 @@
+page {
+  background-color: #ee5509;
+  color: #323232;
+  width: 100%;
+  height: 100%;
+}
+
+.box {
+  margin: 0 12px;
+}
+
+.title {
+  margin: 0;
+  padding: 32px 16px 16px;
+  color: rgba(69, 90, 100, 0.6);
+  font-weight: normal;
+  font-size: 18px;
+  line-height: 20px;
+  text-align: center;
+}
+
+.btn {
+  display: block;
+  width: 100%;
+  margin: 10px 0;
+  background-color: #fff;
+}
+
+.detail-page {
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}