feat(wxs): callMethod

6b0d55e2 · fxy060608 · 70c13594 · 6b0d55e2 · 6b0d55e2 · 6b0d55e2
7 changed file
--- a/packages/uni-app-plus/dist/index.v3.js
+++ b/packages/uni-app-plus/dist/index.v3.js
@@ -2509,6 +2509,9 @@ var serviceContext = (function () {
        return
      }
    }
+    if (statusBarStyle === lastStatusBarStyle) {
+      return
+    }
    if (process.env.NODE_ENV !== 'production') {
      console.log(`[uni-app] setStatusBarStyle`, statusBarStyle);
    }
@@ -3015,6 +3018,85 @@ var serviceContext = (function () {
    return data
  }
+  const DEVICE_FREQUENCY = 200;
+  const NETWORK_TYPES = ['unknown', 'none', 'ethernet', 'wifi', '2g', '3g', '4g'];
+  const MAP_ID = '__UNIAPP_MAP';
+  const TEMP_PATH_BASE = '_doc/uniapp_temp';
+  const TEMP_PATH = `${TEMP_PATH_BASE}_${Date.now()}`;
+  /**
+   * 5+错误对象转换为错误消息
+   * @param {*} error 5+错误对象
+   */
+  function toErrMsg (error) {
+    var msg = 'base64ToTempFilePath:fail';
+    if (error && error.message) {
+      msg += ` ${error.message}`;
+    } else if (error) {
+      msg += ` ${error}`;
+    }
+    return msg
+  }
+  function base64ToTempFilePath ({
+    base64Data,
+    x,
+    y,
+    width,
+    height,
+    destWidth,
+    destHeight,
+    canvasId,
+    fileType,
+    quality
+  } = {}, callbackId) {
+    var id = Date.now();
+    var bitmap = new plus.nativeObj.Bitmap(`bitmap${id}`);
+    bitmap.loadBase64Data(base64Data, function () {
+      var formats = ['jpg', 'png'];
+      var format = String(fileType).toLowerCase();
+      if (formats.indexOf(format) < 0) {
+        format = 'png';
+      }
+      /**
+           * 保存配置
+           */
+      var saveOption = {
+        overwrite: true,
+        quality: typeof quality === 'number' ? quality * 100 : 100,
+        format
+      };
+      /**
+           * 保存文件路径
+           */
+      var tempFilePath = `${TEMP_PATH}/canvas/${id}.${format}`;
+      bitmap.save(tempFilePath, saveOption, function () {
+        clear();
+        invoke(callbackId, {
+          tempFilePath,
+          errMsg: 'base64ToTempFilePath:ok'
+        });
+      }, function (error) {
+        clear();
+        invoke(callbackId, {
+          errMsg: toErrMsg(error)
+        });
+      });
+    }, function (error) {
+      clear();
+      invoke(callbackId, {
+        errMsg: toErrMsg(error)
+      });
+    });
+    function clear () {
+      bitmap.clear();
+    }
+  }
  function operateMapPlayer (mapId, pageVm, type, data) {
    const pageId = pageVm.$page.id;
    UniServiceJSBridge.publishHandler(pageId + '-map-' + mapId, {
@@ -3219,14 +3301,6 @@ var serviceContext = (function () {
      : operateVideoPlayer(videoId, pageVm, type, data);
  }
-  const DEVICE_FREQUENCY = 200;
-  const NETWORK_TYPES = ['unknown', 'none', 'ethernet', 'wifi', '2g', '3g', '4g'];
-  const MAP_ID = '__UNIAPP_MAP';
-  const TEMP_PATH_BASE = '_doc/uniapp_temp';
-  const TEMP_PATH = `${TEMP_PATH_BASE}_${Date.now()}`;
  let watchAccelerationId = false;
  let isWatchAcceleration = false;
@@ -6699,7 +6773,7 @@ var serviceContext = (function () {
      }
      unsubscribe(WEBVIEW_READY, onWebviewRecoveryReady);
      if (process.env.NODE_ENV !== 'production') {
-        console.log(`UNIAPP[webview][${this.id}]:onWebviewRecoveryReady ready`);
+        console.log(`UNIAPP[webview][${id}]:onWebviewRecoveryReady ready`);
      }
      // 恢复目标页面
      pageId = parseInt(pageId);
@@ -6721,6 +6795,31 @@ var serviceContext = (function () {
    });
  }
+  function onWebviewPopGesture (webview) {
+    webview.addEventListener('popGesture', e => {
+      if (e.type === 'start') {
+        // 设置下一个页面的 statusBarStyle
+        const pages = getCurrentPages();
+        const page = pages[pages.length - 2];
+        const statusBarStyle = page && page.$page.meta.statusBarStyle;
+        statusBarStyle && setStatusBarStyle(statusBarStyle);
+      } else if (e.type === 'end' && !e.result) {
+        // 拖拽未完成,设置为当前状态栏前景色
+        setStatusBarStyle();
+      } else if (e.type === 'end' && e.result) {
+        const pages = getCurrentPages();
+        const page = pages[pages.length - 1];
+        page && page.$remove();
+        setStatusBarStyle();
+        UniServiceJSBridge.emit('onAppRoute', {
+          type: 'navigateBack'
+        });
+      }
+    });
+  }
  let preloadWebview;
  let id = 2;
@@ -6791,6 +6890,7 @@ var serviceContext = (function () {
    if (plus.os.name === 'iOS') {
      !webview.nvue && onWebviewRecovery(webview, routeOptions);
+      onWebviewPopGesture(webview);
    }
    on(webview.id + '.startPullDownRefresh', () => {
@@ -7785,12 +7885,13 @@ var serviceContext = (function () {
  var api = /*#__PURE__*/Object.freeze({
    startPullDownRefresh: startPullDownRefresh,
    stopPullDownRefresh: stopPullDownRefresh,
-    previewImage: previewImage$1,
+    getImageInfo: getImageInfo$1,
    createAudioInstance: createAudioInstance,
    destroyAudioInstance: destroyAudioInstance,
    setAudioState: setAudioState,
    getAudioState: getAudioState,
    operateAudio: operateAudio,
+    base64ToTempFilePath: base64ToTempFilePath,
    operateMapPlayer: operateMapPlayer$2,
    operateVideoPlayer: operateVideoPlayer$2,
    enableAccelerometer: enableAccelerometer,
@@ -7847,12 +7948,12 @@ var serviceContext = (function () {
    chooseImage: chooseImage$1,
    chooseVideo: chooseVideo$1,
    compressImage: compressImage,
-    getImageInfo: getImageInfo$1,
    getMusicPlayerState: getMusicPlayerState,
    operateMusicPlayer: operateMusicPlayer,
    setBackgroundAudioState: setBackgroundAudioState,
    operateBackgroundAudio: operateBackgroundAudio,
    getBackgroundAudioState: getBackgroundAudioState,
+    previewImage: previewImage$1,
    operateRecorder: operateRecorder,
    saveImageToPhotosAlbum: saveImageToPhotosAlbum,
    saveVideoToPhotosAlbum: saveVideoToPhotosAlbum,
@@ -8500,10 +8601,6 @@ var serviceContext = (function () {
    return [0, 0, 0, 255]
  }
-  function TextMetrics (width) {
-    this.width = width;
-  }
  function Pattern (image, repetition) {
    this.image = image;
    this.repetition = repetition;
@@ -8528,14 +8625,6 @@ var serviceContext = (function () {
    'setTextBaseline', 'setLineDash'
  ];
-  var tempCanvas;
-  function getTempCanvas () {
-    if (!tempCanvas) {
-      tempCanvas = document.createElement('canvas');
-    }
-    return tempCanvas
-  }
  class CanvasContext {
    constructor (id, pageId) {
      this.id = id;
@@ -8590,11 +8679,9 @@ var serviceContext = (function () {
        return new Pattern(image, repetition)
      }
    }
-    measureText (text) {
+    // TODO
-      var c2d = getTempCanvas().getContext('2d');
+    // measureText (text) {
-      c2d.font = this.state.font;
+    // }
-      return new TextMetrics(c2d.measureText(text).width || 0)
-    }
    save () {
      this.actions.push({
        method: 'save',
@@ -9013,10 +9100,6 @@ var serviceContext = (function () {
    }
  }
-  const {
-    invokeCallbackHandler: invoke$1
-  } = UniServiceJSBridge;
  function canvasGetImageData$1 ({
    canvasId,
    x,
@@ -9026,7 +9109,7 @@ var serviceContext = (function () {
  }, callbackId) {
    var pageId = getCurrentPageId();
    if (!pageId) {
-      invoke$1(callbackId, {
+      invoke(callbackId, {
        errMsg: 'canvasGetImageData:fail'
      });
      return
@@ -9036,7 +9119,7 @@ var serviceContext = (function () {
      if (imgData && imgData.length) {
        data.data = new Uint8ClampedArray(imgData);
      }
-      invoke$1(callbackId, data);
+      invoke(callbackId, data);
    });
    operateCanvas(canvasId, pageId, 'getImageData', {
      x,
@@ -9057,13 +9140,13 @@ var serviceContext = (function () {
  }, callbackId) {
    var pageId = getCurrentPageId();
    if (!pageId) {
-      invoke$1(callbackId, {
+      invoke(callbackId, {
        errMsg: 'canvasPutImageData:fail'
      });
      return
    }
    var cId = canvasEventCallbacks.push(function (data) {
-      invoke$1(callbackId, data);
+      invoke(callbackId, data);
    });
    operateCanvas(canvasId, pageId, 'putImageData', {
      data: [...data],
@@ -9088,53 +9171,33 @@ var serviceContext = (function () {
  }, callbackId) {
    var pageId = getCurrentPageId();
    if (!pageId) {
-      invoke$1(callbackId, {
+      invoke(callbackId, {
        errMsg: 'canvasToTempFilePath:fail'
      });
      return
    }
    const cId = canvasEventCallbacks.push(function ({
-      data,
+      base64
-      width,
-      height
    }) {
-      if (!data || !data.length) {
+      if (!base64 || !base64.length) {
-        invoke$1(callbackId, {
+        invoke(callbackId, {
-          errMsg: 'canvasToTempFilePath:fail'
-        });
-        return
-      }
-      let imgData;
-      try {
-        imgData = new ImageData(new Uint8ClampedArray(data), width, height);
-      } catch (error) {
-        invoke$1(callbackId, {
          errMsg: 'canvasToTempFilePath:fail'
        });
-        return
      }
-      const canvas = getTempCanvas();
+      invokeMethod('base64ToTempFilePath', {
-      canvas.width = width;
+        base64Data: base64,
-      canvas.height = height;
+        x,
-      const c2d = canvas.getContext('2d');
+        y,
-      c2d.putImageData(imgData, 0, 0);
+        width,
-      let base64 = canvas.toDataURL('image/png');
+        height,
-      const img = new Image();
+        destWidth,
-      img.onload = function () {
+        destHeight,
-        if (fileType === 'jpeg') {
+        canvasId,
-          c2d.fillStyle = '#fff';
+        fileType,
-          c2d.fillRect(0, 0, width, width);
+        qualit
-        }
+      }, callbackId);
-        c2d.drawImage(img, 0, 0);
-        base64 = canvas.toDataURL(`image/${fileType}`, qualit);
-        invoke$1(callbackId, {
-          errMsg: 'canvasToTempFilePath:ok',
-          tempFilePath: base64
-        });
-      };
-      img.src = base64;
    });
-    operateCanvas(canvasId, pageId, 'getImageData', {
+    operateCanvas(canvasId, pageId, 'getDataUrl', {
      x,
      y,
      width,
@@ -9142,6 +9205,8 @@ var serviceContext = (function () {
      destWidth,
      destHeight,
      hidpi: false,
+      fileType,
+      qualit,
      callbackId: cId
    });
  }
@@ -10744,6 +10809,23 @@ var serviceContext = (function () {
    }
  }
+  function onWxsInvokeCallMethod ({
+    cid,
+    method,
+    args
+  }, pageId) {
+    pageId = parseInt(pageId);
+    const page = getCurrentPages(true).find(page => page.$page.id === pageId);
+    if (!page) {
+      return console.error(`Page[${pageId}] not found`)
+    }
+    const vm = page.$vm._$vd.getVm(cid);
+    if (!vm) {
+      return console.error(`vm[${cid}] not found`)
+    }
+    vm[method] && vm[method](args);
+  }
  function initSubscribeHandlers () {
    const {
      on,
@@ -10774,8 +10856,11 @@ var serviceContext = (function () {
    on('api.' + WEB_INVOKE_APPSERVICE$1, function (data, webviewIds) {
      emit('onWebInvokeAppService', data, webviewIds);
    });
    on('onWebInvokeAppService', onWebInvokeAppService);
+    subscribe('onWxsInvokeCallMethod', onWxsInvokeCallMethod);
    subscribe(VD_SYNC, onVdSync);
    subscribe(VD_SYNC_CALLBACK, onVdSyncCallback);

--- a/packages/uni-app-plus/dist/view.umd.js
+++ b/packages/uni-app-plus/dist/view.umd.js
@@ -13431,7 +13431,7 @@ function pageMounted() {
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 "use strict";
-/* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return createComponentDescriptor; });
+/* WEBPACK VAR INJECTION */(function(UniViewJSBridge, global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return createComponentDescriptor; });
 /* harmony import */ var uni_shared__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -13602,8 +13602,16 @@ function () {
    key: "callMethod",
    value: function callMethod(funcName) {
      var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      // TODO 需跨平台
-      return this.$vm[funcName] && this.$vm[funcName](JSON.parse(JSON.stringify(args))), this;
+      if (this.$vm[funcName]) {
+        this.$vm[funcName](JSON.parse(JSON.stringify(args)));
+      } else if (this.$vm._$id) {
+        UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
+          cid: this.$vm._$id,
+          method: funcName,
+          args: args
+        });
+      }
    }
  }, {
    key: "requestAnimationFrame",
@@ -13644,7 +13652,7 @@ function createComponentDescriptor(vm) {
    return vm.$el.__wxsComponentDescriptor;
  }
 }
-/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(56)))
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(4), __webpack_require__(56)))
 /***/ }),
 /* 68 */

--- a/packages/uni-h5/dist/index.umd.min.js
+++ b/packages/uni-h5/dist/index.umd.min.js
--- a/packages/uni-h5/manifest.json
+++ b/packages/uni-h5/manifest.json
@@ -740,8 +740,12 @@
        ]
    ],
    "createCanvasContext": [
-        "/platforms/h5/service/api/context/canvas.js",
+        "/core/service/api/context/canvas.js",
        [
+            [
+                "/platforms/h5/service/api/context/canvas.js",
+                "base64ToTempFilePath"
+            ],
            [
                "/core/helpers/protocol/context/context.js",
                "createCanvasContext"
@@ -749,8 +753,12 @@
        ]
    ],
    "canvasToTempFilePath": [
-        "/platforms/h5/service/api/context/canvas.js",
+        "/core/service/api/context/canvas.js",
        [
+            [
+                "/platforms/h5/service/api/context/canvas.js",
+                "base64ToTempFilePath"
+            ],
            [
                "/core/helpers/protocol/context/canvas.js",
                "canvasToTempFilePath"
@@ -758,8 +766,12 @@
        ]
    ],
    "canvasPutImageData": [
-        "/platforms/h5/service/api/context/canvas.js",
+        "/core/service/api/context/canvas.js",
        [
+            [
+                "/platforms/h5/service/api/context/canvas.js",
+                "base64ToTempFilePath"
+            ],
            [
                "/core/helpers/protocol/context/canvas.js",
                "canvasPutImageData"
@@ -767,8 +779,12 @@
        ]
    ],
    "canvasGetImageData": [
-        "/platforms/h5/service/api/context/canvas.js",
+        "/core/service/api/context/canvas.js",
        [
+            [
+                "/platforms/h5/service/api/context/canvas.js",
+                "base64ToTempFilePath"
+            ],
            [
                "/core/helpers/protocol/context/canvas.js",
                "canvasGetImageData"

--- a/src/core/view/plugins/wxs/component-descriptor.js
+++ b/src/core/view/plugins/wxs/component-descriptor.js
@@ -128,8 +128,15 @@ class ComponentDescriptor {
  }
  callMethod (funcName, args = {}) {
-    // TODO 需跨平台
+    if (this.$vm[funcName]) {
-    return (this.$vm[funcName] && this.$vm[funcName](JSON.parse(JSON.stringify(args))), this)
+      this.$vm[funcName](JSON.parse(JSON.stringify(args)))
+    } else if (this.$vm._$id) {
+      UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
+        cid: this.$vm._$id,
+        method: funcName,
+        args
+      })
+    }
  }
  requestAnimationFrame (callback) {

--- a/src/platforms/app-plus/service/framework/subscribe-handlers/index.js
+++ b/src/platforms/app-plus/service/framework/subscribe-handlers/index.js
@@ -19,6 +19,7 @@ import onVdSyncCallback from './on-vd-sync-callback'
 import onInvokeApi from './on-invoke-api'
 import onWebInvokeAppService from './on-web-invoke-app-service'
+import onWxsInvokeCallMethod from './on-wxs-invoke-call-method'
 export function initSubscribeHandlers () {
  const {
@@ -50,8 +51,11 @@ export function initSubscribeHandlers () {
  on('api.' + WEB_INVOKE_APPSERVICE, function (data, webviewIds) {
    emit('onWebInvokeAppService', data, webviewIds)
  })
  on('onWebInvokeAppService', onWebInvokeAppService)
+  subscribe('onWxsInvokeCallMethod', onWxsInvokeCallMethod)
  subscribe(VD_SYNC, onVdSync)
  subscribe(VD_SYNC_CALLBACK, onVdSyncCallback)

--- a/src/platforms/app-plus/service/framework/subscribe-handlers/on-wxs-invoke-call-method.js
+++ b/src/platforms/app-plus/service/framework/subscribe-handlers/on-wxs-invoke-call-method.js
+export default function onWxsInvokeCallMethod ({
+  cid,
+  method,
+  args
+}, pageId) {
+  pageId = parseInt(pageId)
+  const page = getCurrentPages(true).find(page => page.$page.id === pageId)
+  if (!page) {
+    return console.error(`Page[${pageId}] not found`)
+  }
+  const vm = page.$vm._$vd.getVm(cid)
+  if (!vm) {
+    return console.error(`vm[${cid}] not found`)
+  }
+  vm[method] && vm[method](args)
+}