fix: 阿里小程序等<svg> 需要encodeUri操作， 提取部分公共代码 #23
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
我这边用原生支付宝小程序测试encodeURI之后仍然无效？ |
|
我看下 应该是必须要进行全部encodeURIComponent才行 比如下面在阿里小程序无法显示 全部encode后就可以了 需要对模板语法做一些调整， 我晚些时候改一下再更新这个pr |
|
新提交了一些改动 下面是本地的效果
|
|
已经解决了~ @fwh1990 |
fwh1990
reviewed
Sep 14, 2021
src/libs/utils.ts
Outdated
| color = sub.$[attributeName] | ||
| } | ||
|
|
||
| template += ` ${attributeName}='{{(isStr ? colors : colors[${counter.colorIndex}]) || '${color}'}}'`; |
There was a problem hiding this comment.
除了微信小程序是colors，其他地方都是用color，能否再加一个参数区分呢？
There was a problem hiding this comment.
fwh1990
reviewed
Sep 14, 2021
src/libs/utils.ts
Outdated
| counter.colorIndex += 1; | ||
| }else { | ||
| color = sub.$[attributeName] | ||
| template += ` ${attributeName}='{{color}}'`; |
There was a problem hiding this comment.
这个应该是错误的逻辑。
let keyword: string;
if (hextorgb) {
...
...
keyword = 'colors';
} else {
...
...
keyword = 'color';
}
template += ` ${attributeName}='{{(isStr ? ${keyword} : ${keyword}[${counter.colorIndex}]) || '${color}'}}'`;There was a problem hiding this comment.
我是看到这些模板根本没用到colors呀， 你是要做个通用的倒是可以这么改
props: {
// #names#
name: null,
// string | string[]
color: '',
size: #size#,
},
data: {
quot: '"',
svgSize: #size#,
isStr: true,
},
didMount() {
const size = this.props.size;
const color = this.props.color;
this.setData({
isStr: typeof color === 'string',
});
if (size !== this.data.svgSize) {
this.setData({
svgSize: #rpx-1:size / 750 * my.getSystemInfoSync().windowWidth:##rpx-0:size:#,
});
}
},
disUpdate(prevProps) {
const size = this.props.size;
const color = this.props.color;
if (color !== prevProps.color) {
this.setData({
isStr: typeof color === 'string',
});
}
if (size !== prevProps.size) {
this.setData({
svgSize: #rpx-1:size / 750 * my.getSystemInfoSync().windowWidth:##rpx-0:size:#,
});
}
},
|
统一了一下逻辑 |
|
好的，午休过后合并，然后我再全部平台测试一下。感谢 |
|
sjs 方案是多余的，只需转换hex2rgb即可。已经发布0.6.1，你可以先测试一下这个库是否可行 |
|
我自己各个平台测试过了，你再测试一下，没问题之后我就升级到remax-icon和taro-iconfont |
|
ok 晚上我测一下 |
|
验证阿里平台改成rgb是可行的。 请教一下，bug出现的原因是在于 不支持 fill='#FABD52' 这种写法么 |
对的。除了QQ小程序，其他平台应该都不支持#号颜色。也许是解析的时候被当成url hash了（纯猜想） |
|
remax-iconfont-cli 已经更新2.0.1 |
|
ok 感谢 |
This was referenced Oct 3, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
阿里、头条等小程序端增加 encodeUri操作， 提取部分公共代码
作者你好：
我使用remax-iconfont-cli进行阿里小程序icon组件生成时，无法正确显示图标， 经查看得知原因是在于生成的 base64的svg图片无法正常显示。
生成的格式为这个样式：（因为<>符号未进行encodeURI操作, 所以无法正确显示）
经查看源码得知 remax-iconfont-cli 依赖于仓库，其中生成阿里小程序的template时，没有进行encodeURI的操作。
这个pr用于修复阿里小程序的问题， 同时抽离了部分公共代码（对于 replaceHexToRgb 这个方法， wechat、头条等平台使用了，其他平台没有使用，因此我这里根据源码做了重构，保留了平台区分）。
希望尽快修复此bug, 目前公司项目依赖于本框架~ 谢谢！