fix: app-v3 weex 编译模式 picker 组件使用 webview 版

src/platforms/app-plus/view/components/picker/index.vue

@@ -10,6 +10,7 @@
 <script>
 import { emitter } from 'uni-mixins'
 import { showPage } from './page'
+import * as webview from './webview'
 
 const mode = {
   SELECTOR: 'selector',
@@ -152,6 +153,13 @@ export default {
     })
     this._setValueSync()
   },
+  mounted () {
+    webview.exists((exists) => {
+      if (exists) {
+        webview.initPicker()
+      }
+    })
+  },
   beforeDestroy () {
     this.$dispatch('Form', 'uni-form-group-update', {
       type: 'remove',
@@ -195,55 +203,72 @@ export default {
     },
     _showPicker (data) {
       if ((data.mode === mode.TIME || data.mode === mode.DATE) && !data.fields) {
-        plus.nativeUI[this.mode === mode.TIME ? 'pickTime' : 'pickDate']((res) => {
-          const date = res.date
-          this.$trigger('change', {}, {
-            value: this.mode === mode.TIME ? `${padLeft(date.getHours())}:${padLeft(date.getMinutes())}` : `${date.getFullYear()}-${padLeft(date.getMonth() + 1)}-${padLeft(date.getDate())}`
-          })
-        }, () => {
-          this.$trigger('cancel', {}, {})
-        }, this.mode === mode.TIME ? {
-          time: getDate(this.value, mode.TIME)
-        } : {
-          date: getDate(this.value, mode.DATE),
-          minDate: getDate(this.start, mode.DATE),
-          maxDate: getDate(this.end, mode.DATE)
-        })
+        this._showNativePicker(data)
       } else {
         data.fields = Object.values(fields).includes(data.fields) ? data.fields : fields.DAY
-        let res = { event: 'cancel' }
-        this.page = showPage({
-          url: '__uniapppicker',
-          data,
-          style: {
-            titleNView: false,
-            animationType: 'none',
-            animationDuration: 0,
-            background: 'rgba(0,0,0,0)',
-            popGesture: 'none'
-          },
-          onMessage: (message) => {
-            const event = message.event
-            if (event === 'created') {
-              this._updatePicker(data)
-              return
-            }
-            if (event === 'columnchange') {
-              delete message.event
-              this.$trigger(event, {}, message)
-              return
-            }
-            res = message
-          },
-          onClose: () => {
-            this.page = null
-            const event = res.event
-            delete res.event
-            this.$trigger(event, {}, res)
-          }
+        webview.exists((exists) => {
+          this[exists ? '_showWebviewPicker' : '_showWeexPicker'](data)
         })
       }
     },
+    _showNativePicker (data) {
+      plus.nativeUI[this.mode === mode.TIME ? 'pickTime' : 'pickDate']((res) => {
+        const date = res.date
+        this.$trigger('change', {}, {
+          value: this.mode === mode.TIME ? `${padLeft(date.getHours())}:${padLeft(date.getMinutes())}` : `${date.getFullYear()}-${padLeft(date.getMonth() + 1)}-${padLeft(date.getDate())}`
+        })
+      }, () => {
+        this.$trigger('cancel', {}, {})
+      }, this.mode === mode.TIME ? {
+        time: getDate(this.value, mode.TIME)
+      } : {
+        date: getDate(this.value, mode.DATE),
+        minDate: getDate(this.start, mode.DATE),
+        maxDate: getDate(this.end, mode.DATE)
+      })
+    },
+    _showWeexPicker (data) {
+      let res = { event: 'cancel' }
+      this.page = showPage({
+        url: '__uniapppicker',
+        data,
+        style: {
+          titleNView: false,
+          animationType: 'none',
+          animationDuration: 0,
+          background: 'rgba(0,0,0,0)',
+          popGesture: 'none'
+        },
+        onMessage: (message) => {
+          console.dir(message)
+          const event = message.event
+          if (event === 'created') {
+            this._updatePicker(data)
+            return
+          }
+          if (event === 'columnchange') {
+            delete message.event
+            this.$trigger(event, {}, message)
+            return
+          }
+          res = message
+        },
+        onClose: () => {
+          this.page = null
+          const event = res.event
+          delete res.event
+          this.$trigger(event, {}, res)
+        }
+      })
+    },
+    _showWebviewPicker (data) {
+      webview.showPicker(data, (res) => {
+        console.dir(res)
+        const event = res.event
+        delete res.event
+        this.$trigger(event, {}, res)
+      })
+    },
     _getFormData () {
       return {
         value: this.valueSync,
@@ -267,7 +292,13 @@ export default {
       }
     },
     _updatePicker (data) {
-      this.page && this.page.sendMessage(data)
+      webview.exists((exists) => {
+        if (exists) {
+          webview.updatePicker(data)
+        } else {
+          this.page && this.page.sendMessage(data)
+        }
+      })
     }
   }
 }

src/platforms/app-plus/view/components/picker/webview.js

+const PICKER_ID = '__UNIAPP_PICKER'
+export const PICKER_PATH = '_www/__uniapppicker.html'
+
+let pickerWebview = null
+let pickerWebviewCreated = false
+
+let _exists = null
+let callbacks = null
+export function exists (callback) {
+  if (_exists !== null) {
+    callback(_exists)
+    return
+  }
+  if (callbacks) {
+    callbacks.push(callback)
+    return
+  }
+  callbacks = [callback]
+  function success (exists) {
+    _exists = exists
+    callbacks.forEach(callback => callback(exists))
+    callbacks = null
+  }
+  plus.io.resolveLocalFileSystemURL(PICKER_PATH, () => {
+    success(true)
+  }, () => {
+    success(false)
+  })
+}
+
+let _pickerHideCallback
+export function initPicker () {
+  if (pickerWebview) {
+    return
+  }
+  pickerWebview = plus.webview.getWebviewById(PICKER_ID)
+  if (pickerWebview) {
+    pickerWebviewCreated = true
+  } else {
+    pickerWebview = plus.webview.create(PICKER_PATH, PICKER_ID, {
+      popGesture: 'none',
+      background: 'transparent',
+      backButtonAutoControl: 'hide',
+      render: 'always',
+      kernel: 'WKWebview',
+      bounce: 'none',
+      cachemode: 'noCache'
+    })
+    pickerWebview.addEventListener('hide', () => {
+      _pickerHideCallback && _pickerHideCallback()
+      _pickerHideCallback = null
+    })
+    window.__pickerCallback = function () {
+      delete window.__pickerCallback
+      pickerWebviewCreated = true
+    }
+  }
+}
+
+export function showPicker (data = {}, callback) {
+  data.id = plus.webview.currentWebview().id
+  pickerWebview.show('fade-in')
+  let res
+  _pickerHideCallback = function () {
+    callback(res || {
+      event: 'cancel'
+    })
+  }
+  window.__pickerCallback = function ({
+    event = 'cancel',
+    column,
+    value = -1
+  }) {
+    if (event === 'created' && pickerWebview) {
+      pickerWebviewCreated = true
+      pickerWebview.evalJS(`showPicker(${JSON.stringify(data)})`)
+      return
+    }
+    if (event === 'columnchange' && pickerWebview) {
+      callback({
+        event,
+        column,
+        value
+      })
+    }
+    if (event === 'change' || event === 'cancel') {
+      // 赋值为空函数避免 picker-webview 产生多余通讯报错
+      window.__pickerCallback = function () { }
+      res = {
+        event,
+        value
+      }
+      pickerWebview.hide('fade-out', 100)
+    }
+  }
+  if (pickerWebviewCreated) {
+    pickerWebview.evalJS(`showPicker(${JSON.stringify(data)})`)
+  }
+}
+
+export function updatePicker (data) {
+  if (pickerWebviewCreated) {
+    pickerWebview.evalJS(`showPicker(${JSON.stringify(data)})`)
+  }
+}