raxjs / universal-api Goto Github PK

• 支持websocket多端能力

属性已经废弃，代码无需再判断

主包es目录下，引入未打包组件’animation‘组件，导致运行报错。
目前个人解决方案，去掉对应限制，编译之后，再替换本地的包。
希望修复下

const recorderManager = getRecorderManager();
recorderManager.onStart((e)=>{
  console.log('start',e)
})
recorderManager.onStop((e)=>{
  console.log('stop',e)
})
recorderManager.start({  
})
   setTimeout(() => {
       recorderManager.stop();
 }, 3000);

上面的代码输出的文件是空的

{
duration: 2000,
fileSize: 0,
tempFilePath: "blob:http://localhost:8989/7474aafc-53b1-4147-9158-44c4c228f156"}

但是如果加了

 recorderManager.onFrameRecorded((e)=>{
   console.log('onFrameRecorded',e)
 })

就正常

然后我们看到源文件https://github.com/raxjs/universal-api/blob/286d77035e/src/packages/media/recorder/src/web/index.ts#L114
这个确实是只有我们调用onFrameRecorded才会开始监听ondataavailable，才有切片

@uni/storage 缺少 getStorageInfo & getStorageInfoSync 方法

chooseImage({
  count: 1,
  sourceType: ['album', 'camera']
}).then(res => {
  const tempFilePaths = res.tempFilePaths
});

在web端 path 是 blob URL blob://xxxx

const task = upload({
  url: 'http://httpbin.org/post',
  fileType: 'image',
  fileName: 'file',
  filePath: '**filePath**',
  success: res => {
    console.log('upload success');
  },
  fail: res => {
    console.log('upload fail');
  },
});

然后upload这里并不能传blob URL

导致得手动转成file

const imgBlob = await fetch(tempFilePath).then((r) => r.blob());
const file = new File([imgBlob], fileName);

感觉很麻烦

然后

• web虽然res对象里file数组，但是还是希望和其他端统一拿到的是path

需求

• web端 chooseImage那到的内容upload能直接使用

实测，在任何版本的 iOS ，web 环境下，复制功能是无效的，粘贴板内容会是空的。
review 代码，把这行删掉可以解决问题
https://github.com/raxjs/universal-api/blob/master/packages/clipboard/src/web/index.ts#L11

input 框的插入移除时间很短，肉眼看不到有变化，行高不设置为 0 也不会有影响

在 Typescript 下调试示例代码（https://rax.js.org/docs/api/request#%E7%A4%BA%E4%BE%8B ）：

import request from 'universal-request';

request({
  url: 'https://alibaba.github.io/rax/',
  method: 'POST',
  data: {
    from: 'Rax',
  },
  dataType: 'json' // ts error
}).then(response => {})
  .catch(error => {});

dataType 处有错误提示

Type '"json"' is not assignable to type 'DATA_TYPE'.ts(2322)

• 将 src/utils 发成 npm 包
  原因：在构建产物中 promisify 代码重复出现了很多次，在仓库中尝试搜索 utils/promisify 可以发现 20+ 处引用

背景

• 有多端进行支付的场景

我们尝试在 Remax 里使用依赖 @rax-ui 的小程序组件时，发现 universal-device 这个包会根据条件去 require 对应平台的模块，但是由于 remax-cli 使用的 rollup 不能很好地处理这种按条件引用的方式，希望能把 universal-device 改成纯粹的 ES module。

这个改动应该不会对现有依赖 universal-device 项目产生影响。

背景

• web页面跳转
• rax或者react/vue都是用自己的api进行跳转，因为用@uni/navigate跳转会刷新页面（毕竟直接调用的是history）
• 所以希望可以在env里判断当前环境是不是isRax，这样就能判断使用了

需求

• isRax判断是否是rax环境

需求

• 需要判断当前是移动端还是pc端环境

返回缺少 statusBarHeight

背景

request({
  url: 'https://alibaba.github.io/rax/',
  method: 'POST',
  data: {
    from: 'Rax',
  },
  dataType: 'json',
  success: (res) => {
    console.log('success', res);
  },
  fail: (res) => {
    console.log('fail', res);
  },
  complete: (res) => {
    console.log('complete', res);
  },
});

