dcloudio / dcloudio/uni-app

关于previewImage的改进建议

Open
#936 0 comments 0 reactions 0 assignees View on GitHub
not_planned
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

![1](https://user-images.githubusercontent.com/48236054/67957794-1bb5b100-fc31-11e9-9446-3f02ab66c554.png)
这是目前 `uni.previewImage` 对于重复图片的处理方式,但这种方式依然存在以下问题(特指几个小程序平台):
1. 无法通过左右滑动看到其他相同的图片
2. 如果是一组图片为 `[A, A, A, B]` ,按照这种方式处理,则不管点哪一张 `A` ,传入的都是 `[A, B]` ,即右滑就是 `B`

**新的方案**
- 主要思想
`indexOf` 是区分大小写的,但是链接一般不区分大小写,可以利用这一点将相同的 `src` 区分开
- 具体分析
微信小程序的 `wx.previewImage` 仅支持网络链接,网络链接的一般格式是`[协议]://[域名]/[路径]` ,其中协议和域名是不区分大小写的,可以通过对协议和域名的大小写进行组合实现链接的互不相同(协议+域名一般在 `10` 个字母以上,有超过 `1000` 种组合),例如:
可以将 `["http://example.com", "http://example.com"]` 修改为 `["http://example.com", "http://ExAmple.com"]`
一个简单的程序实现(以微信为例):

```javascript
function previewImage(object) {
var urls = [];
for (var i = 0; i < object.urls.length; i++) {
var url = object.urls[i];
// 网络链接
if (/:\/\//.test(object.urls[i])) {
// 有重复
while (urls.indexOf(url) != -1) {
var j;
url = "";
for (j = 0; j < object.urls[i].length; j++) {
var c = object.urls[i][j];
if (/[a-zA-Z]/.test(c))
url += (Math.random() >= 0.5 ? c.toUpperCase() : c);
else
url += c;
if (c == '/' && object.urls[i][j - 1] != '/' && object.urls[i][j + 1] != '/')
break;
}
url += object.urls[i].substr(j + 1); //路径部分直接添加
}
}
urls.push(url);
}
wx.previewImage({
current: urls[object.current],
urls,
success: object.success,
fail: object.fail
})
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.