Desenvolvimento H5 da conta oficial do WeChat, abra o H5 no navegador WeChat, não é possível baixar fotos com um clique

fundo

Wechat public account H5 development, em navegadores comuns, você pode baixar imagens diretamente através do seguinte código:

let a = document.createElement('a')
a.style.display = 'none'
a.href = ‘https://www.图片地址.com’
a.setAttribute('download', '我的图片.jpg')
document.body.appendChild(a)
a.click() //执行下载
window.URL.revokeObjectURL(a.href)
document.body.removeChild(a)     

Mas no navegador WeChat, o código acima é inválido, o que é uma limitação do navegador WeChat.

O JS-SDK do WeChat fornece o método wx.downloadImage(), que é usado para baixar imagens. Mas, na verdade, acho que deveria ser usado para brincar de macaco. O método não aceita um parâmetro url, mas sim um serverId. De onde vem o serverId? Ele é obtido de outro método wx.uploadImage(). O método wx.uploadImage() é usado para fazer upload de imagens locais, mas após o upload ser bem-sucedido, a função de retorno de chamada pode obter um serverId. onde carregar? Servidor próprio do WeChat. Se você deseja salvar no servidor da sua própria empresa, deve permitir que o servidor da empresa chame a interface multimídia para recuperar a imagem do servidor WeChat. Além disso, o servidor WeChat economiza apenas 3 dias. Sim, as fotos que você pode baixar são fotos enviadas por usuários e são válidas apenas por três dias. Além disso, parece que as fotos baixadas não serão salvas no álbum de fotos, mas em um local onde o usuário não as encontre. A conclusão é que é completamente inútil.

No entanto, no navegador WeChat, pressione e segure a imagem para salvar.

Na verdade, fotos, vídeos e arquivos de documentos (pdf, word, etc.) não podem ser baixados por meio de métodos nativos js, mas uma nova página será aberta para você visualizar. Mas para outros arquivos que não podem ser visualizados pelo WeChat (se for um arquivo zip), ele será baixado. Para a imagem exibida, o usuário pode pressionar longamente a imagem para salvá-la.

solução

1. Em primeiro lugar, é necessário determinar se o navegador é um navegador WeChat. Se não for um navegador WeChat, a lógica original do download permanece.
2. Se for uma imagem, uma janela pop-up aparecerá quando o botão de download for clicado, solicitando que o usuário pressione e segure a imagem para fazer o download.
3. Se for um arquivo de vídeo ou documento, solicite ao usuário que use o navegador padrão para baixar o arquivo. Considerando que é muito problemático para os usuários fazer login com um novo navegador, não é uma boa solução orientar os usuários a clicar no canto superior direito para abrir o link com o navegador padrão. Podemos copiar o link do arquivo ao clicar no botão de download e, em seguida, permitir que o usuário abra o navegador padrão e cole o link para download. Esse comportamento de ocupar a área de transferência do usuário não é muito bom. Ou apenas bloqueie o botão de download e esqueça, ou abra um prompt que só pode ser baixado no lado do PC.
4. Se for outro tipo de arquivo, pode ser baixado diretamente sem limitação.

referência do artigo

https://zhuanlan.zhihu.com/p/485755669?utm_id=0