Merge pull request #445 from tangcq-code/release-3.6.8-app

fix: 将taro-mpharmony中H5实现的接口的修改同步到taro-h5中，整合taro-mpharmony和taro-h5相同的实现

packages/taro-h5/src/api/base/index.ts

@@ -15,7 +15,7 @@ export function arrayBufferToBase64 (arrayBuffer: ArrayBuffer) {
 }
 
 export function base64ToArrayBuffer (base64: string) {
-  return toByteArray(base64)
+  return toByteArray(base64).buffer
 }
 
 export * from './crypto'

packages/taro-h5/src/api/device/clipboard.ts

@@ -10,9 +10,9 @@ import { isFunction } from '@tarojs/shared'
 
 import { MethodHandler } from '../../utils/handler'
 import { getStorageSync, setStorage, setStorageSync } from '../storage/index'
+import { showToast } from '../ui/interaction'
 
 const CLIPBOARD_STORAGE_NAME = 'taro_clipboard'
-
 document.addEventListener('copy', () => {
   setStorage({
     key: CLIPBOARD_STORAGE_NAME,
@@ -21,7 +21,6 @@ document.addEventListener('copy', () => {
     console.error(e)
   })
 })
-
 /**
  * 设置系统剪贴板的内容
  */
@@ -49,6 +48,11 @@ export const setClipboardData: typeof Taro.setClipboardData = async ({ data, suc
     } else {
       throw new Error('Unsupported Function: \'document.execCommand\'.')
     }
+    showToast({
+      title: '内容已复制',
+      icon: 'none',
+      duration: 1500
+    })
     return handle.success()
   } catch (e) {
     return handle.fail({ errMsg: e.message })

packages/taro-h5/src/api/device/network.ts

@@ -52,7 +52,6 @@ export const getNetworkType: typeof Taro.getNetworkType = (options = {}) => {
 }
 
 const networkStatusManager = new CallbackManager()
-
 const networkStatusListener = async () => {
   const { networkType } = await getNetworkType()
   const isConnected = networkType !== 'none'
@@ -79,8 +78,13 @@ export const onNetworkStatusChange: typeof Taro.onNetworkStatusChange = callback
 
 export const offNetworkWeakChange = /* @__PURE__ */ temporarilyNotSupport('offNetworkWeakChange')
 
-export const offNetworkStatusChange: typeof Taro.offNetworkStatusChange = callback => {
-  networkStatusManager.remove(callback)
+export const offNetworkStatusChange: typeof Taro.offNetworkStatusChange = (callback) => {
+  // 取消监听网络状态变化事件，参数为空，则取消所有的事件监听。
+  if (callback) {
+    networkStatusManager.remove(callback)
+  } else {
+    networkStatusManager.removeAll()
+  }
   const connection = getConnection()
   if (connection && networkStatusManager.count() === 0) {
     connection.removeEventListener('change', networkStatusListener)

packages/taro-h5/src/api/location/chooseLocation.ts

@@ -6,26 +6,25 @@ import { stringify } from 'query-string'
 import { MethodHandler } from '../../utils/handler'
 
 let container: HTMLDivElement | null = null
-function createLocationChooser (handler, key = LOCATION_APIKEY, mapOpt: Taro.chooseLocation.Option['mapOpts'] = {}) {
-  const { latitude, longitude, ...opts } = mapOpt
+function createLocationChooser (handler, mapOpt: Taro.chooseLocation.Option['mapOpts'] = {}) {
+  const { key = LOCATION_APIKEY, referer = 'myapp', ...opts } = mapOpt
   const query = {
     key,
     type: 1,
-    coord: mapOpt.coord ?? [latitude, longitude].every(e => Number(e) >= 0) ? `${latitude},${longitude}` : undefined,
-    referer: 'myapp',
-    ...opts
+    referer,
+    ...opts,
   }
   if (!container) {
     const html = `
-<div class='taro_choose_location'>
-  <div class='taro_choose_location_bar'>
-    <div class='taro_choose_location_back'></div>
-    <p class='taro_choose_location_title'>位置</p>
-    <button class='taro_choose_location_submit'>完成</button>
-  </div>
-  <iframe class='taro_choose_location_frame' frameborder='0' src="https://apis.map.qq.com/tools/locpicker?${stringify(query, { arrayFormat: 'comma', skipNull: true })}" />
-</div>
-`
+      <div class='taro_choose_location'>
+        <div class='taro_choose_location_bar'>
+          <div class='taro_choose_location_back'></div>
+          <p class='taro_choose_location_title'>位置</p>
+          <button class='taro_choose_location_submit'>完成</button>
+        </div>
+        <iframe id='map-iframe' class='taro_choose_location_frame' frameborder='0' src="https://apis.map.qq.com/tools/locpicker?${stringify(query,{ arrayFormat: 'comma', skipNull: true })}"/>
+      </div>
+      `
     container = document.createElement('div')
     container.innerHTML = html
   }
@@ -73,18 +72,10 @@ function createLocationChooser (handler, key = LOCATION_APIKEY, mapOpt: Taro.cho
  * 打开地图选择位置。
  */
 export const chooseLocation: typeof Taro.chooseLocation = ({ success, fail, complete, mapOpts } = {}) => {
-  const key = LOCATION_APIKEY
   const handle = new MethodHandler({ name: 'chooseLocation', success, fail, complete })
   return new Promise((resolve, reject) => {
     const chooseLocation: Partial<Taro.chooseLocation.SuccessCallbackResult> = {}
-    if (!key) {
-      console.warn('chooseLocation api 依赖腾讯地图定位api，需要在 defineConstants 中配置 LOCATION_APIKEY')
-      return handle.fail({
-        errMsg: 'LOCATION_APIKEY needed'
-      }, { resolve, reject })
-    }
-
-    const onMessage = event => {
+    const onMessage = (event) => {
       // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
       const loc = event.data
 
@@ -97,21 +88,24 @@ export const chooseLocation: typeof Taro.chooseLocation = ({ success, fail, comp
       chooseLocation.longitude = loc.latlng.lng
     }
 
-    const chooser = createLocationChooser(res => {
-      window.removeEventListener('message', onMessage, false)
-      setTimeout(() => {
-        chooser.remove()
-      }, 300)
-      if (res) {
-        return handle.fail(res, { resolve, reject })
-      } else {
-        if (chooseLocation.latitude && chooseLocation.longitude) {
-          return handle.success(chooseLocation, { resolve, reject })
+    const chooser = createLocationChooser(
+      (res) => {
+        window.removeEventListener('message', onMessage, false)
+        setTimeout(() => {
+          chooser.remove()
+        }, 300)
+        if (res) {
+          return handle.fail(res, { resolve, reject })
         } else {
-          return handle.fail({}, { resolve, reject })
+          if (chooseLocation.latitude && chooseLocation.longitude) {
+            return handle.success(chooseLocation, { resolve, reject })
+          } else {
+            return handle.fail({}, { resolve, reject })
+          }
         }
-      }
-    }, key, mapOpts)
+      },
+      mapOpts
+    )
 
     document.body.appendChild(chooser.container)
 

packages/taro-h5/src/api/location/index.ts

@@ -1,14 +1,11 @@
-import { processOpenApi, temporarilyNotSupport } from '../../utils/index'
+import {  temporarilyNotSupport } from '../../utils/index'
 
 // 位置
 export const stopLocationUpdate = /* @__PURE__ */ temporarilyNotSupport('stopLocationUpdate')
 export const startLocationUpdateBackground = /* @__PURE__ */ temporarilyNotSupport('startLocationUpdateBackground')
 export const startLocationUpdate = /* @__PURE__ */ temporarilyNotSupport('startLocationUpdate')
 
-export const openLocation = /* @__PURE__ */ processOpenApi({
-  name: 'openLocation',
-  defaultOptions: { scale: 18 }
-})
+export { openLocation } from './openLocation'
 
 export const onLocationChangeError = /* @__PURE__ */ temporarilyNotSupport('onLocationChangeError')
 export const onLocationChange = /* @__PURE__ */ temporarilyNotSupport('onLocationChange')

packages/taro-h5/src/api/location/openLocation.ts

@@ -0,0 +1,83 @@
+
+import './style.scss'
+
+import Taro from '@tarojs/api'
+import { shouldBeObject } from 'src/utils'
+
+import { MethodHandler } from '../../utils/handler'
+
+let container: HTMLDivElement | null = null
+function createContainer (options: Taro.openLocation.Option) {
+  const key = LOCATION_APIKEY
+  const { longitude, latitude, name, address } = options
+  if (!container) {
+    const html = `
+      <div class='taro_choose_location'>
+        <div class='taro_choose_location_bar'>
+          <div class='taro_choose_location_back'></div>
+          <p class='taro_choose_location_title'>${name}</p>
+        </div>
+        <iframe id='map-iframe' class='taro_choose_location_frame' frameborder='0' src="https://apis.map.qq.com/tools/poimarker?key=${key}&referer=myapp&type=0&marker=coord:${latitude},${longitude};title:${name};addr:${address}" />
+      </div>
+      `
+    container = document.createElement('div')
+    container.innerHTML = html
+  }
+  const main: HTMLDivElement = container.querySelector('.taro_choose_location') as HTMLDivElement
+
+  function show () {
+    main.style.top = '0'
+  }
+
+  function hide () {
+    main.style.top = '100%'
+    remove()
+  }
+
+  function remove () {
+    container?.remove()
+    container = null
+  }
+
+  container.querySelector('.taro_choose_location_back')?.addEventListener('click', hide)
+
+  return {
+    show,
+    container,
+  }
+}
+
+/**
+ * 使用微信内置地图查看位置(暂不支持scale入参)
+ * 
+ * @canUse openLocation
+ * @__object [latitude, longitude, address, name]
+ */
+export const openLocation: typeof Taro.openLocation = (options) => {
+  const name = 'openLocation'
+  // options must be an Object
+  const isObject = shouldBeObject(options)
+  if (!isObject.flag) {
+    const res = { errMsg: `${name}:fail ${isObject.msg}` }
+    console.error(res.errMsg)
+    return Promise.reject(res)
+  }
+  const {
+    success,
+    fail,
+    complete
+  } = options as Exclude<typeof options, undefined>
+  const handle = new MethodHandler({ name, success, fail, complete })
+
+  return new Promise((resolve, reject) => {
+    const dispalyLoc = createContainer(options)
+    document.body.appendChild(dispalyLoc.container)
+    dispalyLoc.show()
+    document.querySelector('iframe')?.addEventListener('load', function () {
+      handle.success({}, { resolve, reject })
+    })
+    document.querySelector('iframe')?.addEventListener('error', function () {
+      handle.fail({}, { resolve, reject })
+    })
+  })
+}

packages/taro-h5/src/api/location/style.scss

@@ -11,17 +11,18 @@
 
   &_bar {
     display: flex;
-    flex: 0 95px;
-    height: 95px;
+    flex: 0 60px;
+    height: 60px;
     background-color: #ededed;
     color: #090909;
+    align-items: center;
   }
 
   &_back {
     position: relative;
-    flex: 0 45px;
-    margin-top: 30px;
-    width: 33px;
+    flex: 0 40px;
+    margin-left: 10px;
+    width: 25px;
     height: 30px;
 
     &::before {
@@ -52,18 +53,18 @@
   &_title {
     flex: 1;
     padding-left: 30px;
-    line-height: 95px;
+    line-height: 60px;
   }
 
   &_submit {
-    margin: 18px 30px 0 0;
+    margin-right: 25px;
     padding: 0;
     border: none;
-    width: 110px;
-    height: 60px;
+    width: 75px;
+    height: 40px;
     background-color: #08bf62;
-    line-height: 60px;
-    font-size: 28px;
+    line-height: 40px;
+    font-size: 20px;
     color: #fff;
   }
 

packages/taro-h5/src/api/media/map.ts

@@ -2,3 +2,4 @@ import { temporarilyNotSupport } from '../../utils'
 
 // 地图
 export const createMapContext = /* @__PURE__ */ temporarilyNotSupport('createMapContext')
+

packages/taro-h5/src/api/network/websocket/index.ts

@@ -86,3 +86,5 @@ export function connectSocket (options?: Taro.connectSocket.Option) {
 export function closeSocket () {
   console.warn('Deprecated.Please use socketTask.close instead.')
 }
+
+export { SocketTask }