• 会返回失败

预期：

• 只触发fail和complete

但实际

• 触发success、fail、complete

然后我看源码
https://github.com/raxjs/universal-api/blob/master/src/packages/network/request/src/web/index.ts

这里遇到错误并没有return掉

背景：
request({}) 设置了headers但没有设置'Content-Type': 'application/json', Content-Type的默认值为Content-Type: text/plain;charset=UTF-8

希望：
在自定义headers时，没有设置Content-type时默认值也还是'application/json'

本地调试http://127.0.0.1:3333/
Uncaught (in promise) TypeError: InitialComponent is not a function

These two functions are often used in daily requirements when rpx as the unified unit.

微信小程序环境判断：
export const isWeChatMiniProgram = !isByteDanceMicroApp && typeof wx !== 'undefined' && wx !== null && (typeof wx.request !== 'undefined' || typeof wx.miniProgram !== 'undefined');

web 环境判断：
export const isWeb = typeof window !== 'undefined' && 'onload' in window;

情景是：如果在微信小程序中打开 H5 页面，并且需要用到一些 jweixin 的 API，就会在 window 对象添加一个 wx 属性，从而命中 isWeChatMiniProgram 环境判断：
<script type=\"text/javascript\" src=\"https://res.wx.qq.com/open/js/jweixin-1.3.2.js\"></script>

建议微信小程序环境判断改为：
export const isWeChatMiniProgram = !isWeb && !isByteDanceMicroApp && typeof wx !== 'undefined' && wx !== null && (typeof wx.request !== 'undefined' || typeof wx.miniProgram !== 'undefined');

./node_modules/@[email protected]@@uni/apis/es/main/web/index.js，
Module not found: Can't resolve '../../packages/interactive/keyboard/src/web/index' in '/Users/xxxx/Desktop/font-other/recycle-user/node_modules/@[email protected]@@uni/apis/es/main/web'

setClipboard逻辑是否需完善

代码：https://github.com/raxjs/universal-api/blob/master/src/packages/network/request/src/wechat-miniprogram/index.ts#L12

不能直接使用 es6 语法，应该改为

header: headers

According to BindingX Doc,

In particular, the cubicBezier function is used to customize the Bessel curve, which is defined as follows:

• cubicBezier(t, begin, changeBy, duration, controlX1, controlY1, controlX2, controlY2)
  • input parameter:
    • t: time of animation execution
    • begin: attribute starting value
    • changeBy: attribute change value (end - start)
    • duration: duration of animation
    • controlX1: x coordinates of The first control point
    • controlY1: y coordinates of The first control point
    • controlX2: x coordinates of The second control point
    • controlY2: y coordinates of The second control point
  • return:
    • Void

the cubicBezier function's last 4 parameters are controlX1, controlY1, controlX2, controlY2.

In this animation implementation, we get the return value of formatBezier function, and join the result with ',' so that we pass it as the last 4 parameters for the cubicBezier function.

However, the formatBezier function returns [m[1], m[4], m[3], m[4]] -- in my opinion, it means controlX1, controlY2, controlX2, controlY2.

Should it return [m[1], m[2], m[3], m[4]] rather than [m[1], m[4], m[3], m[4]]?

https://opendocs.alipay.com/mini/api/ui-canvas

通过createCanvasContext获取到的ctx无法获取对应的canvas节点，会导致在使用第三方渲染库时无法使用，希望添加获取canvas的通用api

使用@uni/request做jsonp请求的时候，JSONP请求返回异常如下：

找到抛出异常的代码如下：

从上面看出，抛出异常的一定是line:130 JSON.parse方法，然后看下异常返回的详细信息如下：

从上图可以会导致代码冲突的，就是返回的“;”没有被替换掉。
那么，line: 129这种解码方式是有问题的，看下源码：

const content = res?.data?.replace(`${jsonpCallback}(`, '').replace(')', '');

这里只是将)替换掉了，没有考虑到 ); 结尾的情况，并且使用replace的字符串替换是不严谨的，可能导致返回的数据里面本身的相同字符串被替换，应该使用正则匹配替换，代码如下：

