raxjs / universal-api Goto Github PK
View Code? Open in Web Editor NEWUniversal apis for web and miniapps.
Home Page: https://universal-api.js.org/
Universal apis for web and miniapps.
Home Page: https://universal-api.js.org/
背景
这个问题在我很多同事的电脑上都出现,应该不是偶现
系统: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();
}
···
setClipboard逻辑是否需完善
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 executionbegin
: attribute starting valuechangeBy
: attribute change value (end - start)duration
: duration of animationcontrolX1
: x coordinates of The first control pointcontrolY1
: y coordinates of The first control pointcontrolX2
: x coordinates of The second control pointcontrolY2
: 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.
universal-api/packages/animation/src/index.js
Lines 85 to 88 in 2692aaf
However, the formatBezier
function returns [m[1], m[4], m[3], m[4]]
-- in my opinion, it means controlX1, controlY2, controlX2, controlY2
.
universal-api/packages/animation/src/formatBezier.js
Lines 1 to 6 in 7424381
Should it return [m[1], m[2], m[3], m[4]]
rather than [m[1], m[4], m[3], m[4]]
?
@uni/storage 缺少 getStorageInfo & getStorageInfoSync 方法
返回缺少 statusBarHeight
不能直接使用 es6 语法,应该改为
header: headers
https://opendocs.alipay.com/mini/api/ui-canvas
通过createCanvasContext获取到的ctx无法获取对应的canvas节点,会导致在使用第三方渲染库时无法使用,希望添加获取canvas的通用api
需求
我们尝试在 Remax 里使用依赖 @rax-ui
的小程序组件时,发现 universal-device 这个包会根据条件去 require 对应平台的模块,但是由于 remax-cli
使用的 rollup 不能很好地处理这种按条件引用的方式,希望能把 universal-device 改成纯粹的 ES module。
这个改动应该不会对现有依赖 universal-device 项目产生影响。
在 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)
背景
需求
{ Accept: 'xx', 'content-type': 'xxx' }
这样的header,normalizeHeaders 函数会Accept匹配后提前返回false 导致遍历中断在 Web 下, @uni/pull-down-refresh 提供了 onPullDownRefresh
现有代码对下拉处理不是全局单实例的,看起来目前只能开启全局的下拉和增加监听,无法移除下拉和删除监听
https://github.com/raxjs/universal-api/blob/master/src/packages/interactive/pullDownRefresh/src/web/onPullDownRefresh.ts#L184-L190
本地调试http://127.0.0.1:3333/
Uncaught (in promise) TypeError: InitialComponent is not a function
使用@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, '');
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
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,才有切片
支付宝小程序用户信息相关 API 发生更新 ( https://forum.alipay.com/mini-app/post/73101020 ),需要单独适配 getOpenUserInfo
背景
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);
},
});
预期:
但实际
然后我看源码
https://github.com/raxjs/universal-api/blob/master/src/packages/network/request/src/web/index.ts
这里遇到错误并没有return掉
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);
感觉很麻烦
然后
需求
pageScrollTo方法里面获取scrollTop的方式,需要兼容安卓机型下微信webview容器
document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
实测,在任何版本的 iOS ,web 环境下,复制功能是无效的,粘贴板内容会是空的。
review 代码,把这行删掉可以解决问题
https://github.com/raxjs/universal-api/blob/master/packages/clipboard/src/web/index.ts#L11
input 框的插入移除时间很短,肉眼看不到有变化,行高不设置为 0 也不会有影响
背景
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');
src/utils
发成 npm 包utils/promisify
可以发现 20+ 处引用各个api的env判断中web环境判断条件都是最前置的。
但是在支付宝小程序开发过程中,IDE调试时,env.isWeb = true,导致后续逻辑都不正确。
同时env.isMiniApp = true,建议web环境判断更严谨些。
import uni from '@uni/apis';
console.log(uni.application.getApp(), uni.env.isWeb);
运行环境:支付宝小程序
// mini.project.json
{
"format": 2,
"miniprogramRoot": "src",
"compileOptions": {
"component2": true,
"typescript": true,
"less": true,
"enableNodeModuleBabelTransform": true
}
}
背景:
request({}) 设置了headers但没有设置'Content-Type': 'application/json', Content-Type的默认值为Content-Type: text/plain;charset=UTF-8
希望:
在自定义headers时,没有设置Content-type时默认值也还是'application/json'
./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'
背景
const res = getStorageSync({
key: 'openid',
});
返回的res的类型是any
但是实际上至少是
{
data: any
}
data这层我看文档是固定有的,所以为什么是any
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.