const reg = new RegExp(`(^${jsonpCallback}\\(|(\\)|\\);)$)`, 'gm');

const content = res?.data?.replace(reg, '');

• yarn add @uni/apis
• 显示

 ERROR  Failed to compile with 5 errors 5:29:07 ├F10: PM┤

These dependencies were not found:

* @uni/action-sheet/lib/ali-miniapp in ./node_modules/@uni/apis/es/packages/media/video/src/ali-miniapp/chooseMedia.js
* @uni/confirm/lib/web in ./node_modules/@uni/apis/es/packages/interactive/alert/src/web/index.js
* @uni/system-info in ./node_modules/@uni/apis/es/packages/base/unit-tool/src/index.js
* @uni/video/lib/web/chooseMedia in ./node_modules/@uni/apis/es/packages/media/image/src/web/chooseImage.js, ./node_modules/@uni/apis/es/packages/media/video/src/web/chooseVideo.js

To install them, you can run: npm install --save @uni/action-sheet/lib/ali-miniapp @uni/confirm/lib/web @uni/system-info @uni/video/lib/web/chooseMedia

这个问题在我很多同事的电脑上都出现，应该不是偶现

系统：mac | window(我同事是window)
chrome 版本99

使用控制台的手机模拟器，选择任意iphone机型，走到关于IOS的判断里，是没有起作用的

···
if (isOS()) {
range = document.createRange();
range.selectNodeContents(textArea);
selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
textArea.setSelectionRange(0, 999999);
} else {
textArea.select();
}
···

支付宝小程序用户信息相关 API 发生更新 （ https://forum.alipay.com/mini-app/post/73101020 ），需要单独适配 getOpenUserInfo

pageScrollTo方法里面获取scrollTop的方式，需要兼容安卓机型下微信webview容器

document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop

Element.scrollTop接受的是一个整数，如果赋值带有小数，会截取整数部分，如下图

造成卡顿的原因：
当speed是一个比较小的值时，nextTop得出的结果与top绝对值小于1，此时设置rootElement.scrollTop后实际没变化，极端情况会在同一个值循环，导致页面卡顿。

另外，同一个元素多次触发pageScrollTo方法时是否应该先清除上一次的requestAnimationFrame？

问题

在 Web 下, @uni/pull-down-refresh 提供了 onPullDownRefresh

现有代码对下拉处理不是全局单实例的，看起来目前只能开启全局的下拉和增加监听，无法移除下拉和删除监听
https://github.com/raxjs/universal-api/blob/master/src/packages/interactive/pullDownRefresh/src/web/onPullDownRefresh.ts#L184-L190

期望

1. 期望支持关闭页面下拉功能
2. 期望支持移除下拉监听事件功能

各个api的env判断中web环境判断条件都是最前置的。
但是在支付宝小程序开发过程中，IDE调试时，env.isWeb = true，导致后续逻辑都不正确。
同时env.isMiniApp = true，建议web环境判断更严谨些。

import uni from '@uni/apis';
console.log(uni.application.getApp(), uni.env.isWeb);

打印结果：

正确应该是返回 getApp()

运行环境：支付宝小程序

// mini.project.json
{
  "format": 2,
  "miniprogramRoot": "src",
  "compileOptions": {
    "component2": true,
    "typescript": true,
    "less": true,
    "enableNodeModuleBabelTransform": true
  }
}

背景

• 我们引入了https://res.wx.qq.com/open/js/jweixin-1.6.0.js
• isWeChatMiniProgram变成了true
• 因为wx不是null，且 wx.miniProgram也不是undefined了

手淘端设置maxDuration: 60,，依旧可以选择100s视频，success返回的结果

也没返回duration视频时长

因为img的外层的样式

.__universal_preview_image_item {
    max-height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    position: relative;
    transition-property: transform;
    overflow: hidden;
}

最大高度是70%

背景

  const res = getStorageSync({
      key: 'openid',
    });

返回的res的类型是any

但是实际上至少是

{
 data: any
}

data这层我看文档是固定有的，所以为什么是any